body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.expivi-single-product-container {
  display: table;
  height: 100%;
  width: 100%;
}

.expivi-single-product-container .expivi-viewer-container {
  display: table-cell;
  width: 64%;
  padding-right: 15px;
  vertical-align: top;
}

.expivi-single-product-container .expivi-option-container {
  height: 100%;
  display: table-cell;
  width: 36%;
  max-width: 400px;
}

@media (max-width: 600px) {
  .expivi-single-product-container {
    display: block;
  }

  .expivi-single-product-container .expivi-viewer-container {
    height: 60vh;
    display: block;
    width: 100%;
    padding-right: 0;
  }

  .expivi-single-product-container .expivi-option-container {
    height: initial;
    display: block;
    width: 100%;
  }
}

var Token =  "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianRpIjoiMjAyM2RjYTQ2ZDYyNGZkNjAxOGMyMmEyMTRjMDM5YjVjYjUzNjQwY2E4MDAxMjVlNWYzZTRmOWUxNjY4MmJiZjE4NGU4OTJhOGFhNzY0ODciLCJpYXQiOjE3MjE3NDIzMjUuMTA2MTIsIm5iZiI6MTcyMTc0MjMyNS4xMDYxMjIsImV4cCI6MjAzNzI3NTEyNC44MTc4NSwic3ViIjoiMyIsInNjb3BlcyI6W119.EQr6L3cr9STgLQoA_rYOht-4JhR4W-0h-V2bsC7CbroIHk8nWIp0fxw8y17MbYl4ireY6IJekDPOq_d429lKtad0hLZF37tCn2p0yJyfn1jc7zoLqY4R865gd9VIFEMwvb1_ZGfHz_oYiZjop-z-Dusl8-0uBwdT7geSXp8flfMBM8pBrSPENuCULVv9hJx3gQRiWgMTfAQedNlgGGI6Ny1_PdOlch4KFSIa9q7p8swf_mYKQ-8mBt3J6KDZtdSefGmkX5u4t6sYC49FsYbxVGlrOFsKdMdAELIgjZppmuMiZ6JIkiBFeeGbI4mgBCM_APaqXqT2TzgCaoUPwu7h50m8BZ8qn5CqrvqVKLcnHlwgD_OsTuOg7FwOb8WVPA8WMlPqfg3vdrNkGOyrNgASkXLrzkBZmiQYbPs4AwDeGgby6eJH4Cp6sXU4C2jFIJ53WNn5Ax5BlbLKboQh5hVvLXRO6yiNXmjV_j8L7Xs0G5T6QED3O_Th2sI9jd3Ks9Zbm3fJrrLDdAx7Fl2-8SFkriHO81YdhC2u1EeC8hdS_JxzmvuY7_UdXm7I6wT18igWuVfiCr1JTXYhRP1xkxmarAAgTYKBwVzXnwtpBT6bZbFYDvwjXgR0uP-jqUCTW2NeG6l6y2Y6Cf01ZU-2Ld9Ow-dQv8PS5l-UxQmpsTbHe64";

window.addEventListener("load", function () {
  const CheckboxSelectorView = Vue.component("checkbox", {
    props: {
      label: String,
      value: {
        default: null
      },
      items: Array,
      loading: {
        default: false
      },
      size: {
        type: String,
        default: "lg"
      },
      rounded: {
        type: String,
        default: "no"
      },
      node_id: Number
    },
    data: function () {
      return {
        selected: null
      };
    },
    methods: {
      updateCheckbox() {
        this.selected = this.items.length > 0 && this.value != this.items[0].id;
      }
    },
    template: `
                <div>
                    <h2>Our custom checkbox component:</h2>
                    <input type="checkbox" :id="'checkbox_group_'+node_id" v-model="selected" />
                    <label :for="'checkbox_group_'+node_id">{{label}}</label>
                </div>
            `,
    watch: {
      value() {
        this.updateCheckbox();
      },
      selected(aNewValue) {
        if (aNewValue && this.items.length > 1) {
          this.$emit("input", this.items[1].id);
        } else if (this.items.length > 0) {
          this.$emit("input", this.items[0].id);
        }
      }
    }
  });

  ExpiviOptionsVueInstance.prototype.$customViews[
    "Checkbox"
  ] = CheckboxSelectorView;

  const expiviInstance = new ExpiviComponent({
    catalogueId: 67,
    viewerContainer: "#viewerContainer",
    optionContainer: "#optionsContainer",
    priceContainer: "#priceContainer",
    token: Token
  });
});