:root {
    --font-title: 14px;
    --font--sub-title: 12px;
    --font-small : 10px;
    --small-margin: 5px;
    --medium--margin: 10px;
    --large--margin : 1rem;
}

@media (max-width: 359px) {
    .book-top-value {
        font-size: var(--font-title);
    }

    .book-account-card {
        margin-bottom: var(--medium--margin);
    }

    .book-remaining-value {
        font-size: var(--font-title);
    }

    .book-account-title {
        font-size: var(--font-title);
    }

    .book-message {
        font-size: var(--font-title);
    }

    .book-info-value {
        font-size: var(--font--sub-title);
    }

    .book-bottom-info {
        border-top: unset;
        display: flex;
        flex-direction: column;
        margin: 10px ;
    }

    .last-activity__title{
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .book-info-item{
        display: flex;
        align-items: center;
        justify-content: space-evenly !important;
    }

    .book-info-label{
        margin-bottom: unset !important;
        margin-left: 1rem;
    }

    .book-info-item:not(:last-child) {
        border-left: unset !important;
    }

    .financial-tabs {
        display: flex;
        flex-wrap: wrap;
    }

    .financial-tab {
        margin-bottom: var(--large--margin);
        margin-top: var(--large--margin);
        padding: var(--medium--margin);
    }

    .financial-tab__link {
        font-size: var(--font-small);
    }

    .financial-tab__title {
        font-size: var(--font-small);
    }
    .payment-card{
        gap : unset;
    }
    .payment-icon{
        display: none;
    }
    .payment-amount{
        flex: unset;
        font-size: var(--font-small);
    }
    .payment-title{
        font-size: var(--font--sub-title);
    }
    .payment-date {
        font-size: var(--font-small);
    }
    #uuid_5420a8s47r5f256d{
        height: 4rem !important;
        width: 4rem !important;
    }
}
@media (max-width: 480px) {
    #uuid_5420a8s47r5f256d{
        height: 6rem !important;
        width: 6rem !important;
    }
    .book-info-value{
        font-size: var(--font-small);
    }
    .financial-tabs {
        display: flex;
        flex-wrap: wrap;
    }
    .financial-tab__link {
        font-size: var(--font-small);
    }

    .financial-tab__title {
        font-size: var(--font-small);
    }
    .payment-card{
        gap: unset;
    }
    .payment-title{
        font-size: var(--font--sub-title);
    }
    .payment-amount{
        flex: unset;
        font-size: var(--font-small);
    }
    .payment-date{
        font-size: var(--font-small);
    }
    .all-payments{
        margin: 0.8rem 1rem;
    }

    .payment-info{
        max-width: 130px;
    }
}


@media (max-width: 720px) {
    .top-row {
        flex-wrap: wrap;
        font-size: 10px;
    }

    .chart-area {
        order: 0;
    }

    .chart-legend {
        margin-top: 1rem;
        order: 1;
        width: 100%;
        padding-right: 0;
        align-items: flex-start;
        padding-left:10px ;
    }
    .chart-legend-item {
        font-size: 10px;
    }
}

@media (min-width: 500px) {
    #plotId {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 330px !important;
        max-width: 90% !important;
        height: auto !important;
        background-color: var(--datepicker-bg) !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
        padding: 20px !important;
        z-index: 10000 !important;
        overflow: hidden !important;
    }

    .dark #plotId {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    }


    .datepicker-persian {
        font-family: Tahoma, Arial, sans-serif;
        color: var(--datepicker-text-primary);
    }

    .datepicker-navigator {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .datepicker-navigator .pwt-btn-switch {
        font-size: 18px !important;
        font-weight: bold !important;
        color: var(--datepicker-nav-color) !important;
        flex-grow: 1;
        text-align: center;
    }

    .datepicker-navigator .pwt-btn {
        color: var(--datepicker-text-secondary) !important;
        font-size: 20px !important;
        cursor: pointer;
        padding: 5px 10px;
    }

    .header-row-cell {
        color: var(--datepicker-nav-color) !important;
        font-size: 13px !important;
        padding-bottom: 5px;
        font-weight: normal !important;
    }

    .header-row-cell:last-child {
        color: var(--datepicker-weekend-color) !important;
    }

    .table-days td {
        background-color: var(--datepicker-day-cell-bg) !important;
    }

    .table-days td span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin: 2px auto;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        background-color: var(--dialog-box);
        color: var(--datepicker-text-primary);
    }

    .table-days td .other-month {
        color: var(--datepicker-text-secondary) !important;
    }

    .table-days tr td:last-child span {
        color: var(--datepicker-weekend-color) !important;
    }

    .table-days td.selected span {
        background-color: var(--datepicker-selected-bg) !important;
        color: white !important;
        font-weight: bold !important;
    }

    .table-days td:not(.selected) span:hover {
        background-color: #e6f0ff !important;
    }

    .toolbox {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center;
        gap: 15px !important;
        padding: 0.5rem !important;
        border-top: 1px solid var(--datepicker-border-color) !important;
        margin-top: 15px !important;
    }

    .toolbox div {
        font-size: 14px !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
        transition: background-color 0.2s, color 0.2s;
    }

    .pwt-btn-today {
        background-color: var(--datepicker-selected-bg) !important;
        color: white !important;
        border: none !important;
    }

    .pwt-btn-today:hover {
        background-color: #0056b3 !important;
    }

    .pwt-btn-calendar {
        color: var(--datepicker-text-secondary) !important;
    }
}