/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: > 0.01%,last 100 versions,Firefox ESR,not dead
*/

/* For Large Devices (laptops/desktops, 992px and up) */
@media (min-width: 992px) {
    .page-content-wrapper {
        padding-top: min(2vh, 2rem);
    }

    .login .content {
        /*width: 750px !important;*/
    }

    .header {
        position: relative;
        clear: both;
    }

    .page-sidebar.navbar.collapse.show {
        overflow: hidden !important;
        overflow-y: auto !important;
    }

    .header .nav li.dropdown i {
        display: inline-block;
        position: relative;
        top: 1px;
        right: 0px;
    }

    .header .navbar-nav .open .dropdown-menu {
        position: absolute;
        z-index: 53;
    }

    .header .navbar-nav {
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: -moz-inline-box;
        display: inline-flex;
        float: right !important;
    }

        .header .navbar-nav > li {
            float: left;
        }

    .header .navbar-brand {
        margin-left: 0px !important;
        padding-left: 0px !important;
    }

        .header .navbar-brand img {
            margin-left: 4px !important;
        }

    .navbar > .container-fluid {
        justify-content: flex-start !important;
        flex-flow: column nowrap;
    }

    .page-content {
        margin: 0px !important;
    }

        .page-content.no-min-height {
            min-height: auto;
        }

    .page-container {
        padding: 0 !important;
        padding-top: unset !important;
        margin: 0 !important;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 768px) {
    body {
        padding-top: 0px;
        /*flex-direction: row !important;*/
    }

    .page-sidebar-menu-collapse {
        display: flex;
    }

    .navbar-brand img:first-of-type {
        width: min(15vw, 325px);
    }

    .navbar-toggler {
        display: none;
    }

    #DivTopHeader {
        justify-content: flex-end;
    }

    .header-inner {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

    #DivLeftMenu {
        display: flex;
        border-width: inherit !important;
        flex-direction: column;
        flex-wrap: nowrap;
        order: 1;
        width: 20vw !important;
        max-width: 330px;
        inset-block-start: 0;
        position: sticky;
        box-shadow: unset;
    }

        #DivLeftMenu > div {
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: stretch;
            justify-content: flex-start;
            align-content: flex-start;
            height: 100vh;
            background-color: var(--general-background-color);
            border-right: var(--primary-color-border) !important;
            border-width: 0.5px !important;
            border-radius: unset !important;
            padding: 1rem;
            gap: 2.25rem;
        }

    .page-sidebar {
        float: left;
        position: relative;
        border-top: 0 !important;
    }

        .page-sidebar.in {
            border-top: 0 !important;
            margin: 20px;
            position: relative;
            z-index: 5;
        }

        .page-sidebar.navbar.collapse {
            max-height: none !important;
        }

        .page-sidebar ul {
            padding: unset;
            margin-top: 0px;
        }

        /*    .page-sidebar-menu > li > ul.sub-menu > li > a {
        color: var(--primary-color) !important;
    }*/

        .page-sidebar .selected {
            display: none !important;
        }

        .header .sidebar-toggler,
        .page-sidebar .sidebar-toggler {
            display: none;
        }

    .page-sidebar-hovering {
        overflow: hidden !important;
    }

        .page-sidebar-hovering .sub-menu,
        .page-sidebar-hovering span.title,
        .page-sidebar-hovering span.arrow {
            display: none !important;
        }

        .page-sidebar-hovering .submit {
            opacity: 0;
            width: 0 !important;
            height: 0 !important;
        }

    /***
	Fixed Sidebar
	***/

    /***
	Sidebar Closed
	***/

    .page-sidebar-closed .page-sidebar .sidebar-toggler {
        margin-left: 3px;
    }

    .page-sidebar-closed .page-sidebar .sidebar-search .form-container {
        width: 29px;
        margin-left: 3px;
    }

        .page-sidebar-closed .page-sidebar .sidebar-search .form-container .input-box {
            border-bottom: 0 !important;
        }

        .page-sidebar-closed .page-sidebar .sidebar-search .form-container input[type="text"] {
            display: none;
        }

        .page-sidebar-closed .page-sidebar .sidebar-search .form-container .submit {
            margin-top: 5px !important;
            margin-left: 7px !important;
            margin-right: 7px !important;
            display: block !important;
        }

    .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
        width: 255px;
        position: relative;
        z-index: 1;
        padding-top: 0px;
    }

        .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container input[type="text"] {
            margin-top: 7px;
            margin-left: 8px;
            padding-left: 10px;
            padding-bottom: 2px;
            width: 185px;
            display: inline-block !important;
        }

        .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .submit {
            display: inline-block;
            width: 13px;
            height: 13px;
            margin: 11px 8px 9px 6px !important;
        }

        .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {
            background-repeat: no-repeat;
            width: 11px;
            height: 11px;
            margin: 12px 8px 9px 8px !important;
            display: inline-block !important;
            float: left !important;
        }

    .page-sidebar-closed .page-sidebar-menu > li > a .selected {
        right: -3px !important;
    }

    .page-sidebar-closed .page-sidebar-menu > li > a > .title,
    .page-sidebar-closed .page-sidebar-menu > li > a > .arrow {
        display: none !important;
    }

    .page-sidebar-closed .page-sidebar .sidebar-search {
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .page-sidebar-closed .page-sidebar-menu {
        width: 35px !important;
    }

        .page-sidebar-closed .page-sidebar-menu > li > a {
            padding-left: 7px;
        }

        .page-sidebar-closed .page-sidebar-menu > li:hover {
            width: 236px !important;
            position: relative !important;
            z-index: 2000;
            display: block !important;
        }

        .page-sidebar-closed .page-sidebar-menu > li.sidebar-toggler-wrapper:hover,
        .page-sidebar-closed .page-sidebar-menu > li.sidebar-search-wrapper:hover {
            width: 35px !important;
        }

        .page-sidebar-closed .page-sidebar-menu > li:hover .selected {
            display: none;
        }

        .page-sidebar-closed .page-sidebar-menu > li:hover > a > i {
            margin-right: 10px;
        }

        .page-sidebar-closed .page-sidebar-menu > li:hover .title {
            display: inline !important;
        }

        .page-sidebar-closed .page-sidebar-menu > li > .sub-menu {
            display: none !important;
        }

        .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu {
            width: 200px;
            position: absolute;
            z-index: 2000;
            left: 36px;
            margin-top: 0;
            top: 100%;
            display: block !important;
        }

            .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > .sub-menu,
            .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > .sub-menu > li > .sub-menu {
                width: 200px;
            }

            /* 2rd level sub menu*/
            .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > a {
                padding-left: 15px !important;
            }

        /* 3rd level sub menu*/
        .page-sidebar-closed .page-sidebar-menu > li > ul.sub-menu > li > .sub-menu > li > a {
            padding-left: 30px !important;
        }

        /* 4rd level sub menu*/
        .page-sidebar-closed .page-sidebar-menu > li > ul.sub-menu > li > .sub-menu > li > .sub-menu > li > a {
            padding-left: 45px !important;
        }

    /* sidebar container */

    .page-sidebar-closed .page-sidebar {
        width: 35px;
    }

    .page-sidebar-closed .page-content {
        margin-left: 35px !important;
    }

    /***
	Page header
	***/

    .header .top-nav .nav {
        margin-top: 0px;
        margin-right: 5px;
    }

    .header .nav > li > .dropdown-menu.notification:after,
    .header .nav > li > .dropdown-menu.notification:before {
        margin-right: 180px;
    }

    .header .nav > li > .dropdown-menu.notification {
        margin-right: -180px;
    }

    .header .nav > li > .dropdown-menu.inbox:after,
    .header .nav > li > .dropdown-menu.inbox:before {
        margin-right: 140px;
    }

    .header .nav > li > .dropdown-menu.inbox {
        margin-right: -140px;
    }

    .header .nav > li > .dropdown-menu.tasks:after,
    .header .nav > li > .dropdown-menu.tasks:before {
        margin-right: 90px;
    }

    .header .nav > li > .dropdown-menu.tasks {
        margin-right: -90px;
    }

    .header .navbar-brand {
        margin-left: 0px !important;
        width: 110px;
    }

    .header .navbar-nav {
        margin-top: auto;
    }

    .breadcrumb {
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar.collapse {
        border-top: 0;
        box-shadow: none;
    }

        .navbar.collapse.show {
            display: block !important;
            height: auto !important;
            padding-bottom: 0;
            overflow: visible !important;
        }

        .navbar.collapse.in {
            overflow-y: visible;
        }

    .navbar-fixed-top .navbar.collapse,
    .navbar-static-top .navbar.collapse,
    .navbar-fixed-bottom .navbar.collapse {
        padding-right: 0;
        padding-left: 0;
    }

    .header-selections {
        padding-right: 2em;
    }

    /***
	Form input validation states
	***/
    .input-icon .input-error,
    .input-icon .input-warning,
    .input-icon .input-success {
        top: -27px;
        float: right;
        right: 10px !important;
    }

    .section-end.header-selections {
        justify-content: flex-end;
    }

    .widget {
        flex: 1 1 20vw;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media (min-width: 600px) {
    body {
        flex-direction: column;
    }

    .section-start.header-selections {
        flex-grow: 1;
    }
}


/* Extra Small Devices Only (phones, 600px and down) */
@media (max-width: 600px) {
    .header .navbar-nav {
        display: -webkit-inline-box !important;
        display: -webkit-inline-flex !important;
        display: -moz-inline-box !important;
        display: inline-flex !important;
        margin-top: 0px !important;
    }

        .header .navbar-nav > li.dropdown .dropdown-toggle {
            margin-top: -1px;
            padding-left: 8px;
            padding-right: 8px;
        }

        .header .navbar-nav > li.dropdown.user .dropdown-toggle,
        .header .navbar-nav > li.dropdown.language .dropdown-toggle {
            padding-right: 6px;
            padding-left: 6px;
            padding-top: 2.5rem
        }

        .header .navbar-nav li.dropdown .dropdown-toggle .badge {
            top: 8px;
        }

    .page-sidebar,
    .page-sidebar.in {
        margin: 0 2vw 0 2vw;
    }

    .section-end.header-selections {
        justify-content: space-between;
    }
    .flip-card.report-body {

        height: fit-content;
    }    
}
/* Container Query for Special Widgets */
@container flip-cards-grid (max-width: calc(2 * var(--space-mega))) {
    .flip-card-3-1 {
        grid-column: span 2;
    }
}

@container flip-cards-grid (max-width: calc(1 * var(--space-mega))) {
    .flip-card-3-1, .flip-card-2-1 {
        grid-column: span 1;
    }
}

@media (max-width: 950px) {
    nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: var(--space-xs) var(--space-s);
        position: relative;
    }

    .navbar-toggler {
        display: block;
        background: none;
        border: none;
        z-index: 1001;
        margin-left: auto;
        padding: 0;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 2em;
        height: 2em;
        cursor: pointer;
    }

        .hamburger .line {
            width: 100%;
            height: 3px;
            background: var(--primary-color, #299cfc);
            margin: 3px 0;
            border-radius: 2px;
            transition: all 0.3s;
        }

    .nav__links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #ffffff;
        position: static;
        top: 100%;
        left: 0;
        z-index: 1000;
        padding: 1rem 0;
    }

        .nav__links.show-mobile {
            display: flex;
            align-items: baseline;
            /* align-items: stretch;*/
            align-content: flex-start;
        }

        .nav__links li {
            /*width:100%;*/
            /*width: fit-content;*/
            /*padding: 0.75rem 1.5rem;*/
            text-align: left;
            display: flex;
            flex: 1;
            justify-content: space-between;
            align-items: center;
            gap: 0.5rem;
        }

            .nav__links li a {
                /* color: var(--secondary-color);*/
                text-decoration: none;
                flex-grow: 1;
            }

                .nav__links li a:hover {
                    color: var(--primary-color, #299cfc);
                }

            .nav__links li.notification-rounded {
                aspect-ratio: 1 / 1;
                display: flex;
                justify-content: center;
                align-items: center;
                align-content: center;
                flex-direction: row;
                padding: unset !important;
            }

                .nav__links li.notification-rounded > a {
                    flex-grow: unset !important;
                }

            .nav__links li.button-primary {
                width: fit-content;
                margin: 0 10px;
            }

    .nav-wrapper {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        width: 100%;
    }

    .nav__links:has(.notification) {
        width: 100%;
    }

    /*    .date {
        border: none;
    }*/

    /*    .dropdown-default-text {
        display: none !important;
    }*/

    .period-selector i.fa-caret-right {
        display: none;
    }

    /*    .location span {
        display: none;
    }*/
    .location {
        display: flex;
    }

    .main {
        display: flex;
        flex-direction: column;
        align-items: center;
        /*padding: 1rem;*/
        text-align: center;
    }

    .main-left-head {
        padding: 30px;
    }

    .main-left {
        width: 100%;
        order: 1; /* appears first */
    }

    .main-right {
        width: 100%;
        order: 1;
        /*margin-top: 1rem;*/
        display: flex;
        justify-content: center;
    }

    .main-left-head span {
        display: block;
        font-size: xx-large;
        font-weight: bold;
    }

    .main-left-body span {
        font-size: large;
        color: #333;
    }

    .main-right-left,
    .main-right-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

        .main-right-left img,
        .main-right-right img {
            max-width: 90%;
            height: auto;
        }

    .button-primary {
        width: 80%;
        max-width: 300px;
        font-size: medium;
    }

    .background-bottom > span {
        font-size: medium;
    }

    .overview {
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }

    .overview-left,
    .overview-right {
        width: 100%;
    }

        .overview-left img {
            max-width: 100%;
            height: auto;
            display: block;
        }

    .overview-right {
        text-align: left;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        box-sizing: border-box;
    }

    .overview-right-head {
        font-size: xx-large;
        font-weight: bold;
        /* margin-bottom: 0.5rem;*/
    }

    .overview-right-body {
        font-size: large;
        margin-bottom: 1.5rem;
    }

    .overview-right-tail {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .over-right-tail-first {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }

    .digit {
        font-weight: bold;
        margin-top: .25rem;
        font-size: x-large;
        color: var(--primary-color, #299cfc);
    }

    .head-body span:first-child {
        font-weight: bold;
        font-size: large;
        display: block;
        margin-bottom: 0.25rem;
    }

    .head-body span:last-child {
        display: block;
        font-size: medium;
    }




    .container-fluid,
    .container-top,
    .home-dashboard,
    .report-details,
    .advice-details,
    .advice-details-container {
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box;
    }

    .advice-details-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

        .advice-details-container .flip-card-back .save-button span {
            display: none;
        }



    /*        .advice-details-container .flip-card-back .save-button .fa-light{
            border-radius:50%;
        }
*/
    .report-details .flip-card-front {
        max-height: 200px; /* Adjust as needed for your design */
        overflow-y: auto;
        padding-right: 4px; /* Optional: space for scrollbar */
        box-sizing: border-box;
    }

    .widget-container {
        width: 100% !important;
        margin: 0 0 16px 0 !important;
        min-width: 0 !important;
        box-sizing: border-box;
        display: block !important;
    }

    .home-dashboard {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .conatiner-top-head {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 20px;
        padding: 5px;
    }

        .conatiner-top-head .fa-file-invoice, .conatiner-top-head .fa-microchip-ai {
            font-size: xx-large;
            padding: 10px;
        }

        .conatiner-top-head .conatiner-top-head-text {
            padding: 15px 0;
        }
    /* Optional: Adjust modal width for mobile */
    .modal-dialog {
        max-width: 95vw !important;
        margin: 10px auto !important;
    }

    .report {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px;
        width: 100% !important;
    }

    .flip-card.report-body {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        margin: 0 auto 12px auto !important;
        display: flex !important;
        /*height: fit-content;*/
    }

    .report-body-head {
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: space-around;
    }

    .report-body-main,
    .report-body-tail {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .see-more,
    .go-back {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }


    .account-details-button .button-primary {
        width: max-content;
    }

    .account-details .data .admin-section {
        display: flex;
        gap: 1rem;
    }

    .table-admin .table-admin-clients {
        width: 100%;
        font-family: MuseoModerno;
    }

    .payment .button-primary,
    .company .button-primary {
        width: fit-content;
    }

    .nav__links .link.initial.dropdown-btn.notification-rounded {
        display: none !important;
    }

    .bottom-nav__links {
        display: flex;
        flex-direction: column;
        gap: var(--space-m);
    }

        .bottom-nav__links .admin-dropdown {
            margin-right: 116px;
        }

    /* Report Section */
    .container-fluid .template-details .template-head {
        display: flex;
        flex-direction: column;
    }

    .template-button > #template,
    .template-button > .download,
    .template-body > #template-back {
        padding: 10px 10px;
    }

    .template-container {
        max-width: -webkit-fill-available;
    }

    .cover-page .header {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

        .cover-page .header > .generated-by {
            font-size: large;
        }

        .cover-page .header > .myprofit-logo {
            height: 4rem;
        }

    .title-section .main-title,
    .title-section .brand-name,
    .title-section .month {
        font-size: large;
    }

    .cover-wrapper .body-page {
        margin-top: -12px !important;
    }

    .body-page-top {
        padding: 0 !important;
        margin-top: -20px;
        display: flex;
        flex-direction: column;
    }

        .body-page-top > span {
            font-size: x-large;
        }

    .section-wrapper .commentry {
        padding: 0;
        font-size: x-large;
        align-self: center;
        margin-left: 16px;
    }

    .head-commentry, .sub-commentry {
        font-size: x-large !important;
    }

    .body-page-middle .commentry {
        font-size: x-large;
    }
    /*    .body-page .body-page-2 .body-page-middle .cashflow-table tbody tr td{
        font-size:small;
    }*/

    /*    .body-page,
    .body-page-2,
    .body-page-top,
    .body-page-middle,*/
    .cashflow-table,
    .cashflow-table td,
    .cashflow-table th,
    /*.section-wrapper,
    .commentry,
    .commentry-black,
    .box-primary-body-commentry-page-4,
    .box-head-primary,
    .box-primary-body-commentry,*/
    .table-sales,
    .table-sales table,
    .table-sales td,
    .table-sales th,
    .kpi-table-custom th,
    .kpi-table-custom td {
        font-size: 13px !important; /* Small but readable */
    }

        .cashflow-table td,
        .cashflow-table th {
            padding: 6px !important;
        }

        .cashflow-table th {
            text-align: -webkit-center;
        }

    .pill {
        padding: 3px 5px;
        font-size: 13px !important
    }


    .legend-item {
        font-size: 12px;
    }

    .box-primary {
        padding: 10px !important;
    }

    .table-sales table {
        font-size: 12px !important;
    }

    .kpi-performance-table, .kpi-performance-table-year, .table-sales {
        overflow-x: auto;
    }

        .kpi-performance-table::-webkit-scrollbar,
        .kpi-performance-table-year::-webkit-scrollbar,
        .table-x-scroll::-webkit-scrollbar,
        .table-sales::-webkit-scrollbar {
            height: 8px;
        }

        .kpi-performance-table-year::-webkit-scrollbar-thumb {
            background-color: var(--primary-accent-color) !important;
        }

        .table-sales:has(.profit-expense)::-webkit-scrollbar-thumb {
            background-color: var(--primary-accent-color) !important;
            /*border:1px solid orange;*/
        }
    /*    .chart-widget {
        display: block;
        width: 100%;
        overflow-x: auto;
    }*/






    .kpi-table-custom thead th:nth-child(2),
    .kpi-table-custom thead th:nth-child(3),
    .kpi-table-custom thead th:nth-child(4) {
        width: 16.66%;
    }

    .table-x-scroll {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .table-x-scroll table {
            min-width: 800px; /* Adjust as needed */
            width: 100%;
        }

    .head-commentry .Datestyle {
        font-size: x-large;
    }

    .box-head-primary.graph1, .box-head-secondary.graph1 {
        display: flex;
        flex-direction: column;
        gap: 1rem !important;
        width: fit-content;
        align-items: unset !important;
    }

    .title-section .brand-month {
        margin-right: 2rem;
    }

    .content {
        height: 60vh;
    }

    .side {
        display: none;
    }

    .content .content-form .form-actions {
        display: flex;
        flex-direction: row;
    }

    .content .content-form {
        padding: 0;
        border-right: 0;
    }

    .content-form > form, #CustomerSelectForm, #LoginForm {
        display: flex;
        flex-flow: column nowrap;
        padding:20px;
        gap: 0 !important;
        align-items: stretch;
    }

    .forgot-password {
        text-align: justify;
        margin-top: 2rem;
        font-size: 0.95rem;
    }

        .forgot-password a {
            font-size: medium;
        }

    .content .content-form .forgot-password {
        font-weight: var(--app-font-weight-bold);
        font-size: medium;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .content-form img.center {
        max-width: fit-content;
        height: 7vh;
        display: block;
        margin: 0 auto 1rem;
    }

    .content-form .form-element-forgot-password .form-actions .button-ternary {
        padding: 10px 15px !important;
    }

    .content-form .login-logo .logo-caption {
        text-align: center !important
    }


    .content .side {
        display: none;
    }
}
/* Mobile styles for max width 900px */
@media screen and (max-width: 950px) {
/*    .circle {
        width: calc(1.5 * var(--space-2xl));
        height: calc(1.5 * var(--space-2xl));
        border-radius: 50% !important;
    }

        .circle i {
            color: var(--primary-text-color) !important;
            font-size: x-large;
        }*/

    .table-responsive-mobile {
        width: 100%;
        overflow-x: auto;
        display: block;
    }

    .table-admin, .table-admin-clients {
        width: max-content;
        border-collapse: collapse;
        min-width: 600px; /* Set a reasonable min width for horizontal scroll */
    }




        .table-admin th,
        .table-admin-clients th {
            background: #f9f9f9;
            font-weight: 600;
        }

    .button-status {
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 12px;
    }

    .flip-card-back i.fa-objects-column,
    .flip-card-back i.fa-chart-mixed,
    .flip-card-back i.fa-microchip-ai {
        font-size: x-large;
        width: calc(1.5 * var(--space-xl));
        height: calc(1.5 * var(--space-xl));
    }

    .report-body.flip-card .report-body-head i,
    .flip-card-front i.fa-pen, .flip-card-front i.fa-microchip-ai {
        font-size: x-large;
        width: calc(1.8 * var(--space-xl));
        height: calc(1.8 * var(--space-xl));
    }

    .advice-details-container .flip-card-back .save-button i {
        font-size: x-large;
        width: calc(1.5 * var(--space-m));
        height: calc(1.5 * var(--space-m));
    }

}



@media (max-width: 800px) {
    .container > .content {
        /*min-height: 100vh;*/
        /*height: 100vh;*/
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    a:has(> .center) {
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        /* margin-block-end: calc(1 * var(--space-xl)); */
        flex-direction: column;
        gap: 2rem;
    }

    .content-form {
        min-height: 60vh;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
    }

    .content {
        overflow-y: auto;
        overflow-x: hidden;
    }
    .service-testimonials {
        display: flex;
        flex-direction: column;
        border-top-right-radius: 25px !important;
        border-top-left-radius: 25px !important;
    }

    .content-side-left {
        font-size: xx-large !important;
        text-align: justify-all
    }

    .content-side-right {
        margin-top: 2rem;
    }

    .app-testimonials-top {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 1.5rem;
    }

    .contact-left-head {
        font-size: 25px;
    }

    .testimonials-top-content-first,
    .testimonials-top-content-second,
    .testimonials-top-content-third {
        width: 100%;
        text-align: left;
    }

    .testimonials-top-content-second {
        display: flex;
        flex-direction: column;
    }

    .testimonials-top-content-first-head img {
        max-width: 160px;
        height: auto;
    }

    .testimonials-top-content-first-body .head {
        display: block;
        font-size: large !important;
        font-weight: bold;
        margin-top: 1rem;
    }

    .testimonials-top-content-first-body .body {
        font-size: medium;
        color: #ccc;
        margin-top: 0.5rem;
    }

    .testimonials-top-content-first-tail span {
        display: block;
        margin-top: 0.5rem;
        font-size: medium;
    }

    .testimonials-top-content-first-tail a {
        color: var(--primary-color, #299cfc);
        text-decoration: none;
    }

    .testimonials-top-content-second-top,
    .testimonials-top-content-third-top {
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 0.75rem;
    }

    .testimonials-top-content-second-body ul,
    .testimonials-top-content-third-body ul {
        padding-left: 1rem;
    }

    .testimonials-top-content-second-body li,
    .testimonials-top-content-third-body li {
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }

    .testimonials-top-content-second-body a,
    .testimonials-top-content-third-body a {
        color: white;
        text-decoration: none;
    }

        .testimonials-top-content-second-body a:hover,
        .testimonials-top-content-third-body a:hover {
            color: var(--primary-color, #299cfc);
        }
    /*    .contact-left-tail > .button-primary{
        width:50%;
    }*/

    .main-body-top {
        font-size: 17px;
    }

    .main-body-tail > span {
        font-size: medium;
        text-align: justify;
    }

    .toolbar-bottom ul li {
        margin-left: 1.5rem;
    }

    .toolbar-bottom-top {
        font-size: medium;
        margin-top: 20px
    }

    .circle {
        width: calc(1.5 * var(--space-xl));
        height: calc(1.5 * var(--space-xl));
        border-radius: 50% !important;
    }

        .circle i {
            color: var(--primary-text-color) !important;
            font-size: x-large;
        }

        .circle img {
            width: 3rem;
        }

    .step p {
        display: none;
    }

    .line {
        margin-top: 20px;
    }

    .icon-modal {
        margin-top: 20px;
    }

    .mobile-notifications {
        position: absolute;
        display: flex;
        flex-direction: row;
        gap: 1rem;
        right: 4rem;
        top: 1.5rem;
        /* z-index: 1002;*/
    }

        .mobile-notifications .notification, .mobile-notifications .initial {
            width: var(--space-xl);
            height: var(--space-xl);
        }

            .mobile-notifications .notification i, .mobile-notifications .initial i {
                font-size: 15px;
            }

    .nav__links li.notification {
        display: none !important;
    }



    .account-details-user {
        display: flex;
        flex-direction: column;
        height: 70vh;
    }

        .account-details-user .add-user > .input-group,
        .account-details-user .add-client > .input-group {
            display: flex;
            flex-direction: column;
            align-content: flex-start;
            margin-top: -20px;
        }

        .account-details-user .add-client > .input-group {
            margin-bottom: 20px;
        }

            .account-details-user .add-user > .input-group div,
            .account-details-user .add-client > .input-group div {
                width: 100%;
            }

        .account-details-user .client-subscription {
            margin-top: -50px;
        }

    .account-details .add-new-user {
        font-size: x-large;
        align-self: center;
    }

    .manage-roles {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 24px;
        /*padding: 0 15px 20px;*/
        width: 100%;
        box-sizing: border-box;
        justify-items: start;
    }

        .manage-roles label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
            line-height: 1.4;
            white-space: nowrap;
            padding-left: 4px;
        }

        .manage-roles input[type="checkbox"] {
            transform: scale(1.2);
            margin: 0;
        }

    .account-details-user .add-top-bar .add-buttons {
        display: flex;
        gap: 1rem;
        /* margin-left:73px;*/
    }

    .template-box, .logo-box {
        height: calc(2*var(--space-3xl));
    }
}


@media (max-width: 950px) {
    .container {
        padding: 1rem;
    }

    .mobile-notifications {
        position: absolute;
        display: flex;
        flex-direction: row;
        gap: 1rem;
        right: 4rem;
        top: 1.5rem;
        /* z-index: 1002;*/
    }

        .mobile-notifications .notification, .mobile-notifications .initial {
            width: calc(1*var(--space-xl));
            height: calc(1*var(--space-xl));
        }

            .mobile-notifications .notification i, .mobile-notifications .initial i {
                font-size: 15px;
            }

    .nav__links li.notification {
        display: none !important;
    }



    .form-group {
        margin-bottom: 1.25rem;
    }

        .form-group p {
            font-size: 1.2rem;
            text-align: center;
        }


    .input-icon .form-control {
        padding: 0.75rem 2.5rem 0.75rem 2.5rem; /* left & right spacing for icons */
        width: 100%;
        font-size: 1rem;
    }

    .form-error {
        font-size: 0.9rem;
        color: red;
        margin-bottom: 1rem;
    }

    .form-actions.remember-me {
        margin-bottom: 1.25rem;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .form-actions {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .button-primary {
        width: 100%;
        font-size: medium;
        padding: var(--space-s) var(--space-m);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border: none;
        cursor: pointer;
        width: auto;
    }

    .xero-logo {
        height: 20px;
        margin-right: 0.5rem;
    }


    .payment-plans button.button-primary {
        width: 50% !important;
        margin: 1rem auto 0;
        display: block;
        font-size: 0.95rem;
        padding: 0.6rem 1rem;
    }
}

@media (max-width: 600px) {
    .login .content {
        padding: 30px;
        width: 80vw;
        height: 100%;
    }
}
@media (min-width:844px) and (max-width: 852px) {
    .container > .content {
        min-height: 100vh;
        height: fit-content;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .form-group p {
        padding-bottom: 0;
    }

    a:has(> .center) {
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin-block-end: 0 !important;
        flex-direction: column;
        gap: 2rem;
    }

    .content-form {
        min-height: 60vh;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
    }

    .content {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .content-form > form, #CustomerSelectForm, #LoginForm {
        display: flex;
        height: inherit;
        flex: 1;
        flex-flow: column nowrap;
        gap: var(--space-xl);
        align-items: stretch;
    }
    .content-form img.center {
        max-width: fit-content;
        height: 13vh;
        display: block;
        margin: 0 auto 1rem;
    }
    .form-group p {
        padding-bottom: 0;
    }
}
@media (min-width:854px) and (max-width: 896px) {
    .container > .content {
        min-height: 100vh;
        height: fit-content;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .form-group p {
        padding-bottom: 0;
    }

    a:has(> .center) {
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin-block-end: 0 !important;
        flex-direction: column;
        gap: 2rem;
    }

    .content-form {
        min-height: 60vh;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
    }

    .content {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .content-form > form, #CustomerSelectForm, #LoginForm {
        display: flex;
        height: inherit;
        flex: 1;
        flex-flow: column nowrap;
        gap: var(--space-xl);
        align-items: stretch;
    }

    .content-form img.center {
        max-width: fit-content;
        height: 13vh;
        display: block;
        margin: 0 auto 1rem;
    }

    .form-group p {
        padding-bottom: 0;
    }
}
@media (min-width: 913px) and (max-width: 949px) {
    .container > .content {
        min-height: 100vh;
        height: 100vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .form-group p {
        padding-bottom: 0;
    }

    a:has(> .center) {
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin-block-end: 0 !important;
        flex-direction: column;
        gap: 2rem;
    }

    .content-form {
        min-height: 60vh;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
    }

    .content {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .content-form > form, #CustomerSelectForm, #LoginForm {
        display: flex;
        height: inherit;
        flex: 1;
        flex-flow: column nowrap;
        gap: var(--space-xl);
        align-items: stretch;
    }

    .content-form img.center {
        max-width: fit-content;
        height: 13vh;
        display: block;
        margin: 0 auto 1rem;
    }
    .content-form > form, #CustomerSelectForm, #LoginForm {
        padding: 20px !important;
    }

    .form-group p {
        padding-bottom: 40px;
    }

    .content {
        height: 60vh;
    }

    .toolbar-bottom ul {
        margin-left: 10px;
    }
}
@media(max-width:400px){
    .mobile-notification li.initial {
        display: flex;
        gap: .25rem;
        right: 3.5rem;
        margin-right:-6px!important;
    }
    .account-details .data .admin-section{
        display:flex;
        gap:.5rem
    }
}


@media (max-width: 950px) {
    /*.container > .content {
        min-height: 100vh;
        height: 100vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    a:has(> .center) {
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;*/
        /* margin-block-end: calc(1 * var(--space-xl)); */
        /*flex-direction: column;
        gap: 2rem;
    }

    .content-form {
        min-height: 60vh;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
    }

    .content {
        overflow-y: auto;
        overflow-x: hidden;
    }*/

    .container-fluid > 
    .data.account-details-user {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        box-sizing: border-box;
        overflow-y: auto;
        /* Prevent horizontal scroll unless needed */
        overflow-x: hidden;
        /* Ensure padding does not cause overflow */
        padding-bottom: 0 !important;
    }

    .account-details-user {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        box-sizing: border-box;
        background: #fff; /* Optional: for clarity */
    }
    /* Optional: ensure footer stays at the bottom */
    body, html {
        height: 100%;
        min-height: 100%;
    }
    .account-details .data .form-step {
        overflow-x: hidden;
    }

    .delete-btn, .delete-btns, .delete-btn-client, .delete-btns-client,
    .edit-btn, .edit-btns, .edit-btn-client, .edit-btns-client, .invite-btn-client {
        width: var(--space-xl);
        height: var(--space-xl);
    }

    .table-admin {
        width: auto;
    }

    .table-responsive-mobile > .table-admin {
        width: inherit;
/*        display:flex;
        flex-direction:column;*/
    }


}

@media(min-width:951px){
    .container-fluid >
    .data.account-details-user {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        box-sizing: border-box;
        overflow-y: auto;
        /* Prevent horizontal scroll unless needed */
        overflow-x: hidden;
        /* Ensure padding does not cause overflow */
        padding-bottom: 0 !important;
    }

    .account-details-user {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        box-sizing: border-box;
        background: #fff; /* Optional: for clarity */
    }
    /* Optional: ensure footer stays at the bottom */
    body, html {
        height: 100%;
        min-height: 100%;
    }

}
@media(max-width:780){
    .report-details .container-top .report {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        margin: 0 auto 12px auto !important;
        display: flex !important;
        height: fit-content; 
    }  
}