.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    background: var(--bg-ffffff);
    border-radius: 14px;
    text-decoration: none;
    transition: .3s;
    box-shadow: 0 4px 12px var(--sh-000000-a008);
}

.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px var(--sh-000000-a015);
}

.stat-card-filter {
    color: inherit;
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.stat-card-filter:hover {
    color: inherit;
}

.stat-card-filter.is-active {
    outline-color: var(--primary);
    background: var(--primary-tint);
}

.stat-card-filter:focus-visible {
    outline-color: var(--primary);
}

.stat-icon {
    width: 46px;
    height: 46px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 17px;
    color: var(--fg-ffffff);
}

.stat-primary .stat-icon {
    background: linear-gradient(135deg, var(--primary-bright), var(--primary-deep))
}

.stat-success .stat-icon {
    background: linear-gradient(135deg, var(--bg-10b981), var(--bg-059669))
}

.stat-warning .stat-icon {
    background: linear-gradient(135deg, var(--bg-f59e0b), var(--bg-d97706))
}

.stat-danger .stat-icon {
    background: linear-gradient(135deg, var(--bg-ef4444), var(--bg-dc2626))
}

.stat-purple .stat-icon {
    background: linear-gradient(135deg, var(--bg-8b5cf6), var(--bg-7c3aed))
}

.stat-info .stat-icon {
    background: linear-gradient(135deg, var(--bg-14b8a6), var(--bg-0d9488))
}

.stat-number {
    font-size: 19px;
    font-weight: 700;
    margin: 0;
    color: var(--ink);
}

.stat-label {
    font-size: 12.5px;
    color: var(--fg-6b7280);
    margin: 0;
}

.info-card {
    position: relative;
    display: block;
    padding: 18px;
    border-radius: 16px;
    color: var(--fg-ffffff);
    overflow: hidden;
    transition: .4s;
    box-shadow: 0 6px 20px var(--sh-000000-a015);
}

.info-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.info-blue {
    background: linear-gradient(135deg, var(--bg-3b82f6), var(--bg-2563eb))
}

.info-green {
    background: linear-gradient(135deg, var(--bg-10b981), var(--bg-059669))
}

.info-purple {
    background: linear-gradient(135deg, var(--bg-8b5cf6), var(--bg-7c3aed))
}

.info-orange {
    background: linear-gradient(135deg, var(--bg-f97316), var(--bg-ea580c))
}

.info-teal {
    background: linear-gradient(135deg, var(--bg-14b8a6), var(--bg-0d9488));
}

.info-gold {
    background: linear-gradient(135deg, var(--bg-facc15), var(--bg-eab308));
}

.info-number {
    font-size: 22px;
    font-weight: 700;
}

.info-label {
    font-size: 13px;
    opacity: .95;
}

.bg-icon {
    position: absolute;
    bottom: -20px;
    left: -10px;
    font-size: 5rem;
    opacity: .15;
}

.profile-bar {
    position: relative;
    border: 1px solid var(--bd-cbcbcb);
    border-radius: 10px;
    word-wrap: break-word;
    background-color: var(--bg-ffffff);
}

.profile-bar .main-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
}

.profile-bar .main-info .user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-bar .main-info .user .img-holder {
    position: relative;
    width: 60px;
    height: 60px;
}

.profile-bar .main-info .user .img-holder img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 5px var(--sh-ffffff);
}

.profile-bar .main-info .user .img-holder .icon-holder {
    position: absolute;
    background-color: var(--bg-ffffff);
    left: -5px;
    bottom: -5px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-bar .main-info .user .img-holder .icon-holder i,
.profile-bar .main-info .user .img-holder .icon-holder svg {
    font-size: 19px;
    color: var(--fg-007df1);
}

.profile-bar .main-info .user .data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.profile-bar .main-info .user .data .name {
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 700;
}

.profile-bar .main-info .user .data .work {
    font-size: 11px;
    font-weight: 500;
}

.profile-bar .main-info .user .data .title {
    margin-bottom: 0;
    font-size: 114px;
}

.bar-list-no {
    list-style: none;
    margin: 0;
    margin-bottom: 16px;
    padding: 0;
}

.bar-list-no li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bd-000000-a0125);
    padding: 13px 15px;
}

.bar-list-no li .key {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.bar-list-no li .key i,
.bar-list-no li .key svg {
    font-size: 12px;
    color: var(--fg-999999);
}

.bar-list-no li .key .name {
    font-size: 12px;
    font-weight: 600;
}

.bar-list-no li .value {
    margin: 0;
    font-weight: 600;
    font-size: 12px;
}

.box-invoice {
    border: 2px solid var(--bd-000000);
    border-radius: 10px;
    padding: 0 10px;
    margin-bottom: 8px;
}

.box-invoice p {
    margin-bottom: 2px;
    font-size: 14px;
}

.box-invoice h6 {
    font-size: 13px;
}

@media print {
    .box-invoice .col-md-4.p-3 {
        width: 33.3333333333%;
    }

    .box-invoice .col-md-4.p-3 * {
        font-size: 13px;
    }

    .box-invoice .col-md-4.p-3 img {
        width: 100px;
    }
}

.wallet-section .navbar {
    background-color: var(--bg-2e5789);
    padding: 1rem 2rem;
    color: var(--fg-ffffff);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wallet-section .navbar-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--fg-ffffff);
}

.wallet-section .vendor-circle {
    width: 40px;
    height: 40px;
    background-color: var(--bg-ffffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wallet-section .main-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.wallet-section .balance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 2rem;
}

.wallet-section .balance-box {
    background-color: var(--bg-ffffff);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 4px var(--sh-000000-a01);
}

.wallet-section .balance-box-title {
    color: var(--fg-666666);
    color: var(--fg-ffffff);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.wallet-section .balance-box-amount {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--fg-ffffff);
}

.wallet-section .total-balance {
    border-right: 4px solid var(--bd-26a69a);
    background-color: var(--bg-26a69a);
}

.wallet-section .overall-balance {
    background-color: var(--bg-1a237e);
    border-right: 4px solid var(--bd-1a237e);
}

.wallet-section .withdrawable-balance {
    background-color: var(--bg-ef5350);
    border-right: 4px solid var(--bd-ef5350);
}

.wallet-section .available-balance {
    background-color: var(--bg-080a23);
    border-right: 4px solid var(--bd-080a23);
}

.wallet-section .actions-container {
    background-color: var(--bg-ffffff);
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px var(--sh-000000-a01);
}

.wallet-section .withdraw-button {
    background-color: var(--bg-1a237e);
    color: var(--fg-ffffff);
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.wallet-section .withdraw-button:hover {
    background-color: var(--bg-2c387e);
}

.wallet-section .transactions-container {
    background-color: var(--bg-ffffff);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 4px var(--sh-000000-a01);
}

.wallet-section .transactions-title {
    color: var(--fg-333333);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bd-eeeeee);
}

.wallet-section .transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--bd-eeeeee);
}

.wallet-section .transaction-details {
    display: grid;
    gap: 0.3rem;
}

.wallet-section .transaction-account {
    color: var(--fg-666666);
    font-size: 0.9rem;
}

.wallet-section .transaction-date {
    color: var(--fg-888888);
    font-size: 0.8rem;
}

.wallet-section .transaction-amount {
    color: var(--fg-1a237e);
    font-weight: bold;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .wallet-section .balance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wallet-section .main-container {
        padding: 0 1rem;
    }
}

.box-data {
    background-color: var(--bg-6284a7-a007);
    border-radius: 20px;
    padding: 20px;
}

.box-data .bar-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.box-data .bar-name .name {
    flex: 1;
    font-size: 23px;
    font-weight: 600;
    margin: 0;
}

.box-data .bar-name .box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: var(--bg-6284a7-a007);
}

.box-data .bar-name .box-icon img {
    width: 23px;
}

.box-data .bar-name .box-icon i,
.box-data .bar-name .box-icon svg {
    font-size: 23px;
    color: var(--fg-ffffff);
}

.box-data .amount {
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 10px;
}

.box-data .more {
    color: var(--fg-2e5789);
    font-weight: 500;
    font-size: 14px;
}

.box-data .more img {
    margin-right: 6px;
}

.box-data.box-main-color .box-icon {
    background-color: var(--bg-2e5789);
}

.box-data.box-main-color .box-icon img {
    width: 27px;
}

.box-data.box-blue {
    background-color: var(--bg-e3f5ff);
}

.box-data.box-blue .box-icon {
    background-color: var(--bg-1e88e5);
}

.box-data.box-blue .box-icon img {
    width: 30px;
}

.box-data.box-orange {
    background-color: var(--bg-fff2e3);
}

.box-data.box-orange .box-icon {
    background-color: var(--bg-f99132);
}

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

.box-data.box-green .box-icon {
    background-color: var(--bg-0fc859);
}

.box-data.box-purple {
    background-color: var(--bg-f2e7fd);
}

.box-data.box-purple .box-icon {
    background-color: var(--bg-8d1ee5);
}

.box-data.box-purple .box-icon img {
    width: 27px;
}

.box-data.box-red {
    background-color: var(--bg-fde7e7);
}

.box-data.box-red .box-icon {
    background-color: var(--bg-ff3636);
}

.box-data.box-red .box-icon img {
    width: 27px;
}

.box-content-white {
    background-color: var(--bg-ffffff);
    border: 1px solid var(--bd-dfdfdf);
    border-radius: 20px;
    padding: 20px;
}

.box-content-white .box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.option-circle .circle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.option-circle .circle:first-child {
    margin-bottom: 6px;
}

.option-circle .circle:first-child span {
    background-color: var(--bg-0fc859);
}

.option-circle .circle:last-child span {
    background-color: var(--bg-8d1ee5);
}

.option-circle .circle span {
    display: block;
    border-radius: 50%;
    width: 16px;
    height: 16px;
}

.option-circle .circle p {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0px;
}

.box-selected {
    border: 1px solid var(--bd-e0e0e0);
    border-radius: 8px;
    padding: 10px 10px 10px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    flex-wrap: wrap;
}

.box-selected .info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.box-selected .info span {
    font-weight: 600;
    font-size: 15px;
    color: var(--fg-0f0f0f);
}

.issue-main-info {
    background-color: var(--bg-ffffff);
    border: 1px solid var(--bd-dee2e6);
    border-radius: 0.375rem;
    padding: 16px;
}

.issue-main-info .content-header {
    color: var(--fg-525f71);
    font-size: 15px;
    margin-bottom: 16px;
    font-weight: 600;
    display: flex;
    border-bottom: 1px solid var(--bd-dee2e6);
    padding-bottom: 16px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.issue-main-info ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.issue-main-info ul li i,
.issue-main-info ul li svg {
    font-size: 45px;
    color: var(--fg-2e5789);
    margin-bottom: 15px;
}

.issue-main-info ul li .main-title {
    margin-bottom: 15px;
    font-weight: 700;
    background-color: var(--bg-e3f5ff);
    padding: 10px;
    font-size: 18px;
    color: var(--fg-2e5789);
}

.issue-main-info ul li .main-title span {
    display: inline-block;
    font-size: 19px;
}

.issue-main-info ul li .title {
    font-weight: 700;
    margin-bottom: 13px;
    font-size: 13px;
    padding: 10px;
    color: var(--fg-2e5789);
}

.issue-main-info ul li .title.bg-red {
    background-color: var(--bg-fde7e7);
    color: var(--fg-ff3636);
}

.issue-main-info ul li .title.bg-green {
    color: var(--fg-0fc859);
    background-color: var(--bg-e3ffe6);
}

.issue-main-info ul li .info-grey {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 14px;
    color: var(--fg-6b7280);
}

.issue-main-info ul li .info {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 13px;
    color: var(--fg-2e5789);
}

.issue-main-info ul li .info:last-child {
    margin-bottom: 15px;
}

.issue-main-info ul li:not(:last-child) {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--bd-dee2e6);
}

.box-nums {
    border-radius: 8px;
    border: 1px solid var(--bd-dfe0eb);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: var(--bg-ffffff);
    padding-bottom: 8px;
    flex-direction: column;
    transition: 300ms;
}

.box-nums .text,
.box-nums .num {
    color: var(--fg-ffffff);
}

.box-nums .text {
    font-size: 18px;
    font-weight: 600;
}

.box-nums .num {
    font-size: 40px;
    font-weight: 700;
}

.box-nums:hover {
    transform: scale(1.02);
}

.box-nums.box-green {
    background-color: var(--bg-0fc859);
}

.box-nums.box-red {
    background-color: var(--bg-e52929);
}

.box-nums.box-purple {
    background-color: var(--bg-8d1ee5);
}

.box-nums.box-main {
    background-color: var(--bg-2e5789);
}

.box-nums.box-blue {
    background-color: var(--bg-1e88e5);
}

.box-nums.box-orange {
    background-color: var(--bg-f99132);
}

.box-statistic {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    min-height: 140px;
    padding: 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--bd-e9ebec);
    box-shadow: 0 1px 2px var(--sh-38414a-a01);
    background-color: hsl(36, 85%, 95%);
    transition: all 0.4s;
}

.box-statistic .right-side,
.box-statistic .left-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
}

.box-statistic .right-side {
    align-items: flex-start;
}

.box-statistic .right-side .name {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--fg-333333);
}

.box-statistic .right-side .amount {
    font-weight: 700;
    font-size: 25px;
    margin-bottom: 0rem;
    line-height: 1.2;
    color: var(--fg-333333);
}

.box-statistic .right-side .link-view {
    text-decoration: underline;
    color: var(--fg-333333);
    font-size: 13px;
}

.box-statistic .left-side {
    align-items: flex-end;
}

.box-statistic .left-side .status-number {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0;
    color: var(--fg-878a99);
}

.box-statistic .left-side .status-number.up {
    color: var(--fg-0ab39c);
}

.box-statistic .left-side .status-number.down {
    color: var(--fg-f06548);
}

.box-statistic .left-side .icon-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 0.25rem;
    font-weight: 500;
    font-size: calc(1.2671875rem + 0.20625vw);
    background-color: var(--bg-ff9700);
    color: var(--fg-ffffff);
}

.box-statistic.purple {
    background-color: var(--bg-f3e7fd);
}

.box-statistic.purple .left-side .icon-holder {
    background-color: var(--bg-8d1fe2);
}

.box-statistic.green {
    background-color: var(--bg-daf4f0);
}

.box-statistic.green .left-side .icon-holder {
    background-color: var(--bg-0ab39c);
}

.box-statistic.blue {
    background-color: var(--bg-dff0fa);
}

.box-statistic.blue .left-side .icon-holder {
    background-color: var(--bg-299cdb);
}

.box-statistic.yellow {
    background-color: hsl(49, 85%, 95%);
}

.box-statistic.yellow .left-side .icon-holder {
    background-color: var(--bg-ffd621);
}

.box-statistic.red {
    background-color: var(--bg-fde7e7);
}

.box-statistic.red .left-side .icon-holder {
    background-color: var(--bg-fe3734);
}

.box-statistic:hover {
    transform: translateY(-0.3rem);
    box-shadow: 0 5px 10px var(--sh-1e2025-a012);
}

.blue-box {
    background-color: var(--bg-17a2b8);
}

.success-box {
    background-color: var(--bg-28a745);
}

.danger-box {
    background-color: var(--bg-dc3545);
}

.warning-box {
    background-color: var(--bg-ffc107);
}

.blue-icon {
    color: var(--fg-148a9d);
}

.success-icon {
    color: var(--fg-228e3b);
}

.danger-icon {
    color: var(--fg-bb2d3b);
}

.warning-icon {
    color: var(--fg-d9a406);
}

.list-date {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-date li:not(:last-child) {
    margin-bottom: 10px;
}

.box-date {
    display: flex;
    border: 1px solid var(--bd-000000-a0102);
    border-radius: 8px;
    padding: 10px;
    align-items: center;
    justify-content: space-around;
}

.box-date .day {
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 16.8px;
    text-align: right;
    color: var(--fg-444444);
}

.box-date input[type=time] {
    border: none;
    width: 90px;
    color: var(--fg-444444);
}

.box-date .form-check {
    min-height: 0.5rem;
}

.box-date .form-check input {
    width: 1.4em;
    height: 1.4em;
    cursor: pointer;
}

.box-pro-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    min-height: 60.8PX;
    padding: 8px 10px;
    border-radius: 10px;
    border: 2px dashed var(--bd-dee2e6);
    transition: all 0.3s ease;
    background-color: var(--bg-f8f9fa);
}

.box-pro-info .title-holder {
    margin-bottom: 0;
    font-size: 12px;
    color: var(--fg-656c73);
}

.box-pro-info .title-holder i,
.box-pro-info .title-holder svg {
    color: var(--fg-9da5ad);
}

.box-pro-info .info {
    margin-bottom: 0;
    font-size: 12px;
    color: var(--fg-656c73);
}

.box-pro-info.work-hour {
    gap: 10px;
}

.box-pro-info.work-hour .up-holder {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.box-pro-info.work-hour .info {
    width: 100%;
    font-size: 11px;
    text-align: center;
}

.box-pro-info.work-hour .info i,
.box-pro-info.work-hour .info svg {
    color: var(--fg-9da5ad);
    font-size: 10px;
}

.box-pro-info.work-hour .info span {
    margin: 0 2px;
}

.block-file-img {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
}

.block-file-img .box-img {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.block-file-img .box-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.box-price {
    padding: 25px;
    border: 1px solid var(--bd-000000-a0102);
    background-color: var(--bg-ffffff);
    margin-bottom: 20px;
    border-radius: 5px;
}

.box-price .show_price_swiper .img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 5px;
}

.box-price .show_price_swiper .swiper-pagination {
    position: static !important;
    margin-top: 8px !important;
}

.box-price .show_price_swiper .swiper-pagination .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
}

.box-price .show_price_swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--bg-182b7b) !important;
}

.box-price .content-box .header-box {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.box-price .content-box .header-box .title-box {
    font-size: 19px;
    font-weight: 500;
    line-height: 27px;
    color: var(--fg-182b7b);
    margin-bottom: 0;
}

.box-price .content-box .header-box .date-box {
    font-size: 17px;
    font-weight: 400;
    line-height: 27px;
    color: var(--fg-000000);
}

.box-price .content-box .text-box {
    font-size: 15px;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 1rem;
    text-align: justify;
}

.box-price .content-box .data-box {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.box-price .content-box .data-box .item {
    font-size: 15px;
    font-weight: 500;
    line-height: 22.03px;
}

.box-price .content-box .data-box .item .color {
    color: var(--fg-182b7b);
}

.box-offer {
    border-radius: 5px;
    padding: 25px;
    border: 1px solid var(--bd-000000-a0102);
    background-color: var(--bg-ffffff);
    margin-bottom: 20px;
}

.box-offer .info-user {
    display: flex;
    gap: 10px;
    align-items: start;
    margin-bottom: 1rem;
}

.box-offer .info-user .img-user {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.box-offer .info-user .name {
    font-size: 17px;
    font-weight: 500;
    line-height: 27px;
    margin-bottom: 0;
}

.box-offer .info-user .stars {
    display: flex;
}

.box-offer .info-user .stars svg,
.box-offer .info-user .stars i {
    color: var(--fg-cbcdce);
    font-size: 13px;
}

.box-offer .info-user .stars svg.active,
.box-offer .info-user .stars i.active {
    color: var(--fg-ffba4d);
}

.box-offer .date {
    font-size: 13px;
    font-weight: 500;
    line-height: 35px;
}

.box-offer .text-box {
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 30px;
    text-align: justify;
}

.box-offer .details-box {
    height: 100%;
    padding-inline-start: 1rem;
    border-inline-start: 1px solid var(--bd-000000-a02);
}

.box-offer .details-box .title-details-box {
    font-size: 17px;
    font-weight: 700;
    line-height: 35px;
    color: var(--fg-182b7b);
    margin-bottom: 1rem;
}

.box-offer .details-box .item {
    font-size: 15px;
    font-weight: 500;
    line-height: 35px;
}

.box-offer .details-box .item:not(:last-of-type) {
    margin-bottom: 0.3rem;
}

.box-offer.green {
    background-color: var(--bg-73ff96-a0169);
}

.box-offer.grey {
    background-color: var(--bg-f8f8f8);
}

.box-offer.grey .info-user .name {
    color: var(--fg-182b7b);
}

.details-card {
    background: var(--bg-ffffff);
    border: 1px solid var(--bd-eeeeee);
    border-radius: 12px;
    padding: 1.5rem;
}

.details-card .special-label {
    color: var(--fg-6b7280);
    font-size: 12px;
}

.sortable-ghost {
    opacity: 0.4;
}

.details-card {
    border-color: var(--line);
}

@media (max-width: 575.98px) {
    .stat-card,
    .info-card {
        padding: 1rem;
    }

    .info-number {
        font-size: 1.8rem;
    }
}

.patient-header-photo,
.doctor-header-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--fg-94a3b8);
    flex: none;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--fg-111827);
    margin: 0;
}

.profile-subtitle {
    font-size: 12.5px;
    color: var(--fg-6b7280);
    margin-top: 2px;
}

.profile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 10px;
}

.profile-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--fg-374151);
    flex-wrap: wrap;
}

.profile-meta-item>i {
    color: var(--fg-9ca3af);
    font-size: 12.5px;
    width: 14px;
    text-align: center;
}

@media (max-width: 575.98px) {
    .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-name-row,
    .profile-meta {
        justify-content: center;
    }
}

.profile-note {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--bd-e5e7eb);
    font-size: 12.5px;
    color: var(--fg-6b7280);
}

.mini-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border-radius: 12px;
    background: var(--bg-ffffff);
    border: 1px solid var(--bd-eef1f5);
    text-decoration: none;
    height: 100%;
    transition: .2s;
}

.mini-stat-card:hover {
    border-color: var(--bd-e2e8f0);
    box-shadow: 0 6px 16px var(--sh-111827-a006);
}

.mini-stat-icon {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-ffffff);
    font-size: 16px;
}

.mini-stat-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mini-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-6b7280);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-stat-number {
    font-size: 17px;
    font-weight: 800;
    color: var(--fg-111827);
    line-height: 1.2;
}

.mini-stat-teal .mini-stat-icon {
    background: var(--primary-bright);
}

.mini-stat-blue .mini-stat-icon {
    background: var(--primary);
}

.mini-stat-amber .mini-stat-icon {
    background: var(--primary-deep);
}

.mini-stat-rose .mini-stat-icon {
    background: var(--bg-e11d48);
}

.mini-stat-indigo .mini-stat-icon {
    background: var(--primary-deep);
}

.notes-timeline {
    border-right: 3px solid var(--bd-dee2e6);
    padding-right: 16px;
}

.notes-timeline .note-item {
    position: relative;
    margin-bottom: 18px;
}

.notes-timeline .note-item::before {
    content: "";
    position: absolute;
    right: -21px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-bright);
}