@import "need-use.less";
@lxrColor: #aa586b;

// @font-face {
//   .HeadFont;

//   src: url("https://belovedbeyond.com/theme/V01/fonts/bnb/headline/Beloved_BeyondHeadline-Regular.otf") format("opentype");
// }

// @font-face {
//   font-family: BodyFont;
//   src: url("https://cdn.belovedbeyond.com/theme/V01/fonts/bnb/body-text/Beloved_BeyondBodytext-Light.otf") format("opentype");
//   font-display: swap;
// }

body {
    .bg(@f);
    // .pdt(52px);
    .fs(14px);
    // font-family: 'Open Sans', sans-serif;
    // font-family: "K2D", sans-serif;
    font-family: arial, sans-serif;
    // font-family: BodyFont;
    .color(#1c1c1c);

    a {
        .color(#1c1c1c);
        &:hover {
            .color(@color1);
            .txtdec;
        }
    }
    // background-blend-mode: soft-light;
    // background-image: url(/img/bg-christmas-min.jpg);
    // background-repeat: no-repeat;
    line-height: 1.3;
}

.small,
small {
    .fs(11px);
}

.container {
    .pdl(0);
    .pdr(0);
}
.form-error{
    background-color: rgb(255, 195, 195);
    border: 1px solid #da2128;
}
#float_search_modal {
    .search-form {
        .title {
            left: 170px;
        }
        .action {
            left: 70px;
            .bg(@color1);
        }

        .opt {
            .w(44%);
            .mbt(10px);
            .datepicker {
                .auto-w;
            }
        }
    }
}

.HeadFont {
    // font-family: BodyFont;
    // letter-spacing: 0.7px;
}

.BodyFont {
    // font-family: BodyFont;
    // letter-spacing: 0.7px;
}

.h2 {
    // .HeadFont;
}

.cover {
    .mbt(10px);
    .bg(@f);
    .rd(4px);

    .border(@black06);
    .pd(15px);
    .mtitle {
        .ml(-10px);
    }

    &.rdx2 {
        .rd(8px);
    }
}

.coverbg {
    .bg(@black06);
}

.show-search-explain {
    .fb;
    .fs(21px);
    .pd(5px 0);
}

.avt-cover {
    @w: 100px;
    @pd: 8px;
    .w(@w + @pd);
    .h(@w + @pd);
    .rd(@w);
    .border(@black05);
    .pd(4px);
    .bg(@black06);
    .inblock;
    .avatar-circle {
        .rd(@w);
        .w(@w - 1px);
        .h(@w - 1px);
        .inblock;
        .bg(@f);
        .border(@black04);
    }
}

.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 2px @black06;
}

.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 2px @black06;
}

.btn-secondary.focus,
.btn-secondary:focus {
    box-shadow: 0 0 0 2px @black06;
}

.form-control:focus {
    .bg(#feffed);
    box-shadow: none;
    .border(@black05);
}

.fs-lg {
    .fs(120%);
}
.fs35 {
    .fs(35px);
}

.input-phone > .form-control:not(:first-child) {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.img-topline {
    width: 100%;
}

.space-sec {
    .mbt(30px);
}
.btn {
    .pd(0.575rem 0.75rem);
    .rd(8px);
    .fs(14px);
    line-height: 1.2;
}

.btn-group-sm > .btn,
.btn-sm {
    .fs(13px);
    .pd( 5px 10px);
    .rd(6px);
}

.btn-lg {
    .pd(0.775rem 1rem);
    .rd(10px);
    .fs(17px);
    line-height: 1.5;
}

.badge-primary {
    .bg(@color3);
}

.view-more {
    font-size: 13px;
    .inblock;
    .w(170px);

    padding: 15px 25px;
    .mt(20px);
    .mbt(20px);
    i {
        .hide;
        .ml(5px);
    }

    .fb;
    .color(@3);
    .border(@c);
    .transition(all, 0.5s);
    white-space: nowrap;
    &:hover {
        .w(190px);
        .border(@black01);
        .bg(@black01);
        .color(@f);
        i {
            display: inline-block;
        }
    }
}

.img-thumbnail {
    .border(#f1f1f1);
}

.bg_x,
._bg8 {
    .bg(@color8);
    .border(@color7);
}

.checkbox-line {
    .color(@color2);
    * {
        .color(@color2);
    }

    .pd(8px);
    .curpt;
    .rd(4px);
    .block;
    .text-left;
    .border(@color5);
    .bg(@f);
}

.left-menu-panel {
    .left-sec {
        .h {
            .fb;
            .bg(@color2);
            .pd(8px 15px);
            h4 {
                .fs(18px);
                .color(@f);
            }
        }

        .ctn {
            .border(@black05);
            .pd(15px);
        }
    }
    .close {
        .hide;
        position: absolute;
        right: -95px;
        color: #fff;
    }

    .sec {
        .mtitle {
            .txtUP;
            .ml(-10px);
            .fs(13px);
        }

        .btn {
            .pd(5px 10px);
        }
    }

    .other-relationships {
        .over-hidden;

        ul {
            li {
                // .pdbt(3px);
                img {
                    .w(25px);
                }
                a {
                    .nowrap;
                }
            }
        }
    }
}

.shop-map {
    .rela;
    .inblock {
        left: 50%;
        .ml(-100px);
        .color(@f);
        .fs(31px);
        .fw(600);
        .mt(50px);
    }
}

.maincolor {
    .color(@color1);
}

.subcolor {
    .color(@color04);
}
.subtext {
    .color(#767676);
}

.modal-title {
    .fs(25px);
}

// .container{
//   max-width: 95% !important;
// }

.gh7n {
    .pdt(10px);
    .list-cates {
        .container {
            .pd(0);
            background-color: transparent;
            .no-border;
        }
        .list-cate-item {
            .pd(20px 0);
            background: @black05;
            background: linear-gradient(180deg, @black06 0%, #fafafa 100%);
            &.trans {
                background: none;
            }

            .cate-item {
                h3 {
                    .fs(15px);
                    .mt(15px);
                }
                .mbt(15px);
            }

            .cate-focus-vertical {
                .h(700px);
                background-size: contain;
                background-repeat: no-repeat;

                .text-center;
                p {
                    .color(@color01);
                    .HeadFont;
                    .fw(600);
                    .pdt(103px);
                    .fs(33px);

                    .txtUP;
                }
            }

            ._1 {
                // pink

                p {
                    text-shadow: 0px 1px 0px darken(@color01, 20%);
                    .color(@color01);
                }
                background-image: url("/theme/V01/img/bg/pink@2x-min.png");
            }

            ._2 {
                // mint

                p {
                    text-shadow: 0px 1px 0px darken(@color02, 20%);
                    .color(@color02);
                }
                background-image: url("/theme/V01/img/bg/mint@2x-min.png");
            }

            ._3 {
                // yellow

                p {
                    text-shadow: 0px 1px 0px darken(@color05, 20%);
                    .color(@color05);
                }
                background-image: url("/theme/V01/img/bg/yellow@2x-min.png");
            }

            ._4 {
                // orange

                p {
                    text-shadow: 0px 1px 0px darken(@color06, 20%);
                    .color(@color06);
                }
                background-image: url("/theme/V01/img/bg/orange@2x-min.png");
            }

            ._5 {
                // purple

                p {
                    .color(@color07);
                    text-shadow: 0px 1px 0px darken(@color07, 20%);
                }
                background-image: url("/theme/V01/img/bg/purple@2x-min.png");
            }

            ._6 {
                // blue

                p {
                    .color(@color03);
                    text-shadow: 0px 1px 0px darken(@color03, 20%);
                }
                background-image: url("/theme/V01/img/bg/blue@2x-min.png");
            }

            ._7 {
                // red

                p {
                    .color(@color1);
                    text-shadow: 0px 1px 0px darken(@color01, 20%);
                }
                background-image: url("/theme/V01/img/bg/red@2x-min.png");
            }
        }
        .sec-head {
            .border-l(4px, @3);
            .rd(4px);
            .pdl(20px);
            .c-tag {
                .color(@color1);
                .mbt(7px);
                .fs(11px);
            }
            p {
                .color(@black03);
                .fs(12px);
            }

            .display-4 {
                .fs(23px);
                .fw(700);
                .mbt(5px);
                .split {
                    .pd(0 10px);
                    .fs(28px);
                    .color(@black05);
                }
            }
        }
    }
}

.box-shadow-df {
    .box-shadow(0px 4px 3px 1px, #f3f3f3);
}

.gh7n.bill-state .container {
    .pd(0);
}
.bill-state {
    .container {
        .max-w(900px);
        .box-shadow-df;

        .feature-vip {
            .bg(@color5);
            .curpt;
            .color(@3);
            .rd(8px);
            .pdt(15px);
        }
    }

    .order-info {
        // .border(@c);
        .bg(#f4f4f4);
        .pd(15px 25px);
        // .mg(20px);
        // .mt(0);
        // .pdt(0);
        // .pdbt(0);

        // legend {
        //   .fs(19px);
        //   // .fb;
        // }
        fieldset {
            .bg(@f);
            legend {
                .bg(@f);
            }
        }
        .cover {
            .mbt(20px);
            .border(@black05);
            // .bggray;
            i {
                .maincolor;
                .w(25px);
            }

            .mt(10px);
        }

        .total-cover {
            .rela;
            .table-ctn {
                .bg(@f);
                .fs(13px);
                .pdt(15px);
                .mt(50px);
                .border(@color1);
                .rd(0 0 4px 4px);
                td {
                    .pd(0.25rem 0.75rem);
                }

                .subcolor {
                    .nowrap;
                }
            }
        }

        .total-money {
            .abs;
            top: -35px;
            left: 0;
            right: 0;
            .rd(10px);
            .bg(@color1);
            .color(@f);
            .pd(10px);
            .fb;
            // .mbt(10px);
            span {
                .inblock;
                .fr;
                .fs-lg;
            }
            i {
                .fr;
                .w(15px);
                .ml(10px);
                .color(@f);
            }
        }

        .mtitle {
            .maincolor;
            .pdl(0);
            .mbt(0px);
            &:before {
                .hide;
            }
        }
    }

    .do-payment {
        // .bg(#ffffee);
    }

    .payment {
        .pd(15px);
        .rd(8px);
        .mbt(10px);
        .paied {
            .color(@xto_green);
        }

        &.not_paied {
            .t {
                .color(@color1);
            }
        }

        i {
            .inblock;
            .fs(17px);
        }
    }

    .payment-ctn {
        .total {
            .fb;
            .txtUP;
            .text-center;
            span {
                .fs(21px);
                .inblock;
                .mt(5px);
                .color(@color1);
            }
        }

        .discount-panel {
            .border(@black05);
            .rd(8px);
            .bg(#fdfeeb);
            .pd(15px);
            .mbt(15px);
        }

        .paypal-button-div {
            .pd(20px);
            .bg(#feffd7);

            .rd(4px);
            .border(#d0d281);
            .mg(15px 0);
        }

        .row {
            margin-right: -15px;
            margin-left: -15px;
        }

        // .form-check {
        //   .pd(10px);
        //   .bg(@f);
        //   .border(@c);
        //   .h(93%);
        //   .rd(4px);
        //   .pdl(40px);
        //   .mbt(15px);
        //   img{
        //     .max-h(60px);
        //     .mt(5px);
        //   }
        //   p{
        //     .mbt(0);
        //   }
        // }
    }

    .bill-info {
        z-index: 1000;
    }

    .wizard {
        // .mg(25px);
        .mbt(25px);
        ._6 {
            .ml(25px);
            li:last-child .bar {
                .hide;
            }

            li {
                .w(15%);
            }
        }
        .actions {
            .mt(25px);
            .text-center;
        }
        &._mobile {
            li {
                .w(100%);
                .text-left;
                .bar {
                    .w(10px);
                    .h(20px);
                    left: 12px;
                    top: 67%;
                }
                span {
                    .fl;
                    &.txt {
                        .mt(10px);
                        .ml(10px);
                    }
                }
            }
        }
        li {
            .rela;
            .inblock;
            .w(12%);
            .node {
                .w(30px);
                .h(30px);
                .pd(5px);
                .fs(17px);
                .inblock;
                .color(@f);
                .bg(@black05);
                .text-center;
                .rd(50px);
            }

            &.active {
                .node {
                    .bg(@color2);
                }
                .bar {
                    .bg(@color2);
                }
            }
            .bar {
                .w(97%);
                .abs;
                .h(6px);
                .bg(@black05);
                left: 27%;
                top: 33%;
            }

            span {
                .block;
                white-space: nowrap;
                .over-hidden;
                .fs(10px);
                text-overflow: ellipsis;
                .mt(5px);
            }
        }
    }

    .unc {
        //   .rd(8px);
        //   .border(@c);
        //   .bg(#ffffee);
        //   .pd(15px);
        //   .tips2{
        //     .rd(3px);
        //   }
    }

    h4 {
        .fs(17px);
        .mbt(0);
    }
}

.rela {
    position: relative;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: @color1;
}

.beloved-info {
    .pd(0 15px);
    .text-center;
    h3 {
        .mt(20px);
        .mbt(20px);
        .fb;
        p {
            .mbt(10px);
        }
    }
}
form {
    .checkbox {
        label {
            .ml(5px);
        }
    }

    &.form-bordered {
        .border(@d);
        .pd(25px);
        .rd(6px);
    }

    .required label,
    label.required {
        &:after {
            content: "*";
            .ml(3px);
            .color(@color3);
        }
    }
}

.app {
    .inblock;
    .max-w(600px);
    .message {
        .bg(@f);
        .mg(25px);
        .pd(25px);
        .border(@d);
        h2 {
            .fs(27px);
            .fw(500);
            .mbt(20px);
        }
        p {
            .fs(16px);
        }

        hr {
            .mg(25px);
        }
        p.small {
            .color(@9);
            .fs(14px);
        }

        &.ok {
            h2 {
                .color(@color01);
            }
        }

        &.error {
            h2 {
                .color(@color1);
            }
        }
    }

    .download {
        .bg(@f);
        .pd(25px);
        .inblock;
        .w(100%);
        // .mg(25px);
        // .head {
        //   img {
        //     .h(70px);
        //   }
        // }

        .body {
            .left {
                .border-r(@c);
            }
        }
    }
}

.goitienloi {
    .pd(35px 0);
    .bg(@color8);
    .border-t(@color7);
    .border-b(@color7);
}

.table .thead-dark th {
    .bg(#ddd);
    .border(#aaa);
    .pd(4px 8px);
    .fs(13px);
    .color(#333);
}

h1,
h2,
h3,
h4 {
    span {
        .fs(57%);
    }
}

.h1,
h1 {
    .fs(23px);
    .mbt(15px);
    line-height: 1.15;
    clear: both;

    span {
        .fs(100%);
    }
    .fw(600);
    .HeadFont;
    letter-spacing: 0;
}

// .h1 h1 {
//   .fl;
//   .mr(5px);
// }

.nowrap {
    white-space: nowrap;
}

.carousel-control-next,
.carousel-control-prev {
    .no-border;
    background: transparent;
}

.discount-badge {
    .w(32px);
    .h(35px);
    background-image: url("/theme/V01/img/discount-icon.png");
    background-repeat: no-repeat;
    .abs;
    top: 0;
    right: 0;
    .color(@f);
    .text-center;
    .typo-body {
        .color(@f);
        .h(7px);
    }
    span {
        .block;
    }

    .d-val {
        .fs(12px);
        .fb;
        .mt(2px);
    }
    .d-text {
        .fs(9px);
        .color(@d);
        .mt(-4px);
    }
}

.btn-info {
    .bg(@xto_green);
    .border(darken(@xto_green, 2%));
}

.btn-outline-info {
    .bg(@color8);
    .color(@color1);
    .border(@color8);
    &:hover {
        .bg(@color8);
        .color(@color1);
        .border(@color8);
    }
}

.ctn-part {
    .bg(@f);
    .border-t(@d);
    .pdt(10px);
}

.table-small-padding{
    td, th{
        .pd(3px 8px);
        vertical-align: middle;
    }

    .input{
        margin-bottom: 10px !important;
    }
}

.all-relationship-hoz {
    .rela;
    .border(#f0f0f0, 15px);
    // .mbt(15px);
    // .rd(6px);
    .pd(15px);
    .mtitle {
        .fl;
        .fs(19px);
        small {
            .fs(14px);
        }
    }

    .cover-all {
        .rela;
        .text-left;
        .pd(10px 0);
        width: 3000px;
        .mbt(5px);
        .date {
            .color(@9);
        }
    }

    .navi {
        .btn1 {
            position: absolute;
            background: rgb(255, 255, 255);

            top: 10px;
            height: 90%;
            vertical-align: middle;
            padding: 0 15px;

            i {
                .mt(54px);
                .fs(20px);
            }

            &:hover {
                background: rgba(230, 230, 230, 0.5) !important;
            }

            &.left {
                left: 0;
                background: linear-gradient(
                    -94deg,
                    rgba(255, 255, 255, 0.2) 0%,
                    rgba(238, 238, 238, 1) 100%
                );
            }
            &.right {
                right: 0;
                background: linear-gradient(
                    94deg,
                    rgba(255, 255, 255, 0.2) 0%,
                    rgba(238, 238, 238, 1) 100%
                );
            }
        }

        &.common {
            .btn1 {
                i {
                    .mt(11px);
                    .fs(14px);
                }
            }
        }
    }

    .relationships {
        .rela;
        .w(100%);
        .over-hidden;
        img {
            .w(60px);
            .h(60px);
        }
        .item{
          .min-w(100px);
        }
    }

    .row {
        .col-md-1 {
            .over-hidden;
            -ms-flex: 0 0 10%;
            flex: 0 0 10%;
            max-width: 10%;
        }
        .text-center;
    }

    .fs(12px);
    small {
        .fs(11px);
    }
    @w: 60px;
    .add-new {
        .inblock;

        .rd(@w);
        .w(@w);
        .h(@w);
        .mbt(7px);
        .rela;
        .bg(@color3);
        i {
            .fs(29px);
            .abs;
            top: 15px;
            left: 20px;
            .color(@f);
        }
    }
    p {
        .fb;
        white-space: nowrap;
        .mbt(0);
    }

    small {
        white-space: nowrap;
    }

    img {
        .w(@w);
        .h(@w);
        .mbt(7px);
    }
}

.master-page {
    .rela-list {
        .btn {
            .min-w(120px);
        }
    }

    .user-top {
        .bill-actions {
            .fr;
            .btn-info {
                .bg(@black06);
                .color(@black02);
                .border(@black05);
                .pdl(15px);
                .pdr(15px);
            }
        }

        .cover {
            .h(240px);
        }

        .home-to-address {
            .create-mycode {
                .mg(20px  0 0 0 );
                box-shadow: none;
                .h(240px);
            }
        }

        .user-info {
            // .bg(darken(@black07, 3%));
            .coverbg;
        }
        .bill {
            .imgs {
                .text-right;
                .img-thumbnail {
                    .h(156px);
                }
            }

            .b-info {
                // .bg(@f);
                // .rd(8px);
                // .pd(15px);
                .b-code {
                    .mbt(3px);
                    .HeadFont;

                    a {
                        .fs(17px);
                        .fw(700);
                        .mr(20px);
                    }

                    .money {
                        .fs(17px);
                        .color(@black01);
                        .fw(600);
                    }
                }

                .badge {
                    .rd(30px);
                    .mt(15px);
                    .pd(5px 15px);
                    .bg(@black03);
                    .color(@f);
                }

                p {
                    .mbt(5px);
                }

                .small {
                    .fs(10px);
                    .mbt(15px);
                    .color(@black03);
                }
            }
        }
    }

    .carousel-item {
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;

        // .h(480px);
        .h(380px);
        .full-p {
            .w(100%);
            .h(100%);
        }
    }

    .container.relationships {
        .bg(#f1f1f1);
        .rd(0);
    }

    .order-step {
        // border-bottom-left-radius: 0;
        //   border-bottom-right-radius: 0;
        .bg(@e);
        // .coverbg;
        .border(#f1f1f1);
        .pd(80px 0);
        .h2 {
            .fs(27px);
            .fb;
        }

        .steps-ctn {
            .mg(20px);
        }

        .btns {
            .mg(20px);
            .btn {
                .rd(35px);
                .fb;
                .fs(17px);
                .pd(10px 30px);
            }

            .btn-primary {
                .mt(15px);
            }

            .btn-outline-secondary {
                color: @black02 !important;
            }
        }
    }

    .masters {
        .sec-head {
            .text-left;
            // .ml(0);
        }
    }

    .new-product {
        .text-center;
        .display-4 {
            .border-b(@black05);
            .pd(15px 60px);
            .pdt(0);
            .inblock;
        }
    }
}

.ui-datepicker td span,
.ui-datepicker td a {
    .pd(15px);
    .fs(14px);
}

.ui-datepicker {
    width: 400px !important;
}

.vani-info {
    .mt(15px);
    .pd(15px);
    .mbt(10px);
    .rd(6px);
    .text-center;
    img {
        .w(60px);
        .h(60px);
        .rd(60px);
        .mbt(15px);
    }

    .connect {
        .fs(21px);
        .fb;
        .color(green);
    }
}

.user-page {
    h1 {
        .fs(25px);
        .mbt(5px);
    }
    h4 {
        margin-top: 10px;
        font-size: 1.2rem;
        font-weight: 600;
    }
    .info-user {
        p {
            .mbt(0);
        }
    }

    fieldset.decor{
        .bg(#f9f9f9);
        .mbt(20px);
        legend{
            .border(#e9e9e9);
            border-bottom: 0 none;
            .bg(#f9f9f9);
            .pd(3px 10px);
        }
    }

    .list-notify {
        .ntf-item {
            .bg(@f);
            &.not-read {
                .bg(@e);
            }
            .border(@c);
            .pd(10px);
            .mbt(10px);
            .rd(6px);
            .datetime {
                .color(@9);
                .fs(10px);
                .mbt(3px);
            }
            .icon {
                .fs(30px);
                .mt(10px);
            }
        }
    }

    #event_item {
        .btn-outline-secondary.active {
            color: @color1 !important;
        }
    }

    .btn-link {
        white-space: nowrap;
    }
    .circle {
        .rd(150px);
        .w(50px);
        .h(50px);
    }

    .input {
        .mbt(25px);
    }

    .add-voucher {
        .pd(20px);
        .bg(#ffecf0);
        .border(@color1);
        .rd(8px);
        .mbt(20px);
        h4 {
            .mt(0);
        }
    }

    .special {
        .today {
            .bg(@color1);
            .color(@f);
        }
        .sub {
            .color(@color02);
            .fs(90%);
        }
    }

    .shop-item {
        .border(@d);
        .bg(@f4);

        .shop-ava {
            .mr(10px);
            .fl;
            .rd(100px);
            .w(100px);
            .h(100px);
            .inblock;
            .bg(@f);
            .over-hidden;
            // img{
            // 	.h(84px);
            // }
        }
    }

    .person-info {
        .avt {
            .over-hidden;
            .fl;
            .mr(20px);
            // .border(@9);
        }

        .info {
            overflow: visible;
            .name {
                .fw(600);
                .fs(17px);
            }
            p {
                .mbt(3px);
            }
        }
    }

    .table {
        .plus {
            .color(@color01);
            &.fal {
                .fs(23px);
                .mg(5px);
            }
        }
        .min {
            .color(@color1);
            &.fal {
                .fs(23px);
                .mg(5px);
            }
        }
    }
    .date-input {
        select {
            .w(120px);
            .mr(10px);
            .inblock;
        }
    }
    .share-code {
        .fs(17px);
        .fal {
            .fs(40px);
            .color(@color1);
            .mbt(15px);
        }
        .form-control {
            .bg(@color2);
            .border(@color5);
            .color(#fff);
        }
    }
}

.qt0dong-status {
    .pd(10px);
    .text-center;
    // .border(@xto_yellow);
    .color(#000);
    .fs(0.98rem);
    .bg(@f);
    .hide;
}

.shop-regis {
    .bg(@color1);
    .pd(25px);
    .mt(15px);
    .rd(6px);
}

.dropzone {
    &.transparent {
        .h(1px);
        .w(1px);
        .min-h(1px);
        .min-w(1px);
        .pd(0);
        .over-hidden;
        .no-border;
        .bg(transparent);

        .dz-default {
            .h(1px);
            .w(1px);
            .no-border;
            .color(transparent);
            .bg(transparent);
        }
    }
}

.bgdrop-black {
    .ele-bg {
        .bg(rgba(0,0,0,0.5));
        .fix;
        .w(100%);
        top: 0;
        left: 0;
        .h(100%);
        z-index: 100;
    }

    .ele-show {
        .rela;
        .rd(30px);
        .bg(@f);
        z-index: 200;
    }
}

.mmain {
    .mbt(35px);
    .btn-go-back {
        .mbt(15px);
    }

    #left-menu-panel {
        .fix;
        .h(100vh);
        .nav {
            .nav-item {
                .rd(10px);
                &.active {
                    .bg(#fff);
                    .nav-link {
                        .pdbt(13px);
                    }
                }
            }
        }

        .close {
            .abs;
            top: 0;
            right: 0;
        }
    }

    .nav-pills {
        .nav-link {
            .pd(5px 7px);
        }
    }

    .subcontent {
        table td,
        table th {
            .fs(14px);
            .pd(5px 8px);

            &.label {
                .bg(@f4);
                .text-right;
                .w(30%);
            }
        }

        .pre-line {
            white-space: pre-line;
        }

        .editor {
            .mg(15px 0);
            .pd(10px);
            border: 1px dashed #ffc107;
            .actions {
                .mt(15px);
                .btn {
                    .pd(5px 20px);
                }
            }
        }

        .mt(25px);

        a {
            .color(@h7ncolor);
        }

        a.btn {
            .color(@f);
        }

        ._ok {
            .color(green);
        }

        ._error {
            .color(red);
        }

        .sta {
            .pd(3px 10px);
            .inblock;
            .rd(3px);

            &.sta_1 {
                .bg(#ffc107);
            }

            &.sta_2 {
                .bg(#86e686);
            }

            &.sta_6 {
                .color(#28a745);
                .fb;
                .border(#28a745);
            }
        }

        .dropzone {
            min-height: 150px;
            border: 2px solid rgba(0, 0, 0, 0.3);
            background: white;
            padding: 20px 20px;
        }

        .bill-info {
            .pd(10px);
            .bg(#fffdb9);
            .border(#f0ee92);
        }

        .bill-detail {
            .hd-row {
                .bg(#9dd8ff);
            }

            .bill-number {
                .mbt(15px);
                .no-index {
                    .inblock;
                    .fs(50px);
                    .pd(10px);
                    .w(100px);
                    .h(100px);
                    .rd(100px);
                    .bg(#ffc107);
                    .color(#fff);
                }

                .btn {
                    .mg(15px 0);
                    .pd(5px);
                }
            }

            .action-info {
                .mbt(25px);
                .pd(15px);
                .bg(#cbf2ff);
                .color(@h7ncolor);
                .btn-group {
                    .mg(15px 0);
                    .btn {
                        min-width: 100px;
                    }
                }
            }
            .main-image {
                .mg(20px 0);
                .max-w(100%);
                .border(@color5);
                .pd(5px);
                .rd(5px);
                .inblock;
            }

            .state-list {
                .mbt(20px);
                .pd(15px);
                .border(@color5);
                .text-left;
                .btn {
                    .text-left;
                }
            }
        }
    }
}

.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}
@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

.loader {
    .fix;
    .pd(25px);
    top: 0;
    left: 0;

    .w(100%);
    .h(100%);
    .bg(rgba(203,242,255,0.9));
    .text-center;

    .circle {
        .mt(30%);
        .rd(100px);
        .inblock;
        .pd(30px);
        .bg(rgba(1,148,243, 0.7));
        //.border(#07899e);
        img {
            .w(50px);
            .inblock;
        }
    }
}

.btn-outline-secondary {
    background-color: @f !important;
    border-color: @black04!important;
    box-shadow: 0px 3px 1px 1px transparent;
    color: @3 !important;
    &:hover {
        background-color: @black06 !important;
    }

    &.active {
        border-color: @color1 !important;
        // color:@color1 !important;
        background-color: #ffedf0 !important;
        box-shadow: 0px 3px 1px 0px @black06;
    }
}

.cashback {
    .rd(10px);
    .bg(#f4f4f4);
    .border(@e);
    .color(@xto_green);
    .mt(5px);
    .fs(12px);
    .pd(4px 10px);
    .inblock;
}

#cart-msg-timer {
    .fix;
    .pd(10px 5px);
    .rd(7px);

    .bg(#fff8be);
    .border(#ff9800);
    box-shadow: -1px 4px 10px #ccc;
    top: 57px;
    right: 10px;
    .text-center;
    .fs(13px);
    .min-w(175px);
    z-index: 10;
    p {
        .mbt(5px);
    }
    .t {
        .fb;
        .fs(9px);
    }
    .v {
        .fw(600);
        .fs(27px);
        line-height: 1;
        .color(@color1);
    }
}

fieldset {
    .border( #e9e9e9);
    .pd(20px);
    .mbt(15px);
    .rd(6px);
    legend {
        .fs(17px);
        .pd(0 8px);
        width: auto;
    }
}

.modal-dialog-scrollable .modal-body {
    .h(65vh);
    max-height: calc(100% - 0rem);
}

@media (min-width: 576px) and (max-width: 1000px) {
    .top-page-search .logo-search {
        .h(215px);
    }

    .home-to-address {
        position: static !important;
        .search-form .search-main {
            &:before {
                width: 10%;
            }
            &:after {
                width: 10%;
            }
        }
    }
}

@media (min-width: 576px) {
    .modal-dialog-scrollable {
        max-height: calc(100% - 0rem);
        .modal-content {
            max-height: 81vh;
        }
    }
}

.float-banner {
    .abs;
    left: 5px;
    top: 323px;
    .w(150px);
    .rd(4px);
    &.right {
        left: auto;
        right: 5px;
    }

    &.fixed {
        .fix;
        top: 60px;
    }
}

#top-message {
    .abs;
    top: 10px;
    left: 15px;
    right: 15px;
    .pd(10px 20px);
    .rd(5px);
    .bg(#ffc107);
    .text-center;
    .hide;
}

.slider-ctn {
    .over-hidden;
    @h: 207px;
    .rela;

    .mbt(15px);
    .slider-over {
        &.hasrow {
            .pd(0 15px);
            .row {
                .mr(15px);
                .col-md-2 {
                    .pd(5px);
                }
            }
        }

        .rela;
        .h(@h);
        // .w(10000px);
        .over-hidden;
        // .transition(transform, 1s, 'linear')
        .slider-panel {
            .w(1110px);
            .fl;
        }
    }

    .act {
        .abs;
        .text-center;
        .bg(rgba(255,255,255,0.5));
        .h(50px);
        .rd(50px);
        .w(50px);
        z-index: 10;
        top: 78px;
        .pdt(10px);

        &:hover {
            .bg(@color2);
            .fal {
                .color(@f);
            }
        }
        .fal {
            .fs(30px);
            .color(@b);
        }
        &.left {
            left: 16px;
        }
        &.right {
            right: 16px;
        }
    }
}

.row.justify-content-md-center {
    .mg(0);
}

.space-section {
    .h(15px);
    .w(100%);
}

.divider {
    .text-center;
    .pd(10px);
    span {
        .border-b(@black05);
        .w(200px);
        .inblock;
    }
}

.container {
    &.no-pad {
        padding: 0 !important;
        .no-border;
    }
}

.form-control-plaintext {
    .pd(0);
}
.gh7n {
    .receiver-info {
        .w(100%);
        .inblock;

        .table td {
            .pd(0.25rem 1rem);
        }

        .empty-event {
            border: 1px dashed @color3;
            .pd(15px);
            .rd(20px);
        }

        .events {
            .day-item {
                .ml(0);
                .mr(0);
                .pdr(0);
                .bg(#ffead7);
                .border(@color06);
                .box-shadow(0px 3px 5px, @e);

                .ll {
                    .bg(@color06);
                    .pd(0);
                    .text-center;
                    margin: -15px -15px -15px -15px;
                    border-radius: 4px 0 0 4px;

                    .date {
                        .fs(17px);
                        .color(@f);
                    }
                    .oc {
                        .fs(11px);
                        .mt(15px);
                        .color(@f);
                    }
                }

                .rr {
                    .pdl(25px);
                    .ml(15px);
                    .img-thumbnail {
                        .w(60px);
                    }

                    .btn {
                        .fr;
                    }
                }
            }
        }
    }

    .order-step-page {
        .text-center;
        .steps-ctn {
            .mbt(20px);
            a {
                .inblock;
                .ml(3px);
                .fs(13px);
                .color(@black02);
            }
        }

        .large {
            .inblock;
            .text-center;
            .mbt(30px);
            .max-w(500px);
            .w(100%);
            .avt {
                .mbt(20px);
                .avt-cover {
                    .w(150px);
                    .h(150px);
                    .rd(150px);

                    .avatar-circle {
                        .w(140px);
                        .h(140px);
                        .rd(150px);
                    }
                }
            }

            .info {
                .name {
                    .fs(19px);
                    .fw(600);
                }
            }
        }

        .m {
            .mbt(60px);
            .pd(50px);
            .pdt(30px);
        }

        .sec-head {
            .text-center;
            .mt(0);
            .ml(0);
            .mbt(30px);
            .display-4 {
                .fs(25px);
                span {
                    .fs(25px);
                }
            }
        }

        .h3 {
            .fs(17px);
            .fw(300);
            .mbt(15px);
            &.mbt15 {
                .mbt(30px);
            }
        }

        .location-selection {
            .mt(50px);
            .btn-prov {
                .fs(17px);
                .fw(600);
                .h(50px);
                .bg(@f);
            }

            .district_ {
                // .rd(35px);
                .fs(17px);
                .fw(600);
                .h(50px);
                .bg(@f);
                .text-center;
            }

            .btn-primary {
                .mt(22px);
            }
        }

        .other-gifts {
            .nav {
                .HeadFont;
                .mg(15px);
                .fs(19px);
                .fb;
                .nav-item {
                    .rd(4px);
                    // .border-b(@color2);
                    .mr10;
                    .mbt(10px);
                    .nav-link {
                        .pd(0.5rem 0.7rem);
                    }
                    &.active {
                        // .bg(@color1);
                        // .color(@color1);
                        .border-b(@color1);
                        a {
                            .color(@color1);
                        }
                    }
                }
            }
        }

        .targets {
            // .mbt(40px);
            .h3 {
                .fs(21px);
                .pdt10;
                .maincolor;
                .HeadFont;
                .fb;
                span {
                    .w(70px);
                    .h(1px);
                    .border-t(#F7A8B0);
                    .mg(5px 3px);
                    .inblock;
                }
                b {
                    .pd(0 40px);
                    .l {
                        left: 0;
                    }
                    .r {
                        right: 0;
                    }
                }
            }

            .list-item {
                .mt(20px);
            }
        }

        .tg-item {
            .cover;
            .mt(0);
            // .curdf;
            .bg(@black07);
            .mbt(15px);
            .rd(12px);
            .text-center;
            &.disabled {
                .bg(@black05);
            }

            .btn-edit {
                .abs;
                right: 25px;
            }

            &:hover {
                .bg(darken(@black07, 2%));
            }
            &.active {
                .bg(lighten(@color1, 10%));
                .border(@color1);
                p {
                    .color(@f);
                }
                span {
                    .color(@f);
                }
            }

            &.add-item {
                p {
                    .w(124px);
                    .over-hidden;
                    text-overflow: ellipsis;
                    .fs(14px);
                    white-space: nowrap;
                }
            }

            p {
                .mbt(3px);
                .fs(17px);
                .fb;
                .color(@black02);
            }
            span {
                .color(@black03);
            }

            .tg-avt {
                @w: 100px;
                img {
                    .rd(@w);
                    .w(@w);
                    .h(@w);
                }

                .mbt(15px);
            }
        }

        .family {
            .tg-item {
                .pd(20px 5px);
            }
        }
    }

    .giftcard {
        padding-top: 0 !important;
        max-width: 100%;
        width: 600px;
        .product-info {
            .pd(20px);
            .w(100%);

            #g-info {
                td {
                    .pd(15px);
                }
            }
            fieldset {
                .pd(10px 20px);
                .card-body {
                    .pd(0);
                }
            }

            .mprice {
                .fb;
                .fs(17px);
                .color(@color1);
            }

            .payments {
                .pd(0);
            }
            .total {
                .fb;
                .fs(17px);
                .color(@3);
            }
        }
    }

    .master-list {
        &.bgnew {
            .pdt(70px);
            .mbt(15px);
            background-image: url("/theme/V01/img/line-decor.png");
            background-position: top center;
            background-repeat: no-repeat;
        }

        .row {
            .pdl(-7.5px);
            .pdr(-7.5px);
        }
        .items {
            // display: flex;
            // flex-wrap: wrap;
        }

        .info {
            opacity: 0;
            top: 0;
            position: absolute;
            z-index: 120;
            background: rgba(254, 103, 134, 0.25);
            padding: 10px;
            width: 100%;
            border-radius: 0 0 18px 0;
            .transition(all, 0.3s);
            .count {
                .color(#555);
                .fs(11px);
            }
        }
        .col-md-1 {
            .pdl(7.5px);
            .pdr(7.5px);

            &:hover {
                .info {
                    opacity: 1;
                }
            }
        }

        .col-home {
            border: 1px dashed @black05;
            .bg(@black07);

            .h(164px);
            .w(100%);
            .mbt(15px);
            &.h {
                .bg(#fff9e3);
            }
        }

        .col-home-value {
            .abs;
            z-index: 20;
            .rd(6px);
            .over-hidden;

            .btn-rm-cate {
                .abs;
                right: 0;
                top: 0;
                z-index: 10;
            }
        }

        .add-cate {
            .abs;
            .w(250px);
            .pd(10px);
            .text-left;
            .bg(@black06);
            .border(@black04);
            z-index: 1200;
            .box-shadow(0px 4px 20px 3px, #ccc);
            .form-control {
                .mbt(10px);
            }
        }

        // .mst-i {
        //   .rela;
        //   .pd(5px);
        //   .text-center;
        //   .mbt(15px);
        //   // .inblock;
        //   .rd(6px);
        //   // .w(143px);
        //   .h(185px);

        //   // flex: flex-grow;
        //   // flex: 0 0 12.5%;
        //   .border(transparent);
        //   .transition(all,  0.5s);
        //   &.large{
        //     .h(370px);
        //   }
        //   img{
        //     .transition(all,  0.5s);
        //   }
        //   .discount-badge{
        //     top: 5px;
        //     right: 5px;
        //     z-index: 10;
        //   }

        //   h3 {
        //     .mt(8px);
        //     .fs(14px);
        //     .fw(500);
        //     // height: 33px;
        //     .h(33px);
        //     .over-hidden;
        //     // overflow: hidden;
        //   }

        //   &:hover {
        //     .border(@f);
        //     .box-shadow(0 8px 8px -2px, #e0e0e0);
        //     img{
        //       transform: scale(1.1);
        //     }
        //     .cta{
        //       .inblock;
        //       opacity: 1;
        //       bottom: 40%;
        //     }
        //   }
        // }
    }
    .program {
        &.container {
            // .max-w(600px);
            .pd(25px);
        }
        .h1 {
            .fs(29px);
            .fw(600);
            .text-center;
        }
        .h3 {
            .fs(1.35rem);
        }
        .h2 {
            .fs(1.75rem);
            .fw(600);
            .text-center;
        }
        .spa {
            .mt(25px);
            img {
                .max-w(300px);
                .mg(10px);
            }
        }

        p {
            .mbt(0);
        }
    }

    .flo {
        background-image: url("/img/icons/flowers/all-min.jpg");
        background-repeat: no-repeat;
        background-position: -16px 0px;
        background-size: auto 16px;
        .rd(16px);
        .w(16px);
        .h(16px);
        .inblock;
        .fl;
        .mr(3px);

        &._1,
        &._2,
        &._3 {
            background-position: -16px 0px;
        }

        &._4 {
            background-position: -96px 0px;
        }

        &._5 {
            background-position: -48px 0px;
        }

        &._6 {
            background-position: -80px 0px;
        }

        &._7 {
            background-position: -32px 0px;
        }
    }

    .flower-type {
        .rd(20px);
        .bg( fade(@color3, 70));
        .pd(2px);
        .fl;
        right: 5px;
        bottom: 5px;
        .abs;
        z-index: 10;

        ._t {
            .fs(10px);
            .color(@f);
            max-width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            // .inblock;
            .hide;
            .mr(5px);
            .fl;
        }
    }

    .shop-page-list {
        .search-form {
            .form-control {
                .h(38px);
            }
        }
    }
    .img-results {
        .img-input {
            .border(@color1);
            .mbt(15px);
        }
        .mbt(15px);
    }

    .title_h2 {
        .fs(19px);
        .fw(600);
    }

    .sentences {
        .fs(17px);
        .q {
            .pd(8px 4px);
            .border-b(@color4);
        }
    }
    .container.promote {
        .bg(@color7);

        .like-page {
            .pd(15px);
            .pdt(80px);
            .bg(@f);
            .h(100%);
            .icon {
                .fl;
                img {
                    .mr(15px);
                }
            }
            small {
                .fl;
                .w(100%);
                .mg(25px 0);
                .pdt(20px);
                .fw(300);
                .border-t(#eee);
            }

            .info {
                .pdt(15px);
                visibility: visible;
                .text-left;
                .h4 {
                    .fw(600);
                }
                .h5 {
                    .fw(600);
                    .color(@color1);
                }
                p {
                    .fw(300);
                }
            }
        }
    }

    .clients {
        .text-center;
        img {
            .h(45px);
            .mbt(10px);
        }
    }

    .container {
        .pd(15px);
        .rd(4px);

        // .bg(@f);
        // .border(#f1f1f1);

        &.transparent {
            // .bg(transparent);
            // border: 0 none;
            .pd(0);
        }

        &.relationships {
            .btn-outline-secondary {
                // border-color: @color4 !important;
                .fw(600);
                &:hover {
                    background: @color1 !important;
                    color: @f !important;
                }
                // color: #fff !important;
            }
        }

        // &:first-child{
        // 	border-bottom:0 none;
        // }

        // &:last-child{
        // 	border-top:0 none;
        // }

        // &.shop-luxury{
        // 	@color: #fbdbce;
        // 	.gradient(fade(lighten(@color, 5%), 50%), fade(@color, 50%));
        // 	.border(@color);
        // 	.btn-primary{
        // 		background-color: darken(@color, 10%) !important;
        // 		.border(darken(@color, 15%));
        // 		&:hover{
        // 			background-color: darken(@color, 15%) !important;
        // 		}
        // 	}

        // }

        // &.shop-offer{
        // 	@color: #b0e0db;
        // 	.gradient(fade(lighten(@color, 5%), 50%), fade(@color, 50%));
        // 	.border(@color);
        // 	.btn-primary{
        // 		background-color: darken(@color, 10%) !important;
        // 		.border(darken(@color, 15%));
        // 		&:hover{
        // 			background-color: darken(@color, 15%) !important;
        // 		}
        // 	}
        // }

        // &.shop-favorite{
        // 	@color: #f2b9ad;
        // 	.gradient(fade(lighten(@color, 5%), 50%), fade(@color, 50%));
        // 	.border(@color);
        // 	.btn-primary{
        // 		background-color: darken(@color, 10%) !important;
        // 		.border(darken(@color, 15%));
        // 		&:hover{
        // 			background-color: darken(@color, 15%) !important;
        // 		}
        // 	}
        // }
    }

    .cate-focus {
        // background-image: linear-gradient(to bottom right,  rgba(254,103,134,1),  rgba(255,0,0,0));
        // .sec-head {
        // 	.border-b(#ff9f9f);
        // }
        // .bg(@color7);
        // .bg(#fff6d1);
        .border(#ddd);
    }

    .sec-head {
        // .bg(@color8);
        //.pd(10px 20px 20px 20px);
        .mbt(15px);
        .text-left;
        // * { .fs(175%); }

        &.home {
            .mt(35px);
            .bg(@f);
        }

        // .border-b(@f4);
        // .mbt(20px);
    }

    .display-4 {
        .fs(21px);
        .fw(600);
        .mbt(10px);
        .HeadFont;
        text-transform: capitalize;
        // .text-center;
        span {
            .fs(15px);
            .fw(600);
            .color(@color1);
        }
    }
    .lead {
        .fs(14px);
        .mbt(10px);
        .color(#767676);
        // .text-center;
    }

    .product-info {
        .w(1140px);
        .max-w(100%);

        .vip-cover {
            .cover {
                margin: 0 -15px;
            }
        }

        .img-fluid {
            .min-w(100%);
        }

        .add-to-wlist {
            .abs;
            z-index: 1000;
            right: 25px;
            top: 50px;
        }
        // &.row {
        //   .mg(0 -15px 0 -15px);
        // }
        .p-images {
            .mt(15px);
            img {
                .mbt(5px);
                .border(@black05, 2px);
                .pd(2px);
            }

            .col-md-2 {
                .pd(2px);
            }

            .active {
                img {
                    .border(@color3, 2px);
                }
            }
        }

        .cbo-prod {
            .img-thumbnail {
                .w(70px);
            }
        }

        .flo {
            margin: 3px;
            margin-right: 0;
        }

        ._disc {
            // .abs;
            // top:10px;
            // right: 25px;
            .rd(5px);
            .block;
            .mbt(5px);
            .bg(@color2);
            .text-center;
            .color(@f);
            &.new {
                .bg(#00c9b7);
            }
            &._quick {
                .bg(@color1);
            }

            &.flower {
                .bg(@color3);
            }
            span {
                .fs(14px);
                .inblock;
                .pd(2px 5px);
            }
        }

        .desc {
            // .fs(13px);
            // .color(#555);
            // white-space: pre-line;
            // white-space: initial;
            // p{
            // 	.mg(0);
            // }

            a {
                .fb;
                .color(@color1);
            }

            label {
                .clearfix;
            }
        }

        .datetime-selected {
            .mt(20px);
            .pd(10px);
        }

        .tips {
            .fal {
                .fs(45px);
                .mbt(15px);
            }
        }

        .prices {
            .active {
                .pr-item {
                    .fa-check-circle {
                        .show;
                    }
                }
            }

            .pr-item {
                // .border-b(@c);
                // .pdbt(10px);
                // .mbt(10px);
                .fa-check-circle {
                    .fs(25px);
                    .abs;
                    right: 12px;
                    .hide;
                    .color(@color1);
                }

                b {
                    .color(@color1);
                    .fs(15px);
                    .mt(5px);
                    .block;
                    .clearfix;
                }
                .save {
                    .cashback;
                }
                s {
                    .color(@9);
                }
            }

            .row {
                .mg(0);
                .col-md-4 {
                    .pd(5px);
                }
            }

            .btn-outline-secondary {
                .w(100%);
                .h(100%);
                .rd(12px);
                .pd(5px);
                img {
                    .w(60px);
                }

                .info {
                    .mt(10px);
                    line-height: 1.3;
                    .fs(small);
                    // .color(@black05);
                    small {
                        .color(@3);
                        .fs(small);
                        .fb;
                    }
                }
            }
        }

        fieldset {
            .mt(10px);
            .rd(5px);
            .border(@9);
        }

        .fl-info {
            top: 41px;
            right: 25px;
            .abs;
        }

        .p-attrs {
            //.bg(@f4);
            // .border(@e);
            // .pd(20px 0);
            .mt(25px);

            .color-block {
                .inblock;
                .w(45px);
                .h(25px);
                .mr(3px);
                border: 1px solid rgba(30, 30, 30, 0.2);
            }
        }

        .h1 {
            .mbt(20px);
            .fs(27px);
        }
    }

    // .product-feature{
    // 	.span{
    // 		.abs;
    // 		.w(100%);
    // 		left:0;
    // 		bottom: 0;
    // 		.pd(5px 10px);
    // 		.fs(0.98rem);
    // 		.mbt(0);
    // 		.bg(#BD8088);
    // 		.color(@f);
    // 		white-space: nowrap;
    // 	}

    // 	img{
    // 		.rd(4px);
    // 	}

    // 	.mr(0);
    // 	.col-md-2{
    // 		.pdr(0);
    // 	}

    // 	.col-4{
    // 		.mbt(15px);
    // 	}
    // }

    .card {
        .mbt(15px);
        .card-body {
            .pd(10px);
        }

        .cart-title {
            font-size: 17px;
            font-weight: 500;
        }
    }

    .subscription {
        .pd(30px);
        .pdt(0);
        .bg(#fff3d0);
        fieldset {
            .border(@color5);
            .pd(15px);
            legend {
                // .bg(@f);
                .pd(5px 15px);
            }
        }
    }

    .products {
        .sparator {
            .h(20px);
        }

        .p-item {
            // .border(#e4e4e4);
            // .border-b(#aaa);
            .mbt(15px);
            .rd(6px);
            // .transition;
            // .buy-now {
            //   .rd(50px);
            //   .hide;
            //   .w(50px);
            //   .h(50px);
            //   .bg(@color1);

            //   .border(@f);
            //   .pd(3px);
            //   .abs;
            //   left: 25px;
            //   bottom: 25px;
            //   z-index: 10;
            //   a {
            //     color: #fff;
            //     font-size: 10px;
            //     display: block;
            //     line-height: 1.2;
            //     text-align: center;
            //     font-weight: 700;
            //     padding-top: 7px;
            //     width: 42px;
            //     height: 42px;
            //     border-radius: 40px;
            //     border: 1px solid #fff;
            //   }
            // }

            .transition(all,  0.5s);
            img {
                .transition(all,  0.5s);
            }

            @keyframes xtofade {
                0% {
                    opacity: 1;
                }
                50% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }

            &:hover {
                // .border(@color10);
                // .border-b(@color02);
                // .box-shadow(0 0 3px, @color02);

                .bg(@f);
                .box-shadow(0 8px 8px -2px, #e0e0e0);

                img {
                    transform: scale(1.1);
                    opacity: 0.5;
                }
                .cta {
                    .inblock;
                    opacity: 1;
                    // transform: translate(-50%,  -150%);
                    bottom: 40%;
                }

                .edit-btn {
                    .alpha(100);
                    z-index: 100;
                }

                // .buy-now {
                //   .block;
                //   animation: xtofade 1s 1s infinite linear alternate;
                // }
                .flower-type {
                    ._t {
                        .inblock;
                    }
                }
            }

            .edit-btn {
                top: 0;
                .abs;
                left: 15px;
                z-index: -1;
                .pd(8px 10px);
                .border(@e);
                .alpha(0);
                .bg(@f);
                box-shadow: 6px 3px 10px 1px #ccc;
                .btn {
                    .h(34px);
                    .w(34px);
                    .mg(0 0 5px 0);
                    .pd(5px 0 0 0 );
                }
            }
        }

        .cate-spa {
            // .pd(15px);
            .mbt(5px);
            // .bg(@color06);
            .fl;
            .w(100%);
            .cimg {
                .fl;
                .mr(25px);
                img {
                    .h(100px);
                }
            }

            .cate-text {
                h3 {
                    text-transform: uppercase;
                    .fs(22);
                    .fw(600);
                }
            }
        }

        .cate {
            .c-info {
                .mbt(15px);
                .ava {
                    .w(auto);
                    .fl;
                    .mr(15px);
                    img {
                        .h(85px);
                    }
                }

                .c-name {
                    overflow: visible;
                    h4 {
                        text-transform: uppercase;
                    }

                    .lead {
                        .text-left;
                    }
                }
            }
        }

        &.view-only {
            img {
                .border(@e);
            }

            ._over {
                .curpt;
                .alpha(50);

                .icon {
                    position: absolute;
                    right: 14px;
                    top: -3px;
                    font-size: 26px;
                    color: #00bcd4;
                    .hide;
                }

                &.active {
                    .icon {
                        .show;
                    }
                    img {
                        .border(@h7ncolor);
                    }

                    .alpha(100);
                }
                .transition;
            }
        }

        .code {
            background: fade(@color1, 70%);
            .color(@f);
            z-index: 1;
            .abs;
            top: 174px;
            left: 16px;
            .pd(4px 7px);
        }

        .color-edit {
            bottom: 0;
            .abs;
            .w(40px);
            .h(40px);
            left: 0;
            z-index: 10;
            .curpt;
            .pd(5px);
            span {
                .w(15px);
                .h(15px);
                .rd(2px);
                .inblock;
                background: #fff;

                border: 1px solid rgba(0, 0, 0, 0.3);
            }

            .colors {
                .w(121px);
                .abs;
                background: rgba(255, 255, 255, 0.4);
                .pd(4px);
                .border(@c);
                top: -124px;
                left: -124px;
                .rd(3px);
                span {
                    .w(25px);
                    .h(25px);
                }
            }
        }

        .row {
            // .mr(0);
            .col-md-2,
            .col-6 {
                .pd(5px);
            }
        }

        .img-cover {
            .rela;
            .text-center;
            .over-hidden;
            // .min-h(218px);
            .w(100%);
            vertical-align: middle;
            .inblock;
            //.border-b(@f4);
            img {
                .rd(6px);
            }

            .cbo-tag {
                z-index: 10;
                position: absolute;
                right: -22px;
                .rd(0);
                transform: rotate(45deg);
                top: 17px;
                .bg(@color1);
                width: 102px;
                .color(#fafafa);
            }

            ._disc {
                .abs;
                top: 5px;
                right: 5px;
                .rd(4px);
                .inblock;
                .bg(@color2);
                .text-center;
                .color(@f);
                &.new {
                    .bg(#00c9b7);
                }
                &._quick {
                    .bg(@color1);
                }

                &.fav {
                    .bg(#9ea100);
                }
                span {
                    .fs(14px);
                    .inblock;
                    .pd(2px 5px);
                }
            }
        }

        .p-info {
            //.pd(0 10px);
            // .text-left;
            .pd(10px);

            .more-info {
                .mt(10px);
                .fs(11px);
                .color(@9);
            }

            // .add-to-cart {
            //   .fs(21px);
            //   .fr;
            // }

            .p-code {
                // .abs;
                // right: 5px;
                // bottom: 10px;
                .fs(11px);
                .inblock;
                .mbt(3px);
                .color(#9f9f9f);
                // .pd(3px 5px);
                // .bg(#eee);
                // .rd(4px);
            }

            .free-ship {
                .fs(11px);
                .inblock;
                .fr;
                .color(#0abc05);
            }

            .h5 {
                .fs(12px);
                .mbt(3px);
                .fw(400);
                .w(100%);
                line-height: 2.4;
                span {
                    .fw(600);
                }
            }
            .route {
                .fs(10px);
                .color(@9);
            }
            .pr {
                .fs(13px);
                .mbt(5px);
                .color(#333);
                b {
                    .color(@3);
                    .fs(13px);
                }
                s {
                    .color(@9);
                }

                span {
                    .w(100%);
                    i {
                        text-decoration: line-through;
                        .color(#999);
                    }
                    .inblock;
                }

                .save {
                    .color(@xto_green);
                    .fs(11px);
                }
            }
        }

        .shop-info {
            .pd(5px 10px);
            .bg(@f4);
            overflow: visible;
            .fs(14px);
            .color(#999);
            .text-truncate {
                .w(100%);
            }
            .est-time {
                .color(@color02);
                .block;
                .fs(10px);
            }
        }
    }

    .home-cates {
        h3 {
            .fs(20px);
            .fw(600);
            .mbt(20px);
        }

        &.small {
            .cate-item {
                h4 {
                    .fs(14px);
                    .fw(600);
                }
                span {
                    .fs(10px);
                }

                .img-cover {
                    .w(100px);
                    .h(100px);
                    .inblock;
                    .over-hidden;
                    .mbt5;
                    .rd(50px);
                    .border(@color5, 2px);
                }
            }
        }

        .cate-item {
            .text-center;
            h4,
            h3 {
                .fs(17px);
                .mbt(0px);
                .fw(500);
                line-height: 1.3;
                // .over-hidden;
                // .w(100%);
            }

            .mbt(30px);
            span {
                .fs(11px);
            }
            img {
                //.min-w(200px);
                .border(@e);
                .rd(4px);
                //.min-h(300px);
                .inblock;
                .mbt(10px);
            }
        }
    }

    .home {
        .action-panel {
            // .bg(@black06);
            // .rd(6px);
            .mt(10px);
            .pdbt(5px);
            .btn-group {
                .abs;
                right: 0;
            }
        }

        .products {
            .alert {
                .text-center;
                .pd(20px);
                .fs(17px);
            }
            // .row {
            //   .mr(0);
            //   .col-md-2,
            //   .col-6 {
            //     .pdr(0);
            //   }
            // }

            // .code {
            //   top: 174px;
            // }
            // .p-info {
            //   .h5 {
            //     .fs(13px);
            //   }
            //   .pr {
            //     .fs(13px);
            //   }
            // }
        }
    }

    .shops {
        .slider-over {
            .h(232px);
        }

        .view-more {
            .mt(15px);
            font-size: 80%;
            display: inline-block;
            padding: 10px 25px;
        }
        // .row {
        //   .mr(0);
        //   .col-12 {
        //     .pdr(0);
        //   }

        //   .col-4 {
        //     .pdr(0);
        //   }
        // }

        .shop-item {
            .border(@d);
            .bg(@f4);

            .shop-ava {
                .mr(10px);
                .fl;
                .rd(100px);
                .w(100px);
                .h(100px);
                .bg(@f);
                .inblock;
                .over-hidden;
                // img{
                // 	.h(84px);
                // }
            }
        }

        .shop-item,
        .shop-item-home {
            .over-hidden;
            .cbo-tag {
                position: absolute;
                right: -22px;
                z-index: 10;
                .rd(0);
                transform: rotate(45deg);
                top: 17px;
                width: 102px;
                .bg(@color1);
                .color(@f);
            }
            .rd(4px);
            .rela;
            .pd(10px);
            .mbt(15px);
            .shop-ava {
                .w(100px);
                .bg(@f);
                .border(@9);
            }

            .shop-info {
                overflow: visible;
                .h3 {
                    .fs(19px);
                }
                p {
                    .fs(13px);
                }

                .connected {
                    .bg(@color2);
                    .color(@f);
                    .rd(3px);
                    .pd(2px 5px);
                    .fs(10px);
                    bottom: 5px;
                    right: 5px;
                    .inblock;
                    .abs;
                }

                .accept-qrcode {
                    .border(@color01);
                    // .fb;
                    .color(@color01);
                    .inblock;
                    .curpt;
                    .rd(3px);
                    .pd(2px 10px);
                }

                .route {
                    .mt(10px);
                    .fs(10px);
                    .color(@9);
                }
            }
        }

        .shop-item-home {
            // .bg(@f);
            .text-center;
            .transition(all, 0.5s);

            .btn {
                .transition(all, 0.5s);
                .pd(5px 10px);
            }

            &:hover {
                .bg(@f);
                .box-shadow(0 8px 8px -2px, #e0e0e0);
                .btn {
                    .bg(@color1);
                    .color(@f);
                }
            }

            .shop-ava {
                .rd(100px);
                .h(100px);
                .w(100px);
                .bg(@f);
                .over-hidden;
                .inblock;
                .mbt(10px);
            }

            .shop-info {
                .addr {
                    .color(#767676);
                    height: 17px;
                    overflow: hidden;
                    margin-top: 5px;
                }

                .h3 {
                    .fs(17px);
                    white-space: nowrap;
                    .over-hidden;
                    line-height: 1.3;
                    .mbt(0);
                    .fw(700);
                    .text-center;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}

.table {
    border-color: @black05;
}

.table-bordered {
    td,
    th {
        .pd(8px 12px);
    }
    .lbl {
        .bg(@black06);
        .w(35%);
        .fs(13px);
        .text-right;
    }
    .value {
        .fw(600);
    }
}

.show-modal-static {
    .modal {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        z-index: 1;
        display: block;
        .modal-body {
            height: 100% !important;
        }
    }

    input[type="checkbox"] {
        .mr(3px);
    }
}
.create-request {
    .block;
    .w(100%);
    // .mg(15px);
    .pd(15px);
    .rd(4px);
    .border(darken(#9bdeac, 5%));
    .bg(lighten(#9bdeac, 10%));
    .color(darken(#9bdeac, 45%));

    i {
        .fs(30px);
        .mbt(5px);
    }

    .ext-more {
        //.hide;
        .pd(10px 0);
        .btn {
            .bg(darken(#9bdeac, 5%));
            .border(darken(#9bdeac, 15%));

            &:hover {
                .bg(darken(#9bdeac, 15%));
            }
        }
    }

    a:hover {
        .color(@3);
    }
}

.page-item {
    &.active,
    &:hover {
        .page-link {
            .bg(@color1);
            .border(@color1);
            .color(@f);
        }
    }

    .page-link {
        .color(@black01);
        .rd(6px);
        border: 1px solid transparent;
        .fw(600);
        .pd(10px 20px);
        .ml(5px);
    }
}

.page-item:first-child .page-link {
    .rd(6px);
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
    z-index: 3000;
}

.model_select {
    z-index: 10000;
    .pro-list {
        a {
            .block;
            .pd(10px);
            .border(@black05);
            .rd(7px);
            .mbt(5px);
            &:hover {
                .bg(@black06);
                .color(@black01);
            }
        }
    }
}
.shop-page {
    .accept-qrcode {
        .border(@color01);
        // .fb;
        .color(@color01);
        .inblock;
        .curpt;
        .rd(3px);
        .pd(2px 10px);
    }

    .shop-cover {
        .img-cover {
            .h(300px);
            .over-hidden;
        }

        .s-info {
            .shop-ava {
                .fl;
                .mr(15px);
                img {
                    .h(150px);
                    .pd(5px);
                    // .border(@c);
                }
            }

            .shop-name {
                overflow: visible;
                .w(65%);
                .fl;
                h1 {
                    .mbt(10px);
                    .fw(600);
                }
                p {
                    .fs(17px);
                }

                .nav-pills {
                    .mt(25px);
                }
            }

            .e-item {
                p {
                    .fs(11px);
                }
                .text-center;
                img {
                    .w(50px);
                    .h(50px);
                }
            }
        }
    }
    .mbt(20px);
}

.start-bg {
    .mg(15px);
}

.camp-active,
.top-line {
    .bg(#FFF8DD);
    .container {
        * {
            .fs(15px);
        }

        .pd(15px);
        // .fb;
        .text-center;
    }
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    .bg(@color1);
    .pd(5px 10px);
}

.bg_color1 {
    .bg(@color1);
    .color(@f);
}

.alert-default {
    .bg(@black06);
}

.left-menu {
    .border(@black05);
    // .rd(6px);
    // .mg(0 -15px -15px);
    .pd(15px);
    .mbt(15px);
    .sec {
        // .mbt(15px);
        .pdbt(10px);
        // .border-b(@black05);
        a {
            font-weight: 500;
            .pd(3px 0);
            .fs(13px);
            .inblock;
            .over-hidden;
            white-space: nowrap;
            text-transform: capitalize;
        }

        .more-cate {
            .fs(11px);
        }

        .mtitle {
            &:before {
                .w(0);
                .h(0);
            }
        }

        .filter-ctn {
            // .bg(@black07);
            .pd(5px 5px 5px 0);
            // .rd(4px);
            .curpt;
            .mbt(10px);
            .mtitle {
                .mbt(0);
            }
            i {
                .fr;
                .transition(all, 0.3s);
            }
        }

        &.show {
            .filter-ctn {
                i {
                    .rotate(180deg);
                }
            }

            .design_type {
                display: block !important;
            }
        }

        .active {
            a {
                font-weight: 600;
                text-decoration: underline;
                .color(@color1);
            }
        }

        .menu {
            li {
                .pd(4px 0);
            }
        }

        .design_type {
            label {
                .curpt;
            }
            .transition(all, 0.3s);
            .head {
                .fs(13px);
                .mbt(15px);
                .fw(600);
            }
            .active {
                .fw(600);
                .color(@color1);
            }
            &.colors {
                span {
                    .inblock;
                    .w(20px);
                    .h(20px);
                    .mg(3px);
                    .border(@f,2px);
                }

                .active {
                    span:after {
                        .color(@f);
                        content: "✓";
                        font-size: 21px;
                        margin-top: -11px;
                        float: left;
                    }
                }
            }

            .checkbox {
                .w(20px);
                .h(20px);
                .fl;
                .mr(5px);
                .border(1px, @9);
                &.radio {
                    .rd(20px);
                }
                &.checked {
                    .border(1px, @color1);
                }
                &.checked:after {
                    .color(@color1);
                    content: "✓";
                    font-size: 29px;
                    margin-top: -13px;
                    float: left;
                }
            }
        }
    }
}

.bc-section {
    // .mt(10px);
    // .mbt(15px);
    .w(100%);
    .over-hidden;
    .color(#b0b0b0);
    .list-inline-item {
        .mr(0);
    }

    .my_bc {
        .w(10000px);
    }

    a {
        .color(@black04);
    }

    .active {
        a {
            .color(#333);
        }
    }
    span {
        .fs(100%);
        .pd(5px);
        .inblock;
    }
}

.holiday-collection {
    .mt(15px);
    .mbt(25px);
    h2 {
        .fb;
    }
    h3 {
        .fs(16px);
        .mbt(5px);
        .fb;
        .mt(10px);
    }
}

table th {
    font-weight: 600;
}

.nav-tabs .nav-item {
    .mr(3px);
}

.vouchers-list {
    .voucher-item {
        .mt(15px);
        .rela;
        .rd(10px);
        .bg(#FFEAEC);

        &:before,
        &:after {
            content: "";
            .bg(@f);
            .rd(50px);
            .w(10px);
            .h(10px);
            .abs;
            left: 120px;
        }
        &:before {
            top: -5px;
        }

        &:after {
            bottom: -5px;
        }

        .col-md-3 {
            border-right: 2px dashed #fff;
        }

        img {
            .w(100%);
            .max-w(100px);
            .mg(7px);
        }

        .pd(15px 0);
        // .border-b(@c);

        p {
            .mbt(0);
        }

        .tag {
            .bg(@color3);
            .color(@f);
        }

        .name {
            .fb;
            .mt(10px);
            .mbt(10px);
            .fs(19px);
            span {
                .inblock;
                .ml(10px);
                .fw(300);
                .color(@xto_green);
            }
        }
        .btn {
            .mr(10px);
            .fr;
        }

        .info {
            .color(@black03);
            .fs(12px);
            .mt(5px);
        }
    }
}

.smallsize {
    .fs(11px);
}

.calender1 {
    .rela;
    .ui-datepicker-inline {
        .abs;
        left: -226px;
        top: 76px;
        z-index: 1000;

        .box-shadow(0px 5px 16px 1px, #dcdcdc);
    }
}

.h7n-product-detail {
    .special-product-qrcode {
        .cover;
        .bg(#ffe2e7);
        // .mg(20px);
        .pd(20px);
        .rd(6px);
        .border(@color2);
    }

    .cart-info {
        .bg(@color4);
        z-index: 2000;
        .pd(15px);
        .border(@color4);
        .rd(6px);
        .fix;
        right: 10px;
        top: 10px;
        .box-shadow(1px 1px 1px, #ccc);
        .title {
            .fb;
            white-space: nowrap;
            .mr(25px);
        }

        .table {
            img {
                .w(60px);
            }
        }

        .btn-close {
            .abs;
            right: 0;
            top: 7px;
        }
    }
    .cover {
        .h4,
        h4 {
            .fb;
            .fs(18px);
        }
        .bg(@black07);
        .mbt(25px);
    }

    .dropdown-menu {
        &.show {
            .w(100%);
            .h(200px);
            overflow: auto;
        }
    }

    .hours-list {
        // .mbt(15px);
        .mt(15px);
        .bg(#fff6d1);
        .border(#d3c184);
        // .box-shadow(1px 1px 1px, @9);
        .rd(4px);
        .pd(10px);
        .text-center;
        .rela;
        &:before {
            content: " ";
            // .bg(#fff3ca);
            .abs;
            .text-center;
            top: -15px;
            left: 30px;
            // .pd(5px 20px);
            // height: 20px;
            .inblock;

            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 40px 40px 40px;
            border-color: transparent transparent #fff6d1 transparent;
        }

        &._2 {
            &:before {
                left: 184px;
            }
        }

        &._3 {
            &:before {
                left: 333px;
            }
        }

        &._4 {
            &:before {
                left: 489px;
            }
        }

        .h-item {
            .bg(@f);
            .border(@c, 2px);
            .pd(5px 10px);
            .curpt;
            .rd(10px);
            &.disabled {
                .bg(@black05);
                cursor: not-allowed;
            }

            &.active {
                .bg(@color7);
                .border(@color2, 2px);
                // .color(@f);
            }

            .pr {
                .color(#555);
                span {
                    .fs(12px);
                }
            }
            .h {
                .fb;
                white-space: nowrap;
                // .mbt(5px);
            }
        }
    }
    .date-list {
        .mbt(10px);
        .text-center;

        .deliver-date {
            .border;
            .text-center;
            .rd(6px);
            .pd(15px);
            .curpt;
            .w(130px);
            .bg(@f);
            .h(72px);
            .mr(15px);
            // .w(100%);
            .inblock;
            &.active {
                .border(@color2, 2px);
                .bg(@color7);
                // *{
                //   .color(@f);
                // }
                // .date{
                //   .color(@e);
                // }
            }
            &.disabled {
                .bg(@black05);
                cursor: not-allowed;
            }

            .date {
                .color(#555);
                .mbt(5px);
            }
            .str {
                .fb;
                .txtUP;
                .fs(13px);
            }
        }
    }
    .p-code {
        .color(@black03);
        span {
            .inblock;
            .mg(0 10px);
        }
        .mbt(5px);
    }
    .p-price {
        .fs(21px);
        .fw(600);
        .color(@color1);
        .mbt(0);
        &.origin {
            color: #ccc;
            font-weight: 300;
            font-size: 15px;
            // text-decoration: line-through;
        }
    }

    .actions {
        .btn {
            .pd(13px 20px);
            .fs(110%);
        }
    }

    hr {
        margin: 15px 0;
    }

    // .holiday-price {
    //   .max-w(100%);
    //   th,
    //   .th {
    //     .bg(#f4f4f4);
    //     .text-center;
    //     .color(@black03);
    //     .fw(400);
    //   }

    //   td {
    //     .curdf;
    //     .text-center;
    //     .pd(6px 8px);
    //     .bg(@f);
    //     i {
    //       // .hide;
    //       .mt(10px);
    //       // .color(@f);
    //     }

    //     &.on {
    //       &:hover {
    //         .bg(#ffffd4);
    //       }

    //       &.active {
    //         .bg(@color1);

    //         // i {
    //         //   .show;
    //         // }
    //         .btn-sm {
    //           .color(@f);
    //         }
    //       }
    //     }

    //     &.off {
    //       .bg(darken(@black05, 10%));
    //       i {
    //         .show;
    //       }
    //     }

    //     .btn-sm {
    //       .fs(small);
    //       margin-bottom: 0;
    //       font-weight: 600;
    //       color: @black02;
    //       .pd(2px);

    //       white-space: nowrap;
    //     }
    //   }
    // }

    .benefit {
        // .pd(20px 0);
        // .txtUP;
        .title {
            .fb;
            .text-center;
        }
        img {
            .w(100px);
        }
        .rounded-circle {
            .bg(@black06);
            .w(100px);
            .h(100px);
            .pd(10px);
            .mbt(10px);
            .inblock;
        }
        .text-center;
    }

    .allow-change-order {
        .mt(20px);
        fieldset {
            legend {
                .pd(8px 16px);
                .bg(@black06);
                .border(@black05);
                border-bottom: 0 none;
                border-radius: 5px 5px 0 0;
            }
            .bg(@black06);
            .border(@black05);
            label {
                .mbt(20px);
                // .w(100%);
                // .ml(15px);
            }
        }
    }

    .p-shop-info {
        .h5 {
            .fw(600);
            .fs(17px);
            .color(#999);
            .text-left;
        }

        .shop-d {
            // .pd(10px);
            .avat {
                .w(80px);
                .h(80px);
                .fr;
                .rd(100px);
                .border(@black05);
                overflow: hidden;
                // .mg(15px);
            }

            .h6 {
                .fw(600);
            }
            .address {
                .mt(10px);
                .color(#767676);
            }
        }
    }

    .desc {
        img {
            .max-w(650px);
        }
    }
}

.alert-warning {
    .rd(6px);
    // .color(@3);
    // .border(@black04);
    // .bg(transparent);
    .fs(12px);
    .pd(7px 15px);
    border: 1px dashed @color1;
}

.order-fail,
.order-success {
    .alert {
        .pd(35px);
        .mt(30px);
        .bg(@f);
    }

    .alert-heading {
        .fs(29px);
        .fw(600);
    }

    .tips {
        .mbt(25px);
    }

    .notice_email {
        .pd(10px);
        .mbt(20px);
        .rd(6px);
        .bg(fade(@xto_yellow, 20));
        .border(fade(@xto_yellow, 50));
    }
}

.badge {
    .fw(500);
    .fs(12px);
    .pd(7px 14px);
    .rd(10px);
    .mbt(4px);
    .color(@black03);
    .bg(@black06);
    &.badge-success {
        .bg(#4fb99f);
        .color(@f);
    }

    &.badge-success-outline {
        .border(#4fb99f);
        // .color(#4fb99f);
        .bg(@f);
    }
    &.badge-primary-outline {
        .border(@color4);
        // .color(@color1);
        .bg(@f);
    }
}

.badge-primary {
    .color(@color2);
    .fw(600);
}

.order-success {
    .alert-heading {
        .color(#4caf50);
    }

    .alert {
        .border(@xto_green);
    }
}

.order-fail {
    .alert-heading {
        .color(#F44336);
    }
}

.h7n-cart-page {
    h5 {
        .mg(0);
        .fs(0.98rem);
        .fw(500);
    }

    s {
        .color(#ccc);
    }

    .col-md-7 {
        .top {
            .mbt(-5px);
            .pdbt(15px);
        }
        .card.active .collapse {
            .bg(@f);
        }
    }

    #headingShippingVendor {
        .list-group {
            .fee {
                .fb;
                .fs(15px);
                .fr;
            }

            img {
                .w(50px);
                .h(50px);
            }
            .list-group-item{
                .pd(5px 20px);
            }

            .list-group-item.active {
                .bg(#ffeda8);
                .color(@3);
                .border(#FFD019);
            }
        }
    }

    .sum-row {
        .fs(19px);
        .bg(@black06);
    }
    .frame-term {
        .bg(@black06);
        .border(@black05);
        .w(100%);
    }

    .shopee {
        .pd(30px);

        .shopee-code {
            img {
                .pd(20px);
                .bg(rgb(237,76,47));
                .border(rgb(237,76,47));
                .rd(10px);
            }
        }

        .shopee-info {
            .max-w(350px);
            .inblock;
            .info {
                .fs(17px);
                .mg(10px);
            }

            .total {
                .border;
                .rd(8px);
                .pd(10px);
                .mg(10px 0);

                span {
                    .fb;
                    .fs(21px);
                    .inblock;
                    .mt(5px);
                    .color(@color1);
                }
            }
        }
    }

    .feature-vip {
        color: #333;
        background: #ffedf0;
    }

    #summaryPanel {
        #summary-ctn.fixed {
            .pd(0);
            border-radius: 15px 15px 0 0;
        }

        fieldset {
            .fs(14px);
            .bg(@f);
            .pd(15px);
            .box-shadow(0px 3px 4px, #f3f3f3);
            .mbt(30px);
            b {
                .fs(14px);
            }
            // .paymentTotal{
            //   font-size: 12px !important;
            // }

            &.summary {
                .mbt(0);
                .border(#f8a9ac);
                .bg(@f);
                // .free-code {
                    // .mt(10px);
                    // .form-control {
                    //     .fb;
                    // }
                // }
                .total,
                .remain {
                    color: @color1 !important;
                }
            }


            .table{
                .mbt(0);
            }


            .save {
                .cashback;
                .fs(14px);
            }

            .p-code {
                .fs(12px);
                .mbt(5px);
            }

            img {
                .max-h(40px);
                .fl;
                .mg(10px);
            }

            .p-name {
                .fs(15px);
                .fb;
                .color(@black01);
                white-space: nowrap;
            }

            .table-borderless td {
                .pd(0.1rem 0);
                // .color(@black03);
                &.fb {
                    .color(@black01);
                }
            }

            .table-borderless th {
                .pd(0.6rem 0);
            }
        }

        .used-code {
            .rd(10px);
            .bg(@color7);
            .pd(15px 10px);
            .mt(10px);
            .mbt(10px);
            .rela;
            &:before,
            &:after {
                content: "";
                .bg(@f);
                .rd(50px);
                .w(20px);
                .h(20px);
                .abs;
                top: 48px;
            }
            &:before {
                left: -10px;
            }

            &:after {
                right: -10px;
            }

            .d-code {
                .fb;
                .fs(21px);
                .color(@color1);
                b {
                    .fs(21px);
                }
            }

            .d-info {
                .mbt(0);
                border-top: @f dashed 2px;
                .pdt(15px);
                .fs(12px);
                .color(@black03);
            }
        }
    }

    .actions {
        z-index: 1;
    }

    .card {
        // .border(@c);
        .no-border;

        .bg(transparent);
        // .over-hidden;
        .box-shadow(0px 3px 4px, #f3f3f3);
        border-bottom: 1px solid #ccc !important;
        .mbt(15px);

        // .card-header {
        //   .pd(0 5px);
        //   // .bg(@d);
        //   button {
        //     .txtUP;
        //   }
        // }

        // &::before{
        //   content: " ";
        //   // .w(2px);
        //   border-right: @black05 dashed 2px;
        //   // .h(90%);
        //   left: 20px;
        //   top: 45px;
        //   bottom: 4%;
        //   .abs;

        // }

        .card-body {
            .bg(@f);
            .rd(10px);
            // .ml(50px);
            label {
                // .fw(400);
                // .mt(3px);
                // .mbt(2px);
            }

            .adv {
                .hide;
            }

            .pd(10px 20px 20px);

            .badge {
                .fs(100%);
                white-space: normal;
            }
        }

        // .border(@black05);
        // .card-header {
        //   .no-border;
        //   background-color: transparent;
        //   .rd(10px);
        //   // border-bottom: 0 none;
        //   h5{
        //     .fs(17px);
        //     .HeadFont;
        //     .fb;
        //   }

        //   .no{
        //     .w(40px);
        //     .h(40px);
        //     .rd(40px);
        //     .pdt(5px);
        //     .mt(-5px);
        //     .ml(-18px);
        //     .mr(7px);
        //     .bg(@color1);
        //     .color(@f);
        //     .inblock;
        //     .fs(23px);
        //   }
        // }

        &.active {
            .collapse {
                .block;
            }
        }

        &.sum {
            // .bg(@color6);
            .fs(14px);
            .total,
            .credit,
            .paymentTotal {
                .color(@color1);
            }

            fieldset {
                border-color: @black05;
            }
            .fb {
                .fw(600);
                .fs(14px);
            }
            .text-right {
                strong,
                span,
                b {
                    .fs(14px);
                }
            }

            .cart-items {
                td {
                    border-top: 0 none;
                    .pd(5px);
                }
                small {
                    .color(@xto_blue);
                }

                .col-money {
                    .w(30%);
                    text-align: right;
                }
            }

            .head {
                // .border-b(@9, 2px);
                border-top: 0 none;
                .color(@3);
                .fw(600);
                .pd(15px 0 5px 0);
                .fs(13px);

                a {
                    .fs(11px);
                }
            }

            .credit {
                .color(@xto_blue);
            }

            img {
                .max-h(80px);
            }

            &.fixed {
                .fix;
                top: 0;
                .h(99vh);
                z-index: 10;
            }

            &.mobile {
                position: static;
                .auto-h;
            }

            .collapse {
                overflow-y: auto;
            }
        }
    }

    .carts {
        input.lg-size {
            width: 30px;
            height: 30px;
        }

        img {
            .max-w(200px);
        }

        .buy-together {
            img {
                .max-w(100%);
            }
        }

        .save {
            .cashback;
        }

        .text-right {
            .fw(200);
        }
        .total {
            .fs(1rem);
            .fw(600);
        }

        // .btn-primary{
        // 	.w(100%);
        // }
        .cover {
            .coverbg;
            .table {
                .bg(@f);
            }
        }
    }

    .over-time {
        overflow-x: auto;
        table .th,
        table th {
            white-space: nowrap;
            .bg(#f4f4f4);
            .fs(100%);
        }

        .minus-money {
            .color(@color01);
        }

        .plus-money {
            .color(@color1);
        }

        table {
            td {
                .fs(70%);
                vertical-align: middle;
                .text-center;
                i {
                    .fs(17px);
                    .color(@f);
                    // .hide;
                }
            }
            .on {
                &:hover {
                    .bg(@color07);
                }
            }
            .off {
                .bg(@b);
            }

            .active {
                .bg(@color1);
                label {
                    .color(@f);
                }
            }

            label {
                .fs(14px);
            }
        }
    }
    .is-invalid {
        .border(@color3, 2px);
    }

    .h-item {
        .pd(15px);
        .border;
        .mbt(15px);
        .rd(6px);
        .hide;
    }

    .payments {
        // .pd(20px);

        .nav {
            .mbt(10px);
            .nav-link {
                .bg(@e);
                .rd(6px 6px 0 0);
                &.active {
                    .bg(@color2);
                    .color(@f);
                }
            }
        }

        .payment-selected{
            .pd(15px);
            img{
                .max-h(100px);
            }
        }

        .show-pay {
            .pd(10px);
            .bg(@f);
        }
        .active {
            .payment-item {
                .border(@color1, 2px);
                .bg(@black07);
            }
        }

        .pay-group {
            .bg(@f);
            .rd(6px);
            .border(@e);
            .pd(20px);
            .mbt(15px);

            h5 {
                .fs(17px);
                .mbt(15px);
                .fw(700);
                text-transform: capitalize;
            }

            .form-check-input {
                .mt(8px);
            }
            .pay-item {
                .border-t(@e);
                .pd(10px);

                .curpt;

                &.active {
                    .rd(6px);
                    .bg(@color4);
                    label {
                        .fw(700);
                    }
                }

                label {
                    // .fw(600);
                    .fs(13px);
                    .mt(5px);
                    .curpt;
                }
                .p-icons {
                    .fr;
                    img {
                        .h(18px);
                        .mr(10px);
                    }
                }
            }
        }

        .payment-item {
            .rd(8px);
            .pd(10px);
            .border(@black05);
            .min-h(130px);
            .mbt(15px);
            * {
                .fs(11px);
            }

            &.disabled {
                .bg(#eee);
                .border(@c);
                .color(@9);
            }

            .badge {
                .abs;
                top: 0;
                right: 0;
                white-space: nowrap;
                .fs(12px);
                padding: 5px 10px;
                .bg(@color2);
                .color(@f);
            }

            .form-check {
                .pdl(0px);
                .form-check-label {
                    .fb;
                    .fs(15px);
                    .mbt(7px);
                }

                img {
                    .mt(5px);
                    .max-w(150px);
                    .max-h(60px);
                    // .h(50px);
                }
            }
        }
    }

    .cart-items thead th {
        // .bg(@color3);
        .fs(14px);
    }
}

.line-bars {
    @color: darken(#9bdeac, 5%);

    .mg(15px 0);
    .lb-item {
        .inblock;
        .rd(3px);
        .pd(10px 15px);
        .fw(600);
        .mbt(5px);
        .bg(@color);
        .color(@f);
        .border(@color);
        .mr(5px);
        .fs(17px);
        &:hover {
            .bg(darken(@color, 5%));
        }
    }
}

.clearfix {
    .w(100%);
    clear: both;
}

.xtofocus {
    .w(10px);
    .h(10px);
    .rd(10px);
    .inblock;
    .bg(@color1);
    .rela;
}

.xtofocus-ani {
    left: 0;
    top: 0;
    z-index: 1;
    .abs;
    .w(10px);
    .h(10px);
    .rd(10px);
    .inblock;
    .bg(@color1);
    animation: 1.2s ease-in-out 0s normal none infinite running xtofocus-anim;
}

.all-vouchers {
    // .text-center;
    .free-code {
        .pd(15px);
        .mg(20px 15px);
        .rd(8px);
        .bg(lighten(@xto_yellow, 20%));
        .form-control {
            .h(38px);
        }
        a {
            .color(@f);
        }
    }

    .voucher {
        .rela;
        // .bg(@color4);
        // .bg(#ffecf0);
        .pd(15px 10px);
        .rd(8px);
        .mbt(15px);
        .border(@c);

        .code {
            .fs(21px);
            .fb;
            .color(@color1);
        }
        .percent {
            .abs;
            right: 5px;
            top: 5px;
            .bg(@color2);
            .color(@f);
            .rd(60px);
            .w(60px);
            .h(60px);
            .fs(16px);
            .text-center;
            .pdt(16px);
            line-height: 16px;
            .fb;
            p {
                .fs(10px);
            }
        }

        .intr {
            .mbt(5px);
        }
        .d {
            .fs(11px);
            .color(@9);
        }

        .c {
            .w(20px);
            .h(20px);
            .fb;
            .inblock;
            .rd(20px);
            .bg(@f);
            .color(@color1);
        }
    }
}

@keyframes xtofocus-anim {
    0% {
        opacity: 1;
        transform: rotate(0deg) scale(1) skew(0deg);
    }
    30% {
        opacity: 0.5;
        transform: rotate(0deg) scale(2) skew(0deg);
    }
    100% {
        opacity: 0.1;
        transform: rotate(0deg) scale(3) skew(0deg);
    }
}

.mobile-download {
    .fix;
    .pd(10px);
    .bg(@black05);
    left: 0;
    .w(100%);
    bottom: 0;
    z-index: 1000;
}

.feature-vip {
    // font-size: 15px;

    // color: #fff;

    margin-top: -10px;
    padding: 20px 10px 10px 15px;
    // background: #ffedf0;
    background: @color6;
    border-radius: 0 0 15px 15px;
    // a{
    //   color: #fff;
    // }
    h2,
    .h2 {
        font-size: 14px;
        .inblock;
        .mbt(0);
    }
    &.top {
        font-weight: 600;
        border-radius: 15px 15px 0 0;
        padding-top: 10px;
        .mt(0);
    }
    &.line-b {
        padding-top: 18px;
        color: @xto_blue;
        background: transparent;
        font-size: 11px
    }
    i {
        .mr5;
    }

    .act {
        .mt(-7px);
        .fs(12px);
        // a{
        //   // .color(#ffcaca);
        //   &.active{
        //     .color(@f);
        //   }
        // }
    }
}

.info-user-content {
    a {
        .color(@color1);
        &.btn {
            .color(@f);
        }
    }

    .state {
        .fb;
        &._1 {
            .color(@xto_blue);
        }

        &._2 {
            .color(@color1);
        }

        &._6 {
            .color(@xto_green);
        }

        &._8 {
            .color(@xto_brown);
        }
    }
}

.h7n-cate-page {
    // h2,
    // .h2 {
    //   .fs(23px);
    //   font-weight: 600;
    //   .w(100%);
    //   text-transform: uppercase;
    //   .mbt(15px);
    //   span {
    //     .fw(200);
    //   }
    //   .inblock;
    // }

    .end-cate {
        .mbt(25px);
    }

    .events-hoz {
        .mbt(15px);
        .evt-item {
            .inblock;
            .rd(6px);
            .pd(7px 15px);
            &.active {
                .fb;
                .color(@color1);
            }
        }
    }

    .special-master-ctn {
        .w(100%);
        overflow-y: hidden;
        overflow-x: auto;
        height: 80px;
        .rd(10px);
        .bg(#ffc7c7);

        .special-master-list {
            .w(1000px);
            .text-left;
            background-image: none;
            .pd(10px);

            .e-item {
                .w(70px);
                .inblock;
                .pd(0);
                img {
                    .w(40px);
                    .h(40px);
                }
                max-width: none;
                p {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 100%;
                    overflow: hidden;
                }
            }
        }
    }

    .special-master-list {
        .text-center;

        .pdt(70px);
        .mbt(15px);
        background-image: url("/theme/V01/img/line-decor.png");
        background-position: top center;
        background-repeat: no-repeat;

        &.vertical {
            .e-item {
                -ms-flex: 0 0 33.33%;
                flex: 0 0 33.33%;
                max-width: 33.33%;
            }
        }

        .e-item {
            -ms-flex: 0 0 10%;
            flex: 0 0 10%;
            max-width: 10%;
            .text-center;
            .pd(0 5px);
            img {
                .w(60px);
                .h(60px);
            }
            p {
                line-height: 14px;
                .mt(5px);
                .fs(10px);
            }

            &.active {
                img {
                    .border(@color2, 3px);
                }
                p {
                    .color(@color1);
                    .fb;
                }
            }
        }
    }

    .relationship-event-list {
        h2 {
            .text-center;
        }
        .pdt(70px);
        .mbt(15px);
        background-image: url("/theme/V01/img/line-decor.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        h3 {
            .fb;
            .fs(17px);
            .mbt(10px);
            // text-decoration: underline;
            // text-underline-offset: 8px;
            .text-left;
        }

        .e-list {
            display: flex;
            flex-wrap: wrap;
            .e-item {
                .over-hidden;
                -ms-flex: 0 0 20%;
                flex: 0 0 20%;
                max-width: 20%;
                .rela;
                .mbt(15px);
                img {
                    .transition(all, 0.3s);
                }
                // &:hover{
                //   .e-info{
                //     bottom: 0;
                //     opacity: 1;

                //   }
                // }

                .e-info {
                    // .abs;
                    // .over-hidden;
                    .pd(10px 15px 7px 15px);
                    // .bg(rgba(255,255,255, 0.85));
                    // border-top: 1px solid #333;
                    // border-left: 1px solid #333;
                    // .box-shadow(1px 1px 1px, #ccc);
                    // .rd(15px 0  0 0);
                    // left: 25px;
                    // bottom: 0;
                    .w(100%);
                    h5 {
                        .fs(13px);
                        .mbt(0);
                        .nowrap;
                        text-overflow: ellipsis;
                        .fw(600);
                        .color(@3);
                    }
                    small {
                        .fs(12px);
                        .color(@3);
                    }
                }

                &:hover {
                    img {
                        opacity: 0.5;
                    }

                    .cta {
                        .inblock;
                        opacity: 1;
                        // transform: translate(-50%,  -150%);
                        bottom: 50%;
                    }
                }
            }
        }
    }

    .special-event-page {
        .container {
            max-width: 100% !important;
            .pd(0);
        }
        .selected-item {
            .fs(19px);
            .text-center;
            p {
                .bg(@f);
                .pd(10px);
            }
            .btn {
                border: 1px solid @color1;
                .bg(@color1);
                .color(@f);
                .pd(15px 30px);
                .fs(25px);
                .mbt(20px);
                &:before {
                    content: " ";
                    border-left: 1px dashed #da2128;
                    height: 140px;
                    display: inline-block;
                    position: absolute;
                    top: 90px;
                    z-index: -1;
                    left: 50%;
                }
            }
        }

        .relation-info {
            background-position: center;
            background-image: url("/theme/V01/img/bg/bg-top-gift-for.png");
            background-size: cover;
            .rd(10px);
            .mbt(15px);
            .pd(15px);
            .text-center;
            .rela;
            // .bg(rgba(250,105,129,1));

            // background: linear-gradient(180deg, rgba(250,105,129,1) 0%, rgba(250,105,129,0.3) 100%);
            // .border-b(#f0f0f0);
            .action {
                bottom: 15px;
                right: 15px;
                .abs;
            }
            .color(@f);

            .white {
                .color(@f);
            }
            p {
                .mbt(0);
            }

            h3 {
                .fs(29px);
                .mbt(0);
                .fb;
            }
            img {
                .w(120px);
                .h(120px);
                .rd(120px);
                .border(@f, 5px);
                .mg(10px);
            }
        }

        .list-cates .list-cate-item {
            .home {
                .pd(0 15px);
            }
        }
    }

    .cate-focus {
        .products {
            .p-item {
                .mbt(0);
                .img-cover {
                    // .min-h(149px);
                }
            }
        }
    }

    .listing {
        .row {
            .ml(0);
            .mr(0);
        }
    }
}

.input-receiver,
#artist-list-modal .artist-list {
    .cover {
        .pd(0 15px);
    }

    .a-item {
        .pd(15px 0);
        .border-b(#e4e4e4);
        .curpt;
        &.active {
            .bg(@color5);
        }
        .addr {
            .mbt(6px);
            .color(#777777);
            span {
                .color(@color1);
            }
        }
    }
}

.tabs {
  .nav{
    .mg(20px 0);
    .block;
    .nav-link{
      .inblock;
      .border-b(@d, 2px);
      &.active{
        .color(@color1);
        .border-b(@color1, 2px);
      }
    }
  }
}

._2nav {
    // .pd(0.8rem 1rem);
    // box-shadow: 0 0px 7px 0px #b620253b;

    .mt(-55px);
    .deliver-to {
        .fl;

        .rd(10px);
        .bg(@color1);
        * {
            .color(@f);
        }
        a {
            .pd(10px 15px);
        }
        a:hover {
            .color(@9);
        }
    }

    .w100 {
        .text-center;
        .w(100%);
        .box-shadow(-1px 1px 20px 0px, rgba(218, 33, 40, 0.4));
        .pd(10px);
        .bg(@f);
        .rd(10px);
    }
    .navbar-nav {
        align-items: center;
        justify-content: center;
        .pdt(7px);
    }
    .nav-item {
        display: block;
        .pd(3px 3px);
        .fs(1rem);
        .HeadFont;
        // text-transform: uppercase;
        &.active {
            .bg(@f);
            .rd(15px);
            * {
                .color(@color10);
            }
        }

        &.home-btn {
            background: #da2128;
            width: 35px;
            height: 35px;
            .text-center;
            position: absolute;
            top: 3px;
            border-radius: 35px;
            padding: 0;
            font-size: 21px;
            .nav-link {
                padding: 0 !important;
            }
        }

        &.home-btn-space {
            .w(50px);
        }

        &.kredivo-btn {
            .rd(20px);
            .bg(#239cec);
            .fw(700);
            a {
                .color(@f);
            }
        }

        &.create-code-btn {
            .rd(20px);
            .bg(#ff9800);
            .fw(700);
            a {
                .color(@f);
            }
        }

        &:hover {
            .dropdown-menu {
                .block;
            }
        }

        .dropdown-menu {
            .nav-link {
                .fs(13px);
            }
            .dropdown-menu {
                .mg(10px);
                .bg(@black07);
                position: static;
                .nav-link {
                    .fs(11px);
                }
            }
        }

        &.dropdown {
            .t:after {
                display: inline-block;
                margin-left: 0.255em;
                vertical-align: 0.255em;
                white-space: nowrap;
                content: "";
                border-top: 0.3em solid;
                border-right: 0.3em solid transparent;
                border-bottom: 0;
                border-left: 0.3em solid transparent;
            }
        }
    }
    .nav-link {
        .pd(2px 0);
        .fs(19px);
    }

    a {
        .color(@black02);
        &:hover {
            .color(@color1);
        }
    }

    .fs(17px);
    .fw(600);

    // .bg(@black05);
    // .bg(@f);
    // background-image: url(/img/top-bar-snow-min.png);
    // background-position-y: -3px;
    .dropdown-menu {
        .bg(@black05);
        .border(@black04);
        .fs(75%);
        top: 25px;
        left: 18px;
        .fs(10px);
        li {
            &.active,
            &:hover {
                .bg(@black04);
                // a{
                //   .color(@f);
                // }
            }
        }

        // .sub-menus{
        // 	li{
        // 		&.active, &:hover{
        // 			.bg(@color1);
        // 		}
        // 	}
        // }
    }
}

.top-section {
    .mt(20px);
}

textarea {
    .h(88px);
}

.cookie-claim {
    .fix;
    .fs(12px);
    z-index: 1001;
    left: 0;
    bottom: 0;
    .bg(@black04);
    .pd(10px);
    .w(100%);
    .hide;
    p {
        .mbt(0);
    }
}

.tips {
    .pd(15px);
    // .mg(10px 0);
    .rd(6px);
    .fs(small);
    .bg(@black06);
    // .border(@black05);
    .w(100%);
    .inblock;
    .text-left;
    strong,
    b {
        .color(@color1);
        // .fw(500);
    }
    &._d0 {
        .pd(4px 7px);
        .bg(@color8);
        .border(@color7);
    }

    &.yellow {
        .bg(fade(@color11, 80%));
        .border(darken(@color11, 10%));
        .fal {
            font-size: 100% !important;
        }
        a {
            .color(@color1);
        }
    }

    &._d1 {
        .pd(4px 7px);
        .bg(@color8);
        .border(@color7);
    }

    &.red {
        .bg(@f);
        .mt(15px);
        .border(@color1);
    }

    i {
        .color(@color1);
        &.lg {
            .fs(70px);
        }
    }

    .btn-primary {
        i {
            .color(@f);
        }
    }

    &.sm {
        .pd(3px 5px);
    }

    &.green {
        .bg(fade(@color04,10%));
        .border(fade(@color04, 20%));
        b {
            .color(@color04);
        }

        i {
            .color(@color04);
        }
    }
}

.sort-panel,
.price-panel {
    .pd(4px);
    // .mbt(20px);
    // .bg(@black06);
    .rd(4px);
    // .fl;
    // .w(100%);
    .nav-item {
        .mr(5px);
        .nav-link {
            .pd(5px 14px);
            &:hover {
                .color(@color1);
            }
            &.active {
                .color(@f);
            }
        }
    }
}

.sort-panel {
    .mt(10px);
    .inblock;
    .btn {
        .border(@black04);
        .rd(8px);
    }
    .nav-item {
        .nav-link {
            .pd(5px 15px 5px 0);
            .color(@3);
        }
    }
}

.tips2 {
    .pd(15px 15px);
    .bg(#edfffa);
    .rd(6px);
    .border(#baefe0);
    b,
    strong {
        // .color(#4caf50);
        .fs(12px);
    }

    .fs(12px);
}

#flashmsg {
    .fix;
    z-index: 100;
    .border(@color1);
    .box-shadow(4px 8px 14px, @color1);
    .bg(@color5);
    .pd(15px);
    @w: 300px;
    .w(@w);
    left: -350px;
    bottom: 40px;
    .fs(13px);
    strong {
        .fs(13px);
        .color(@color1);
    }

    .rd(5px);
}

.mbt50 {
    .mbt(50px);
}

#footer {
    .decor {
        background-image: url("/theme/V01/img/footer-eclipse-new.png");
        background-repeat: no-repeat;
        background-position: top center;
    }

    .decor {
        .h(136px);
        .mt(0px);
    }
    .container {
        .pd(0 20px 40px);
    }

    .color(#333);
    // background-color: #fff;
    .fs(0.92rem);
    //.bg(#f1f1f1);
    // .pd(40px 20px); // ok
    .ft-logo {
        .w(206px);
        .h(99px);
        // .mg(15px);
        // .mt(55px);
        background-size: 530px;
        background-position: -194px -131px;
    }
    .company-info {
        // .mt(20px);

        address {
            .fs(13px);
        }
    }

    .apps {
        .bg(@f);
        .rela;
        .text-center;
        .mbt(20px);

        .img {
            .rd(20px);
            .w(80px);
            .h(80px);
            .inblock;
            .mbt(25px);
            .mr(30px);
            .box-shadow(0px 3px 6px 0px, rgba(218, 33, 40, 0.4));
        }

        img {
            vertical-align: bottom;
        }
        .icons {
            .screen {
                .w(150px);
                .mbt(19px);
                .mr(10px);
            }

            .qrcode {
                .rd(10px);
                .border(@color1, 2px);
            }
        }
        .minis {
            img {
                .mr(10px);
            }
        }
        .app-bottom {
            .rd(20px);
            .abs;
            .h(80px);
            bottom: 0;
            .w(100%);
            // .border(@color1);
            .border-b(@color1, 4px);
            .bg(@color6);
        }
    }

    .ext-link {
        .text-center;
        li {
            .inblock;
            .border-r(@c);
            .pd( 5px 10px);
            &:last-child {
                .border-r(transparent);
            }
        }
    }
    .time-work {
        .rd(4px);
        // .border(@black05);
        .pd(7px 10px);
        .fw(600);
        .bg(@black06);
    }

    .head {
        .mt(40px);
        .fw(600);
        .fs(0.98rem);
        .mbt(5px);
        .pdl(5px);
        .HeadFont;
        i {
            .hide;
        }
    }

    ul li {
        .ml(5px);
        list-style: circle;
    }

    .payments {
        .p-item {
            .rd(4px);
            .bg(@f);
            .pd(5px);
            .inblock;
            .h(60px);
            .fs(10px);
            .text-center;
            .mbt(15px);
            .mr(15px);
            vertical-align: middle;
            i {
                .fs(25px);
            }
        }
    }

    a {
        // .color(@black04);
        .pd(3px);
        .fs(12px);
        .inblock;
        // &:hover {
        //   .color(@color1);
        // }
    }

    .hotline {
        .color(@black02);
    }

    .list-unstyled {
        img {
            .h(45px);
        }
    }
}

.member-corp {
    .pd(10px);
    .bg(@c);
    .text-center;
    ul {
        li {
            .inblock;
            .mg(0 30px);
            img {
                .h(55px);
            }
        }
    }
}

.bottom-line {
    .mt(30px);
    .pd(12px);
    .fs(13px);
    .color(@f);
    .text-center;
    .bg(@darkColor);
}

.blogs {
    &.products {
        .blog {
            .cover {
                .no-border;
                .pd(5px);
            }
            .info {
                .intr {
                    .h(auto);
                }
            }
        }
    }

    .left-menu {
        .nav-head {
            .color(@3);
            // .HeadFont;
            text-transform: capitalize;
            .fw(600);
        }
        .items {
            .mt(15px);
            .item {
                .mbt(15px);
                // .border-b(#efefef);
                img {
                    .rd(10px);
                }
                p {
                    .mbt(0);
                }
                .date {
                    .color(#999);
                    .fw(300);
                    .fs(12px);
                }
                h6 {
                    .fs(0.98rem);
                    text-transform: uppercase;
                }

                a {
                    white-space: inherit;
                }
            }
        }
    }
    .r-title {
        display: none;
    }

    .blog-edit-btn {
        .abs;
        .bg(@f);
        .pd(20px);
        top: 0;
        right: 0;
    }

    .blog {
        .mbt(25px);
        a {
            img {
                .rd(10px);
            }
        }
        .info {
            .mt(10px);
            .h3 {
                .fs(17px);
                .fw(600);
                // text-transform: uppercase;
                // .HeadFont;
            }
            .intr {
                // .fs(0.98rem);
                // .fw(300);
                .h(88px);
                .over-hidden;
            }
        }

        .list-inline {
            .fw(200);
            .fs(12px);
            .color(#999999);
        }
    }

    .col-md-9 {
        .blog {
            .cover {
                .no-border;
                .mbt(0);
            }
        }
    }

    .feed {
        .pd(0 15px);
        .mbt(25px);
        h1 {
            .fs(30px);
        }

        .ihead {
            .ext {
                .color(#999999);
            }

            .desc {
                .mg(20px 0);
                .fs(17px);
                white-space: pre-line;
            }
        }

        .table-content {
            .mg(20px 0);
            .pd(15px);
            .inblock;
            .bg(#f4f4f4);
            .border(@c);
            p {
                .color(#999);
                .mg(0);
                .fb;
            }
            .h1,
            .h2,
            .h3,
            .h4,
            .h5 {
                .fs(19px);
                .pdl(15px);
                a {
                    text-decoration: none;
                }
            }

            .h3,
            .h4,
            .h5 {
                .fs(15px);
                .pdl(30px);
            }

            ul {
                .ml(0);
                li {
                    list-style: none;
                }
            }

            a {
                .color(@3);
                .inblock;
                .pd(5px 0);
                .fs(120%);
                &:hover {
                    .color(@h7ncolor);
                    text-decoration: underline;
                }
            }
        }

        .desc {
            h1 {
                .fs(17px);
                .mg(15px 0);
            }
        }

        a {
            text-decoration: underline;
        }

        .imgblock {
            .text-center;
        }

        h2,
        h3,
        h4 {
            font-size: 19px;
            font-weight: 600;
            text-transform: uppercase;
            margin-bottom: 15px;
            display: block;
            margin: 20px 10px 10px 0;
        }
        h3 {
            .fs(17px);
            .ml(20px);
        }

        h4 {
            .fs(17px);
            .ml(40px);
        }

        .iblock {
            .fs(17px);
            .fw(300);
            line-height: 1.4;
            .mg(20px 0);
            .d {
                .color(#999999);
            }
            strong,
            span {
                font-size: 100%;
            }

            img {
                .pd(15px);
                .rd(10px);
                .border(@c);
                .max-w(700px);
                max-height: none;
                height: auto !important;
                // .ml(50px);
            }
        }

        .tags {
            .mg(20px 0);
        }

        .ext {
            .fs(17px);
            .fw(200);
        }

        img {
            .mg(10px);
        }
    }
}

.mtitle {
    .rela;
    // .border-l(@color1, 4px);
    // border-radius: 4px 0 0 4px;
    .block;
    .pdl(10px);
    .fb;
    .text-left;
    &:before {
        .w(4px);
        .abs;
        left: -5px;
        top: -1px;
        content: "";
        .h(20px);
        .rd(0 4px 4px 0);
        .bg(@color2);
    }
}

#alert-msg {
    z-index: 11000;
    .modal-dialog {
        max-width: 400px;
    }
    .modal-body {
        .pdbt(20px);
        // .color(@color1);
        .fb;
    }
}

.modal-dialog {
    max-width: 600px;
    margin: 1.75rem auto;
    .pdt(30px);
    .modal-content {
        .input {
            .mbt(20px);
        }

        .search-field {
            .rd(10px);
            .mbt(20px);
            .border(@black03, 2px);
        }
    }

    .modal-header {
        .pdt(40px);
        .text-center;
        border-bottom: 0 none;
        // justify-content: center;
        display: block;
        .rela;
        .i-cover {
            .abs;
            top: -25px;
            left: 50%;
            .ml(-25px);
            .w(50px);
            .h(50px);
            .rd(50px);
            .bg(@color1);
            i {
                .color(@f);
                .fs(28px);
                .pd(10px);
            }
        }

        .modal-title {
            .fb;
            .fs(25px);
        }
        .close {
            .abs;
            top: 0;
            right: 0;
            .mg(0);
        }
    }
    .modal-body {
        .pd(0 30px);
        .login {
            width: 100% !important;
            .mt(0);
        }
    }
    .modal-footer {
        border-top: 0 none;
        justify-content: center;
    }
}

.left-menu-color {
    // .mg(-15px 0);
    // .pd(20px);
    .head {
        .color(#333);
        // .txtUP;
        .fw(600);
        .fs(14px);
        .HeadFont;
    }

    #left-menu-panel {
        .nav-head {
            .color(#333);
            // .txtUP;
            // .HeadFont;
            .fw(500);
        }

        .title {
            .fs(0.98rem);
            .fb;
        }
    }

    .close {
        .hide;
    }
}

#top-line-info {
    .pd(5px);
}

#map-content {
    height: 820px;
    margin: 0;
    padding: 0;
    width: 100%;
    .rela;
    div[title="here"] {
        animation: 1.2s ease-in-out 0s normal none infinite running
            xtofocus-anim;
    }

    button[title="Close"] {
        right: 0 !important;
        top: 0 !important;
    }

    .search-addr {
        .abs;
        left: 10px;
        top: 10px;
        z-index: 10;

        .min-w(400px);
        width: 50%;
        border-radius: 10px;
        .pd(10px);
        .border(@e);
        .bg(rgba(255,162,162,0.8));

        .btn {
            .pd(2px 15px);
        }
    }

    #map {
        .w(100%);
        height: 100%;
    }
    #notify {
        margin-top: 50px;
        margin-bottom: -44px;
    }
    .over img {
        float: left;
        max-width: 100%;
        margin-bottom: 2px;
    }
    .content {
        float: right;
        margin-top: 4px;
        padding: 0px;
    }
}

.pay-page {
    .bill-info {
        b {
            .color(@color1);
            .fw(700);
            .fs(17px);
        }
        .table thead th {
            border-top: 0 none;
        }
    }

    .pay-detail {
        .rd(6px);
        .pd(15px);
        .mbt(30px);
        .border(@d);
        background: rgba(244, 244, 244, 0.5);
        .p-i {
            label {
                .color(@9);
                .mbt(5px);
            }
            b {
                .fs(17px);
            }

            .border-b(@d);
            .mbt(10px);
            .pd(10px);

            &:last-child {
                border-bottom: 0 none;
            }
        }
    }

    h4 {
        .fs(17px);
        .fw(600);
        .mbt(10px);
    }

    .pay-intro {
        .pd(15px);
        .border(@e);
        background: rgba(244, 244, 244, 0.3);
        .rd(6px);
        .mbt(15px);
        .fs(17px);
        .hh {
            .curpt;
            p {
                .mbt(0);
                .fw(600);
            }
            .btn {
                .mt(-8px);
                // .animation(all, 1s);
            }
        }

        .p-info {
            .mt(20px);
            .pdl(20px);
            .hide;
            // .animation(height, 1s);
        }

        &.active {
            .p-info {
                .show;
            }

            .btn {
                .rotate(180deg);
            }
        }

        ol li {
            list-style: decimal;
            .pd(5px);
        }
    }
}

b,
strong {
    font-weight: 600;
    // font-size: 1px;
}

.cta {
    .color(@f);
    .bg(@color1);
    .abs;
    z-index: 100;
    .w(92px);
    opacity: 0;
    left: 50%;
    .transition(all, 0.5s);
    transform: translate(-50%, 0);
    bottom: 25%;
    .fs(11px);
    .hide;
}

.chips {
    .text-left;

    .chip {
        .rd(20px);
        .pd(5px 15px);
        .border(@d);
        .mr5;
        .mbt5;
        .inblock;
        &.active {
            .bg(@color2);
            a {
                .color(@f);
            }
        }
        &.cta {
            .border(@color1);
        }
    }

    &.block {
        .chip {
            .block;
        }
    }
}

.loc-selected {
    .text-center;
    .pd(5px);
    .border(darken(#9bdeac, 5%));
    .bg(lighten(#9bdeac, 10%));
    .mt(15px);
    .rd(3px);
    .color(darken(#9bdeac, 45%));

    span {
        .inblock;
        .ml(10px);
        a {
            .color(@color1);
        }
    }
}