body {
    min-width: 360px;
}

.pp-bg {
    z-index: -1;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:
        url(../images/bg-line-user-01-1440x900.svg) no-repeat right top fixed,
        url(../images/bg-line-user-02-1440x900.svg) no-repeat right bottom fixed;
    background-size: contain;
}

.pp-bg-1 {
    z-index: -1;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:
        url(../images/bg-line-user-05.svg) no-repeat right top fixed,
        url(../images/bg-line-user-04.svg) no-repeat left bottom fixed;
    background-size: contain;
}

.pp-bg-2 {
    z-index: -1;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:
        url(../images/bg-speckles-user-06.svg) no-repeat center center;
    background-size: cover;
}

.pp-bg-card {
    background:
        url(../images/bg-line-user-03.svg) no-repeat center bottom;
    background-size: contain;
}

.pp-bg-card-stat {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background:
        url(../images/bg-line-user-06.svg) no-repeat center bottom;
    background-size: cover;
}

.pp-logo {
    width: 6rem;
}

circle-progress::part(value) {
    stroke: var(--pp-yellow);
    stroke-linecap: round;
}

circle-progress::part(circle) {
    stroke: var(--pp-ltgrey);
}

circle-progress::part(text) {
    font-family: Fira Sans, sans-serif;
    font-size: 1.92rem;
    font-weight: 600;
    fill: var(--pp-black);
}

.pp-circle-progress-small circle-progress::part(base) {
    width: 3.25rem;
    height: 3.25rem;
}

.pp-circle-progress-small circle-progress::part(value) {
    stroke-width: 12%;
}

.pp-circle-progress-small circle-progress::part(circle) {
    stroke-width: 12%;
}

.pp-circle-progress-medium circle-progress::part(base) {
    width: 8.5rem;
    height: 8.5rem;
}

.pp-circle-progress-medium circle-progress::part(value) {
    stroke-width: 8%;
}

.pp-circle-progress-medium circle-progress::part(circle) {
    stroke-width: 8%;
}

.pp-img-user {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: .625rem;
    border-width: .125rem;
    border-style: solid;
}

.pp-form-1 {
    max-width: 26rem;
}

.pp-block-1 {
    max-width: 26rem;
}

.pp-block-2 {
    max-width: 40rem;
}

.pp-bar-1 {
    width: .25rem;
    flex-shrink: 0;
}

.pp-phone {
    width: 100%;
    max-width: 21rem;
}

#pp-sidebar-offcanvas, #pp-phone-offcanvas {
    --bs-offcanvas-width: 100%;
}

.pp-checkbox-hides-next:has(input:checked)+* {
    display: none;
}

.collapsed .bi-caret-up-fill {
    transform: rotate(180deg);
}

[data-bs-toggle="collapse"] .bi-caret-up-fill {
    transition: transform 0.35s;
}