.modal-mask {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  width: 100%;
  z-index: 1000; }
  .modal-mask .modal-content {
    border: none;
    box-shadow: 0 0 4px 0 rgba(86, 86, 86, 0.5);
    left: 50%;
    max-height: 90%;
    padding: 40px 20px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 900px; }
    .modal-mask .modal-content .btn-close {
      background-color: #fff;
      border: none;
      border-radius: 100%;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
      padding-left: 9px;
      position: absolute;
      top: -15px;
      opacity: 1;
      right: -15px;
      height: 40px;
      width: 40px; }
      .modal-mask .modal-content .btn-close:after {
        color: #a3a3a3;
        content: "\00D7";
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%); }
    .modal-mask .modal-content .modal-body {
      margin-bottom: 20px;
      max-height: calc(100vh - 120px);
      padding: 0 20px;
      width: 100%; }
      .modal-mask .modal-content .modal-body .photos {
        list-style: none;
        border: 1px solid #e6e6e6;
        padding: 5px;
        position: relative; }
        .modal-mask .modal-content .modal-body .photos .photo {
          align-items: center;
          display: flex;
          display: block\0;
          justify-content: center;
          padding-top: 100%;
          text-align: center\0;
          vertical-align: text-top; }
          .modal-mask .modal-content .modal-body .photos .photo img {
            left: 50%;
            max-height: 100%;
            max-width: 100%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%); }
        .modal-mask .modal-content .modal-body .photos .photo-button {
          background-color: rgba(255, 255, 255, 0.7);
          border-radius: 100%;
          cursor: pointer;
          height: 30px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 30px;
          z-index: 10; }
          .modal-mask .modal-content .modal-body .photos .photo-button:after {
            border: 0px solid #A3A3A3;
            border-width: 2px 2px 0 0;
            content: "";
            display: block;
            height: 30%;
            left: 50%;
            position: absolute;
            top: 50%;
            width: 30%; }
          .modal-mask .modal-content .modal-body .photos .photo-button.photo-prev {
            left: 10px; }
            .modal-mask .modal-content .modal-body .photos .photo-button.photo-prev:after {
              transform: translate(-35%, -50%) rotate(-135deg); }
          .modal-mask .modal-content .modal-body .photos .photo-button.photo-next {
            right: 10px; }
            .modal-mask .modal-content .modal-body .photos .photo-button.photo-next:after {
              transform: translate(-75%, -50%) rotate(45deg); }
      .modal-mask .modal-content .modal-body .title {
        font-size: 20px;
        font-weight: 500; }
      .modal-mask .modal-content .modal-body .brief {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.3px;
        color: #9A9EA2; }
      .modal-mask .modal-content .modal-body .price-title {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.26px;
        color: #9a9ea2; }
      .modal-mask .modal-content .modal-body .variant-price {
        font-size: 24px;
        font-weight: bold;
        color: #A98760; }
      .modal-mask .modal-content .modal-body .variant-del-price {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.26px;
        color: #9a9ea2;
        margin: 5px; }
      .modal-mask .modal-content .modal-body .product-thumbnail {
        width: 76px;
        height: 76px;
        padding: 2px;
        overflow: hidden;
        display: inline-block;
        cursor: pointer;
        border: 1px solid transparent; }
        .modal-mask .modal-content .modal-body .product-thumbnail.focus {
          border: 1px solid grey;
          border-radius: 2px; }
        .modal-mask .modal-content .modal-body .product-thumbnail img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      .modal-mask .modal-content .modal-body .variant-quantity {
        display: flex;
        flex-direction: column; }
        .modal-mask .modal-content .modal-body .variant-quantity .product-variant {
          display: flex;
          flex-direction: row;
          flex: 1 0 0;
          margin-bottom: 18px; }
          .modal-mask .modal-content .modal-body .variant-quantity .product-variant.hide {
            display: none; }
          .modal-mask .modal-content .modal-body .variant-quantity .product-variant.normal select {
            height: 40px; }
        .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option {
          margin: 10px 0; }
          .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .title {
            flex: 0 0 100%;
            margin-bottom: 6px;
            color: #565656;
            font-size: 14px; }
          .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image {
            display: flex;
            flex: 0 0 100%;
            flex-wrap: wrap;
            align-items: center; }
            .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option {
              display: block;
              position: relative;
              justify-content: center;
              align-items: center;
              width: 40px;
              height: 40px;
              margin: 0 3px; }
              .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option.focus, .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option.selected {
                width: 46px;
                height: 46px;
                margin: 0;
                padding: 2px; }
              .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option.focus {
                border: 1px solid #E2E2E2; }
              .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option.selected {
                border: 1px solid #C39D6F; }
              .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option.disabled {
                opacity: 0.2; }
              .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option img {
                left: 50%;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                width: calc(100% - 4px); }
          .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .advance .option {
            display: inline-block;
            min-width: 50px;
            margin-right: 10px;
            margin-bottom: 10px;
            padding: 5px 24px;
            color: #C39D6F;
            border: 1px solid #C39D6F;
            border-radius: 5px;
            font-size: 14px; }
            .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .advance .option.selected {
              color: #ffffff;
              background-color: #C39D6F; }
            .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .advance .option.disabled {
              color: #A3A3A3;
              background-color: #F9F9F9;
              border-color: #A3A3A3;
              opacity: 0.7; }
        .modal-mask .modal-content .modal-body .variant-quantity .product-quantity {
          border-radius: 5px;
          flex: 1 0 0;
          height: 40px; }
          .modal-mask .modal-content .modal-body .variant-quantity .product-quantity .btn {
            border: 1px solid #e2e2e2;
            height: 40px; }
            @media (min-width: 769px) {
              .modal-mask .modal-content .modal-body .variant-quantity .product-quantity .btn.add-down:hover, .modal-mask .modal-content .modal-body .variant-quantity .product-quantity .btn.add-up:hover {
                border-color: #C39D6F;
                color: #C39D6F; } }
      .modal-mask .modal-content .modal-body .add-button-wrapper {
        margin-top: 10px; }
      .modal-mask .modal-content .modal-body .product-others {
        padding: 10px 0;
        font-size: 14px; }
        .modal-mask .modal-content .modal-body .product-others .product-love {
          padding-right: 10px; }
          .modal-mask .modal-content .modal-body .product-others .product-love .btn-love {
            background: #ffffff;
            border: 1px solid #A3A3A3;
            color: #A3A3A3;
            transition: all ease-in-out .15s;
            text-align: center;
            border-radius: 15px;
            cursor: pointer;
            display: inline-block;
            padding: 4px 10px; }
            .modal-mask .modal-content .modal-body .product-others .product-love .btn-love svg {
              margin-right: 5px; }
            .modal-mask .modal-content .modal-body .product-others .product-love .btn-love:hover {
              background: #ffffff;
              border-color: #C39D6F;
              color: #7C7C7C; }
        .modal-mask .modal-content .modal-body .product-others .product_sold {
          color: #A3A3A3;
          padding-right: 10px; }
        .modal-mask .modal-content .modal-body .product-others .product_bonus .val {
          color: #A98760;
          font-size: 1.3rem;
          font-weight: 600; }
      .modal-mask .modal-content .modal-body .section-heading {
        margin: 50px 0 30px; }
      .modal-mask .modal-content .modal-body .ckeditor img {
        max-width: 100%; }
    .modal-mask .modal-content .btn.add-button {
      background-color: #ffffff;
      border: solid 1px #C39D6F;
      border-radius: 3px;
      color: #C39D6F;
      height: 40px;
      cursor: pointer;
      width: 100%; }
      @media (min-width: 769px) {
        .modal-mask .modal-content .btn.add-button:hover {
          background-color: #C39D6F;
          color: #fff; } }
      .modal-mask .modal-content .btn.add-button.selected {
        background-color: #C39D6F;
        color: #fff; }
      .modal-mask .modal-content .btn.add-button.adding {
        cursor: not-allowed; }
      .modal-mask .modal-content .btn.add-button.secondary {
        background: #ABB4BB;
        border-color: #ABB4BB;
        border-radius: 5px;
        color: #ffffff;
        transition: all ease-in-out .15s;
        text-align: center; }
        .modal-mask .modal-content .btn.add-button.secondary:hover {
          background: #86919B;
          border-color: #86919B; }
      .modal-mask .modal-content .btn.add-button:disabled {
        color: #A3A3A3;
        background: #F9F9F9;
        border-color: #E2E2E2;
        opacity: .7; }
      .modal-mask .modal-content .btn.add-button.btn-default {
        display: block; }
      .modal-mask .modal-content .btn.add-button.btn-mobile {
        display: none; }
    @media (max-width: 991px) {
      .modal-mask .modal-content {
        width: 750px; } }
    @media (max-width: 768px) {
      .modal-mask .modal-content {
        width: 90%; }
        .modal-mask .modal-content .modal-body .variant-quantity {
          flex-wrap: wrap; }
          .modal-mask .modal-content .modal-body .variant-quantity .product-variant {
            flex: 0 0 100%;
            margin-bottom: 15px; }
          .modal-mask .modal-content .modal-body .variant-quantity .product-quantity {
            flex: 0 0 100%; } }
    @media (max-width: 576px) {
      .modal-mask .modal-content {
        border-radius: 10px 10px 0 0;
        height: calc(100% - 80px);
        padding: 24px 0px 48px;
        top: 80px;
        transform: translateX(-50%);
        width: 101%; }
        .modal-mask .modal-content.only-description {
          padding-bottom: 0px; }
        .modal-mask .modal-content .btn-close {
          right: 10px;
          top: -55px; }
        .modal-mask .modal-content .modal-body .section-heading {
          margin-top: 30px; }
        .modal-mask .modal-content .btn.add-button.btn-default {
          display: none; }
        .modal-mask .modal-content .btn.add-button.btn-mobile {
          bottom: 16px;
          display: block;
          margin: 0 20px;
          position: fixed;
          width: calc(100% - 40px);
          z-index: 100; } }

@media (min-width: 577px) {
  .modal-enter-active, .modal-leave-active {
    transition: opacity .5s; }
  .modal-enter, .modal-leave-to {
    opacity: 0; } }

@media (max-width: 576px) {
  .modal-enter-active, .modal-leave-active {
    transition: all .5s; }
  .modal-enter, .modal-leave-to {
    padding-top: 100vh;
    opacity: 0; } }