.sp-modal {
    display:none;
    position:fixed;
    z-index:2147483647;
    inset:0px;
    transition:visibility 0s linear 0.3s, opacity 0.3s;

    --font-family-base:"Poppins", sans-serif;
    --text-color-base:#272727;
    --text-color-subtitle:#646464;
    --text-color-close:#646464;
    --text-color-footer:#959595;
    --text-color-grey:#373737;
    --bg-white:#FFFFFF;
    --bg-pink:#FBE8E9;
    --bg-pink-dark:#F7CBCF;
    --bg-transparent:transparent;
    --bg-color-base:#F0F0F0;
    --bg-gradient-base:linear-gradient(111.58deg, #F7CBCF 27.23%, #FBE8E9 68.63%);
    --bg-gradient-logo:linear-gradient(90deg, #FAE0E6 27.08%, #BBE4FF 100%);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.sp-modal--open {
    transition:visibility 0s linear 0s, opacity 0s;
}

.sp-modal--open .sp-modal__overlay {
    opacity:1;
}

.sp-modal--open .sp-modal__wrapper {
    transform:translateY(0);
    transition:transform 0.3s ease-in-out 0.2s;
}

.sp-modal__container,.sp-modal__header {
    border-radius:20px 20px 0 0;
}

.sp-modal__header,.sp-modal__content,.sp-modal__footer {
    padding-left:16px;
    padding-right:16px;
}

.sp-modal__overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    background-color:rgba(0, 0, 0, 0.95);
    opacity:0;
    transition:opacity 0.3s ease-in-out;
    z-index:-1;
}

.sp-modal__wrapper {
    font-family:var(--font-family-base);
    font-size:14px;
    font-weight:400;
    line-height:1.2;
    color:var(--text-color-grey);
    height:100%;
    overflow:hidden auto;
    text-align:center;
    transform:translateY(100%);
    transition:transform 0.3s ease-in-out;
    scrollbar-width:none;
}

.sp-modal__wrapper::-webkit-scrollbar {
    display:none;
}

.sp-modal__wrapper::after {
    content:"";
    display:inline-block;
    vertical-align:middle;
    height:100%;
    width:0px;
}

.sp-modal__container {
    position:relative;
    display:inline-block;
    max-width:480px;
    width:100%;
    margin:80px 0 0 0;
    vertical-align:bottom;
    text-align:left;
    overflow-y:auto;
    background-color:var(--bg-white);
    scrollbar-width:none;
}

.sp-modal__container::-webkit-scrollbar {
    display:none;
}
@media (min-width: 481px) {
    .sp-modal__container {
        width:calc(100% - 64px);
        margin:32px;
        vertical-align:middle;
        border-radius:20px ;
    }
}

.sp-modal__header {
    padding-top:24px;
    color:var(--text-color-base);
    background-color:var(--bg-pink);
}

.sp-modal__actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:32px;
}

.sp-modal__close {
    font-weight:600;
    color:var(--text-color-close);
    cursor:pointer;
}

.sp-modal__title {
    font-weight:600;
    font-size:24px;
    padding-bottom:8px;
}

.sp-modal__subtitle {
    line-height:1.5;
    color:var(--text-color-subtitle);
}

.sp-modal__divider {
    width:100%;
    height:40px;
    background-color:var(--bg-pink);
    clip-path:ellipse(60% 150% at 50% -50%);
    margin-bottom:33px;
}

.sp-modal__content {
    padding-bottom:65px;
}

.sp-modal__footer {
    font-size:12px;
    font-weight:500;
    line-height:1.5;
    color:var(--text-color-footer);
    padding-bottom:16px;
}

.sp-infos-list svg  {
    pointer-events:none;
}

.sp-container-amount {
    margin-top:25px;
}

.sp-container-amount .total-amount {
    font-size:14px;
    line-height:1.5;
    font-weight:600;
    margin-bottom:13px;
}

.sp-container-amount .container-installments {
    position:relative;
    display:flex;
    justify-content:space-between;
}

.sp-container-amount .container-installments .strip-bar {
    position:absolute;
    top:14px;
    left:0;
    width:100%;
    height:1px;
    border-top:1px dashed var(--text-color-base);
    z-index:1;
}

.sp-container-amount .container-installments .installment {
    position:relative;
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    line-height:1.5;
    padding:0 5px;
    z-index:2;
}

.sp-container-amount .container-installments .installment__number {
    position:relative;
    width:24px;
    height:24px;
    font-size:14px;
    font-weight:700;
    line-height:26px;
    text-align:center;
    background:var(--bg-white);
    border:solid 2px var(--text-color-base);
    border-radius:50%;
}

.sp-container-amount .container-installments .installment__number .step-progress {
    position:absolute;
    top:50%;
    left:50%;
    z-index:-1;
    transform:translate(-50%, -50%);
}

.sp-container-amount .container-installments .installment__number .step-progress svg {
    display:block;
}

.sp-container-amount .container-installments .installment__number .step-progress svg circle {
    stroke:var(--bg-pink-dark);
    fill:var(--bg-transparent);
}

.sp-container-amount .container-installments .installment__amount {
    color:var(text-color-grey);
    margin-top:8px;
}

.sp-container-amount .container-installments .installment__deadline {
    font-size:12px;
    color:var(text-color-grey);
}

.sp-container-amount .container-installments .installment--today {
    font-weight:600;
}

.sp-infos-list {
    color:var(--text-color-grey);
}

.sp-infos-list__info {
    display:flex;
    align-items:center;
    padding-bottom:34px;
}

.sp-infos-list__info:last-of-type {
    padding-bottom:0;
}

.sp-infos-list__icon {
    margin-right:16px;
}

.sp-infos-list__label {
    font-weight:600;
}