:root { --body-width: 869px; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { box-shadow: inset 0 0 5px #9d9d9d; border-radius: 0px; }
::-webkit-scrollbar-thumb { background: grey; border-radius: 10px; }
body {    /*padding: 5px 8px;*/
background-color: #cfcfcf40;    /*margin: 8px !important;*/ }
input[readonly] { color: #484848; }
table { width: 100%; }
@media screen and (min-width:869px) {
    body { margin: 0 auto !important; max-width: var(--body-width); position: relative; background-color: white; }
    html { background-color: black; }
}
header span.user-name { font-size: 14px; font-weight: 600; }
header div img { max-height: 40px; }
header { padding: 1px 10px; width: 100%; background-color: white; margin-bottom: 15px; position: fixed; top: 0; z-index: 999; box-shadow: 0px 4px 7px 4px #cbcbcb2e; max-width: var(--body-width); }
header div.top-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 7px; }
a.menu-handle { padding: 7px; margin-right: 8px; }
main { padding: 66px 10px 127px;    /*background-color: #cfcfcf40 !important;*/ font-size: 14px; background-color: white; }
main, span, div, p { font-size: inherit; }
nav.main-menu { position: fixed; bottom: 0; width: 100%; justify-content: space-around; background-color: #ffffff; padding: 10px 0; border-radius: 20px 20px 0 0; box-shadow: 0px -1px 6px 5px #b5b5b533; max-width: var(--body-width); }
nav.main-menu  a { display: flex; flex-direction: column; text-align: center; color: #727272; justify-content: center; cursor: pointer; }
nav.main-menu  a { color: #727272; }
nav.main-menu .rewards { border-radius: 50%; background-color: yellow; min-width: 70px; min-height: 70px; text-align: center; display: flex; justify-content: center; box-shadow: 1px 2px 7px 3px #cdcdcdcf; margin-top: -7px; color: #c72b48; }
nav.main-menu .active { color: blue; }
nav.main-menu .rewards i { font-size: 21px; }
footer { position: fixed; bottom: 0; width: 100%; max-width: var(--body-width); }
.personal-expense { z-index: 50; position: absolute; bottom: 96px; right: 16px;    /* border: 1px solid blue; */    /* background-color: #0027e94d; */

    /* color: black; */

    /*font-weight: 500;
    font-size: 14px;*/ }
    aside.sidebar { position: fixed; background: white; z-index: 9999; height: 100%; width: 308px; box-shadow: 5px 0px 11px 4px #afafafc4; top: 0; left: 0; padding: 20px; }
    aside.sidebar .close-menu { position: absolute; top: 8px; right: 14px; font-size: 21px; width: 25px; height: 25px; background: #d1d1d1; text-align: center; align-items: center; display: flex; justify-content: center; border-radius: 50%; font-weight: 900; user-select: none; cursor: pointer; }
    aside.sidebar .info { display: flex; flex-direction: column; justify-content: center; text-align: center; margin-bottom: 16px; }
    aside.sidebar .info span { font-size: 16px; }
    aside.sidebar .info .name { font-weight: 700; font-size: 17px; }
    aside.sidebar .info img { width: 120px; height: 120px; margin: 0 auto 8px; min-height: 120px; }
    aside.sidebar nav ul { list-style: none; margin: 0; padding: 0; }
    aside.sidebar nav ul li a { padding: 5px; width: 100% !important; text-decoration: none; display: block; color: #2f2395; }
    aside.sidebar nav ul li a:hover { background: #cdcdcded; }
    aside.sidebar nav ul li a { background-color: #e9e9e9; margin: 4px 0; border-radius: 25px; padding: 7px 30px; }
    section.more_on p { margin: 0; color: #0f0fbd; }
    section.more_on p i { font-size: 16px; }
    section.more_on .card-body { display: flex; flex-flow: row; text-align: center; }
    aside.sidebar nav ul li a i { margin-right: 12px; }
    table#dash_expense_table tr:first-child td { border-top-color: #ffffff00; }
    table#dash_expense_table tr td:last-child { text-align: right; }
    canvas { background-color: #f7f6f6d1; border-radius: 10px; padding: 20px; }
    button.personal-expense { display: none; }
    section.breakdown div.card { display: flex; flex-direction: row; justify-content: space-between; padding: 5px 16px; align-items: center; cursor: pointer; margin-bottom: 12px; }
    section.breakdown div.card:hover, section.breakdown div.card:focus { background-color: #d7d7d763; transition: 0.2s; }
    section.breakdown div.card > div { display: flex; align-items: center; }
    section.breakdown div.card > div > div { display: flex; flex-direction: column; height: 53px; justify-content: space-between; }
    section.breakdown div.card > div:last-child > div { align-items: flex-end; margin-right: 11px; }
    section.breakdown div.card div:last-child > i { font-size: 20px; }
    section.breakdown div.card div:first-child > i { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: #e7e7e7; border-radius: 50%; font-size: 21px; margin-right: 12px; }
    section.breakdown div.card > div > div span:first-child, section.breakdown div.card > div span:first-child { color: #6e6e6e; }
    section.breakdown div.card > div > div span:last-child { font-size: 16px; color: black; text-overflow: ellipsis; width: 160px; white-space: nowrap; overflow: hidden; }

    /*section.breakdown div.card > div:nth-child(2) {
    flex-direction: column;
    }*/
    section.breakdown div.card > div:nth-child(2) strong { font-size: 18px; font-weight: 600; }
    section#details-popup, .m-popup { position: fixed; top: 0; left: 0; z-index: 9999; background: #e4ebff; width: 100%; height: 100%; display: none; overflow-x: auto; padding: 0 0 20px; }
    section#details-popup .top-bar, .m-popup  .top-bar { background: white; box-shadow: 0px 3px 7px 4px #b9b9b966; display: flex; justify-content: space-between; padding: 9px 16px; align-items: center; }
    section#details-popup .top-bar span, .m-popup  .top-bar span, section#details-popup .top-bar a i, .m-popup  .top-bar a i { font-size: 19px; }
    section#details-popup .top-bar > div, .m-popup  .top-bar > div { display: flex; align-items: center; }
    section#details-popup .back-btn, .m-popup  .back-btn { background: #e7e7e7; height: 35px; width: 35px; display: flex; justify-content: center; align-items: center; color: #242a48; border-radius: 50%; margin-right: 12px; }
    section#details-popup .popup-body, .m-popup  .popup-body { padding: 14px 15px 15px; }
    .cbadge { background-color: #dddddd59; padding: 2px 13px; border-radius: 40px; border: 1px solid gray; color: #4e4e4e !important; margin-right: 3px; font-size: 12px !important; }
    .category.fa-taxi { color: #4a5ad1; }
    .category.fa-gas-pump { color: #f52626; }
    .category.fa-shopping-basket { color: #759f12; }
    .category.fa-shopping-cart { color: #759f12; }
    .category.fa-cart-plus { color: #cb0000; }
    .category.fa-pizza-slice { color: #c7aa1b; }
    .category.fa-shopping-bag { color: #304593; }
    .category.fa-film { color: #cb0000; }
    .category.fa-file-invoice { color: #57576e; }
    span#delete_record { color: #3232d3; margin-right: 22px; cursor: pointer; }
    body.settings .personal-expense, body.my-profile .personal-expense, body.friends .personal-expense { display: none; }
    .list_view .list-data > div { display: flex; justify-content: space-between; margin-bottom: 11px; background-color: #dbdbdb; align-items: center; padding: 6px 19px; border-radius: 18px; cursor: pointer }
    .list-data  .list .box-left { display: flex; align-items: center; justify-content: unset; }
    .list-data  .list .box-left .data {    /*margin-left: 14px;*/ }
    .list-data  .list img { max-width: 44px; }
    .list_view .list div img { max-width: 37px; border-radius: 50%; margin-right: 10px; }
    .list_view .header { display: flex; justify-content: space-between; padding: 0 5px; }
    .list-data  .list  .box-left .mobile_no { color: #565656; }
    .list-data  .list  .box-left .name { color: #565656; }
    .list-data .list .box-left .name { color: #0a0a0a; font-size: 18px; }
    span.verified { color: green;    /* font-weight: 600; */ }
    .pie-no-data { display: flex; justify-content: center; align-items: center; width: 249px; height: 249px; background-color: lightgray; border-radius: 50%; margin: auto; }
    .pie-no-data > div { display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; background-color: white; border-radius: 50%; }
    .pie-no-data > div> div { opacity: 0.7; }


.page-title {
    text-align: center;
}

.page-title h5{
    font-size: 20px;
        font-weight: 600;
        color: #7138ff;
}
.page-title:after {
    content: " ";
    display: block;
    width: 66px;
    height: 3px;
    background: red;
    margin: -6px auto 9px;
}

img.verified {
    max-width: 20px !important;
    max-height: 20px !important;
    min-height: max-content !important;
}
span.verified i {
    -webkit-text-stroke-width: 1px;
}
i.fa-check {
    -webkit-text-stroke-width: 1px;
}

main {
    height: 100%;
}

.list_view .list-data > div {
    background-color: #fff !important;
    border: 1px solid #e3e3e3;
    box-shadow: 0px 0px 5px 1px #e7e7e77d;
}

body {
    height: unset !important;
}