:root {
    --primary: #000CFF;
    --text: #000000;
}

body{background-color: #efefef; counter-reset: steps; color: var(--text); padding-bottom: 200px;}
header{margin-bottom: 30px; background: #fff; color: var(--text);}
header h4{font-size: 18px; margin:0}

@media(max-width:767px){
    header h4{font-size: 14px; margin:0}
}

.card-start{max-width: 600px; margin:auto}
.step-heading{display: flex; align-items: center; }
.step-heading::before{background: var(--primary);
    border-radius:50%;
    color:#fff;
    content:counter(steps);
    counter-increment:steps;
    float:left;
    display: table;
    font-size:12px;
    font-weight: bold;
    line-height:20px;
    height:20px;
    width:20px;
    margin-right: 5px;
    text-align:center;
}

#header-checkout #logo-checkout img{max-width: var(--max-width-logo);}

.card{padding: 20px; border-radius: 5px; border:none; margin-bottom: 30px;}
.card h3{font-size: 18px; color: var(--text);}
.card h4{font-size: 14px; color: var(--text); margin-bottom: 20px; margin:0}
.card-body{padding:0}
.form-group{margin-bottom: 10px;}

@media(max-width:767px){
    .card{margin-bottom: 15px;}
}

.text-help{font-size: 12px; text-decoration: none; color: #777;}
.info{font-size: 10px; text-decoration: none; color: #777;}
.info-2{font-size: 12px; text-decoration: none; color: #777;}
.info-3{font-size: 12px; text-decoration: none; color: var(--text);}

.radio{font-size: 14px; border:solid 1px #eee; padding:10px; margin-bottom: 10px; border-radius: 5px;}

.box-cart{border:solid 2px gold}
.box-cart img {max-width: 50px;}
.agree-text{
    float: left;
    margin-right: 5px;
    margin-top: 3px;
}

#resume-mobile{background-color:#fff; width: 100%; max-height: 100vh; overflow-y: auto; left: 0; padding: 15px; box-shadow: 0 -15px 20px rgba(0, 0, 0, 0.3);}
#resume-mobile h5{color:var(--primary);}

#total-resume h4{font-size: 12px;}
#total-resume .list-group-item{font-size: 12px; border:none; border-bottom: solid 1px #eee;}
#total-resume .list-group-item:last-child{border:none}

#loading{text-align:center;color:var(--primary);width:100%;height:100%;position:fixed;top:0;left:0;background:#fff;z-index:10;display:flex;align-items:center;justify-content:center}

.checkout-card-mobile{background: #fff; border-radius:5px !important; padding: 15px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); margin-bottom: 20px; width: 100%;}

#payment-method input[name="agree"]{display: none;}

#shipping-method{margin-top:10px}
#payment-method{margin-top:10px}

.form-floating > textarea.form-control:not(:-moz-placeholder-shown) ~ label {
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
    background-color: #fff;
    height: auto;
    padding: 0px;
    padding:0 5px;
    width: auto;
    transform: scale(0.982) translateY(0.045rem) translateX(0.1rem);
    border-radius: 5px;
}
.form-floating > textarea.form-control:focus ~ label,
.form-floating > textarea.form-control:not(:placeholder-shown) ~ label,

.form-floating > textarea.form-control:-webkit-autofill ~ label {
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
    background-color: #fff;
    height: auto;
    padding: 0px;
    padding:0 5px;
    width: auto;
    transform: scale(0.982) translateY(0.045rem) translateX(0.1rem);
    border-radius: 5px;
}