/* modal */
.modal .modal-title{
    font-size: 36px;
    font-weight: 800;
    line-height: 38px;
    color: #00609C;

}
.modal .modal-header{
    border: none;
}
.modal .modal-body label{
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    text-align: left;
    color: #101010;


}
.modal-body input{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 8px;
    background: #F7F7F7;
    margin: 15px 0;

}
.modal-body button {
    background: #1AC1FF;
    color: white;
    padding: 14px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    margin: 15px 0;
}
.modal-body select {

    margin: 15px 0;
    background: #F7F7F7;

}

.modal-body input[type="checkbox"] {
    width: auto;
}
.modal-body input[type="number"]{
    background: unset;
}
/* modal-login */

.modal-login .modal-body  .more-login{
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    color: #979797;
    padding-top: 20px;


}
.modal-login .modal-body  .more-login a{
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    color: #00609C;
    text-decoration: underline;
}

/* modal-scan */
.modal-scan-qr .modal-body .upload-img {
    border: 1px solid #00ADEE;
    background: transparent;
    color: #00ADEE;
}
.modal-scan-qr .modal-body img {
    width: 525px;
    height: 525px;
    margin: auto;

}
.modal-scan-qr .modal-body  button{
    max-width: 700px;
}

/* modal accumulate points*/


.modal-accumulatepoints .name{

    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    text-align: left;
    color: rgba(0, 96, 156, 1);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;


}
.modal-accumulatepoints .right{
    flex: 1;
}
.modal-accumulatepoints .point{

    font-size: 15px;
    font-weight: 900;
    line-height: 24px;
    text-align: left;
    color: #600D7F;
}


/* modal changevoucher */

.modal-changevoucher .name{

    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    text-align: left;
    color: rgba(0, 96, 156, 1);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;


}
.modal-changevoucher .point{

    font-size: 15px;
    font-weight: 900;
    line-height: 24px;
    text-align: left;
    color: #600D7F;
}
.modal-changevoucher .time-use{

    padding-top: 10px;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.5px;
    text-align: left;
    color: #101010;


}
.modal-changevoucher .time-use .date{
    font-weight: 700;

}
@media (max-width: 1025px) {
    .modal-changevoucher .modal-body button {
        border-radius: 15px;

    }
}

/* modal connfirmvoucher */

.modal-connfirmvoucher .modal-body button[type="submit"] {
    background: #1AC1FF;
    color: white;
    padding: 14px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    margin: 15px 0;
}

.modal-connfirmvoucher .name{

    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    text-align: left;
    color: rgba(0, 96, 156, 1);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;


}
.modal-connfirmvoucher .right{
    flex: 1;
}
@media (max-width: 1025px) {
    .modal-connfirmvoucher .right{
        width: 100%;
    }
}
.modal-connfirmvoucher .txt{

    font-size: 15px;
    font-weight: 400;
    line-height: 14px;
    text-align: left;
    color: #00609C;


}
.modal-connfirmvoucher .point{

    font-size: 15px;
    font-weight: 900;
    line-height: 14px;
    text-align: right;
    color: #101010;
}
.modal-connfirmvoucher .point-total{

    font-size: 15px;
    font-weight: 900;
    line-height: 14px;
    text-align: right;
    color: #600D7F;
}
.modal-connfirmvoucher .time-use{

    padding-top: 10px;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.5px;
    text-align: left;
    color: #101010;


}
.modal-connfirmvoucher .time-use .date{
    font-weight: 700;

}
.modal-connfirmvoucher .input-group>.form-control{
    width: 50px;
    flex: auto;
    flex: none;
    text-align: center;

    cursor: pointer;
    padding: 5px 10px;
    border: none;
    /* width: 20px;
    height: 20px; */
    gap: 0px;
    border-radius: 50%;
}
.modal-connfirmvoucher .input-group{
    width:auto;
}

.modal-connfirmvoucher .btn {
    cursor: pointer;
    padding: 5px 10px;
    border: none;
    color: #000;
    width: 20px;
    height: 20px;
    gap: 0px;
    background: #F2F1F3;
    border-radius: 50% !important;

}
@media (max-width: 1025px) {
    .modal-connfirmvoucher .modal-body button[type="submit"] {
        border-radius: 15px;
        font-size: 18px;
        line-height: 20px;
        padding: 10px 20px;


    }
}

/* modal success voucher */

.modal-successvoucher .modal-body button[type="submit"] {
    background: #1AC1FF;
    color: white;
    padding: 14px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    margin: 15px 0;
}

.modal-successvoucher .right{
    flex: 1;
}
.modal-successvoucher .txt{

    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    text-align: left;
    color: #00609C;


}
.modal-successvoucher .point{

    font-size: 15px;
    font-weight: 900;
    line-height: 24px;
    text-align: right;

    color: #600D7F;
}
.modal-successvoucher .title-success{

    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    color: #00609C;
    padding-bottom: 10px;


}
.modal-successvoucher .info-voucher{

    font-size: 10px;
    font-style: italic;
    font-weight: 400;
    line-height: 10px;
    text-align: right;
    color: #00609C;
    text-decoration: underline;
}
@media (max-width: 1025px) {
    .modal-successvoucher .modal-body button[type="submit"] {
        border-radius: 15px;
        font-size: 12px;
        line-height: 20px;
        padding: 10px 20px;


    }
}

/* modal exchangegifts */

.modal-exchangegifts .modal-body button {
    background: #1AC1FF;
    color: white;
    padding: 14px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    margin: 15px 0;
}

.modal-exchangegifts .name{

    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    text-align: left;
    color: rgba(0, 96, 156, 1);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;


}
.modal-exchangegifts .right{
    flex: 1;
}
.modal-exchangegifts .point{

    font-size: 15px;
    font-weight: 900;
    line-height: 24px;
    text-align: left;
    color: #600D7F;
}
.modal-exchangegifts .time-use{

    padding-top: 10px;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.5px;
    text-align: left;
    color: #101010;


}
.modal-exchangegifts .time-use .date{
    font-weight: 700;

}
@media (max-width: 1025px) {
    .modal-exchangegifts .modal-body button {
        border-radius: 15px;


    }
}

/* modal connfirmexchangegifts */

.modal-connfirmexchangegifts .qty{

    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.5px;
    text-align: left;

}
.modal-connfirmexchangegifts .txt{

    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    text-align: left;
    color: #00609C;


}
.modal.modal-connfirmexchangegifts .point{

    font-size: 15px;
    font-weight: 900;
    line-height: 14px;
    text-align: right;
    color: #101010;
}
.modal-connfirmexchangegifts .point-total{

    font-size: 15px;
    font-weight: 900;
    line-height: 14px;
    text-align: right;
    color: #600D7F;
}
.modal-connfirmexchangegifts .input-group>.form-control{
    width: 50px;
    flex: auto;
    flex: none;
    text-align: center;

    cursor: pointer;
    padding: 5px 10px;
    border: none;
    /* width: 20px;
    height: 20px; */
    gap: 0px;
    border-radius: 50%;
}
.modal-connfirmexchangegifts .input-group{
    width:auto;
}

.modal-connfirmexchangegifts .btn {
    cursor: pointer;
    padding: 5px 10px;
    border: none;
    color: #000;
    width: 20px;
    height: 20px;
    gap: 0px;
    background: #F2F1F3;
    border-radius: 50% !important;

}
.modal-connfirmexchangegifts .modal-body button[type="submit"] {
    background: #1AC1FF;
    color: white;
    padding: 14px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    margin: 15px 0;
}

.modal-connfirmexchangegifts .name{

    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    text-align: left;
    color: rgba(0, 96, 156, 1);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;


}
.modal-connfirmexchangegifts .right{
    flex: 1;
}
.modal-connfirmexchangegifts .info-customer{
    padding-top: 15px;
}
.modal-connfirmexchangegifts .info-customer .title-head{

    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: left;
    color: #101010;

}
.modal-connfirmexchangegifts .info-customer .edit-info{


    font-size: 8px;
    font-style: italic;
    font-weight: 400;
    line-height: 10px;
    text-align: right;
    color: #00609C;



}
.modal-connfirmexchangegifts .info-customer .left{

    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    text-align: left;
    color: #979797;

}
.modal-connfirmexchangegifts .info-customer .right{
    font-weight: 700;

    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    text-align: left;
    color: #979797;


}
@media (max-width: 1025px) {
    .modal-connfirmexchangegifts .modal-body button[type="submit"] {
        border-radius: 15px;


    }
}

/* modal successexchangegifts */

.modal-successexchangegifts .right{
    flex: 1;
}
.modal-successexchangegifts .txt{

    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    text-align: left;
    color: #00609C;


}
.modal-successexchangegifts .point{

    font-size: 15px;
    font-weight: 900;
    line-height: 24px;
    text-align: right;
    color: #600D7F;
}
.modal-successexchangegifts .title-success{

    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    color: #00609C;
    padding-bottom: 10px;


}
.modal-successexchangegifts .info-voucher{

    font-size: 10px;
    font-style: italic;
    font-weight: 400;
    line-height: 10px;
    text-align: right;
    color: #00609C;
    text-decoration: underline;
}



/* modal voucherused */

.modal-voucherused .name{

    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    text-align: left;
    color: rgba(0, 96, 156, 1);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;


}
.modal-voucherused .point{

    font-size: 15px;
    font-weight: 900;
    line-height: 24px;
    text-align: left;
    color: #600D7F;
}
.modal-voucherused .time-use{

    padding-top: 10px;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.5px;
    text-align: left;
    color: #101010;


}
.modal-voucherused .time-use .date{
    font-weight: 700;

}
@media (max-width: 1025px) {
    .modal-voucherused .modal-body button {
        border-radius: 15px;

    }
}

/* modal */

.modal .name{

    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    text-align: left;
    color: rgba(0, 96, 156, 1);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;


}
.modal .point{

    font-size: 15px;
    font-weight: 900;
    line-height: 24px;
    text-align: left;
    color: #600D7F;
}
.modal .time-use{

    padding-top: 10px;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.5px;
    text-align: left;
    color: #101010;


}
.modal .time-use .date{
    font-weight: 700;

}
@media (max-width: 1025px) {
    .modal .modal-body button {
        border-radius: 15px;

    }
}

.modal .carousel-control-next, .modal .carousel-control-prev{
    width: auto;
    padding: 0;
    margin: 0;
    background: transparent;

}
.modal .carousel-control-next{
    right: -30px;

}
.modal .carousel-control-prev{
    left: -30px;

}
.modal-profile .code {
    font-family: Nunito;
    font-size: 20px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    color: #00609C;


}
/* detailorder */
.modal-detailorder .name-product {
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal-detailorder .point-product{
    font-family: Nunito;
    font-size: 22px;
    font-weight: 900;
    line-height: 24px;
    text-align: right;
    color: #600D7F;
    width: 200px;


}
.modal-detailorder .info-customer, .modal-detailshiping .info-customer{
    color: #979797;
}

.title-head{
    font-size: 24px;
    font-weight: 800;
    line-height: 100%;
    text-align: left;
    color: #00609C;


}

@media (max-width: 1025px) {

    .modal-detailorder .name-product, .modal-detailorder .point-product{
        font-size: 18px;
        line-height: 100%;
    }

    .modal-detailorder .transport .title-head{
        font-size: 16px;
        line-height: 16px;

    }
    .modal-detailorder .info-transport{
        font-size: 8px;
    }
}



.timeline-1 {
    border-left: 3px solid #D9D9D9;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    /* background: rgba(177, 99, 163, 0.09); */
    position: relative;
    padding: 0px 50px;
    list-style: none;
    text-align: left;
    max-width: 80%;
    margin-left: auto;
}

@media (max-width: 767px) {
    .timeline-1 {
        max-width: 70%;
        padding: 0 0 0 25px;
    }
}

.timeline-1 .event {
    padding-bottom: 25px;
    margin-bottom: 25px;
    position: relative;
}

@media (max-width: 767px) {
    .timeline-1 .event {
        /* padding-top: 30px; */
    }
}

.timeline-1 .event:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

.timeline-1 .event:before,
.timeline-1 .event:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline-1 .event:before {
    left: -207px;
    content: attr(data-date);
    text-align: right;
    font-weight: 100;
    font-size: 0.9em;
    min-width: 120px;
}

@media (max-width: 767px) {
    .timeline-1 .event:before {
        text-align: left;
        left: -125px;
        top: -3px;
    }
}

.timeline-1 .event:after {
    -webkit-box-shadow: 0 0 0 3px #D9D9D9;
    box-shadow: 0 0 0 3px #D9D9D9;
    left: -55.8px;
    background: #D9D9D9;
    border-radius: 50%;
    height: 9px;
    width: 9px;
    content: "";
    top: 3px;
}
.timeline-1 .event.active:after {
    -webkit-box-shadow: 0 0 0 3px #00609C;
    box-shadow: 0 0 0 3px #00609C;
    background:#00609C;
}

@media (max-width: 767px) {
    .timeline-1 .event:after {
        left: -31.8px;
    }
}


@media (min-width: 1025px) {
    .modal-accumulatepoints .name, .modal-exchangegifts .name,.modal-connfirmexchangegifts .name, .modal-connfirmexchangegifts .info-customer .title-head, .modal-successexchangegifts .title-success{
        font-size: 30px;
        line-height: 100%;
    }
    .modal-accumulatepoints .point,.modal-exchangegifts .point,.modal-connfirmexchangegifts .qty,.modal-connfirmexchangegifts .txt,.modal-connfirmexchangegifts .point,.modal-connfirmexchangegifts .info-customer .edit-info, .modal-connfirmexchangegifts .info-customer .left, .modal-connfirmexchangegifts .info-customer .right,.modal-connfirmexchangegifts .point-total, .modal-successexchangegifts .txt, .modal-successexchangegifts .point{
        font-size: 24px;
        line-height: 100%;
    }
    .modal-changevoucher .point, .modal-voucherused .point, .modal .point {
        font-size: 30px;
        line-height: 100%;
    }
    .modal-changevoucher .time-use, .modal-exchangegifts .time-use, .modal-voucherused .time-use, .modal .time-use{
        font-size: 24px;
        line-height: 100%;
    }
    .modal-connfirmvoucher .right,.modal-connfirmvoucher .txt, .modal-connfirmvoucher .point,.modal-connfirmvoucher .point-total, .modal-successvoucher .title-success, .modal-successvoucher .txt, .modal-successvoucher .point{
        font-size: 24px;
        line-height: 100%;
    }
    .modal-connfirmvoucher .right{
        width: 90%;
    }

    .modal-successvoucher .info-voucher, .modal-successexchangegifts .info-voucher{
        font-size: 18px;
        line-height: 100%;

    }

}



@media (max-width: 1025px) {
    .modal-successvoucher .left img, .modal-changevoucher .left img, .modal-connfirmvoucher .left img, .modal-voucherused .left img, .modal .left img{
        width: 122px;

    }

    .modal-register .modal-body button{
        font-size: 18px;
        line-height: 20px;


    }
    .modal-register .modal-body button[type="button"] {
        margin: 0;
        padding: 14px 10px;
        font-weight:400;

    }
    .modal-scan-qr .modal-body img{
        width: 200px;
        height: 200px;
    }
    .modal .modal-body button[type="submit"] {
        border-radius: 15px;

    }
    .modal .modal-title{
        font-size: 25px;
        line-height: 38px;
        padding-bottom: 10px;

    }
}

/*Lich them css*/
@media (max-width: 1025px) {
    .modal-changevoucher .modal-body button {
        border-radius: 15px;

    }
    .title-head {
        font-size: 20px;
    }
    .modal .modal-title {
        font-size: 22px;
        padding: 5px;
    }
}
/*.modal .name{
    font-size: 15px;
}*/
.info-customer {
    padding-top: 10px;
}
.img-qr{
    text-align: center;
    padding: 30px;
}
.modal-body .btn-otp{
    padding: 15px 10px;
    border-radius: 35px;
    font-size: 14px;
}