@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap");

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

html {
    scroll-behavior: smooth;
    scrollbar-width: none;
}

body {
    max-width: 375px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    background-color: #f7f7f7;
    position: relative;
    scrollbar-width: none;
}

body::-webkit-scrollbar {
    display: none;
}

h1,
h2,
h3,
ul,
ol,
li,
a,
p,
span,
small,
b,
label,
button,
div,
input,
select,
textarea {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    list-style: none;
    text-decoration: none;
}

header,
header nav,
header aside,
header div,
main,
main section,
main div,
footer,
footer aside,
footer div,
form,
label {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.heading {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #0e0f11;
    margin-bottom: 0.2rem;
}

.paragraph {
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1.2rem;
    color: #0e0f11;
}

button {
    width: 15rem;
    height: 3rem;
    border-radius: 0.2rem;
    background-color: #c9e5a7;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
}

.active-btn {
    background-color: #78bf23;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
}

.shorterbtn {
    width: 5rem;
}

.inactive-btn {
    background-color: #c9e5a7;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
}

label {
    margin-bottom: 1rem;
    color: #0e0f11;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5rem;
}

label {
    position: relative;
}

label img {
    position: absolute;
    right: 1rem;
    top: 2.5rem;
    width: 20px;
    cursor: pointer;
}

input,
select {
    width: 100%;
    height: 3rem;
    border-radius: 0.3rem;
    border: 1px solid #f1f1f1;
    color: #0e0f11;
    padding: 0.3rem;
    background-color: #fff;
}

input:active,
input:hover,
input:focus,
select:active,
select:hover,
select:focus,
textarea:active,
textarea:hover,
select:focus {
    border: 1px solid #78bf23;
    outline: 1px solid #78bf23;
}

textarea {
    width: 100%;
    border-radius: 0.3rem;
    border: 1px solid #f1f1f1;
    color: #0e0f11;
    padding: 0.3rem;
}

.check-box {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1rem;
}

.check-box input {
    margin-right: 0.3rem;
    width: auto;
}

.check-box input:focus,
.check-box input:active,
.check-box input:hover,
.check-box input:checked {
    border: none;
    outline: none;
    background-color: #78bf23;
}

.check-box a,
label a {
    color: #78bf23;
}

.logo {
    width: 150px;
}

header .form-header {
    padding: 1rem;
}

.dashheader {
    background-color: #fff;
    padding: 1rem;
    overflow: hidden;
}

.dashheader .mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.dashheader .menu {
    width: 32px;
}

.dashheader .text {
    width: auto;
    align-self: center;
}

.dashheader .text .heading {
    margin: 0;
}

section {
    padding: 1rem;
}

.auth .box {
    background-color: #fff;
    border-radius: 0.3rem;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.auth a {
    width: 100%;
}

.auth button {
    width: 100%;
}

.center-label {
    align-items: center;
    justify-content: center;
}

.auth .text {
    margin-bottom: 2rem;
}

.auth .best {
    display: none;
}

.backlink {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: auto;
}

.form-header .heading {
    display: none;
}

.modal .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    max-height: 540px;
    min-height: 200px;
    overflow-y: auto;
    /* scrollbar-width: none; */
}

.modal .bolder {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2rem;
    color: #0e0f11;
}

.modal .box img {
    width: 100px;
    margin-bottom: 0.5rem;
}

.modal .boxes {
    align-items: center;
    justify-content: center;
}

.modal .box .paragraph {
    text-align: center;
    margin-bottom: 0.2rem;
    font-size: 0.8rem;
    color: #0e0f11;
}

.modal .wrapper {
    background-color: #fff;
    max-width: 400px;
    padding: 4rem;
}

.modal {
    background-color: #66666670;
    display: none;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.active-modal {
    display: flex;
}

.welcome {
    margin-block: 1rem;
}

.welcome .wrapper {
    background-color: #e4f2d3;
    padding: 1rem;
    border-radius: 0.25rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.welcome .box h3 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.welcome .box h1 {
    font-size: 0.9rem;
}

.welcome .box button {
    margin-top: 1rem;
    width: 10rem;
}

.welcome .wallet {
    display: none;
}

.welcome .wallet img {
    width: 80px;
}

.details a {
    width: 100%;
}

.details .box {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

.details .box img {
    width: 50px;
}

.details .box {
    flex-direction: row;
    align-items: center;
    margin-bottom: 1rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.details .box img {
    margin-right: 1rem;
}

.aside-menu {
    position: fixed;
    top: 0;
    left: -200rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    transition: left 1s ease-in-out;
    z-index: 10;
}

.show {
    left: 0;
}

.aside-menu .left {
    width: 60%;
    height: 100%;
    background-color: #fff;
    padding: 1rem;
}

.aside-menu .right {
    width: 40%;
    height: 100%;
    background-color: #66666667;
}

.aside-menu .close {
    width: 24px;
    align-self: flex-end;
    cursor: pointer;
}

.aside-menu .logo,
.desktop .logo {
    width: 100px;
}

.aside-menu .left .list,
.desktop .list {
    width: 100%;
    margin-top: 4rem;
    scrollbar-width: none;
}

.dashheader {
    position: relative;
}

.desktop .list,
.marketplaceaccount .list {
    width: 100%;
    height: 900px; /*Gaspar help*/
    overflow-y: auto;
}

.aside-menu .left .list li,
.desktop .list li,
.marketplaceaccount .list li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    /* Remove padding do li */
    cursor: pointer;
    border-radius: 1rem;
    width: 100%;
    position: relative;
    /* Para melhor controle */
}

.aside-menu .left .list li a,
.desktop .list li a,
.marketplaceaccount .list li a {
    color: #0e0f11;
    font-weight: 500;
    font-size: 0.9rem;
    margin: 0;
    /* Remove margin */
    padding: 1rem;
    /* Move o padding para o link */
    width: 100%;
    /* Ocupa toda a largura */
    height: 100%;
    /* Ocupa toda a altura */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    border-radius: 1rem;
    /* Mesmo border-radius do pai */
    transition: all 0.2s ease;
    /* Transição suave */
}

.aside-menu .left .list li svg,
.desktop .list li svg,
.marketplaceaccount .list li svg {
    margin-right: 1rem;
    flex-shrink: 0;
    /* Evita que o SVG encolha */
    width: 18px;
    height: 18px;
}

.aside-menu .left .list img,
.desktop .list img {
    fill: #0e0f11;
    stroke: #0e0f11;
}

.aside-menu .left .list a:hover,
.desktop .list a:hover,
.dash-nav .drop-down li a:hover,
.user-table .drop-down li a:hover,
.marketplaceaccount .list li a:hover {
    color: #78bf23;
}

.aside-menu .left .list li:hover a,
.desktop .list li:hover a,
.marketplaceaccount .list li:hover a {
    color: #78bf23;
}

.aside-menu .left .list .active a,
.desktop .list .active a,
.marketplaceaccount .list a .active {
    color: #78bf23;
}

.aside-menu .left .list li:hover svg path,
.desktop .list li:hover svg path,
.dash-nav .drop-down li:hover svg path,
.user-table .drop-down li:hover svg path,
.marketplaceaccount .list li:hover svg path {
    stroke: #78bf23;
}

.aside-menu .left .list li:hover,
.desktop .list li:hover {
    background-color: #f2f9e9;
}

.aside-menu .left .list li:hover,
.desktop .list li:hover,
.marketplaceaccount .list li:hover {
    background-color: #f2f9e9;
    transform: translateX(2px);
    /* Pequeno movimento para feedback */
}

.aside-menu .left .list .active,
.desktop .list .active,
.marketplaceaccount .list .active {
    background-color: #f2f9e9;
    border-left: 3px solid #78bf23;
    /* Indicador visual do item ativo */
}

.aside-menu .left .list .active a,
.desktop .list .active a,
.marketplaceaccount .list .active a {
    color: #78bf23;
    font-weight: 600;
    /* Destaque no texto */
}

.btn-active-start {
    background-color: #78bf23;
}

.aside-menu .left .list .active svg path,
.desktop .list .active svg path,
.marketplaceaccount .list .active svg path {
    stroke: #78bf23;
}

.dashheader .desktop {
    display: none;
}

.dash-nav {
    background-color: #fff;
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.dash-nav .nav-list {
    width: 550px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.dash-nav .nav-list .icon {
    width: 18px;
    margin-right: 1rem;
}

.dash-nav .nav-list .roundimg {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.dash-nav .profile-circle,
.dashheader .profile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.dash-nav .profile-circle .userimg,
.dashheader .profile-circle .userimg {
    width: 24px;
    margin-right: 0.5rem;
}

.dash-nav .profile-circle .text-row,
.dashheader .profile-circle .text-row {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    display: flex;
    width: 120px;
}

.dash-nav .profile-circle .text-row .paragraph,
.dashheader .profile-circle .text-row .paragraph {
    margin-right: 0.5rem;
}

.dash-nav .drop-down,
.dashheader .drop-down,
.user-table .drop-down {
    position: absolute;
    background-color: #fff;
    border-radius: 0.5rem;
    width: 150px;
    top: 3.8rem;
    right: 23rem;
    display: none;
}

.dash-nav .toggledrop,
.dashheader .toggledrop {
    display: flex;
}

.dash-nav .drop-down .list,
.dashheader .drop-down .list,
.user-table .drop-down .list {
    width: 100%;
}

.dash-nav .drop-down li,
.dashheader .drop-down li,
.user-table .drop-down li {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #f1f1f1;
}

.dash-nav .drop-down li:nth-of-type(2),
.dashheader .drop-down li:nth-of-type(2),
.user-table .drop-down .line-box:nth-of-type(3) {
    border-bottom: none;
}

.dash-nav .drop-down li a,
.dashheader .drop-down li a,
.user-table .drop-down li a {
    color: #0e0f11;
    font-weight: 500;
    font-size: 0.9rem;
    margin-left: 1rem;
}

.dashheader .profile-circle {
    flex-direction: row;
    align-items: center;
    width: 130px;
    cursor: pointer;
}

.dashheader .nav-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
}

.dashheader .nav-list img {
    width: 20px;
    margin-right: 0.4rem;
}

.dashheader .mobile .left {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    display: flex;
}

.dashheader .mobile .left .heading {
    margin-left: 1.2rem;
}

.dashheader .drop-down,
.user-table .drop-down {
    right: 1.5rem;
}

.dashheader .drop-down a:hover,
.user-table .drop-down a:hover {
    color: #78bf23;
}

.dashheader .drop-down li:hover a,
.user-table .drop-down li:hover a {
    color: #78bf23;
}

.dashheader .drop-down li:hover svg path,
.user-table .drop-down li:hover svg path {
    stroke: #78bf23;
}

#root {
    padding: 0;
    position: relative;
}

.dash-nav {
    display: none;
}

.accounttype .wrapper {
    background-color: #fff;
}

.accounttype .back-wrapper {
    border-bottom: 1px solid #f2f3f3;
    padding: 1rem;
    padding-bottom: 1rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.accounttype .back-wrapper .heading {
    margin: 0;
}

.accounttype .back-wrapper .paragraph {
    margin-left: 1rem;
}

.accounttype .back-wrapper img {
    width: 28px;
}

.accounttype .account-text {
    padding: 1rem;
}

.accounttype .boxes {
    padding: 1rem;
}

.accounttype .boxes>a {
    width: 100%;
}

.accounttype .box {
    border: 1px solid #f1f1f1;
    padding: 1rem;
    margin-bottom: 1rem;
    align-items: center;
    justify-content: space-evenly;
    height: 300px;
    cursor: pointer;
}

.accounttype .active {
    border: 1px solid #78bf23;
}

.accounttype .box:hover {
    border: 1px solid #78bf23;
}

.accounttype .box img {
    width: 70px;
}

.accounttype .box .roundimg {
    height: 70px;
    border-radius: 50%;
}

.accounttype .list {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.accounttype .list li {
    margin-bottom: 0.5rem;
    color: #0e0f11;
    text-transform: capitalize;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
}

.accounttype button {
    align-self: center;
}

.accounttype .wrapper {
    padding-bottom: 2rem;
}

.accounttype .row-data {
    margin-bottom: 1rem;
}

.accounttype .row-data .paragraph {
    color: #0e0f11;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
}

.accounttype .row-data a {
    color: #0e0f11;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
}

.acctdetails .box .paragraph,
.acctdetails #add .paragraph {
    color: #78bf23;
}

.acctdetails .box,
.acctdetails #add {
    max-width: 350px;
    height: 200px;
    border-radius: 0.3rem;
}

.acctdetails #add {
    justify-content: center;
    align-items: center;
}

.kyc .box {
    height: auto;
    align-items: flex-start;
    justify-content: flex-start;
}

.kyc .box .paragraph {
    color: #0e0f11;
}

.kyc .box .grey {
    width: 5rem;
    height: 2rem;
    background-color: #f1f1f1;
    color: #0e0f11;
    align-self: flex-start;
    margin-top: 0.5rem;
}

.kyc .box .grey:hover {
    background-color: #0e0f11;
    color: #f1f1f1;
}

.kyc .box .circle-row {
    flex-direction: row;
    align-items: flex-start;
    margin-block: 1rem;
}

.kyc .box .circle-row img {
    width: 40px;
    margin-right: 1rem;
}

.kyc .box .circle-row .heading {
    color: #0e0f11;
    font-size: 0.8rem;
}

.kyc .box .circle-row .paragraph {
    font-size: 0.7rem;
}

.kyc .box .row-text {
    flex-direction: row;
    justify-content: space-between;
    margin-block: 1rem;
}

.kyc .box .row-text .heading {
    font-size: 0.8rem;
    color: #0e0f11;
}

.kyc .box .row-text .column {
    width: 48%;
}

.kyc .box .row-text .column:nth-of-type(2) {
    width: 7rem;
}

.kyc .box .row-text .tag {
    background-color: #fbfbfb;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 2.5rem;
}

.kyc .box .row-text .tag .paragraph {
    color: #0e0f11;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.kyc .box .user-box {
    flex-direction: row;
    align-items: center;
    margin-bottom: 1rem;
}

.kyc .box .user-box img {
    width: 24px;
    margin-right: 0.5rem;
}

.kyc .box .column-text .column {
    margin-block: 0.5rem;
}

.kyc .box .column-text .column .heading {
    font-size: 0.75rem;
    color: #0e0f11;
}

.kyc .box .grey-box {
    background-color: #f1f1f1;
    flex-direction: row;
    padding: 1rem;
    border-radius: 0.3rem;
}

.kyc .box .grey-box img {
    width: 24px;
    margin-right: 1rem;
}

.kyc .box .grey-box .heading {
    font-size: 0.75rem;
    color: #0e0f11;
}

.kyc .box {
    max-width: 100%;
}

.dash .top-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.dash .box {
    padding: 1rem;
    border-radius: 0.5rem;
    height: 200px;
    justify-content: space-around;
    cursor: pointer;
}

.dash .box button {
    background-color: #fff;
    color: #0e0f11;
    text-transform: uppercase;
    width: 7rem;
    height: 2.4rem;
    font-weight: 600;
    font-size: 0.8rem;
}

.dash .box .top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.dash .box .center {
    flex-direction: row;
    width: auto;
    margin-bottom: 1rem;
}

.dash .box .bottom {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.dash .box img {
    width: 24px;
}

.dash .box .center .heading {
    font-size: 2rem;
    font-weight: 500;
    color: #fff;
}

.dash .box .heading {
    color: #fff;
    font-weight: 500;
}

.dash .box .paragraph {
    color: #f1f1f1;
}

.dash .box sup {
    color: #f1f1f1;
}

.dash .black {
    background-color: #0e0f11;
}

.dash .orange {
    background-color: #ff9502;
}

.dash .orange button {
    background-color: #ffffff87;
    color: #fff;
}

.dash .quick-actions {
    margin-top: 2rem;
}

.dash .quick-actions .heading {
    text-transform: uppercase;
    color: #0e0f11;
    font-weight: 500;
    margin-bottom: 1rem;
}

.dash .quick-actions .quick-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colunas fixas para mobile */
    gap: 1rem;
}

/* Para telas maiores, volta ao comportamento responsivo */
@media screen and (min-width: 600px) {
    .dash .quick-actions .quick-boxes {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

.dash .quick-actions .box {
    background-color: #fff;
    width: 100%;
    height: 100px;
    border-radius: 0.3rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.dash .quick-actions .box .paragraph {
    color: #0e0f11;
    font-size: 0.9rem;
    margin-left: 0.3rem;
}

.dash .quick-actions .box img {
    width: 30px;
}

.dash .my-expense,
.dash .my-goals,
.dash .my-notes {
    margin-top: 2rem;
}

.dash .top a {
    width: auto;
}

.dash .my-expense .top,
.dash .my-goals .top,
.dash .my-notes .top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dash .my-expense .top .heading,
.dash .my-goals .top .heading,
.dash .my-notes .top .heading {
    font-size: 0.9rem;
    color: #0e0f11;
    font-weight: 500;
    text-transform: uppercase;
}

.dash .my-expense .top a,
.dash .my-goals .top a,
.dash .my-notes .top a {
    font-size: 0.9rem;
    color: #0e0f11;
    color: #78bf23;
}

.dash .my-expense .expense-wrapper,
.dash .my-goals .goals-wrapper,
.dash .my-notes .notes-wrapper {
    background-color: #fff;
    padding: 1rem;
}

.dash .goals-row,
.dash .notes-row {
    border-bottom: 1px solid #f1f1f1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.dash .goals-row .column,
.dash .notes-row .column {
    padding-block: 1rem;
}

.dash .goals-row .column .paragraph,
.dash .notes-row .column .paragraph {
    color: #0e0f11;
}

.dash .notes-row .column .heading {
    font-size: 0.8rem;
    color: #0e0f11;
}

.dash .my-expense .expense-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.dash .my-expense .expense-top .expense {
    margin-bottom: 1rem;
}

.dash .my-expense .expense-top .expense .paragraph {
    color: #0e0f11;
}

.dash .my-expense .line-box {
    margin-bottom: 1rem;
}

.dash .my-expense .line {
    width: 100%;
    height: 3px;
    background-color: #78bf23;
    margin-bottom: 1rem;
}

.dash .my-expense .line-box:nth-of-type(2) .line {
    background-color: #ffd400;
}

.dash .my-expense .line-box:nth-of-type(3) .line {
    background-color: #ee9688;
}

.dash .my-expense .line-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.transactions .wrapper {
    background-color: #fff;
    padding: 1rem;
}

.transactions .top {
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 1rem;
}

.transactions .row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-block: 1rem;
}

.transactions .row a {
    color: #78bf23;
    font-weight: 500;
    font-size: 0.9rem;
    width: auto;
}

.transactions .transaction-column {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.transactions .transaction-column .column {
    display: flex;
    flex-direction: row;
}

.transactions .transaction-column .column img {
    width: 32px;
    margin-right: 1rem;
}

.transactions .box {
    flex-direction: row;
    justify-content: space-between;
    margin-block: 2rem;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 1rem;
}

.transactions .box .circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.transactions .box .circle img {
    width: 24px;
}

.transactions .box .text .heading {
    font-size: 0.8rem;
}

.transactions .box .text {
    width: 33%;
}

.modal .rows .column {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.modal .column img {
    width: 10px;
    height: 10px;
    margin-bottom: 0;
}

.modal .modal-center>.paragraph {
    color: #0e0f11;
    margin-bottom: 1.5rem;
}

.modal .column .paragraph {
    margin-left: 0.5rem;
    margin-bottom: 0;
    text-align: left;
    font-size: 0.8rem;
    color: #0e0f11;
}

.modal .modal-center,
.modal .modal-bottom {
    padding: 1rem 3rem;
}

.modal .modal-center .rows {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.modal .image-holder {
    margin-block: 1rem;
    width: 100%;
    height: 150px;
}

.modal .image-holder img {
    height: 100%;
    width: 100%;
}

.modal .btn {
    width: 100%;
}

.modal .btn button {
    width: 100%;
}

.modal .btn .cancelBtn {
    background-color: transparent;
    color: #78bf23;
}

.wider-modal .wrapper {
    max-width: 380px;
    padding: 0;
}

.wider-modal .modal-top {
    padding: 1rem;
    border-bottom: 1px solid #f2f9e9;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

.modal .modal-top img {
    width: 40px;
}

.wider-modal .modal-top .heading {
    margin: 0;
    color: #0e0f11;
}

.modal a {
    color: #78bf23;
    font-size: 0.8rem;
}

.modal b {
    font-size: 0.8rem;
    font-weight: 501;
}

.modal .barcode-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 1px solid #f1f1f1;
    border-radius: 0.3rem;
    margin-block: 1rem;
    width: 200px;
    margin: 1rem auto;
}

.modal .phone-form {
    align-items: center;
    justify-content: center;
}

.phone-form .label-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.phone-form .label-row label {
    width: 100%;
    margin: 0;
}

.phone-form .label-row .buttonlabel {
    margin: 0;
    margin-left: 0.5rem;
    width: 6rem;
}

.phone-form .label-row .buttonlabel button {
    width: 6rem;
    background-color: #78bf23;
}

.phone-form {
    margin-block: 1rem;
    display: none;
}

.phone-form .label-row {
    margin-bottom: 0.5rem;
}

.reseller-modal .modal-top {
    border-bottom: none;
}

.reseller-modal .modal-top img {
    width: 32px;
    margin: 0;
}

.modal .box .nav-top {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
}

.modal .box .close {
    align-self: flex-start;
    width: 18px;
    margin: 0;
}

.reseller-modal .modal-center {
    align-items: center;
}

.reseller-modal .modal-center .heading {
    text-align: center;
}

.reseller-modal .modal-center .paragraph {
    margin-bottom: 2rem;
}

.reseller-modal .box {
    min-height: 400px;
}

.transfer-column {
    border: 1px solid #f1f1f1;
    border-radius: 0.3rem;
    align-items: flex-start;
    padding: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
}

.transfer-column:hover {
    border: 1px solid #78bf23;
}

.activetransfer {
    border: 1px solid #78bf23;
}

.transfer-column .heading {
    text-align: left;
    color: #0e0f11;
    font-size: 0.8rem;
}

.transfer-column:hover .heading {
    color: #78bf23;
}

.activetransfer .heading {
    color: #78bf23;
}

.modal .box .transfer-column .paragraph {
    text-align: left;
}

.modal .profile-row {
    border: 1px solid #f1f1f1;
    border-radius: 0.3rem;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-block: 1rem;
}

.modal .profile-row .text {
    align-items: flex-start;
    margin-left: 0.5rem;
}

.modal .profile-row .text .paragraph {
    text-align: left;
    margin: 0;
}

.modal .profile-row .sub-heading {
    font-size: 0.7rem;
    font-weight: 500;
    color: #0e0f11;
}

.modal .profile-row img {
    width: 24px;
    margin-bottom: 0;
}

.modal .profile-center {
    align-items: flex-start;
    justify-content: flex-start;
}

.modal .profile-center .paragraph {
    font-size: 0.7rem;
}

.modal .profile-center .paragraph {
    text-align: left;
}

.modal .profile-center>.sub-heading {
    font-size: 0.8rem;
    color: #0e0f11;
}

.modal .profile-center>.heading {
    margin-block: 1rem;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 0.5rem;
    width: 150px;
}

.modal .profile-center .btn {
    margin-top: 2rem;
}

.modal .receipt-center {
    align-items: center;
    justify-content: center;
}

.modal .receipt-center .heading {
    text-align: center;
}

.modal .receipt-center .grey-bg {
    background-color: #f7f7f7;
    align-items: center;
    justify-content: center;
    margin-block: 1rem;
    padding: 1rem;
    border-radius: 0.3rem;
}

.modal .receipt-center .grey-bg .heading {
    text-align: center;
    margin: 0;
}

.modal .receipt-center .grey-bg .paragraph {
    font-size: 0.7rem;
}

.modal .receipt-column .heading {
    font-size: 0.7rem;
    font-weight: 501;
}

.modal .receipt-column .paragraph {
    font-size: 0.7rem;
    width: auto;
    text-align: right;
}

.modal .receipt-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.modal .redirect-center img {
    width: 40px;
    margin-block: 1rem;
}

.modal .redirect-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.modal .redirect-center .paragraph {
    margin-bottom: 1rem;
}

.modal-center .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 1rem;
    width: 100%;
}

.modal-center .row .paragraph {
    color: #0e0f11;
    width: auto;
    font-weight: 600;
    font-size: 0.7rem;
}

.accounttype .dpcontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.accounttype .dpcontainer img {
    width: 100px;
    margin-right: 1rem;
}

.accounttype .back-wrapper .heading {
    display: none;
}

.notes .back-wrapper .heading {
    display: block;
    width: 50%;
}

.expense-container {
    padding: 1rem;
}

.expense-container .expense-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.expense-container .expense-top .expense {
    width: auto;
}

.expense-container .line-wrapper .text-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.line-wrapper .text-row .heading {
    font-weight: 500;
    color: #0e0f11;
    font-size: 0.65rem;
}

.line-wrapper .text-row .paragraph,
.expense-container .expense .paragraph {
    text-transform: capitalize;
}

.line-wrapper .text-row .heading {
    color: #ff9502;
}

.line-wrapper .text-row .trackbtn,
.track-container .trackbtn {
    background-color: #e4f2d3;
    align-items: center;
    justify-content: center;
    width: 7rem;
    border-top-left-radius: 0.4rem;
    border-bottom-left-radius: 0.4rem;
}

.line-wrapper .text-row .trackbtn .heading,
.track-container .trackbtn .heading {
    margin: 0;
    color: #78bf23;
}

.line-wrapper .text-row .yellow {
    background-color: #fff4e6;
}

.line-wrapper .text-row .yellow .heading {
    color: #ff9502;
}

.line-wrapper .text-row .red {
    background-color: #fceae7;
}

.line-wrapper .text-row .red .heading {
    color: #dc2c10;
}

.line-wrapper .line-inner {
    background-color: #78bf23;
    height: 4px;
    width: 30%;
    border-radius: 1rem;
}

.line-wrapper .line {
    width: 100%;
    height: 4px;
    border-radius: 1rem;
    background-color: #f7f7f7;
    margin-bottom: 1rem;
}

.min-height a {
    width: 100%;
}

.acctdetails .nhutchi {
    background-image: url(assets/bg.png);
    background-position: center;
    background-size: cover;
}

.acctdetails .nhutchi .top {
    justify-content: flex-end;
    align-items: flex-end;
}

.acctdetails .accounts-boxes {
    flex-direction: column;
}

.acctdetails .accounts-boxes .nhutchi .heading {
    color: #fff;
}

.acctdetails .accounts-boxes .nhutchi .paragraph {
    color: #fff;
}

.nhutchi-container .back-wrapper .heading {
    display: block;
}

.members-wrap .wrapper {
    background-color: transparent;
}

.members-box {
    background-color: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
}

.members-wrapper button {
    width: 100%;
    margin-bottom: 1rem;
}

.members-wrap .graph img {
    width: 100%;
}

.user-table {
    margin-top: 4rem;
    width: 100%;
    overflow: scroll;

    /* scrollbar-width: none; */
}

.user-table>.heading {
    font-weight: 600;
    font-size: 0.8rem;
    color: #0e0f11;
}

.user-table .table-top,
.user-table .table-data {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    width: 100%;
}

.user-table .wider-data,
.user-table .wider-top {
    width: 300%;
}

.user-table .table-top {
    background-color: #fafafa;
}

.user-table .table-top .heading {
    font-size: 0.75rem;
}

.user-table .table-data {
    background-color: #fff;
    border-bottom: 1px solid #fceae7;
    position: relative;
}

.user-table .table-data .review {
    background-color: #c9e5a7;
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: #78bf23;
}

.user-table .table-data .yellow {
    background-color: #fff4e6;
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: #ff9502;
}

.user-table .table-data .red {
    background-color: #fceae7;
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: #dc2c10;
}

.filter-container {
    margin-block: 2rem;
}

.filter-container .form label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

.filter-container .form label select {
    margin-left: 0.5rem;
    max-width: 12rem;
}

.inner-container {
    padding: 2rem;
    max-width: 500px;
    margin: 0 auto;
}

.inner-container .grey-column {
    background-color: #f7f7f7;
    padding: 1rem;
    height: 10rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.inner-container .grey-column .paragraph {
    color: #0e0f11;
    font-size: 0.8rem;
}

.inner-container .grey-column .heading {
    color: #0e0f11;
    font-size: 0.9rem;
}

.inner-container .row-column {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.inner-container .row-column button {
    background-color: transparent;
    border: 1px solid #78bf23;
    font-size: 0.8rem;
    color: #78bf23;
    width: 100%;
    cursor: pointer;
    margin-bottom: 1rem;
}

.inner-container .row-column button:hover {
    opacity: 0.5;
}

.inner-container .row-column button img {
    width: 14px;
}

.inner-container .row-column .gear {
    width: 100%;
}

.inner-container .center {
    margin-top: 2rem;
}

.alert {
    position: absolute;
    top: 5rem;
    right: 1rem;
    background-color: #fff;
    border: 1px solid #78bf23;
    min-width: 300px;
    min-height: 3rem;
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: rgba(128, 128, 128, 0.16) 0px 1px 4px;
    z-index: 1;
}

.error-alert {
    border: 1px solid #dc2c10;
}

.alert .wrapper,
.aler .boxes,
.alert .box {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.alert .box .heading {
    color: #78bf23;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 500;
}

.error-alert .red-text .box .heading {
    color: #dc2c10;
}

.required {
    color: #dc2c10;
}

.inline-display {
    display: inline-block;
}

.profileform form {
    padding: 1rem;
}

.loans {
    padding: 1rem;
}

.loans .boxes {
    background-color: #fff;
    border-radius: 0.4rem;
}

.loans .box {
    padding: 1rem;
}

.loans .expense-container {
    padding: 0;
    margin-block: 1rem;
}

.loans .box>.heading {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
}

.loans .box .text span {
    width: 200px;
    display: flex;
    align-items: flex-end;
    margin-top: 0.5rem;
}

.loans .box .text span .heading {
    color: #78bf23;
}

.loans .box .text span sub {
    font-size: 0.8rem;
    color: #78bf23;
    font-weight: 501;
}

.loans .box .text .heading {
    font-weight: 600;
    font-size: 0.9rem;
}

.loans .box .text .paragraph {
    color: #0e0f11;
}

.loans .box:nth-of-type(1) {
    border-bottom: 1px solid #f1f1f1;
}

.loans .box:nth-of-type(1) .links {
    margin-top: 1rem;
}

.loans .box:nth-of-type(1) .links a {
    width: auto;
}

.loans .box:nth-of-type(1) button {
    width: 12rem;
}

.loans .box:nth-of-type(1) .lightbtn {
    width: 12rem;
    margin-bottom: 0.5rem;
}

.loans .box:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    /* height: 200px; */
    /* max-width: 400px; */
}

.loans .box:nth-of-type(2) span {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.loans .box:nth-of-type(2) span .heading {
    margin-left: 0.3rem;
}

.loans .box:nth-of-type(2) button {
    width: 8rem;
}

.loans .box:nth-of-type(2) a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loans .box .expense-container .text:nth-of-type(2),
.track-container .expense-container .text:nth-of-type(2) {
    align-items: flex-end;
}

.loans .box .expense-container .text:nth-of-type(2) .heading,
.track-container .expense-container .text:nth-of-type(2) .heading {
    color: #78bf23;
}

.info-request {
    padding: 1rem;
}

.info-request .wrapper {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.3rem;
}

.info-request .wrapper>.heading {
    font-weight: 600;
    font-size: 14px;
}

.info-request .boxes {
    height: 250px;
    justify-content: space-evenly;
}

.info-request .box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 1rem;
    cursor: pointer;
}

.info-request .box:nth-of-type(1) {
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 1rem;
}

.info-request .box img {
    margin-right: 1rem;
    width: 60px;
}

.info-request .box .heading {
    font-weight: 500;
    color: #181818;
}

.info-request .box .paragraph {
    color: #0e0f11;
}

.track-container .expense-container {
    background-color: #fff;
    border-radius: 0.3rem;
}

.track-container .expense-container .trackbtn .heading {
    font-size: 0.8rem;
    font-weight: 500;
}

.track-container .expense-container .expense-top {
    margin-bottom: 1rem;
}

.track-container .expense-container .expense .paragraph {
    font-weight: 600;
}

.track-container .expense-container .text .paragraph {
    font-weight: 500;
    font-size: 0.8rem;
    color: #0e0f11;
}

.track-container .expense-container .text .heading {
    font-size: 0.85rem;
}

.track-container .boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.track-container .expense-container {
    padding: 1rem;
}

.loan-list .wrapper {
    background-color: #fff;
    padding: 2rem;
    border-radius: 0.3rem;
    height: 100%;
}

.loan-list li {
    color: #0e0f11;
    padding-inline: 1rem;
    height: 40px;
    display: flex;
    align-items: center;
    border-left: 2px solid #f1f1f1;
    cursor: pointer;
}

.loan-list a {
    color: #0e0f11;
}

.loan-list .active {
    border-left: 2px solid #78bf23;
    color: #78bf23;
}

.loan-list li:hover {
    border-left: 2px solid #78bf23;
    color: #78bf23;
}

.loan-list li:hover a {
    color: #78bf23;
}

.loan-list .box {
    margin-bottom: 2rem;
}

.loan-list .box .paragraph {
    color: #0e0f11;
    max-width: 400px;
    margin-bottom: 1rem;
}

.loan-list .box .heading {
    color: #0e0f11;
    margin-bottom: 1rem;
}

.loan-list .box label {
    color: #0e0f11;
    font-weight: 600;
    font-size: 0.8rem;
}

.loan-list .label-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.loan-list .label-row a {
    width: 4rem;
    align-items: flex-start;
    padding: 0;
}

.loan-list .label-row a:nth-of-type(1) button {
    background-color: #f5f5f5;
    color: #0e0f11;
    width: 4rem;
    height: 2.5rem;
}

.loan-list .label-row button:nth-child(1) {
    background-color: #f5f5f5;
    color: #0e0f11;
    width: 4rem;
    height: 2.5rem;
}

.loan-list .label-row button {
    width: 7rem;
    height: 2.5rem;
}

.loan-list .label-row .longerbtn {
    width: 10rem;
}

.loan-list {
    min-height: auto;
}

.loan-list .box form {
    margin-top: 1rem;
}

.loan-box {
    border: 1px solid #f1f1f1;
    padding: 1rem;
    border-radius: 0.3rem;
    cursor: pointer;
    margin-bottom: 1rem;
}

.active-loanbox {
    border: 1px solid #78bf23;
}

.loan-box:hover {
    border: 1px solid #78bf23;
}

.loan-box .top {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1rem;
}

.loan-list .loan-box .heading {
    margin-bottom: 0;
    margin-left: 0.5rem;
}

.loan-list .loan-box .paragraph {
    max-width: 100%;
}

.loan-box img {
    width: 40px;
}

.loan-list .loan-box b {
    font-weight: 800;
    color: #0e0f11;
}

.round-label {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 11rem;
}

.round-label .round-btn {
    width: 5rem;
    height: 2rem;
    border-radius: 1.5rem;
    background-color: #fff;
    color: #0e0f11;
    border: 1px solid #f1f1f1;
    font-size: 0.8rem;
}

.round-label .round-btn:hover {
    background-color: #78bf23;
    border: none;
    color: #181818;
}

.summary-box label {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #f1f1f1;
    padding: 1rem;
    border-radius: 0.4rem;
    cursor: pointer;
}

.summary-box label:hover {
    border: 1px solid #78bf23;
}

.summary-box label a {
    width: auto;
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.loan-list .summary-box label a .paragraph {
    font-size: 0.8rem;
    margin: 0;
    margin-right: 0.4rem;
}

.summary-box label a img {
    width: 15px;
    position: relative;
    top: 0;
    right: 0;
}

.loan-list .summary-box .paragraph {
    margin: 0;
}

.summary-box .last {
    border: none;
    padding: 0;
}

.summary-box .last:hover {
    border: none;
}

.loan-list .level-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 3rem;
}

.loan-list .level {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1rem;
    cursor: pointer;
}

.loan-list .level svg {
    margin-right: 0.5rem;
    display: none;
}

.loan-list .level .paragraph {
    margin: 0;
}

.loan-list .activeChoice .paragraph {
    color: #78bf23;
    border-bottom: 2px solid #78bf23;
}

.loan-list .level .paragraph:hover {
    color: #78bf23;
}

.doc-capture img {
    position: relative;
}

.doc-capture {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-block: 1rem;
    padding: 1rem;
    border: 2px dashed #78bf23;
    border-radius: 0.1rem;
    cursor: pointer;
}

.doc-capture img {
    width: 24px;
    right: 0;
    top: 0;
}

.doc-capture .paragraph {
    font-weight: 500;
    font-size: 0.8rem;
}

.grid-image-holder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 100px));
    gap: 1rem;
    place-content: center;
    margin-block: 2rem;
}

.gird-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.modal .gird-image img {
    width: 60px;
}

.settings-main .back-wrapper {
    display: none;
}

.top-tabs {
    margin-top: 2% !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 150px));
    background-color: #fff;
}

.top-tabs .paragraph {
    color: #0e0f11;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 1rem;
    border-bottom: 1px solid #f1f1f1;
    border-width: 100%;
    width: 100%;
}

.top-tabs .paragraph:hover {
    color: #78bf23;
}

.top-tabs .active {
    color: #78bf23;
    border: none;
    border-bottom: 2px solid #78bf23;
    width: auto;
}

.settings-main .wrapper {
    padding-top: 3rem;
}

.tabcontent {
    display: none;
}

.activetab {
    display: flex;
}

.tab-progress {
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tab-progress .progress {
    width: 49%;
    height: 0.2rem;
    border-radius: 0.3rem;
    background-color: #f1f1f1;
}

.tab-progress .active-progress {
    background-color: #78bf23;
}

.progresstabs {
    display: none;
    margin-top: 1rem;
}

.progressactive {
    display: flex;
}

.modal .top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.modal .top img {
    width: 20px;
    margin-right: 0.5rem;
}

.no-data {
    width: 100%;
    height: 100%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#product option[data-image] {
    margin-inline: 0.3rem;
    background-repeat: no-repeat;
    background-position: left center;
}

#product option[data-image="assets/zap.png"] {
    background-image: url("../public/assets/zap.png");
}

#financemodal .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#financemodal .column,
#creditmodal .column {
    align-items: flex-start;
    justify-content: flex-start;
    margin-block: 1rem;
}

#financemodal .column .paragraph,
#creditmodal .column .paragraph {
    margin: 0;
}

#financemodal .column .heading,
#creditmodal .column .heading {
    font-size: 0.8rem;
}

#financemodal .wrapper {
    width: 450px;
}

#financemodal .wrapper .modal-center {
    width: 100%;
}

#financemodal .trackbtn {
    background-color: #c9e5a7;
    border-top-left-radius: 0.4rem;
    border-bottom-left-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#financemodal .trackbtn .paragraph {
    color: #78bf23;
}

.note-wrapper {
    padding: 1rem;
}

.note-wrapper .column {
    margin-bottom: 1rem;
}

.note-wrapper button {
    align-self: flex-start;
    width: 100%;
}

.note-wrapper .check-box {
    justify-content: space-between;
    margin: 0;
}

.note-wrapper .check-box .paragraph {
    color: #0e0f11;
}

.note-wrapper .added {
    margin-bottom: 2rem;
    padding: 1rem;
    border-radius: 0.3rem;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06);
    cursor: pointer;
}

.note-wrapper .added:hover {
    border: 1px solid #78bf23;
}

.note-wrapper .active {
    border: 1px solid #78bf23;
}

.note-wrapper .text .paragraph {
    color: #0e0f11;
}

.note-wrapper .text .heading {
    color: #0e0f11;
    font-weight: 500;
}

.new-note {
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.new-note img {
    width: 70px;
    margin-bottom: 1rem;
}

.new-note .text {
    align-items: center;
    justify-content: center;
}

.new-note .text .heading {
    font-weight: 900;
}

.new-note .text .paragraph {
    text-align: center;
}

.choice .box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #f1f1f1;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    cursor: pointer;
    min-height: 5rem;
}

.choice .active {
    border: 1px solid #78bf23;
}

.choice .box:hover {
    border: 1px solid #78bf23;
}

.choice .box img {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    margin-right: 1rem;
}

.choice .box .text {
    align-items: flex-start;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
}

.choice .box .text .paragraph {
    text-align: left;
}

.table img {
    width: 1.2rem;
}

.action-image-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

.table .paragraph {
    max-width: 100px;
    word-break: break-all;
}

.user-table .edit-dropdown {
    top: 2.5rem;
    left: 61rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    z-index: 100;
    position: absolute;
}

.loans-no .wrapper {
    background-color: transparent;
    padding: 0;
}

.loans-no .box,
.loans-no .level-wrapper,
.loans-no .level {
    margin: 0;
}

.loans-no .level {
    justify-content: center;
}

.loans-no .box {
    justify-content: center;
    align-items: center;
    height: 10vh;
}

#camera-preview,
#camera-previewThree,
#camera-previewTwo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    margin-block: 1.5rem;
}

.title-row .heading {
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.title-row .active,
.title-row .heading:hover {
    color: #78bf23;
    text-decoration: underline;
    border: none;
}

.membersTable,
.commissionsTable,
.productionTable,
.submittedTable,
.disbursedTable {
    margin: 0;
    display: none;
}

.show-table {
    display: flex;
}

#transactionsList .heading {
    font-weight: 600;
    font-size: 0.85rem;
    margin-block: 2rem;
    width: 100%;
}

#transactionsList {
    overflow: scroll;
    scrollbar-width: none;
}

.tableWrapper {
    padding: 1rem;
    margin-block: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 150%;
    overflow: scroll;
    scrollbar-width: none;
}

.tableWrapper h3 {
    color: #0e0f11;
    font-weight: 600;
    font-size: 0.8rem;
    width: 100%;
}

.tableWrapper p {
    color: #0e0f11;
    font-size: 0.8rem;
    font-weight: 500;
    width: 100%;
}

::-webkit-scrollbar {
    display: none;
}

.tagbottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.tagbottom img {
    width: 20px;
    margin-left: 0.5rem;
    cursor: pointer;
}

.account-modal .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
    gap: 1rem;
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem 3rem;
}

.account-modal .wrapper {
    width: 700px;
    padding: 1rem;
}

.account-modal .modal-center .paragraph {
    margin-bottom: 0.2rem;
}

.account-modal .btn {
    max-width: 300px;
}

.account-modal .column .paragraph {
    margin-left: 0;
}

.account-modal .column .heading {
    font-size: 0.73rem;
}

.nicEdit-panelContain {
    border: none;
}

.note-test,
.note-test div {
    background-color: #fff;
}

.nicEdit-panel {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.5rem;
}

.note-test .nicEdit-main {
    padding: 0.3rem;
    border-radius: 0.2rem;
}

.note-test>div {
    width: 100%;
}

#signaturePop .transfer-row {
    margin-block: 1rem;
}

#signaturePop .dotted {
    margin-top: 0.5rem;
    width: 100%;
    height: 200px;
    border: 2px dashed #78bf23;
}

#signaturePop .dotted #sig-canvas {
    width: 100%;
    height: 100%;
}

.loanTabs {
    display: none;
}

#cke_content,
#cke_notecontent {
    width: 100%;
    max-width: 100%;
}

#noteForm {
    display: none;
}

/* added styles */
.colored-heading {
    color: #78bf23;
    font-size: 0.85rem;
    font-weight: 600;
}

.accordion {
    border: 1px solid #ccc;
    border-radius: 0.3rem;
    cursor: pointer;
    height: 3.5rem;
    overflow: hidden;
    padding: 1rem;
    margin-bottom: 1rem;
}

.active-accordion {
    height: auto;
    border: 1px solid #78bf23;
}

.accordion:hover {
    background-color: #e4f2d3;
}

.accordion ul {
    padding: 1rem;
}

.accordion li {
    list-style: disc;
    font-size: 0.9rem;
    color: #0e0f11;
    margin-bottom: 0.5rem;
}

.accordion .paragraph {
    line-height: 1.5rem;
    margin-bottom: 0.5rem;
}

.accordion .top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.accordion .heading {
    font-size: 0.9rem;
}

.accordion img {
    width: 16px;
}

.row-data-area .form {
    margin-top: 1rem;
}

.grid-area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.sub-process-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
    margin-bottom: 1rem;
    display: none;
}

.activegrid {
    display: grid;
}

.grid-box {
    background-color: #fff;
    padding: 1rem;
}

.grid-box small {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.grid-box b {
    font-size: 0.9rem;
    font-weight: 600;
}

.filter-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.filter-area>form {
    width: 10rem;
    margin-inline: 1rem;
}

.filter-date {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 10rem;
}

.filter-date form {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.filter-date label {
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.filter-date input {
    border: none;
    padding: 0;
}

.filter-date select {
    border: none;
    padding: 0;
}

.prodfilter .filter-date {
    margin-block: 0;
}

.group-row button {
    width: 7rem;
    align-self: flex-start;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.group-row button img {
    width: 16px;
    margin-right: 0.4rem;
}

.credit-form-area {
    background-color: #fff;
    padding: 1rem;
}

.bottom-sectioning {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bottom-sectioning img {
    width: 150px;
}

.sectioning .bar {
    background-color: #181818;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.sectioning .bar .heading {
    color: #fff;
    font-size: 0.9rem;
}

.sectioning {
    margin-bottom: 2rem;
}

.sectioning .check-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 120px;
}

.sectioning .check {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.sectioning .check input {
    width: auto;
    margin-right: 0.5rem;
}

.sectioning .grid-area .paragraph {
    line-height: 1.5rem;
    font-size: 0.8rem;
}

.sectioning .grid-area img {
    position: relative;
    width: 200px;
    top: 0;
    right: 0;
}

.credit-form-area .center {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block: 1rem;
}

.credit-form-area .center .heading {
    color: #78bf23;
    font-size: 0.9rem;
}

.credit-form-area .top .logo {
    margin-bottom: 0.5rem;
}

.credit-form-area .top .heading,
.credit-form-area .two-rows .heading {
    font-size: 0.8rem;
}

.credit-form-area .bottom-area {
    margin-top: 1rem;
}

.credit-form-area .two-rows .right {
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.credit-form-area .two-rows .profile-photo-box {
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
}

.sectioning .grid-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.sectioning .image-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.sectioning .image-grid img {
    width: 80px;
    margin-right: 1rem;
}

.creditform-back {
    background-color: #fff;
    margin-bottom: 1rem;
}

.accounttype .creditform-back .backlink {
    width: 100px;
}

.creditform-back button {
    width: 7rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.accounttype .creditform-back button img {
    width: 24px;
}

.marketnav .nav-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 220px;
}

.marketnav .nav-row a {
    color: #78bf23;
    font-size: 0.8rem;
}

.marketnav .logo {
    width: 100px;
}

.marketnav .nav-list {
    width: 170px;
    display: none;
}

.marketnav {
    display: flex;
}

.market-hero {
    background-color: #1818181f;
    background-image: url(assets/markethero.png);
    background-position: center;
    background-blend-mode: multiply;
    background-size: cover;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.market-hero .wrapper,
.market-hero .boxes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.market-hero .box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.market-hero h1 {
    color: #fff;
    font-size: 1.5rem;
    max-width: 600px;
    text-align: center;
    line-height: 2rem;
}

.market-hero form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    background-color: #fff;
    max-width: 60%;
    height: auto;
    border-radius: 0.3rem;
    padding: 0.4rem;
}

.market-hero label {
    width: 100%;
    margin: 0;
}

.market-hero form img {
    width: 2rem;
}

.market-hero input,
.market-hero select {
    width: 100%;
    border: none;
    padding: 0;
    border-radius: 0;
    height: 2rem;
}

.market-hero input:hover,
.market-hero input:focus,
.market-hero select:focus,
.market-hero select:hover {
    border: none;
    outline: none;
}

.trenading-ads .boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.trenading-ads .box {
    background-color: #fff;
    border-radius: 0.3rem;
    padding: 1rem;
}

.trenading-ads .box>a {
    width: 100%;
}

.trenading-ads .box img {
    width: 100%;
    height: 200px;
    border-radius: 0.3rem;
}

.trenading-ads .box .title,
.detail-info .title {
    font-size: 0.9rem;
    color: #0e0f11;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.trenading-ads .box .price,
.detail-info .price {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #0e0f11;
}

.trenading-ads .box small,
.detail-info small {
    font-size: 0.8rem;
    font-weight: 500;
    color: #0e0f11;
    margin-bottom: 0.5rem;
}

.trenading-ads .box small b,
.detail-info small b {
    color: #78bf23;
    font-size: 0.8rem;
    font-weight: 500;
}

.trenading-ads .btn-row {
    margin-top: 1.5rem;
}

.trenading-ads .btn-row,
.detail-info .btn-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.trenading-ads .favorite,
.detail-info .favorite {
    width: 2rem;
    height: 2rem;
    border-radius: 0.2rem;
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.trenading-ads .favorite svg,
.detail-info .favorite svg {
    width: 1rem;
    height: 1rem;
}

.favorite:hover svg {
    fill: red;
    stroke: red;
}

.trenading-ads .active svg {
    fill: red;
}

.trenading-ads button,
.detail-info button {
    width: 7rem;
    height: 2rem;
    border: 1px solid #78bf23;
    background-color: transparent;
    color: #78bf23;
}

.detail-info button {
    background-color: #78bf23;
    color: #fff;
}

.trenading-ads .box img {
    object-fit: cover;
    object-position: center;
    margin-bottom: 1rem;
}

.trenading-ads .text {
    margin-bottom: 2rem;
}

.share {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.share .paragraph {
    font-size: 0.8rem;
    color: #0e0f11;
    font-weight: 300;
}

.detail-info .boxes {
    gap: 1rem;
}

.breadcrumbs {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1rem;
    gap: 0.3rem;
}

.breadcrumbs a {
    color: #0e0f11;
    font-size: 0.9rem;
}

.breadcrumbs .active {
    color: #78bf23;
}

.detail-info .row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.share .row svg {
    width: 1.2rem;
    height: 1.2rem;
}

.detail-info .row input {
    background-color: #f1f1f1;
    color: #0e0f11;
    width: 3rem;
    cursor: pointer;
}

.detail-info .btn-row,
.detail-info .row {
    margin-bottom: 1rem;
}

.rating-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-block: 1rem;
}

.rating-row svg {
    width: 1rem;
    height: 1rem;
}

.rating-row .green {
    color: #78bf23;
}

.detail-info .box .paragraph {
    max-width: 600px;
}

.detail-info .option-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    width: 200px;
}

.detail-info .option {
    border-radius: 0.2rem;
    cursor: pointer;
    padding: 0.3rem;
}

.detail-info .option img {
    width: 100%;
}

.detail-info .option:hover {
    border: 1px solid #78bf23;
}

.detail-info .option-row .active {
    border: 1px solid #78bf23;
}

.detail-info {
    background-color: #ffff;
}

.detail-info .image {
    border: 1px solid #ccc;
    border-radius: 0.3rem;
    padding: 1rem;
    width: 100%;
    height: 300px;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.detail-info .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.filternsort {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-block: 1.5rem;
}

.filternsort div {
    width: 5rem;
    height: 2rem;
    border-radius: 0.3rem;
    background-color: #fff;
    color: #0e0f11;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.rating {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    background-color: #fff;
    border-radius: 0.3rem;
    padding: 1rem;
}

.rating img {
    width: 2rem;
    height: 2rem;
}

.rating .title {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #0e0f11;
}

.rating .paragraph {
    font-size: 0.8rem;
}

.search-merchant .box a {
    width: 100%;
}

.search-merchant button {
    width: 100%;
    background-color: #f1f1f1;
    color: #0e0f11;
    border: 1px solid #f1f1f1;
}

.verified-ratings .box {
    border-bottom: 1px solid #ccc;
    padding-block: 1rem;
}

.verified-ratings .wrapper {
    background-color: #fff;
    border-radius: 0.3rem;
    padding: 1rem;
}

.verified-ratings .back {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.verified-ratings .price {
    font-weight: 600;
    color: #0e0f11;
    font-size: 0.8rem;
}

.verified-ratings .bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

.verified-ratings .bottom .paragraph,
.verified-ratings .bottom small,
.verified-ratings .bottom b {
    font-size: 0.8rem;
    font-weight: 500;
    color: #0e0f11;
}

.verified-ratings .bottom .paragraph {
    max-width: 700px;
}

.verified-ratings .bottom b {
    font-weight: 600;
}

.verified-ratings h3 {
    font-size: 0.9rem;
    font-weight: 500;
    color: #0e0f11;
}

.cartnav {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.cartnav .left {
    width: 150px;
    position: relative;
}

.cartnav .left select {
    height: 2rem;
    padding-left: 2rem;
}

.cartnav .left img {
    position: absolute;
    width: 1rem;
    top: 50%;
    transform: translateY(-50%);
    left: 0.5rem;
}

.cartnav .right {
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

.cartnav .cart {
    position: relative;
}

.cartnav .cart .paragraph {
    background-color: #78bf23;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: absolute;
    top: 0;
    right: -0.5rem;
}

.cartsection,
.checkoutsection {
    background-color: #fff;
    padding: 1rem;
}

.cartsection .text a,
.checkoutsection .text a {
    margin-top: 0.5rem;
    text-decoration: underline;
    font-size: 0.8rem;
    color: #78bf23;
    font-weight: 500;
}

.cartsection .left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    width: auto;
}

.cartsection .left b {
    font-weight: 600;
    color: #78bf23;
    font-size: 0.8rem;
}

.cartsection .left small {
    color: #0e0f11;
    font-weight: 500;
    font-size: 0.8rem;
}

.cartsection .left img {
    width: 2rem;
    height: 2rem;
    border-radius: 0.3rem;
}

.cartsection .box {
    gap: 1rem;
}

.cartsection .wrapperitem {
    border-bottom: 1px solid #ccc;
    padding-block: 1rem;
}

.cartsection .deleteitem {
    margin-top: 0.5rem;
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.cartsection .deleteitem img {
    width: 1rem;
}

.cartsection .deleteitem p {
    font-size: 0.8rem;
    color: #78bf23;
    font-weight: 600;
}

.cartsection .right {
    width: auto;
}

.cartsection .right .paragraph {
    font-weight: 600;
    font-size: 0.9rem;
    color: #0e0f11;
}

.cartsection .center {
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    border-radius: 0.3rem;
}

.cartsection .center div {
    width: 30px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cartsection .center div:hover {
    background-color: #f1f1f1;
}

.cartsection .center div p {
    color: #0e0f11;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
}

.total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.total .paragraph {
    font-weight: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #0e0f11;
}

.total small {
    font-weight: 500;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    color: #0e0f11;
}

.total small b {
    font-weight: 600;
    font-size: 0.8rem;
    color: #0e0f11;
}

.checkoutsection .border {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border: 1px solid #78bf23;
    border-radius: 0.3rem;
    margin-top: 1rem;
}

.checkoutsection .border .paragraph {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.checkoutsection .border small {
    font-weight: 500;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    color: #0e0f11;
}

.checkoutsection .border div {
    padding: 0.5rem;
}

.checkoutsection .titlebox {
    border-bottom: 1px solid #ccc;
    padding-block: 0.5rem;
}

.content-area .titlebox svg {
    cursor: pointer;
}

.checkoutsection .boxes {
    gap: 1.5rem;
}

.checkoutsection .tablebox .text .paragraph {
    font-weight: 600;
    font-size: 0.8rem;
    color: #0e0f11;
}

.checkoutsection .user-table {
    margin-top: 1rem;
}

.checkoutsection .user-table .table-top {
    display: flex;
}

.checkoutsection .total>small {
    text-align: end;
    font-weight: 600;
}

.checkoutsection .user-table .table-top,
.checkoutsection .user-table .table-data {
    width: 366%;
}

.footer {
    background-color: #fff;
    border-top: 1px solid #ccc;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.footer span img {
    width: 2rem;
    height: 2rem;
}

.footer span {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer small {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0e0f11;
}

.checkoutsection,
.cartsection,
.trenading-ads,
.verified-ratings {
    padding-bottom: 5rem;
}

.marketplaceaccount .boxes {
    gap: 1rem;
}

.marketplaceaccount .nav-box {
    background-color: #fff;
    border-radius: 0.5rem;
    height: 250px;
    width: 250px;
}

.marketplaceaccount .nav-box .list {
    padding: 0.5rem;
    overflow: hidden;
}

.marketplaceaccount .active {
    background-color: #f2f9e9;
}

.marketplaceaccount .active a {
    color: #78bf23;
}

.marketplaceaccount .content-area {
    background-color: #fff;
    border-radius: 0.3rem;
}

.marketplaceaccount .content-area .top {
    padding: 1rem;
    border-bottom: 1px solid #ccc;
}

.marketplaceaccount .auto-grid {
    padding: 1rem;
}

.marketplaceaccount .border {
    border: 1px solid #ccc;
    border-radius: 0.3rem;
}

.marketplaceaccount .titlebox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 1rem;
}

.marketplaceaccount .titlebox .heading {
    color: #0e0f11;
    font-size: 0.8rem;
}

.marketplaceaccount .content-box {
    padding: 1rem;
}

.marketplaceaccount .content-box small,
.marketplaceaccount .content-box p {
    font-weight: 600;
    font-size: 0.8rem;
    color: #0e0f11;
    margin-bottom: 0.5rem;
}

.marketplaceaccount .content-box b {
    font-weight: 600;
    font-size: 1rem;
}

.marketplaceaccount .titlebox .img {
    width: auto;
}

.marketplaceaccount .user-table {
    margin-top: 1rem;
}

.marketplaceaccount .bottom {
    padding: 1rem;
}

.marketplaceaccount .trenading-ads .box {
    border: 1px solid #ccc;
}

.options-content input {
    outline: none;
    width: 0.8rem;
    height: 0.8rem;
}

.options-content {
    margin-bottom: 1rem;
    height: 3rem;
    overflow-y: hidden;
    border: 1px solid #ccc;
    border-radius: 0.3rem;
    padding: 1rem;
}

.activeborder {
    border: 1px solid #78bf23;
}

.options-content .top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.options-content .top .paragraph {
    font-weight: 600;
}

.options-content .bottom .paragraph {
    line-height: 1.5rem;
}

.summarytab {
    display: flex;
}

.row {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f2f9e9;
}

.row div {
    width: fit-content;
    border-bottom: 0;
}

.green-border {
    border: 1px solid #78bf23;
    padding: 1rem;
    border-radius: 0.3rem;
    margin-top: 1rem;
}

.green-border img {
    width: 0.9rem;
}

.green-border b {
    font-weight: 600;
}

.content-area .edit-dropdown {
    display: none;
    top: 2.5rem;
    left: 61rem;
}

.content-area .show {
    display: flex;
}

.content-area .edit-dropdown li {
    border-radius: 0;
}

.content-area .edit-dropdown .list {
    height: auto;
}

.content-area .table-data .table {
    height: 100px;
    justify-content: flex-start;
    align-items: flex-start;
}

.content-area .table-data {
    position: relative;
}

.evidence-box {
    border: 1px dashed #78bf23;
    border-radius: 0.3rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.evidence-box span {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.modal .box .evidence-box img {
    width: 1.5rem;
    position: static;
}

.evidence-box b {
    color: #78bf23;
}

.content-area .bottom .paragraph {
    font-weight: 500;
    font-size: 0.8rem;
    margin-block: 0.3rem;
}

.content-area .bottom .row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-block: 1rem;
    border-bottom: 0;
}

.content-area .bottom .row .paragraph {
    font-weight: 600;
}

.content-area .bottom .row .green-text {
    color: #78bf23;
    font-weight: 500;
}

.content-area .green-border .row {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    border-bottom: 0;
}

.sort label {
    margin: 0;
}

.sort select {
    border: none;
    height: auto;
}

.sort select:hover,
.sort select:focus {
    outline: none;
    border: none;
}

.rowinputs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.rowinputs span {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.modal-center .rowinputs span .paragraph {
    margin: 0;
}

.rowinputs input {
    width: auto;
    height: auto;
}

.rowinputs input:hover,
.rowinputs input:focus {
    border: none;
    outline: none;
}

.activefilter {
    display: flex;
}

.input-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
}

.modal .box .input-row .paragraph {
    font-size: 0.7rem;
}

.filter {
    cursor: pointer;
}

.loan-table {
    border: 1px solid #f1f1f1;
    margin-block: 1rem;
    border-radius: 0.4rem;
}

.loan-table .table-heading {
    padding: 1rem;
    background-color: #fafafa;
}

.loan-table .table-heading .heading {
    margin: 0;
}

.loan-table .table-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.loan-table .row-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1rem;
}

.loan-table .row-content .heading {
    margin: 0;
    font-size: 0.85rem;
}

.loan-table .row-content .paragraph {
    font-size: 0.8rem;
}

.profile-center .bubble {
    background-color: #eeeeee;
    padding: 0.7rem;
    border-radius: 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.profile-center .bubble small {
    color: #0e0f11;
    font-size: 0.8rem;
}

.profile-center .row-area span {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.profile-center .row-area span h3 {
    font-size: 0.8rem;
    color: #0e0f11;
}

.profile-center .row-area .group p {
    font-size: 0.6rem;
    color: #0e0f11;
}

.profile-center .title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.profile-center .title-wrapper h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #181818;
}

@media screen and (min-width: 376px) {
    body {
        max-width: 100%;
    }
}

@media screen and (min-width: 600px) {
    .dash .expense-top .expense:nth-of-type(2) {
        align-items: flex-end;
    }

    .inner-container .row-column button {
        margin-bottom: 0;
        width: 10rem;
    }

    .inner-container .row-column .gear {
        width: 5rem;
    }

    .inner-container .row-column {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .loans .box:nth-of-type(1) {
        flex-direction: row;
    }

    .loans .box:nth-of-type(1) .links {
        margin-top: 0;
        flex-direction: row;
        justify-content: flex-end;
    }

    .loans .box:nth-of-type(1) .links button {
        margin: 0;
        width: 8rem;
    }

    .loans .box:nth-of-type(1) .links .lightbtn {
        margin-right: 1rem;
        width: 11rem;
    }

    .filter-date form {
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .marketnav .nav-list {
        display: flex;
    }

    .market-hero select {
        border-left: 1px solid #ccc;
        padding-left: 0.4rem;
    }

    .market-hero select:hover {
        border-left: 1px solid #ccc;
    }

    .market-hero form {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .market-hero form label {
        width: auto;
    }
}

/* rever questao de modal nao exibir no 800px */

@media screen and (min-width: 800px) {
    .footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cartsection .box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .marketmain {
        padding-top: 4.5rem;
    }

    .auth-main {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        height: 100vh;
    }

    .auth-main header {
        width: 35%;
        min-height: 120%;
        background-image: url(assets/girl.png),
            linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #181818 100%);
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .form-header {
        height: 200px;
        justify-content: center;
    }

    .form-header .heading {
        display: block;
        margin-top: 1rem;
    }

    .auth-main section {
        width: 60%;
        min-height: 120%;
        justify-content: center;
        align-items: center;
    }

    .auth-main .wrapper {
        max-width: 450px;
    }

    .auth .rows {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .auth .rows label {
        margin: 0;
    }

    .welcome .boxes {
        flex-direction: row;
        justify-content: space-between;
    }

    .welcome .wallet {
        display: flex;
        width: auto;
    }

    .details .box .text {
        flex-direction: row;
        justify-content: space-between;
    }

    .details .box .heading {
        margin: 0;
    }

    .dashheader .mobile {
        display: none;
    }

    .dashheader .desktop {
        display: flex;
        width: 200px;
    }

    .dashheader {
        width: 250px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }

    #root {
        display: flex;
        flex-direction: row;
    }

    #root .dashheader {
        width: 250px;
        min-height: 700px;
    }

    #root .main {
        width: 80%;
    }

    .welcome,
    .details {
        padding: 2rem;
    }

    .dash-nav {
        display: flex;
        position: fixed;
        z-index: 10;
    }

    .desktop {
        position: fixed;
        overflow: hidden;
    }

    .dashheader {
        border-right: 1px solid #e4f2d3;
    }

    .accounttype .boxes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        place-items: center;
    }

    .accounttype .accountypeboxes {
        max-width: 700px;
    }

    .accounttype .box {
        height: 450px;
    }

    .accounttype .box .paragraph {
        text-align: center;
    }

    .profile .boxes {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    .profile .row-data {
        flex-direction: row;
        justify-content: space-between;
    }

    .profile .row-data>.paragraph {
        width: 40%;
        margin: 0;
    }

    .profile .row-data .expense-text {
        width: 40%;
        padding: 2rem;
    }

    .profile .row-data .form {
        width: 60%;
    }

    .profile .row-data .expense-form {
        width: 60%;
    }

    .profile .expense-row-data {
        max-width: 80%;
    }

    .expense-container {
        padding: 2rem;
    }

    .documents .boxes {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin: 0;
        max-width: 100%;
    }

    .documents .row-data .form {
        width: 50%;
    }

    .documents .row-data .paragraph {
        width: 40%;
    }

    .acctdetails .box,
    .acctdetails #add {
        height: 200px;
        justify-content: center;
    }

    .kyc-row {
        flex-direction: row;
    }

    .kyc .box {
        height: auto;
        justify-content: space-evenly;
    }

    .kyc .box .paragraph {
        text-align: left;
    }

    .main-dash {
        margin-top: 4% !important;
        padding-top: 4rem;
    }

    .welcome,
    .accounttype,
    .loan-min-height,
    .loan-details {
        padding-top: 5rem;
    }

    .account-details-main {
        min-height: 100vh;
    }

    .accounttype .back-wrapper .heading {
        display: block;
    }

    .min-height {
        margin-top: 1% !important;
        min-height: 450px;
        overflow-y: scroll;
        scrollbar-width: none;
    }

    .acctdetails .accounts-boxes {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 300px));
        gap: 1rem;
        place-content: flex-start;
        place-items: flex-start;
    }

    .members-container {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .members-container .members-wrapper,
    .members-container .graph {
        width: 48%;
    }

    .profile .inner-container .center .expense-row-data {
        max-width: 100%;
    }

    .profile .inner-container .row-data .expense-text {
        padding: 0;
    }

    .profile .inner-container .row-data .expense-container {
        padding: 0;
    }

    .loan-min-height {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }

    .loan-list .boxes {
        display: flex;
        flex-direction: row;
    }

    .loan-list .box {
        width: 60%;
    }

    .loan-list .box:nth-of-type(1) {
        width: 35%;
    }

    .loans-no .box:nth-of-type(1) {
        width: 100%;
    }

    .user-table .wider-data,
    .user-table .wider-top {
        width: 200%;
    }

    .note-wrapper {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        height: 450px;
    }

    .note-wrapper .note-row {
        width: 49%;
    }

    .note-wrapper .note-row:nth-of-type(2) {
        border-left: 1px solid #f2f3f3;
        padding-left: 1rem;
        height: 100%;
    }

    .note-wrapper .new-note {
        margin: 0;
    }

    .loans-no .level .paragraph {
        font-size: 0.7rem;
    }

    .trenading-ads {
        padding: 2rem;
        padding-bottom: 4rem;
    }

    footer,
    .marketnav,
    .cartnav,
    .checkoutsection,
    .cartsection,
    .verified-ratings,
    .marketplaceaccount {
        padding-inline: 2rem;
    }

    .detail-info .boxes {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .detail-info .box:nth-of-type(1) {
        width: 40%;
    }

    .detail-info .box {
        width: 60%;
    }

    .checkoutsection .boxes {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .checkoutsection .boxes>div {
        width: 50%;
    }

    .marketplaceaccount .boxes {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 1.5rem;
    }

    .marketplaceaccount .content-area {
        width: 80%;
    }

    .marketplaceaccount .nav-box {
        width: 250px;
    }

    .marketplaceaccount .auto-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .marketplaceaccount .trenading-ads {
        padding-inline: 1rem;
    }

    .marketplaceaccount .verified-ratings {
        padding-inline: 1rem;
    }

    .marketplaceaccount .verified-ratings .wrapper {
        padding: 0;
    }

    .marketplaceaccount .verified-ratings .boxes {
        flex-direction: column;
    }
}

@media screen and (min-width: 1000px) {
    .loan-list .level-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 3rem;
    }

    .loans-no .level-wrapper {
        margin: 0;
    }

    .loan-list .level {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin-right: 1rem;
        margin-bottom: 0;
    }

    .loan-list .level svg {
        margin-right: 0.5rem;
        display: block;
    }

    .loan-list .level svg rect:hover {
        fill: #78bf23;
    }

    .loan-list .level .paragraph {
        margin: 0;
    }

    .loan-list .activeChoice .paragraph {
        border: none;
    }

    .loan-list .activeChoice svg rect {
        fill: #78bf23;
    }

    .user-table .wider-data,
    .user-table .wider-top {
        width: 250%;
    }

    .loans-no .level .paragraph {
        font-size: 0.75rem;
    }

    .group-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .user-table .shortertop,
    .user-table .shorterdata {
        width: 100%;
    }
}

@media screen and (min-width: 1100px) {
    .loans-no .level .paragraph {
        font-size: 0.85rem;
    }
}

@media screen and (min-width: 1400px) {
    .main-dash>div {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .main-dash .dash {
        width: 65%;
    }

    .main-dash .transactions {
        width: 35%;
    }
}

@media print {
    .user-table {
        overflow: visible !important;
    }
}

.hide-component {
    display: none;
}

.responsive-image {
    width: 280px;
    height: 180px;
}

.img-responsive {
    max-width: 100%;
    height: auto;
    width: 100%;
}

@media screen and (max-width: 800px) {
    .aside-menu .left .list li {
        min-height: 48px;
        /* Altura mínima para toque em mobile */
    }

    .aside-menu .left .list li a {
        min-height: 48px;
        padding: 1.2rem;
        /* Padding maior para mobile */
    }
}

/* Estados de foco para acessibilidade */
.aside-menu .left .list li a:focus,
.desktop .list li a:focus,
.marketplaceaccount .list li a:focus {
    outline: 2px solid #78bf23;
    outline-offset: 2px;
    background-color: #f2f9e9;
}

/* Estados ativos e de pressão */
.aside-menu .left .list li:active,
.desktop .list li:active,
.marketplaceaccount .list li:active {
    background-color: #e4f2d3;
    transform: translateX(1px);
}

/* Melhorar o contraste nos ícones SVG */
.aside-menu .left .list li svg path,
.desktop .list li svg path,
.marketplaceaccount .list li svg path {
    stroke: #999DA1;
    transition: stroke 0.2s ease;
}

.aside-menu .left .list li:hover svg path,
.desktop .list li:hover svg path,
.marketplaceaccount .list li:hover svg path,
.aside-menu .left .list .active svg path,
.desktop .list .active svg path,
.marketplaceaccount .list .active svg path {
    stroke: #78bf23;
}

/* Melhorar a área clicável do botão do menu mobile */
.dashheader .menu {
    width: 44px;
    /* Área maior para toque */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.dashheader .menu:hover {
    background-color: #f2f9e9;
}

.dashheader .menu img {
    width: 32px;
    height: 32px;
}

/* Melhorar área clicável do perfil */
.dashheader .profile-circle,
.dash-nav .profile-circle {
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.dashheader .profile-circle:hover,
.dash-nav .profile-circle:hover {
    background-color: #f2f9e9;
}

/* Garantir que o overlay do menu seja bem visível */
.aside-menu .right {
    width: 40%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Mais escuro para melhor contraste */
    cursor: pointer;
    /* Indicar que é clicável para fechar */
}

/* Adicionar feedback visual ao fechar o menu */
.aside-menu .close {
    width: 32px;
    height: 32px;
    align-self: flex-end;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.aside-menu .close:hover {
    background-color: #f2f9e9;
}

/* Scroll suave para a lista do menu */
.aside-menu .left .list,
.desktop .list {
    scrollbar-width: thin;
    scrollbar-color: #78bf23 #f1f1f1;
}

.aside-menu .left .list::-webkit-scrollbar,
.desktop .list::-webkit-scrollbar {
    width: 6px;
}

.aside-menu .left .list::-webkit-scrollbar-track,
.desktop .list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.aside-menu .left .list::-webkit-scrollbar-thumb,
.desktop .list::-webkit-scrollbar-thumb {
    background: #78bf23;
    border-radius: 3px;
}

.aside-menu .left .list::-webkit-scrollbar-thumb:hover,
.desktop .list::-webkit-scrollbar-thumb:hover {
    background: #5a8f1a;
}

@media screen and (max-width: 768px) {
    .responsive-image {
        width: 280px;
        height: 180px;
    }

    .img-responsive {
        max-width: 100%;
        height: auto;
        width: 100%;
    }
}

.custom-list {
    position: absolute;
    top: 100%;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 999;
    display: none;
}

.custom-list li {
    padding: 8px 0;
    border-bottom: 1px solid #ccc;
    width: 100%;
    text-align: center;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.custom-list li:last-child {
    border-bottom: none;
}

/* Classe para exibir o menu */
.custom-list:not(.hidden) {
    display: flex;
}

.image-canvas {
    width: 320px;
    height: 200px;
}

.inputGray {
    background-color: #f2f2f2;
    outline: none;
}

@media print {
    .no-print {
        display: none;
    }
}

.a4-image {
    height: 662px;
    /* width: auto;   */
}

.cursor {
    cursor: pointer;
}

/* css de notificacao  */