/* css starts here */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: 'Nunito';
}
/* col classes here*/
.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

*[class*="col-"] {
    padding: 0 15px;
}

body {
    --transition-main: all 0.3s linear;
}
/* color variables */
.white-theme {
    --color-primary: #0E1726;
    --color-secondary: #4361EE;
    --color-sub-category: #373D3F;
    --color-lightgrey: #888EA8;
    --color-profit: #00AB55;
    --color-loss: #E7515A;
    --color-purple: #805DCA;
    --color-yellow: #E2A03F;
    --color-lightblue: #2196F3;
    --color-aside-main: #0E1726;
    --color-aside-sub: #6B7280;
    --bg-main: #fafafa;
    --bg-logo: #f3f5f8;
    --bg-aside-icon: #6b72801a;
    --color-inputbox: #727986;
    --color-header-bg: white;
    --color-text: black;
    --color-input-bg: white;
    --input-border: #e5e7eb;
    --outer-color: #4361EE;
    --hover-color: #EBEBEB;
    --active-hover-color: #f8f4f4;
    --aside-heading-bg: #F6F7FA;
    --text-color: #0E1726;
    --text-hover: #0E1726;
    --aside-heading-color: #0e1726;
    --dsc-color: #0E1726;
    --dollor-bg: #FFECCB;
    --dollor-color: #E2A03F;
    --cart-icon-color: #00AB55;
    --cart-bg-color: #DDF5F0;
    --purple-bg: #ebe4f7;
    --purple-icon: #8B6BCF;
    --summary-line-bg: #EAEAEC;
    --green-icon: #00ab55;
    --green-bg: #DDF5F0;
    --yello-icon: #e2a03f;
    --yellow-bg: #FFF9ED;
    --pending-blue: #EAF1FF;
    --blue-white: #2196f3;
    --pending-green: #DDF5F0;
    --green-white: #00AB55;
    --pending-red: #FFF5F5;
    --red-white: #e7515a;
    --pending-black: #EAEAEC;
    --black-white: #0e1726;
    --pending-yellow: #FFF9ED;
    --yellow-white: #e2a03f;
    --pending-purple: #EBE4F7;
    --purple-white: #805dca;
    --horizontal-line: #E0E6ED;
    --name-color: #888EA8;
    --bg-box: white;
    --bg-sub-box: #ebedf2;
    --bg-line: #F6F8FA;
    --purple-black: #805dca;
    --green-black: #00AB55;
    --bg-color: #ECEFFD;
}

.blck-theme {
    --color-primary: #E0E6ED;
    --color-secondary: #4361EE;
    --color-sub-category: #E0E6ED;
    --color-lightgrey: #888EA8;
    --color-profit: #00AB55;
    --color-loss: #E7515A;
    --color-purple: #805DCA;
    --color-yellow: #E2A03F;
    --color-lightblue: #2196F3;
    --color-aside-main: #506690;
    --color-aside-sub: #6B7280;
    --bg-main: #060818;
    --bg-logo: #20273c;
    --bg-aside-icon: #eaeaec1a;
    --color-inputbox: #6B7280;
    --color-header-bg: #0E1726;
    --color-text: white;
    --color-input-bg: #20273c;
    --input-border: #17263c;
    --outer-color: #4361EE;
    --hover-color: #181F32;
    --active-hover-color: #111827;
    --aside-heading-bg: #121A2A;
    --text-color: #506690;
    --text-hover: #848CA8;
    --aside-heading-color: #888EA8;
    --dsc-color: #E0E6EDE6;
    --dollor-bg: #E2A03F;
    --dollor-color: #FFECCB;
    --cart-icon-color: white;
    --cart-bg-color: #00AB55;
    --purple-bg: #805DCA;
    --purple-icon: white;
    --summary-line-bg: #1B2E4B;
    --green-icon: #ddf5f0;
    --green-bg: #00AB55;
    --yello-icon: white;
    --yellow-bg: #E2A03F;
    --pending-blue: #4361EE;
    --blue-white: white;
    --pending-green: #00AB55;
    --green-white: white;
    --pending-red: #e7515a;
    --red-white: white;
    --pending-black: #3B3F5C;
    --black-white: white;
    --pending-yellow: #e2a03f;
    --yellow-white: white;
    --pending-purple: #805dca;
    --purple-white: white;
    --horizontal-line: #222934;
    --name-color: #6B7280;
    --bg-box: #060818;
    --bg-sub-box: #0E1726;
    --bg-line: #1A2941;
    --purple-black: #0E1726;
    --green-black: #0E1726;
    --bg-color: #373d48;

}
/* basic classes */
.flex {
    display: flex;
    flex-wrap: wrap;
}

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

.justify-center {
    justify-content: center;
}

.justify-space-beetween {
    justify-content: space-between;
}

.center-all {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.gap-40 {
    gap: 40px;
}

.gap-50 {
    gap: 55px;
}

.gap-60 {
    gap: 60px;
}

.gap-80 {
    gap: 80px;
}

.main-content {
    min-height: 100vh;
    background-color: var(--bg-main);
    transition: var(--transition-main);
}

.ml-260 {
    margin-left: 260px;
}
/* aside starts here  */
aside {
    width: 260px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: var(--color-header-bg);
    --tw-shadow: 5px 0 25px 0 #5e5c9a1a;
    --tw-shadow-colored: 5px 0 25px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition: var(--transition-main);
}

.aside-logo {
    padding: 15px;
}

.aside-logo h2,
.main-logo h2 {
    font-size: 25px;
    font-weight: 600;
    color: var(--color-text);
}

.rounded-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-logo);
    transition: var(--transition-main);
    color: var(--color-text);
    cursor: pointer;
}

.rounded-logo:hover {
    background-color: var(--bg-aside-icon);
    color: var(--color-secondary);
}

.aside-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-main);
    color: var(--color-text);
}

.aside-icon:hover {
    background-color: var(--bg-aside-icon);
}

.main-icon {
    transition: var(--transition-main);
    cursor: pointer;
}

.main-icon:hover {
    background-color: var(--bg-aside-icon);
    color: var(--color-secondary);
}

.left-260 {
    left: -260px;
}

.l-260 {
    left: 260px;
}
    
.display-none {
    display: none;
}
/* header starts here  */

header {
    position: fixed;
    width: calc(100% - 260px);
    padding: 10px 20px;
    background-color: var(--color-header-bg);
    --tw-shadow: 5px 0 25px 0 #5e5c9a1a;
    --tw-shadow-colored: 5px 0 25px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    z-index: 5;
}
.m-60 {
    margin-top: 60px;
}
.w-100 {
    width: 100%;
}


.search-input {
    font-size: 14px;
    font-weight: 600;
    padding: 9px 0;
    padding-left: 36px;
    color: var(--color-inputbox);
    padding-right: 16px;
    border-radius: 5px;
    letter-spacing: 1px;
    border: 1px solid var(--input-border);
    background-color: var(--color-input-bg);
    outline-color: var(--outer-color);
}

.search-box {
    position: relative;
}

.search-box button {
    position: absolute;
    left: 5px;
    bottom: 3px;
    padding: 5px;
    border: none;
    background-color: var(--color-input-bg);
    color: var(--color-text);
    cursor: pointer;
}

.rounded-logo img {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    object-fit: cover;
}

.profile-logo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transition: var(--transition-main);
}

.profile-logo {
    filter: grayscale(0.4);
}

.profile-logo:hover {
    filter: none;
}
/* header ends here */
    /* aside remaining part */
.scrollable-aside {
    overflow-y: scroll;
    height: calc(100vh - 66px);
}


/* width */
.scrollable-aside::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.scrollable-aside::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
.scrollable-aside::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #e8e4e4;
}

/* Handle on hover */
.scrollable-aside::-webkit-scrollbar-thumb:hover {
    background: #e8e4e4;
}

.nav-item {
    padding: 0 16px;
}

.nav-btn {
    width: 100%;
    border: none;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
    background-color: transparent;
}

.nav-btn span {
    font-size: 16px;
    color: var(--text-color);
}

.nav-btn div i{
    color: var(--color-aside-sub);
    font-size: 18px;
}

.nav-btn:hover i{
    color: var(--color-aside-main);
}

.nav-btn:hover span{
    color: var(--text-hover);
}

.nav-btn:hover {
    background-color: var(--hover-color);
}

.nav-btn:hover svg {
    color: var(--outer-color);
}

.nav-item svg {
    color: #868B92;
}

.selected {
    background-color: var(--hover-color);
}

.nav-btn.selected span{
    color: var(--text-hover);
}

.active-menus a {
    padding: 10px 36px;
    display: flex;
    color: var(--color-aside-sub);
    transition: var(--transition-main);
    font-size: 14px;
}

.active-menus a:hover {
    color: var(--outer-color);
}

.active-menus.closed a:hover {
    color: var(--outer-color);
    background-color: var(--active-hover-color);
}

.active-menus li:hover {
    background-color: var(--active-hover-color);
    border-radius: 5px;
}

.aside-menus-heading {
    padding: 6px 28px;
    background-color: var(--aside-heading-bg);
    margin: 5px 0;
}

.aside-menus-heading span{
    font-size: 14px;
    color: var(--aside-heading-color);
}

.apps-item a{
    padding: 10px;
    display: block;
}

.apps-item span{
    color: var(--text-color);
}

.apps-item a:hover{
    background-color: var(--hover-color);
    border-radius: 5px;
}

.apps-item a:hover span{
    color: var(--text-hover);
}

.apps-item a:hover svg{
    color: var(--outer-color);
}

.apps-item .error-menu:hover a{
    color: var(--outer-color);
}

.apps-item .error-menu{
    cursor: pointer;
}

.nav-item2 .active-menus li a{
    padding-left: 36px;
    color: var(--color-aside-sub);
}

.closed {
    display: none;
}

.m-20 {
    margin-bottom: 20px;
}

.rotate {
    transform: rotate(90deg);
}

/* main body  starts here*/

.outer-body {
    padding: 1.5rem;
}

.dashbord a{
    color: var(--color-secondary);
    font-size: 15px;
    transition: var(--transition-main);
}

.dashbord a:hover{
    text-decoration: underline;
}

.sales a{
    color: var(--aside-heading-color);
    font-size: 15px;
}

.sales span{
    color: var(--aside-heading-color);
    font-size: 15px;
    margin-left: 8px;
    margin-right: 3px;
}
/* chart starts here */
.charts {
    padding-top: 1.25rem;
}

.chart-heading {
    margin-bottom: 1.25rem;
}
.chart-heading h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
}

.dots {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
    transition: var(--transition-main);
    cursor: pointer;
}

.dots:hover {
    color: var(--color-secondary);
}

.revenue-chart, .sales-chart, .daily-sales-chart, .order-chart, .summary-card,.recent-activities {
    padding: 1.25rem;
    background-color: var(--color-header-bg);
    height: 100%;
    --tw-shadow: 5px 0 25px 0 #5e5c9a1a;
    --tw-shadow-colored: 5px 0 25px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-radius: 5px;
}

.chart-dsc {
    font-size: 18px;
    font-weight: 400;
    color: var(--dsc-color);
}

.sales-dsc {
    margin-bottom: 25px;
}

.chart-dsc span {
    color: var(--color-secondary);
    margin-left: 8px;
}

.pl-0 {
    padding-left: 0;
}

.pr-0 {
    padding-right: 0;
}

.chart-heading div span {
    font-size: 14px;
    color: var(--color-lightgrey);
}

.dollor-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--dollor-bg);
}

.cart-icon {
    width: 2.80rem;
    height: 2.80rem;
    border-radius: 10px;
    background-color: var(--cart-bg-color);
}

.cart-icon i {
    font-size: 22px;
    color: var(--cart-icon-color);
}

.dollor-icon svg {
    color: var(--dollor-color);
}

.order-dsc h4{
    font-size: 25px;
    text-align: right;
    font-weight: 600;
    color: var(--dsc-color);
}

.summary-info {
    margin-top: 20px;
}

.income-data,.profit-data,.expenses-data {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--purple-bg);
    margin-right: 0.75rem;
}

.profit-data {
    background-color: var(--green-bg);
}

.expenses-data {
    background-color: var(--yellow-bg);
}

.income-data svg {
    color: var(--purple-icon);
}

.icome-line,.profit-line,.expenses-line {
    width: 100%;
    height: .5rem;
    margin-top: 8px;
    border-radius: 50px;
    background-color: var(--summary-line-bg);   
}

.icome-line div {
    width: 90%;
    height: 100%;
    border-radius: 50px;
    background: rgb(117,121,255);
    background: linear-gradient(90deg, rgba(117,121,255,1) 0%, rgba(178,36,239,1) 100%);
}

.profit-line div {
    width: 60%;
    height: 100%;
    border-radius: 50px;
    background: rgb(60,186,146);
    background: linear-gradient(90deg, rgba(60,186,146,1) 38%, rgba(11,163,96,1) 100%);
}

.expenses-line div {
    width: 75%;
    height: 100%;
    border-radius: 50px;
    background: rgb(240,152,25);
    background: linear-gradient(90deg, rgba(240,152,25,1) 38%, rgba(255,88,88,1) 100%);
}

.income-history h6,p {
    font-size: 14px;
    color: var(--color-lightgrey);
    font-weight: 600;
}

.profit-summary {
    margin: 40px 0;
}

.profit-data svg{
    color: var(--green-icon);
}

.expenses-data svg{
    color: var(--yello-icon);
}

.recent-activities {
    /* margin-top: 50px; */
    height: auto;
}

.recent-activities h5 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--color-primary);
}

.blue-dot,.green-dot,.red-dot,.black-dot,.yellow-dot,.purple-dot {
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background-color: #2196f3;
    margin-right: .25rem;
    display: inline-block;
}

.green-dot {
    background-color: #00AB55;
}

.red-dot {
    background-color: #e7515a;
}

.black-dot {
    background-color: #0e1726;
}

.yellow-dot {
    background-color: #e2a03f;
}

.purple-dot {
    background-color: #805dca;
}

.w-10 {
    width: calc(100% - 10px);
}

.recent-activities-info h6 {
    font-size: 14px;
    font-weight: 400;
    color: var(--aside-heading-color);
}

.recent-activities-info div p{
    width: 68px;
    height: auto;
    border: 1px solid #2196f3;
    border-radius: 4px;
    background-color: var(--pending-blue);
    color: #2196f3;
    font-size: 12px;
    text-align: center;
    position: relative;
    right: -59px;
    display: none;
    font-weight: 400;
}

.effect.effect1, .effect.effect8 {
    right: -65px;
}

.effect.effect2, .effect.effect3, .effect.effect4, .effect.effect5, .effect.effect6 {
    right: -40px;
}

.recent-activities-info span {
    color: var(--color-lightgrey);
    font-size: 12px;
}

.recent-activities-info {
    cursor: pointer;
}

.recent-activities-info:hover .effect{
    display: inline-block;
    color: var(--blue-white);
}

.recent-activities-info:hover .effect1{
    border: 1px solid #00AB55;
    background-color: var(--pending-green);
    color: var(--green-white);
}

.recent-activities-info:hover .effect2{
    border: 1px solid #E7515A;
    background-color: var(--pending-red);
    color: var(--red-white);
}

.recent-activities-info:hover .effect3{
    border: 1px solid #0e1726;
    background-color: var(--pending-black);
    color: var(--black-white);
}

.recent-activities-info:hover .effect4{
    border: 1px solid #e2a03f;
    background-color: var(--pending-yellow);
    color: var(--yellow-white);
}

.recent-activities-info:hover .effect6{
    border: 1px solid #805dca;
    background-color: var(--pending-purple);
    color: var(--purple-white);
}

.recent-activities-info:hover .effect8{
    border: 1px solid #00AB55;
    background-color: var(--pending-green);
    color: var(--green-white);
}

.m-8 {
    margin-bottom: 8px;
}

.horizontal-line {
    width: 100%;
    height: 1px;
    background-color: var(--horizontal-line);
    margin-top: 33px;
    margin-bottom: 20px;
}

.view-more {
    text-align: center;
    font-size: 14px;
}

.view-more a {
    color: var(--aside-heading-color);
    font-weight: 600;
    transition: var(--transition-main);
}

.view-more i {
    color: var(--aside-heading-color);
    font-weight: 500;
    display: inline-block;
    transition: var(--transition-main);
}

.view-more:hover a{
    color: var(--color-secondary);
}

.view-more:hover i{
    color: var(--color-secondary);
    transform: translate(5px);
}

.transactions {
    height: auto;
}

.transactions-box {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .375rem;
    background-color: var(--pending-green);
    display: flex;
    justify-content: center;
    align-items: center;
}

.transactions-box span {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--green-white);
}

.transactions-name {
    padding-left: .75rem;
    padding-right: .75rem;
    width: calc(100% - 98px);
}

.transactions-name div {
    color: var(--aside-heading-color);
    font-size: 16px;
}

.transactions-name div:last-child {
    font-size: .75rem;
    color: var(--name-color);
}

.profit {
    color: #00ab55;
}

.transactions-box-yellow svg {
    color: var(--yellow-white);
}

.transactions-box-red svg {
    color: var(--red-white);
}

.transactions-box-purple svg {
    color: var(--purple-white);
}

.transactions-box-yellow {
    background-color: var(--pending-yellow);
}

.transactions-box-blue span {
    color: var(--blue-white);
}

.transactions-box-blue {
    background-color: var(--pending-blue);
}

.transactions-box-red {
    background-color: var(--pending-red);
}

.transactions-box-purple {
    background-color: var(--pending-purple);
}

.lose-color {
    color: #E7515A;
}

.profile-section {
    min-height: 190px;
    background: rgb(67,97,238);
    background: linear-gradient(90deg, rgba(67,97,238,1) 38%, rgba(22,15,107,1) 100%);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 1.25rem;
}

.mt-50 {
    margin-top: 50px;
}

.profile-section-logo {
    padding: .25rem;
    padding-right: .75rem;
    background-color: #0e172680;
    border-radius: 50px;
    display: flex;
    align-items: center;
    color: white;
    margin-bottom: 1.5rem;
}

.profile-section-logo img {
    border-radius: 50%;
    border: 2px solid #ffffff80;
    margin-right: 5px;
}

.profile-section button {
    width: 2.25rem;
    height: 2.25rem;
    background-color: #0e1726;
    border: none;
    color: white;
    padding: 6px;
    border-radius: 5px;
}

.profile-info p {
    font-size: 20px;
    color: white;
}

.profile-info h5 {
    font-size: 25px;
    color: white;
    font-weight: 500;
}

.statistic {
    padding-left: 2rem;
    padding-right: 2rem;
    width: 100%;
    background-color: var(--color-header-bg);
}

.statistic div {
    margin-top: -3rem;
    padding: .625rem 1rem;
    --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    background-color: var(--bg-box);
    border-radius: .375rem;
    width: 48%;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    color: white;
}

.statistic span {
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.statistic svg {
    width: 1rem;
    height: 1rem;
}

.statistic div div {
    text-align: center;
    margin-top: 10px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    font-size: 1rem;
    line-height: 1.5rem;
    padding: .25rem 0;
    background-color: var(--bg-sub-box);
    width: 100%;
    color: var(--color-primary);
}

.red {
    color: #e7515a;
}

.green {
    color: #00AB55;
}

.statistic-info {
    padding: 1.25rem;
    background-color: var(--color-header-bg);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 5px;
}

.radius {
    border-radius: 5px;
}

.statistic-info div:first-child {
    margin-bottom: 1.25rem;
}

.statistic-info div span {
    color: white;
    font-size: .75rem;
    line-height: 1rem;
    padding: .375rem 1rem;
    padding-left: 5px;
    background-color: #1b2e4b;
    border-radius: 50px;
}

.statistic-info div span i {
    margin-right: 6px;
}

.statistic-info div span::before {
    content: "";
    position: relative;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    margin-right: .5rem;
    background-color: white;
}

.statistic-info div p {
    color: #515365;
    font-size: 14px;
}

.statistic-info div:last-child {
    display: flex;
    justify-content: space-around;
}

.statistic-info div:last-child button {
    box-shadow: 1px 1px 5px #817e89;
    padding: 8px 20px;
    border: none;
    border-radius: 5px;
    color: white;
    transition: var(--transition-main);
}

.statistic-info div:last-child button:hover {
    box-shadow: 0px 0px 0px #0000;
}

.bg-purple {
    background-color: #805DCA;
}

.bg-green {
    background-color: #00AB55;
}

.shadow {
    --tw-shadow: 5px 0 25px 0 #5e5c9a1a;
    --tw-shadow-colored: 5px 0 25px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
 
.order-selling {
    padding: 1.25rem;
    padding-bottom: 0;
    border-radius: 5px;
    margin-bottom: 20px;
    background-color: var(--color-header-bg);
    --tw-shadow: 5px 0 25px 0 #5e5c9a1a;
    --tw-shadow-colored: 5px 0 25px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    height: 100%;
}

.recent-orders h5 {
    font-size: 18px;
    color: var(--color-primary);
    font-weight: 600;
}

.order-heading {
    background-color: var(--bg-line);
    border-radius: 5px;
    margin-bottom: 20px;
}

.order-heading div {
    color: var(--aside-heading-color);
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.order-data {
    margin-bottom: 16px;
}

.product-data {
    margin-bottom: 12px;
}

.order-data div {
    padding: 0 10px;
}

.product-data div {
    padding: 0 10px;
}

.logo-name div {
    padding-left: 0;
}

.logo-name div div:last-child {
    font-size: 12px;
}

.order-data div div, .product-data div div {
    font-size: 14px;
}

.logo-name {
    color: var(--color-primary);
}

.logo-name img {
    border-radius: 5px;
    margin-right: .75rem;
}

.logo-name span {
    font-size: 14px;
    color: var(--black-white);
}

.paid span{
    display: inline-block;
    padding: 2px 12px;
    font-size: 14px;
    border-radius: 5px;
    color: white;
    background-color: #00AB55;
}

.paid.purple span {
    background-color: #805dca;
}

.blue {
    color: #2196f3;
}

.yellow {
    color: #e2a03f;
}

.red {
    color: #e7515a;
}

.purple {
    color: #805dca;
}

.grey {
    color: var(--color-lightgrey);
}

.direct svg {
    width: 15px;
    height: 15px;
    margin-right: 3px;
}

.relative {
    position: relative;
}

.grop-down {
    position: absolute;
    right: 20px;
    top: 55px;
    z-index: 10;
    margin-top: .25rem;
    min-width: 120px;
    border-radius: .25rem;
    --tw-bg-opacity: 1;
    background-color: var(--aside-heading-bg);
    padding: .5rem 0;
    --tw-text-opacity: 1;
    color: rgb(14 23 38 / var(--tw-text-opacity));
    --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.grop-down li div {
    padding: 1rem;
}

.grop-down li div div {
    padding: 0rem;
}

.grop-down li div div img{
    border-radius: 10px;
}

.name h4 {
    font-weight: 600;
    color: var(--color-primary);
}

.name a {
    font-size: 14px;
    color: var(--color-lightgrey);
}

.padding {
    padding: .5rem 1rem;
    color: var(--color-lightgrey);
}

.padding svg {
    margin-right: 10px;
}

.grop-down li:last-child a {
    color: #e7515a;
    border-top: 1px solid #e5e7eb;
}

.grop-down li:last-child a svg{
    transform: rotate(90deg);
}

.hover:hover a{
    color: var(--blue-white);
    background-color: var(--bg-color);
}

.grop-down li:first-child div a:hover {
    color: var(--blue-white); 
}


.name h4 {
    font-weight: 600;
    color: var(--color-primary);
}

.name a {
    font-size: 14px;
    color: var(--color-lightgrey);
}

.padding {
    padding: .5rem 1rem;
    color: var(--color-lightgrey);
}

.padding svg {
    margin-right: 10px;
}

.grop-down li:last-child a {
    color: #e7515a;
    border-top: 1px solid #e5e7eb;
}

.grop-down li:last-child a svg{
    transform: rotate(90deg);
}

.hover:hover a{
    color: var(--blue-white);
    background-color: var(--bg-color);
}

.grop-down li:first-child div a:hover {
    color: var(--blue-white); 
}

.padding-bg > td {
    padding: 15px 16px;
}

.color-primary {
    color: var(--color-primary);
}


.padding-bg > td > img {
    border-radius: 5px;
}

.w-36 {
    width: calc(100% - 48px);
}
.name > h4{
    font-weight: 600;
    font-size: 14px;
}

.name > span{
    font-weight: 600;
    font-size: 12px;
}

.bg-grey{
    background-color: var(--bg-line);
    border-radius: 5px;
}

.bg-grey > td {
    font-size: 14px;
}

.menus-icon i {
    font-size: 20px;
}
.direct > svg {
    width: 18px;
    height: 18px;
}

.direct span {
    font-size: 14px;
}

.padding-bg:hover .grey {
    color: var(--color-primary);
}