/*!
* PT. IMAJIKU CIPTA MEDIA
* Copyright 2019-2024 IMAJIKU.
*/

/* =GENERAL
-------------------------------------------------------------*/
.orderitemset hr {
    border-color: #E2E8F0;
}

/* =TYPOGRAPHY
-------------------------------------------------------------*/
.layout-content-dashboard .form-text-group .form-text-label {
    line-height: 1.2;
}

.layout-content-dashboard .form-text-group .form-text-label label {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-2);
}

.layout-content-dashboard .form-text-group .form-text-label span {
    font-size: 14px;
    line-height: 1.2;
}

.layout-content-dashboard .form-text-group .form-text-desc {
    line-height: 1.2;
}

.layout-content-dashboard .form-text-group .form-text-desc p {
    font-size: 14px;
}

.layout-content-dashboard .form-text-group .form-text-desc .btn-mjk {
    padding: 0;
    font-size: 14px;
    color: var(--color-text-1) !important;
}

.layout-content-dashboard .form-text-group .form-text-desc .btn-mjk i {
    color: #90A1B9 !important;
}

.layout-content-dashboard .form-text-group .form-text-desc .btn-mjk:hover i {
    transform: rotate(0deg);
}

/* =CARD PRODUCT
------------------------------------------------------------ */
.card-product-box {
    display: block;
    position: relative;
    z-index: 1;
}

.card-product {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    flex-direction: column;
    padding: 10px;
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

.card-product-box .card-product:hover {
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

/*card product label */
.card-product-label {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0px;
    top: 12px;
    width: auto;
    min-width: 90px;
    padding: 5px 10px 5px;
    border-radius: 0px 15px 15px 0;
    -webkit-border-radius: 0px 15px 15px 0;
    -moz-border-radius: 0px 15px 15px 0;
    text-align: center;
    background-color: var(--grey-300);
    z-index: 4;
}

.card-product-label h5 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    color: var(--color-text-2);
}

.card-product-box.status-new .card-product-label {
    background-color: var(--blue);
}

.card-product-box.status-best .card-product-label {
    background-color: var(--green);
}

.card-product-box.status-preorder .card-product-label {
    background-color: var(--grey-500);
}

/*card product label out of stock*/
.card-product-label-stock {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 10px;
    text-align: center;
    background-color: var(--grey-800);
    z-index: 5;
}

.card-product-label-stock h5 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    color: var(--white);
}

.card-product-box.status-outofstock {
    pointer-events: none;
}

.card-product-box.status-outofstock .card-product-img-item {
    opacity: 0.4;
}

/*card product image*/
.card-product-img {
    display: block;
    position: relative;
    background-color: transparent;
    margin-bottom: 10px;
}

.card-product:hover .card-product-img img {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    filter: brightness(80%);
    -webkit-filter: brightness(80%);
    -moz-filter: brightness(80%);
}

.card-product-img-item {
    display: block;
    position: relative;
    background-color: transparent;
}

.card-product-img-item [data-aspect-ratio] {
    background-color: transparent;
}

.card-product-img-item img {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

.img-product-1,
.img-product-2 {
    display: block;
    width: 100%;
    height: auto;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
}

.card-product-img-item .img-product-2 {
    position: absolute;
    opacity: 0;
    top: 0;
    visibility: hidden;
}

.card-product:hover .img-product-1 {
    opacity: 0;
    visibility: hidden;
}

.card-product:hover .img-product-2 {
    opacity: 1;
    visibility: visible;
}

/*card product desc*/
.card-product-desc {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.card-product-desc-text {
    display: block;
    margin-bottom: 10px;
}

.card-product-desc-text h4 {
    display: box;
    display: -moz-box;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-1);
}

/*card product - price*/
.card-product-price {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin: 10px 0 10px;
}

.card-product-price h4 {
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 0;
}

.card-product-price h4.strikethrough {
    font-size: 12px;
    color: var(--grey-500);
    font-weight: 400;
}

.card-product-discount {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: 5px;
}

.card-product-discount h3 {
    font-size: 12px;
    line-height: 1;
    color: var(--color-text-2);
    background-color: var(--color-1);
    padding: 3px 5px 3px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    margin: 0 5px 0 0;
}

/*card product - seller*/
.card-product-seller {
    display: block;
    width: auto;
}

.cpdseller {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 10px 5px 5px;
    background-color: var(--grey-300);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
}

.cpdseller-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: auto;
}

.cpdseller-img img {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.cpdseller-name {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 5px;
    width: 100%;
    flex: 1;
}

.cpdseller-name p {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
}

/*card product action*/
.card-product-action {
    position: relative;
    display: flex;
    flex-direction: row;
}

.card-product-action .btn-mjk {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
}

/*card product simple version */
.card-product-simple-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.card-product-simple-box {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

.card-product-simple {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    flex: 1;
    position: relative;
}

.card-product-simple .caps-img {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100px;
    height: auto;
}

.card-product-simple .caps-img img {
    display: block;
}

.card-product-simple .caps-desc {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 10px 0;
    width: 100%;
    flex: 1;
}

.card-product-simple .caps-desc h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 5px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

.cart-product-list-all .checkbox-mjk .custom-control-label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.card-product-simple .caps-desc a h3:hover {
    color: var(--color-button-2);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

.card-product-simple .caps-desc h5 {
    font-size: 13px;
    font-weight: 400;
    color: var(--grey-700);
    margin-bottom: 3px;
}

.card-product-simple .caps-desc p {
    font-size: 12px;
    font-weight: 400;
    color: var(--grey-700);
    margin-bottom: 0px;
}

.card-product-simple-box .caps-desc-price {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}

.card-product-simple-box .caps-desc-price h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.card-product-simple-box .caps-desc-price h4.strikethrough {
    font-size: 12px;
    color: var(--grey-600);
    font-weight: 400;
    margin: 0 0 5px 0;
    text-decoration-color: var(--color-text-2) !important;
}

.caps-action {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    width: 50%;
}

.caps-action-group-top {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
}

.caps-action-group-top .caps-action-spinner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    margin-right: 10px;
}

.caps-action-group-top .caps-action-delete {
    display: flex;
}

.caps-action-delete a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
}

.caps-action-delete a,
.caps-action-delete a i {
    color: #B00020;
    font-size: 14px;
    font-weight: 600;
}

.caps-action-delete a:hover i {
    opacity: 0.5;
}

.caps-note-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 0;
    gap: 15px;
}

.caps-note-group .form-group-mjk {
    width: 50%;
    margin-bottom: 0;
}

.caps-note-group .form-group-mjk .form-control {
    font-size: 12px;
}

.caps-note-group p {
    font-size: 12px;
    margin: 0;
    color: #666666;
}

.caps-desc-secondary {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    width: 120px;
    padding: 10px 0 10px;
}

.caps-desc-secondary .caps-desc-price h4 {
    font-size: 14px;
}

.caps-desc-third {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.caps-desc-third-price {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 140px;
}

.caps-desc-third-price h3 {
    display: block;
    font-size: 12px;
    color: #999999;
    margin-bottom: 10px;
}

.caps-desc-third-price h4 {
    display: block;
    font-size: 12px;
    color: #232323;
    margin: 0;
}

.caps-desc-third-price h4 b,
.caps-desc-third-price h4 strong {
    font-weight: 600;
}

.caps-desc-third-action {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 190px;
}

/*card product variant 2 small version , like responsive condition */
.card-product-simple-box.variant-2 {}

.card-product-simple-box.variant-2 .card-product-simple-group {
    flex-direction: column;
}

.card-product-simple-box.variant-2 .card-product-simple .caps-img {
    width: 70px;
}

.card-product-simple-box.variant-2 .card-product-simple .caps-img img {
    width: 70px;
}

.card-product-simple-box.variant-2 .card-product-simple .caps-desc {
    padding: 0 15px 0;
}

.card-product-simple-box.variant-2 .card-product-simple .caps-desc h3 {
    font-weight: 500;
}

.card-product-simple-box.variant-2 .card-product-simple .caps-desc h5 {
    font-size: 12px;
}

.card-product-simple-box.variant-2 .caps-action {
    flex: 1;
    width: 100%;
    margin-top: 10px;
}

/*card product variant 3 small version for form review */
.card-product-simple-box.variant-3 .card-product-simple {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--grey-300);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.card-product-simple-box.variant-3 .card-product-simple .caps-img {
    width: 50px;
}

.card-product-simple-box.variant-3 .card-product-simple .caps-img img {
    width: 50px;
}

.card-product-simple-box.variant-3 .card-product-simple .caps-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 0 0 10px;
}

.card-product-simple-box.variant-3 .card-product-simple .caps-desc h3 {
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0;
    text-align: left;
}

/* =PRODUCT DETAIL
-------------------------------------------------------------*/
.productset-box {}

/*product title*/
.productset-title {
    display: flex;
    position: relative;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

.productset-title h1,
.productset-title h2,
.productset-title h3 {
    color: var(--color-text-1);
    font-size: 32px;
    font-weight: 600;
}

.productset-title h4,
.productset-title h5 {
    color: var(--color-text-2);
    font-size: 16px;
    font-weight: 400;
}

.productset-desc h3,
.productset-desc h4,
.productset-desc h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-1);
}

.productset-desc p {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--color-text-1);
}

.productset-desc ul li {
    font-size: 16px;
    margin-bottom: 5px;
    color: var(--color-text-1);
}

.productset-desc img {
    margin-top: 10px;
    border-radius: 20px;
    position: relative;
}

/*product price*/
.productset-price {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.productset-price h3 {
    font-size: 26px;
    line-height: 1;
    font-weight: 600;
    margin: 0;
}

.productset-price .strikethrough {
    font-size: 14px;
    line-height: 400;
    color: var(--grey-500);
    text-decoration-color: var(--color-text-2) !important;
    margin-bottom: 5px;
}

/*product tag category*/
.productset-tags {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 15px 0 15px;
    position: relative;
}

.productset-tags-label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 0 5px;
    margin-right: 15px;
}

.productset-tags-label h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.productset-tags-label i {
    font-size: 16px;
    color: #000000;
}

.productset-tags ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
}

.productset-tags li {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    margin: 0 10px 10px 0;
    padding: 5px 10px 5px;
    background-color: var(--grey-300);
    color: #000000;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
}

.productset-tags li a {
    color: #000000;
}

.productset-tags li:hover {
    background-color: #999999;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
}

/*product delivery info*/
.productset-promolite-box {
    display: block;
    position: relative;
    width: 100%;
}

.productset-promolite {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 10px 20px 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    width: 100%;
}

.productset-promolite-img {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 30px;
}

.productset-promolite-img img {
    display: block;
    width: 25px;
    height: auto;
}

.productset-promolite-img i {
    color: var(--color-text-2);
    font-size: 20px;
}

.productset-promolite-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 1rem;
    flex: 1;
}

.productset-promolite-desc h4 {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--color-text-1);
    margin: 0;
}

.productset-promolite-desc p {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--grey-600);
    margin: 0;
}

.productset-promolite-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 20px;
}

.productset-promolite-action i {
    font-size: 16px;
    color: var(--color-text-2);
}

/*product */
.productset-info-list {
    display: block;
    position: relative;
}

.productset-info-list ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.productset-info-list li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
}

.productset-info-list p {
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    margin: 0;
}

.productset-info-list li p:first-child {
    color: var(--color-text-2);
    margin-right: 10px;
}

/*product profile seller*/
.profile-seller-box {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.profile-seller {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.profile-seller-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
}

.profile-seller-img img {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.profile-seller-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    flex: 1;
    padding: 0 10px 0 10px;
}

.profile-seller-desc h3 {
    font-size: 14px;
    margin: 0 0 5px 0;
}

.profile-seller-desc h5 {
    font-size: 12px;
    margin: 0;
    color: var(--grey-600);
}

/*product button wishlist */
.btn-addto-wishlist {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.btn-addto-wishlist i {
    font-size: 24px;
    line-height: 1;
    color: var(--red);
}

.btn-addto-wishlist span {
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    color: var(--color-text-1);
}

/*product content dropdown for stock*/
[data-stock="0"] {
    color: red !important;
    font-size: 30px !important;
}

/*user input for review*/
.orderitemset-productreviews-rating {}

.orderitemset-productreviews-name {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.orderitemset-productreviews-name h4 {
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    color: var(--grey-600);
    margin: 0 10px 0 0;
}

.orderitemset-productreviews-name h4 b,
.orderitemset-productreviews-name h4 strong {
    color: var(--color-text-1);
}

.orderitemset-productreviews-name h5 {
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    color: var(--grey-600);
    margin: 0;
}

.orderitemset-productreviews-comment {
    display: block;
    padding-left: 10px;
    border-left: 2px solid var(--grey-300);
}

.orderitemset-productreviews-comment p {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
}

.orderitemset-productreviews-photo ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
}

.orderitemset-productreviews-photo li {
    margin: 5px;
}

.orderitemset-productreviews-img {
    display: block;
    width: 60px;
    height: auto;
}

.orderitemset-productreviews-img img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

/* =PRODUCT REVIEW
------------------------------------------------------------ */
.product-review-satisfaction {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 15px 20px;
}

.product-review-satisfaction-stars {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

.product-review-satisfaction-stars i {
    font-size: 18px;
    color: var(--yellow);
    margin-bottom: 18px;
}

.product-review-satisfaction-stars h3 {
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    color: var(--color-text-1);
}

.product-review-satisfaction-stars h4 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    color: var(--grey-600);
}

.product-review-satisfaction-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.product-review-satisfaction-info h5 {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-600);
    margin: 0;
}

.product-review-list-box {
    position: relative;
}

.product-review-list-label {}

.product-review-list-label h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.product-review-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
}

.product-review-list>li {
    border-top: 1px solid var(--grey-100);
    padding: 10px 0 10px;
}

.product-review-list>li:last-child {
    border-bottom: 1px solid var(--grey-100);
}

.product-review-item {}

.product-review-item-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.product-review-item-stars {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-review-item-stars li {}

.product-review-item-stars i {
    font-size: 16px;
    color: var(--grey-300);
}

.product-review-item-stars[data-ratting="1"] li:nth-child(1) i {
    color: var(--yellow);
}

.product-review-item-stars[data-ratting="2"] li:nth-child(1) i,
.product-review-item-stars[data-ratting="2"] li:nth-child(2) i {
    color: var(--yellow);
}

.product-review-item-stars[data-ratting="3"] li:nth-child(1) i,
.product-review-item-stars[data-ratting="3"] li:nth-child(2) i,
.product-review-item-stars[data-ratting="3"] li:nth-child(3) i {
    color: var(--yellow);
}

.product-review-item-stars[data-ratting="4"] li:nth-child(1) i,
.product-review-item-stars[data-ratting="4"] li:nth-child(2) i,
.product-review-item-stars[data-ratting="4"] li:nth-child(3) i,
.product-review-item-stars[data-ratting="4"] li:nth-child(4) i {
    color: var(--yellow);
}

.product-review-item-stars[data-ratting="5"] li:nth-child(1) i,
.product-review-item-stars[data-ratting="5"] li:nth-child(2) i,
.product-review-item-stars[data-ratting="5"] li:nth-child(3) i,
.product-review-item-stars[data-ratting="5"] li:nth-child(4) i,
.product-review-item-stars[data-ratting="5"] li:nth-child(5) i {
    color: var(--yellow);
}

.product-review-item-date h5 {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-600);
    margin: 0;
}

.product-review-item-name h3 {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-600);
    margin: 0;
}

.product-review-item-feedback {}

.product-review-item-feedback p {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

.product-review-item-photo {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-review-item-photo li {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 10px 10px 0;
}

.product-review-item-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0 auto;
}

/* =CART CHECKOUT
------------------------------------------------------------ */

/*component checkout*/
.order-summary {
    position: relative;
    display: block;
}

.order-summary .address {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 15px;
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    position: relative;
}

.cost-breakdown hr {
    border-style: dashed;
    border-width: 2px;
    border-color: var(--grey-400);
}

/*cart product list*/
.cart-product-list>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cart-product-list ul li {
    padding: 0px 15px;
}

/*checbox cart item*/
.order-summary .boxed-mjk {
    padding: 0;
}

.order-summary-all .cart-product-list ul li {
    padding: 0px 0px;
}

.cart-product-list-all {
    padding: 15px 15px 5px;
}

.card-product-simple-box {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: space-between;
    border-bottom: 1px solid #F1F5F9;
    padding: 15px 0px;
}

.cart-product-list ul li:first-child .card-product-simple-box {
    border-top: 1px solid #F1F5F9;
}

.cart-product-list ul li:last-child .card-product-simple-box {
    border-bottom: none;
}

.card-product-simple-box.withcheckbox .spinner-mjk {
    width: 130px;
}

.card-product-simple-box.withcheckbox .card-product-simple-group {
    align-items: center;
}

.card-product-simple-box.withcheckbox .caps-note-group {
    padding-left: 1.5rem;
}

/*cart product list - order history page only*/
.cart-product-list.cart-for-order-history ul {
    overflow: hidden;
}

.cart-product-list.cart-for-order-history li {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease-in;
    -webkit-transition: all 0.6s ease-in;
    -moz-transition: all 0.6s ease-in;
}

.cart-product-list.cart-for-order-history li:first-child {
    display: block;
    opacity: 1;
    visibility: visible;
}

.cart-product-list.cart-for-order-history.show li {
    display: block;
    opacity: 1;
    visibility: visible;
    transition: all 0.6s ease-in;
    -webkit-transition: all 0.6s ease-in;
    -moz-transition: all 0.6s ease-in;
}

.button-product-list-more {
    display: block;
    width: 100%;
    padding: 5px;
    text-align: center;
}

.button-product-list-more .product-list-more-text {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    color: var(--color-text-1);
}

.button-product-list-more .product-list-more-text span {
    margin-right: 5px;
}

.button-product-list-more .product-list-more-text i {
    margin-left: 5px;
}

.cart-product-list.cart-for-order-history.show .button-product-list-more .product-list-more-text .fa-caret-down::before {
    content: "\f0d8";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.cart-product-list-preview {
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

.title-cart h5 {
    font-size: 18px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
    margin-bottom: 0;
}

.label-cart h5 {
    font-size: 14px;
    color: var(--color-text-2);
    font-weight: 400;
    font-family: var(--font-family-1);
    margin-bottom: 0;
}

.label-cart h5 span {
    font-size: 14px;
    color: var(--color-text-1);
    font-weight: 400;
    font-family: var(--font-family-1);
    margin-bottom: 0;
    margin-left: 3px;
}

/*total*/
.order-summary.cost-breakdown .form-text-group .form-text-label label {
    font-size: 14px;
    color: var(--color-text-2);
}

.order-summary.cost-breakdown .form-text-group .form-text-desc p {
    font-size: 14px;
}

.order-summary.cost-breakdown .form-text-group .form-text-desc h5 {
    font-size: 16px;
    font-weight: 600;
}

/*card voucher */
.card-voucher-box {
    display: block;
    position: relative;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.card-voucher {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px;
}

.card-voucher-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 130px;
    margin-bottom: 10px;
    position: relative;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    overflow: hidden;
}

.card-voucher-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.card-voucher-desc {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.card-voucher-desc h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 10px;
}

.card-voucher-desc h6 {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 5px;
    color: var(--grey-600);
}

.card-voucher-desc p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 5px;
}

.card-voucher-action {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/*voucher on checkout*/
.order-summary-voucher {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: 0;
    width: 100%;
}

.voucher-card-list {
    display: block;
    margin: 10px 0 10px;
}

.voucher-card-list ul {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
}

.voucher-card-list li {
    margin-bottom: 10px;
}

.voucher-card-list .form-group {
    margin: 0;
}

.voucher-card-list .radio-mjk-modern {
    border: none;
}

.voucher-card-list .radio-mjk-modern label {
    background-color: transparent;
}

/*card voucher simple*/
.card-voucher-simple {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    min-height: 100px;
    position: relative;
}

.card-voucher-simple-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 110px;
    padding: 5px;
    background-color: #00a7a3;
    position: relative;
}

.card-voucher-simple-img::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 0;
    border-color: #ffffff transparent transparent transparent;
}

.card-voucher-simple-img::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 0 12px;
    border-color: transparent transparent transparent #ffffff;
}

.card-voucher-simple-img p {
    font-size: 14px;
    font-weight: 400;
    color: var(--white);
    line-height: 1;
    margin-bottom: 5px;
    text-align: center;
}

.card-voucher-simple-img h4 {
    font-size: 24px;
    font-weight: 600;
    color: var(--white);
    line-height: 1;
    margin: 0;
    text-align: center;
}

.card-voucher-simple-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 15px 10px;
    border: 1px solid var(--grey-300);
    border-radius: 0 10px 10px 0;
    -webkit-border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    background-color: var(--white);
    flex: 1;
}

.card-voucher-simple-desc>h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-1);
    line-height: 1;
    margin-bottom: 5px;
    text-align: left;
}

.card-voucher-simple-desc>p {
    font-size: 13px;
    font-weight: 400;
    color: var(--grey-600);
    line-height: 1;
    margin: 0;
    text-align: left;
}

.card-voucher-simple-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
}

.card-voucher-simple-footer p {
    font-size: 12px;
    font-weight: 400;
    color: var(--grey-600);
    line-height: 1.4;
    margin-bottom: 5px;
    text-align: left;
}

.card-voucher-simple-footer a {
    font-weight: 500;
}

/*voucher simple status*/
.voucher-card-list li.expired .card-voucher-simple {
    pointer-events: none;
}

.voucher-card-list li.expired .card-voucher-simple-img {
    background-color: var(--grey-300);
}

.voucher-card-list li.expired .card-voucher-simple-img p,
.voucher-card-list li.expired .card-voucher-simple-img h4 {
    color: var(--grey-400);
}

.voucher-card-list li.expired .card-voucher-simple-desc>h3,
.voucher-card-list li.expired .card-voucher-simple-desc>p,
.voucher-card-list li.expired .card-voucher-simple-footer p {
    color: var(--grey-300);
}

.voucher-card-list li.expired .card-voucher-simple-footer a {
    color: var(--grey-300);
    font-weight: 400;
}

/*voucher checked*/
.radio-mjk-modern input[type="radio"]:checked+label .voucher-input-desc {
    border-color: transparent;
}

/* = VOUCHER DETAIL
------------------------------------------------------------ */
.voucher-info-box {
    display: block;
    position: relative;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    padding: 20px 15px 20px;
    border: 1px solid var(--grey-300);
}

.voucher-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.voucher-info-item {}

.voucher-info-item-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.voucher-info-item-img img {
    display: block;
    width: auto;
    height: 30px;
    margin: 0 auto;
}

.voucher-info-item-img i {
    font-size: 30px;
    text-align: center;
    color: var(--grey-600);
}

.voucher-info-item-desc {}

.voucher-info-item-desc h4 {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-600);
    margin: 0;
    text-align: center;
}

.voucher-info-item-desc p {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

.voucher-info-action {}


/*expicition list*/
.expedition-select-box {
    display: block;
    position: relative;
    padding: 15px;
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.expedition-select {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.expedition-select-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.expedition-select-label h6 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.expedition-select-label p {
    margin-bottom: 0;
    color: var(--color-text-2);
    font-size: 14px;
}

.expedition-select-price {
    display: flex;
    justify-content: flex-end;
    min-width: 120px;
}

.expedition-select-price p {
    font-size: 16px;
    margin-bottom: 0;
    color: var(--color-text-2);
}

.insurance-select-price {
    display: flex;
    justify-content: flex-end;
    min-width: 120px;
    margin-right: 5px;
}

.insurance-select-price p {
    font-size: 14px;
    margin-bottom: 0;
    color: var(--color-text-2);
}

.expedition-select-addon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px 0;
    width: 100%;
    padding: 3px 3px 3px;
    border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    background-color: #F8FAFC;
    gap: 10px;
}

.expedition-select-addon .custom-checkbox {
    margin-left: 10px;
}

.expedition-select-addon .custom-control-label h6 {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

.expedition-select-addon .custom-control-label p {
    margin: 0;
    color: var(--color-text-2);
    font-size: 14px;
}

.expedition-select-action {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
}

.expedition-list {
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
}

.expedition-list li {
    margin-bottom: 15px;
}

.expedition-list li.not-available,
.expedition-list li.not-available .radio-mjk,
.expedition-list li.not-available .expedition-price {
    pointer-events: none;
    opacity: 0.6;
}

.expedition-name h6 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 0 5px;
    margin: 0;
}

.expedition-name p {
    font-size: 12px;
    line-height: 1;
    color: var(--color-text-2);
    margin: 0;
}

.expedition-name p.warning {
    color: var(--red);
}

.expedition-price p {
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
    text-align: right;
    color: var(--color-text-2);
}

/*address modal*/
.address-choose-list {
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;
    position: relative;
}

.address-choose-list li {
    margin-bottom: 5px;
}

.address-choose-list .custom-control-label {
    width: 100%;
}

.address-choose-list .form-group-mjk {
    margin-bottom: 0;
    padding-left: 0;
    position: relative;
}

.address-choose-list .form-check-input {
    position: absolute;
    left: 35px;
    z-index: 1;
    top: 15px;
}

.address-choose-list label {
    width: 100%;
}

.address-choose-list .address {
    border: 1px solid var(--grey-300);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    padding: 15px 15px 15px 35px;
    background-color: var(--white);
    text-align: left;
}

.address-choose-list .address:hover {
    background-color: #f2f2f2;
    cursor: pointer;
}

/*payment*/
.payment-method-box {
    display: block;
    position: relative;
    padding: 15px;
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.payment-method-category {
    display: block;
    width: 100%;
}

.payment-method-title {
    display: block;
    margin: 0 0 10px 0;
    width: 100%;
}

.payment-method-title h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.payment-method-title p {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-600);
    margin: 0;
}

.payment-method-list {
    display: block;
}

.payment-method-list ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.payment-method-list li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: 5px;
}

.payment-method-list .variant-payment {
    width: 100%;
}

.payment-method-list .payment-method-logo {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 5px;
    min-height: 60px;
    background-color: transparent;
    border: 1px solid var(--grey-300);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    gap: 15px;
}

.payment-method-list .payment-method-logo img {
    display: block;
    width: 80px;
    height: auto;
    max-height: unset;
    min-height: unset;
    margin-bottom: 5px;
    object-fit: contain;
    padding: 15px;
}

.payment-method-list .payment-method-logo p {
    font-size: 14px;
    line-height: 1;
    margin: 0;
    text-align: center;
}

/* =SIDEBAR MENU DASHBOARD
------------------------------------------------------------ */
.sbmenu-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.sbmenu-box {
    display: block;
    width: 100%;
    position: relative;
    padding: 15px 0 15px;
    background-color: #F7F7F7;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border: 1px solid #F7F7F7;
    max-width: 380px;
    margin: 0 auto;
}

.sbmenu-box .sbmenu-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 0 10px;
}

.sbmenu-box .sbmenu-header-avatar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    overflow: hidden;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.sbmenu-box .sbmenu-header-avatar img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

.sbmenu-box .sbmenu-header-name {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.sbmenu-box .sbmenu-header-name h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 5px;
    color: var(--color-text-1);
}

/*sidebarmenu body*/
.sbmenu-box .navbar-toggler-secondary {
    display: none;
}

.sbmenu-box>.sbmenu-body.collapse,
.sbmenu-box>.sbmenu-body.collapse.show {
    display: block;
}

.sbmenu-box .sbmenu-body {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sbmenu-box .sbmenu-body .sbmenu-item {
    padding: 3px 10px 3px;
}

.sbmenu-body .sbmenu-label {
    color: var(--color-text-1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.sbmenu-body .sbmenu-item.active .sbmenu-label,
.sbmenu-body .sbmenu-item:hover .sbmenu-label,
.sbmenu-body .sbmenu-item .sbmenu-link[aria-expanded="true"] {
    background-color: var(--white);
}

.sbmenu-body .sbmenu-item.active .sbmenu-label p,
.sbmenu-body .sbmenu-item:hover .sbmenu-label p,
.sbmenu-body .sbmenu-item .sbmenu-link[aria-expanded="true"] p {
    color: var(--color-2) !important;
}

.sbmenu-body .sbmenu-item.active .sbmenu-label .sbmenu-icon i,
.sbmenu-body .sbmenu-item:hover .sbmenu-label .sbmenu-icon i,
.sbmenu-body .sbmenu-item .sbmenu-link[aria-expanded="true"] .sbmenu-icon i {
    color: var(--color-2) !important;
}

.sbmenu-body .sbmenu-item.active .sbmenu-label .sbmenu-icon svg path,
.sbmenu-body .sbmenu-item:hover .sbmenu-label .sbmenu-icon svg path,
.sbmenu-body .sbmenu-item .sbmenu-link[aria-expanded="true"] .sbmenu-icon svg path {
    fill: var(--color-2) !important;
}

.sbmenu-body .sbmenu-item.active .sbmenu-label .sbmenu-caret i,
.sbmenu-body .sbmenu-item:hover .sbmenu-label .sbmenu-caret i,
.sbmenu-body .sbmenu-item .sbmenu-link[aria-expanded="true"] .sbmenu-caret i {
    color: var(--color-2) !important;
}

.sbmenu-body .sbmenu-link {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    width: 100%;
    cursor: pointer;
    padding: 10px;
    font-size: 16px;
    color: #616b77 !important;
    min-height: 45px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.sbmenu-body .sbmenu-link:hover {
    cursor: pointer;
}

.sbmenu-body .sbmenu-link p {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    color: #9E9E9E;
    margin: 0;
}

.sbmenu-body .sbmenu-label img,
.sbmenu-body .sbmenu-link img {
    display: inline-block;
    width: 22px;
    height: auto;
    margin: 0 5px 0 0;
}

/*sub menu*/
.sbmenu-body .sbmenu-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sbmenu-body .sbmenu-submenu .sbmenu-link {
    padding-left: 40px;
    color: var(--color-text-1);
    background-color: var(--grey-100);
}

.sbmenu-body .sbmenu-submenu .sbmenu-link.active,
.sbmenu-body .sbmenu-submenu .sbmenu-link:hover {
    background-color: var(--grey-300);
}

.sbmenu-body .sbmenu-submenu .sbmenu-link.active p,
.sbmenu-body .sbmenu-submenu .sbmenu-link:hover p {
    color: var(--color-text-1) !important;
}

/*sidebar icon*/
.sbmenu-body .sbmenu-icon {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 20px;
    height: 20px;
    text-align: center;
    margin-right: 10px;
}

.sbmenu-body .sbmenu-icon i {
    font-size: 14px;
    line-height: 1.2;
    color: var(--grey-600);
}

/* sidebar caret */
.sbmenu-body .sbmenu-caret {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 20px;
    height: 20px;
    text-align: center;
}

.sbmenu-body .sbmenu-caret i {
    font-size: 14px;
    line-height: 1.2;
    color: var(--grey-600);
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
}

.sbmenu-body .sbmenu-link[aria-expanded="false"] .sbmenu-caret i {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
}

.sbmenu-body .sbmenu-link[aria-expanded="true"] .sbmenu-caret i {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
}

.sbmenu-footer {
    display: block;
    position: relative;
    width: 100%;
    padding: 20px 0 20px;
}

.sbmenu-footer .sbmenu-box {
    padding: 5px 0 5px;
}

.sbmenu-footer ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sbmenu-footer li {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.sbmenu-footer p {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--grey-600);
    margin: 0;
}

.sbmenu-footer i {
    font-size: 14px;
    line-height: 1;
    color: var(--grey-600);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

.sbmenu-footer li:hover i {
    color: var(--color-text-1);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

/* = Dashboard Profile
------------------------------------------------------------ */
.profiledashset {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    width: 100%;
}

.profiledashset-img {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    width: 64px;
    height: 64px;
    z-index: 1;
    position: relative;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin-right: 15px;
}

.profiledashset-img img {
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px 0 0 10px;
    -webkit-border-radius: 10px 0 0 10px;
    -moz-border-radius: 10px 0 0 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.profiledashset-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: var(--white);
    padding: 2px;
    border-top-left-radius: 8px;
}

.profiledashset-desc-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1;
}

.profiledashset-desc-group-head {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    flex-wrap: wrap;
}

.profiledashset-desc-group-footer {
    display: flex;
    width: 100%;
    border-top: 1px solid #E2E8F0;
    padding-top: 15px;
    margin-top: 15px;
}

.profiledashset-desc-status {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 10px 15px 10px 15px;
    width: auto;
}

.profiledashset-title h3 {
    font-size: 24px;
    color: var(--color-text-1);
    font-weight: 600;
    margin-bottom: 5px;
}

.profiledashset-desc {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
    gap: 15px;
    flex-wrap: wrap;
}

.profiledashset-desc h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text-1);
}

.profiledashset-desc h4 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: var(--grey-800);
    margin-bottom: 0;
}

.profiledashset-desc p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0;
    color: #62748E;
}

.profiledashset-desc i {
    color: var(--grey-600);
}

/*status verified member*/
.statusbox {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 6px 10px 6px;
    background-color: var(--grey-400);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    text-align: center;
    min-width: 135px;
}

.statusbox-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.statusbox-item p {
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
}

.statusbox-item i {
    font-size: 13px;
}

/*status address*/
.statusbox[data-status="main-address"] {
    background-color: #FDF0E7;
    color: var(--color-2);
}

.statusbox[data-status="main-address"] .statusbox-item p {
    color: var(--color-2);
}

.statusbox[data-status="main-address"] .statusbox-item i {
    color: var(--color-2);
}

/*status account*/
.statusbox[data-status="notyet-verify"] {
    background-color: var(--pastel-red);
}

.statusbox[data-status="notyet-verify"] .statusbox-item p {
    color: var(--red);
}

.statusbox[data-status="notyet-verify"] .statusbox-item i {
    color: var(--red);
}

.statusbox[data-status="verify-process"] {
    background-color: var(--pastel-brown);
}

.statusbox[data-status="verify-process"] .statusbox-item p {
    color: var(--brown);
}

.statusbox[data-status="verify-process"] .statusbox-item i {
    color: var(--brown);
}

.statusbox[data-status="verified"] {
    background-color: var(--pastel-green);
}

.statusbox[data-status="verified"] .statusbox-item p {
    color: var(--green-dark);
}

.statusbox[data-status="verified"] .statusbox-item i {
    color: var(--green-dark);
}

/*status order*/
.statusbox[data-status="success"] {
    background-color: var(--pastel-green);
}

.statusbox[data-status="success"] .statusbox-item p {
    color: var(--green-dark);
}

.statusbox[data-status="success"] .statusbox-item i {
    color: var(--green-dark);
}

.statusbox[data-status="process"] {
    background-color: #FFF7DC;
}

.statusbox[data-status="process"] .statusbox-item p {
    color: var(--yellow-dark);
}

.statusbox[data-status="process"] .statusbox-item i {
    color: var(--yellow-dark);
}

.statusbox[data-status="waiting"] {
    background-color: var(--pastel-orange);
}

.statusbox[data-status="waiting"] .statusbox-item p {
    color: var(--orange);
}

.statusbox[data-status="waiting"] .statusbox-item i {
    color: var(--orange);
}

.statusbox[data-status="cancel"] {
    background-color: var(--pastel-red);
}

.statusbox[data-status="cancel"] .statusbox-item p {
    color: var(--red);
}

.statusbox[data-status="cancel"] .statusbox-item i {
    color: var(--red);
}

/* Input upload photo profile*/
.avatar-profile {
    display: block;
    margin: 0;
    width: 100px;
    height: 100px;
    position: relative;
}

.avatar-profile-img {
    display: block;
    overflow: hidden;
    width: 100px;
    height: 100px;
    z-index: 1;
    position: relative;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.avatar-profile-img img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center;
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/* mini statistic */
.tipmood-list-box {
    display: flex;
    position: relative;
    width: 100%;
}

.tipmood-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 15px;
    row-gap: 10px;
}

.tipmood-list li {
    position: relative;
    border-right: 1px solid #E2E8F0;
    padding-right: 15px;
}

.tipmood-list li:last-child {
    border-right: none;
}

.tipmood {
    display: flex;
    background-color: var(--white);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 140px;
    min-height: 60px;
    gap: 10px;
}

.tipmood h4 {
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    color: var(--color-text-2);
    margin-bottom: 5px;
}

.tipmood h6 {
    font-size: 20px;
    line-height: 1;
    font-weight: bold;
    color: var(--color-text-1);
    margin-bottom: 0;
}

.tipmood p {
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    color: var(--grey-800);
    margin-bottom: 0;
}

/* = Dashboard Address
------------------------------------------------------------ */
.address-list {}

.address-list ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.address-list li {
    display: block;
    width: 100%;
}

.address {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 10px;
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    position: relative;
    gap: 10px;
}

.address-caption {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 15px;
}

.address-desc {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}

.address-desc .statusbox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
}

.address-desc h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.address-desc p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
    color: var(--color-text-2);
}

.address-action {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.address-action .btn-mjk {
    font-size: 14px;
}

.address-action .btn-mjk:hover i {
    transform: rotate(0deg);
}

.address-empty {
    display: none;
    margin: 0 auto;
}

.address-empty.show {
    display: block;
}

/* = Dashboard Bank
------------------------------------------------------------ */
.bank-list {}

.bank-list ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bank-list li {
    display: block;
    width: 100%;
    max-width: 280px;
}

.bank {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 15px;
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.bank-desc {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    padding: 0 0 10px 0;
}

.bank-desc .statusbox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
}

.bank-desc h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}

.bank-desc p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
}

.bank-action {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.bank-empty {
    display: none;
    margin: 0 auto;
}

.bank-empty.show {
    display: block;
}

/* = Dashboard Wishlist
------------------------------------------------------------ */
.wishlist-empty {
    display: none;
    margin: 0 auto;
}

.wishlist-empty.show {
    display: block;
}

/* = Dashboard order history
------------------------------------------------------------ */
.order-history-list-box {}

.order-history-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.order-history-list>li {
    margin-bottom: 20px;
}

.ohi-box {
    display: block;
    border: 1px solid var(--grey-300);
    padding: 0 15px 0;
    background-color: var(--white);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.ohi-box .ohi-head {
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid var(--grey-300);
    padding: 10px 0 10px;
}

.ohi-box .ohi-head-date {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
}

.ohi-box .ohi-head-date p {
    display: inline-block;
    margin: 0;
    font-size: 12px;
    color: #999999;
}

.ohi-box .ohi-info {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: flex-start;
    border-bottom: 1px solid var(--grey-300);
    padding: 10px 0 10px;
}

.ohi-box .ohi-info h3 {
    display: block;
    font-size: 12px;
    color: #999999;
    margin-bottom: 10px;
}

.ohi-box .ohi-info h4 {
    display: block;
    font-size: 14px;
    color: #000000;
}

.ohi-box .ohi-info h4 b,
.ohi-box .ohi-info h4 strong {
    font-weight: 600;
}

.ohi-box .ohi-info .ohi-info-invoice {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-grow: 1;
}

.ohi-box .ohi-info .ohi-info-status {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-grow: 1;
}

.ohi-box .ohi-info .ohi-info-total {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 190px;
}

.ohi-box .ohi-alert {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: flex-start;
    border-bottom: 1px solid var(--grey-300);
    padding: 10px 0 10px;
}

.ohi-box .ohi-alert .ohi-alert-item {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: flex-start;
}

.ohi-box .ohi-alert .ohi-alert-item-img {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 30px;
}

.ohi-box .ohi-alert .ohi-alert-item-img i {
    font-size: 14px;
    color: #FF0000;
}

.ohi-box .ohi-alert .ohi-alert-item-desc {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    flex: 1;
}

.ohi-box .ohi-alert .ohi-alert-item-desc h6 {
    font-size: 12px;
    font-weight: 600;
}

.ohi-box .ohi-alert .ohi-alert-item-desc p {
    font-size: 12px;
    margin-bottom: 0;
    color: #333333;
}

.ohi-box .ohi-content {
    border-bottom: 1px solid var(--grey-300);
    padding: 10px 0 10px;
}

.ohi-box .ohi-action {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding: 10px 0 10px;
}

.ohi-box .ohi-action .ohi-action-row {
    align-items: center;
    flex: 1;
}

.ohi-box .ohi-action .ohi-action-col:first-child {
    display: flex;
    justify-content: flex-start;
}

.ohi-box .ohi-action .ohi-action-col:last-child {
    display: flex;
    justify-content: flex-end;
}

/*order history detail page*/
.ohi-detail-box {
    display: block;
    width: 100%;
}

.ohi-detail-box .ohi-detail-head {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: flex-start;
    padding: 10px 0 10px;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--grey-300);
}

.ohi-detail-box .ohi-detail-head h3 {
    display: block;
    font-size: 12px;
    color: #999999;
    margin-bottom: 10px;
}

.ohi-detail-box .ohi-detail-head h4 {
    display: block;
    font-size: 12px;
    color: #000000;
    margin: 0;
    font-weight: 600;
}

.ohi-detail-box .ohi-detail-head p {
    display: inline-block;
    font-size: 12px;
    color: #000000;
    margin: 0;
}

.ohi-detail-box .ohi-detail-head h4 b,
.ohi-detail-box .ohi-detail-head h4 strong,
.ohi-detail-box .ohi-detail-head p b,
.ohi-detail-box .ohi-detail-head p strong {
    font-weight: 600;
}

.ohi-detail-box .ohi-detail-head .ohi-detail-head-invoice {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-grow: 1;
    padding-right: 10px;
    margin-bottom: 10px;
}

.ohi-detail-box .ohi-detail-head .ohi-detail-head-status {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-grow: 1;
    padding-right: 10px;
    margin-bottom: 10px;
}

.ohi-detail-box .ohi-detail-head .ohi-detail-head-seller {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-grow: 1;
    padding-right: 10px;
    margin-bottom: 10px;
}

.ohi-detail-box .ohi-detail-head .ohi-detail-head-date {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-grow: 1;
    margin-bottom: 10px;
}

.ohi-detail-box .ohi-detail-head .ohi-detail-head-date time {
    line-height: 1;
}

.ohi-detail-box .ohi-detail-product-list {}

.ohi-detail-box .ohi-detail-product-list>h3 {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 10px 0;
}

.ohi-detail-box .ohi-detail-delivery {}

.ohi-detail-box .ohi-detail-delivery h3 {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 10px 0;
}

.ohi-detail-box .ohi-detail-delivery p {
    margin: 0;
    font-size: 12px;
}

.ohi-detail-box .ohi-detail-delivery p b {
    font-weight: 600;
}

.ohi-detail-box .ohi-detail-payment {}

.ohi-detail-box .ohi-detail-payment>h3 {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 10px 0;
}

.ohi-detail-box .ohi-detail-payment .form-text-label label,
.ohi-detail-box .ohi-detail-payment .form-text-desc p {
    font-weight: 500;
    font-size: 12px;
}

.ohi-detail-box .ohi-detail-delivery-tracking {}

.ohi-detail-box .ohi-detail-delivery-tracking>h3 {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 10px 0;
}

/*wizard tracking vertical*/
.wiztrack-vertical {
    display: block;
    margin: 10px 0 10px;
    padding: 0;
    list-style: none;
    width: 100%;
}

.wiztrack-vertical li {
    display: block;
}

.wiztrack-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 20px;
    position: relative;
}

.wiztrack-item .wiztrack-item-point {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    height: 100%;
    width: 20px;
    position: relative;
}

.wiztrack-item .wiztrack-item-point .wizp-circle {
    display: block;
    position: absolute;
    top: 4px;
    left: 3px;
    background-color: #03ac0e;
    border: 1px solid #03ac0e;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    width: 10px;
    height: 10px;
    z-index: 4;
}

.wiztrack-item .wiztrack-item-desc {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

.wiztrack-item .wiztrack-item-desc::before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 2px;
    background-color: #03ac0e;
    top: 5px;
    left: 7px;
    z-index: 1;
}

.wiztrack-item .wiztrack-item-desc .wiztrack-item-desc-date {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 150px;
}

.wiztrack-item .wiztrack-item-desc .wiztrack-item-desc-date p {
    display: block;
    font-size: 12px;
    margin: 0;
    color: #666666;
}

.wiztrack-item .wiztrack-item-desc .wiztrack-item-desc-note {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex: 1;
}

.wiztrack-item .wiztrack-item-desc .wiztrack-item-desc-note p {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 10px 0;
}

.wiztrack-vertical li:last-child .wiztrack-item-desc::before {
    content: "";
    display: none;
}

.wiztrack-vertical li:last-child .wiztrack-item-point .wizp-circle {
    background-color: var(--white);
}

/*new component card orrder history*/
.orderhistoryset-list-box {
    display: block;
    position: relative;
}

.orderhistoryset-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
}

.orderhistoryset-list li {
    display: block;
    width: 100%;
}

.orderitemset {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 0 15px 0;
    border: 1px solid var(--grey-300);
    background-color: var(--white);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.orderitemset-head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 10px;
    width: 100%;
    border-bottom: 1px solid var(--grey-300);
}

.orderitemset-head-date {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
}

.orderitemset-head-date p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 5px;
    color: var(--color-text-2);
}

.orderitemset-head-date h5 {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
    color: var(--color-text-2);
}

.orderitemset-head-status {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.orderitemset-head-status h3 {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 5px;
}

.orderitemset-product {
    display: block;
    width: 100%;
    padding: 10px 0 10px;
}

.orderitemset-product .card-product-simple-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    border-bottom: none;
}

.orderitemset-product .card-product-simple-box .card-product-simple-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1;
}

.orderitemset-product .caps-desc-others {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #F1F5F9;
    border-left: none;
    margin: 10px 0 0 0;
    padding: 5px 10px 5px;
    border-radius: 30px;
}

.orderitemset-product .caps-desc-others p {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    color: #44556C;
}

.caps-others-item {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin: 10px 0 0 0;
    padding: 5px 10px 5px;
    border-left: 2px solid var(--grey-400);
    background-color: var(--grey-100);
}

.caps-others-item p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
}

.orderitemset-product-total {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px 0 5px 15px;
    width: 170px;
}

.orderitemset-product-total h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 0 5px;
    margin: 0 5px 0;
    color: var(--color-text-1);
    text-align: center;
}

.orderitemset-product-total h4 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    text-align: center;
}

.orderitemset-product-total p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    padding: 5px 0 5px;
    margin: 0 5px 0;
    text-align: center;
}

.orderitemset-action {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px 0 0;
}

.orderitemset-action .btn-mjk {
    font-size: 14px;
}

.orderitemset-title {
    display: block;
    position: relative;
    width: 100%;
}

.orderitemset-title h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}

.orderitemset-title h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}

/*variant 2 - order detail*/
.orderitemset.variant-2 {
    padding: 5px 15px 10px;
}

.orderitemset.variant-2 .orderitemset-head {
    justify-content: space-between;
}

.orderitemset.variant-2 .orderitemset-head-date p {
    font-size: 20px;
    color: var(--color-text-1);
    font-weight: 600;
}

.orderitemset.variant-2 .orderitemset-head-date h5 {
    font-size: 20px;
    color: var(--color-text-1);
    font-weight: 600;
}

.orderitemset.variant-2 .orderitemset-head-status {
    align-items: flex-end;
}

.orderitemset.variant-2 .orderitemset-head-status h3 {
    font-size: 12px;
    color: var(--grey-700);
}

.orderitemset.variant-2 .orderitemset-product {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.orderitemset.variant-2 .orderitemset-product .cart-product-list ul li {
    padding: 0px 0;
}

.orderitemset.variant-2 .orderitemset-product-item-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.orderitemset.variant-2 .orderitemset-product-item-list li {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border: 1px solid var(--grey-300);
}

.orderitemset.variant-2 .caps-note-group {
    margin: 5px 0 5px;
}

/* = THANK ORDER PAGE
------------------------------------------------------------ */
.payout-box {
    background-color: rgb(255 255 255);
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    box-shadow: none;
    border: 1px solid var(--grey-100);
    padding: 30px 30px 30px;
}

.payout-header {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 20px;
}

.payout-header-status {
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

.payout-header-status i {
    font-size: 50px;
    margin-bottom: 20px;
}

.payout-header-status img {
    display: block;
    margin: 15px auto;
    width: 60px;
    height: auto;
}

.payout-header-status h3 {
    font-size: 20px;
    margin: 0;
}

.payout-header-status-caption {
    display: block;
    text-align: center;
}

.payout-header-status-caption h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.payout-header-status-caption h4 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

.payout-header-status-caption p {
    color: var(--color-text-2);
    font-size: 16px;
    margin: 0;
}

.payout-header-status-fail {
    background-color: #F8FAFC;
    padding: 20px;
    border-radius: 8px;
    margin: 15px 0 10px;
}

.payout-header-status-fail p {
    color: var(--color-text-2);
    font-size: 16px;
    margin: 0;
    text-align: center;
}

.payout-title {
    display: block;
    text-align: left;
    margin-bottom: 10px;
}

.payout-title h3 {
    font-size: 14px;
    line-height: 1;
    margin: 0;
}

.payout-desc {
    border-top: 1px solid #F1F5F9;
}

.payout-card-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
    margin: 10px 0 10px;
}

.payout-card-result p {
    margin-bottom: 5px;
    font-size: 14px;
    color: var(--color-text-2);
}

.payout-card-result h3 {
    margin-bottom: 5px;
    font-size: 24px;
    color: var(--color-text-1);
    font-weight: 600;
}

.payout-card-result h4 {
    margin-bottom: 5px;
    font-size: 16px;
    color: var(--color-text-2);
    font-weight: 400;
}

.payout-card-result .row {
    min-height: 120px;
}

.payout-card-result .payout-card-result-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.payout-card-result .payout-card-result-left .payout-card-result-item:last-child {
    margin-bottom: 0;
}

.payout-card-result .payout-card-result-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.payout-card-result .payout-card-result-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 15px;
}

.payout-card-result .payout-card-result-item h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
}

.payout-card-result .payout-card-result-item h4 {
    margin: 0 0 5px 0;
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
}

.payout-card-result .payout-card-result-total {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    margin-top: 30px;
}

.payout-card-result .payout-card-result-total h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 500;
}

.payout-card-result .payout-card-result-total h4 {
    margin: 0 0 5px 0;
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
}

.payout-bank-list {
    display: block;
    margin: 0 0 30px 0;
}

.payout-bank-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    border-left: 3px solid var(--grey-300);
    border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    padding: 5px 10px 5px;
    margin: 20px 0 20px;
}

.payout-bank-item .payout-bank-item-img {
    display: flex;
    width: auto;
    height: 30px;
    margin-bottom: 10px;
}

.payout-bank-item .payout-bank-item-img img {
    display: block;
    width: 100%;
    height: 100%;
}

.payout-bank-item .payout-bank-item-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: auto;
    padding: 0;
}

.payout-bank-item .payout-bank-item-desc h4 {
    font-size: 12px;
    margin: 0;
    line-height: 1;
}

.payout-bank-item .payout-bank-item-desc h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8;
    margin: 0;
}

.payout-bank-item .payout-bank-item-desc p {
    font-size: 12px;
    margin: 0;
    line-height: 1;
}

.payout-bank-item .payout-bank-item-action {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: auto;
}

.payout-bank-item .payout-bank-item-action .btn-mjk-link i {
    font-size: 16px;
    color: #666666;
}

.payout-amount {
    display: block;
    width: 90%;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border: 1px solid var(--grey-300);
    background-color: var(--grey-300);
    padding: 20px;
    margin: 0 auto 20px;
}

.payout-amount ul {
    list-style: none;
    margin: 0 auto;
    padding: 0 40px 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.payout-amount li {
    display: block;
    width: 100%;
    margin-bottom: 5px;
}

.payout-amount-value {}

.payout-amount-value p {
    display: block;
    margin: 0 5px 0 0;
    line-height: 1.4;
    text-align: left;
}

.payout-amount-value h3 {
    display: block;
    margin: 0;
    line-height: 1.4;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
}

.payout-amount-value h5 {
    display: inline-block;
    margin: 0;
    line-height: 1.4;
    font-size: 16px;
    font-weight: 600;
}

.payout-amount-info {
    text-align: center;
    margin: 10px 0 10px;
}

.payout-amount-info p {
    text-align: center;
    margin: 0;
}

/* =PAYMENT GATEWAY
-------------------------------------------------------------*/
.payget-box {
    display: block;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.payget {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border: 1px solid var(--grey-400);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.payget-top {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: var(--blue);
    padding: 15px 20px 25px 20px;
    border-radius: 0 0 25% 25%;
    -moz-border-radius: 0 0 25% 25%;
    -webkit-border-radius: 0 0 25% 25%;
}

.payget-body {
    display: block;
    position: relative;
    width: 100%;
    padding: 20px;
}

.payget-head {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin: 15px 0 0;
    padding: 10px;
    background-color: var(--grey-50);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.payget-head-title {
    display: block;
    width: 100%;
}

.payget-head-title h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0;
    color: #333333;
}

.payget-head-cost {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 145px;
    flex: 1;
}

.payget-head-cost h4 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 5px;
    color: #777777;
}

.payget-head-cost h3 {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: 5px;
    color: #232323;
}

.payget-head-cost p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0;
    color: #777777;
}

.payget-head-time {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--pastel-blue-dark);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    padding: 5px 10px 5px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    width: auto;
}

.payget-head-time h4 {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0;
}

.payget-head-time h3 {
    color: #FF0000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
    letter-spacing: 1px;
}

.payget-item {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0 5px;
}

.payget-item-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.payget-item-img img {
    display: block;
    width: auto;
    height: 25px;
    margin: 0 auto;
}

.payget-item-desc {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.payget-item-desc h4 {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 5px;
    color: #777777;
}

.payget-item-desc h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0;
    color: #232323;
}

.payget-item-action .btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    -webkit-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    -moz-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    padding: 2px;
}

.payget-item-action .btn i {
    font-size: 12px;
    color: #777777;
}

.payget-item-info p {
    font-size: 12px;
}

.payget-scancode-img {
    display: block;
    position: relative;
    width: 100%;
    padding: 10px;
}

.payget-scancode-img img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.payget-action {
    margin-top: 30px;
}