.paybox{
    max-width: 1220px;
    margin: 0 auto;
    padding: 20px 0;
}

.paybox > .grid{
    gap: 1em;
}

.box{
    background: white; 
    padding: 20px 20px 20px 20px; 
    border-radius: 15px;
    margin-bottom: 10px;
    position: relative;
}

.box .box_background{
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 140px; 
    background: var(--primary-color);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.box .box_background p.small{
    margin-top: 0;
}

.box .pay_head{position: relative; height: 120px;}

.dark .box .pay_head, .dark .box .pay_head h3, .dark .box .pay_head h1{color: var(--text-color);}
.box .pay_head h1{display: block; border-top: 1px solid var(--text-color); padding-bottom: 0; margin-bottom: 0;}

.dark .box{background: var(--dark-grey);}

.box.box_2{
    background: var(--light-grey);
}

.dark .box.box_2{
    background: var(--text-color);
}

@media(max-width: 1240px){
    .paybox{max-width: calc(100% - 20px);}
}

.paybox ol{
    text-indent: 0;
    margin-left: 0;
    padding-left: 1.5em;
}

.box .list_items{
    border-top: 1px solid var(--text-color);
}

.dark .box .list_items{border-top: 1px solid var(--light-grey);}

.item.invoice_item{
    display: grid; 
    grid-template-columns: 3fr 1fr 1fr 100px;
    grid-gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--text-color);
}

.dark .item.invoice_item{border-bottom: 1px solid var(--light-grey);}

.item.invoice_item > div{text-align: right;}
.item.invoice_item > div:nth-child(1){text-align: left;}


.user_avatar_name_grid{
    
    grid-template-columns: 45px 1fr;
}

.user_avatar_name_grid .user_avatar{width: 45px; height: 45px; border-radius: 50%;}
.user_avatar_name_grid p{line-height: 1em;}

#confidential_block{padding: 1em 0;}

#card-element {
    margin: 10px 0 20px 0; /* space below the element */
    padding: 10px;      /* add padding inside the input field */
    background: white; 
    border-radius: 10px; 
}

.dark #card-element{
    
    
}

.stripe-input-container {
    margin-bottom: 15px; /* space between Stripe fields */
}

.payment_nav{display: flex; justify-content: space-between;}

.dark .payment_nav img{filter: invert(100%);}

.avatar{width: 40px; height: 40px; border-radius: 50%; background: #CCC url(../images/backgrounds/icon-user-profile.svg) no-repeat;}



.page_wrapper{
    display: block; 
    position: relative;
    padding: 10px; 
}

.cart_wrapper .item{
    padding: 10px 0;
}

.cart_grid{
    grid-template-columns: 100px 3fr 1fr 1fr 1fr 50px;
    grid-gap: 1em;
}

.simplified .cart_grid{
    grid-template-columns: 3fr 1fr 1fr 1fr;
}

.simplified .cart_grid > div:nth-child(1), .simplified .cart_grid > div:nth-child(6){display: none;}



.cart_layout{
    
}

.cart_layout > div{
    padding: 15px; 
    background: white; 
    border-radius: 22px;
}

.dark .cart_layout > div{
    background: var(--dark-grey);
    color: white;
}

.cart_grid span.material-symbols-outlined{font-size: 1em;}

@media(min-width: 640px){
    .page_wrapper{
        padding: 30px; 
    }

    .avatar{width: 80px; height: 80px; background-size: cover!important; background-position: center!important;}
}

@media(min-width: 840px){
    .cart_layout{
        display: grid; 
        grid-template-columns: 1fr 340px; 
        grid-gap: 1em;
    }
}

.progress_bar{

    display: grid; 
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 640px;
    align-items: center;
    padding-bottom: 15px; 
    border-bottom: 1px solid var(--text-color);
    margin-bottom: 15px;
}

.progress_bar > div{position: relative;}

.dark .progress_bar{
    border-bottom: 1px solid var(--light-grey);
}

.progress_bar .bubble{
    position: relative;
    margin-right: 30px;
    display: inline-block; 
    font-size: 13px;
    width: 16px; 
    height: 16px;
    padding: 5px;
    border-radius: 50%;
    text-align: center;
    border: 1px solid var(--text-color);
}

.progress_bar .bubble.active{background: var(--primary-color); color: var(--text-color);}

.progress_bar > div{display: grid; grid-template-columns: 30px 1fr; align-items: center;}

.progress_bar  p{display: inline-block; position: relative; transform: translateY(4px);}


.dark .progress_bar .bubble{border: 1px solid var(--light-grey); color: var(--light-grey);}
.dark .progress_bar .bubble.active{color: var(--text-color); border: 1px solid var(--primary-color);}

.progress_bar .right_arrow{
    position: absolute; 
    top: calc(50% + 2px); 
    right: 10px; 
    transform: translateY(-50%);

}

.dark .progress_bar .right_arrow{color: var(--light-grey);}

.payment_grid{

}

.payment_grid > div{
    padding: 15px;
    background: white;
    border-radius: 22px;
}

.payment_grid > div:nth-child(2){background: var(--dark-grey); color: white;}

@media(min-width: 780px){
    .payment_grid{
        display: grid; 
        grid-template-columns: 1fr 440px;
        grid-gap: 1em;
    }
}

#check_confirm{
    color: var(--green);
}

#check_confirm span{font-size: 48px;}