{"remainingRequest":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/map-side-bar/src/components/SidebarContent.vue?vue&type=style&index=0&id=d2b79498&scoped=true&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/map-side-bar/src/components/SidebarContent.vue","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/sass-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9idXR0b24iOwpAaW1wb3J0ICJ+ZWxlbWVudC11aS9wYWNrYWdlcy90aGVtZS1jaGFsay9zcmMvY2FyZCI7CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9kcmF3ZXIiOwpAaW1wb3J0ICJ+ZWxlbWVudC11aS9wYWNrYWdlcy90aGVtZS1jaGFsay9zcmMvaWNvbiI7CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9pbnB1dCI7CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9sb2FkaW5nIjsKQGltcG9ydCAifmVsZW1lbnQtdWkvcGFja2FnZXMvdGhlbWUtY2hhbGsvc3JjL3BhZ2luYXRpb24iOwoKLmNvbnRlbnQtY2FyZCB7CiAgaGVpZ2h0OiAxMDAlOwogIGZsZXgtZmxvdzogY29sdW1uOwogIGRpc3BsYXk6IGZsZXg7Cn0KCi5idXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvcjsKICBib3JkZXI6ICRhcHAtcHJpbWFyeS1jb2xvcjsKICBjb2xvcjogd2hpdGU7Cn0KCi5zdGVwLWl0ZW0gewogIGZvbnQtc2l6ZTogMTRweDsKICBtYXJnaW4tYm90dG9tOiAxOHB4OwogIHRleHQtYWxpZ246IGxlZnQ7Cn0KCi5zZWFyY2gtaW5wdXQgewogIHdpZHRoOiAyOThweCAhaW1wb3J0YW50OwogIGhlaWdodDogNDBweDsKICBwYWRkaW5nLXJpZ2h0OiAxNHB4OwogIGFsaWduLWl0ZW1zOiBsZWZ0Owp9CgouaGVhZGVyIHsKICBib3JkZXI6IHNvbGlkIDFweCAjMjkyYjY2OwogIGJhY2tncm91bmQtY29sb3I6ICMyOTJiNjY7CiAgdGV4dC1hbGlnbjogbGVmdDsKfQoKLnBhZ2luYXRpb24gewogIHBhZGRpbmctYm90dG9tOiAxNnB4OwogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKLnBhZ2luYXRpb24gOjp2LWRlZXAgYnV0dG9uIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZSAhaW1wb3J0YW50Owp9Ci5wYWdpbmF0aW9uIDo6di1kZWVwIGxpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZSAhaW1wb3J0YW50Owp9Ci5wYWdpbmF0aW9uIDo6di1kZWVwIGxpLmFjdGl2ZSB7CiAgY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvcjsKfQoKLmVycm9yLWZlZWRiYWNrIHsKICBmb250LWZhbWlseTogQXNhcDsKICBmb250LXNpemU6IDE0cHg7CiAgZm9udC1zdHlsZTogaXRhbGljOwogIHBhZGRpbmctdG9wOiAxNXB4Owp9CgouY29udGVudC1jYXJkIDo6di1kZWVwIC5lbC1jYXJkX19oZWFkZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMyOTJiNjY7CiAgYm9yZGVyOiBzb2xpZCAxcHggIzI5MmI2NjsKfQoKLmNvbnRlbnQtY2FyZCA6OnYtZGVlcCAuZWwtY2FyZF9fYm9keSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2Y3ZmFmZjsKICBvdmVyZmxvdy15OiBoaWRkZW47Cn0KCi5jb250ZW50IHsKICB3aWR0aDogNTE4cHg7CiAgZmxleDogMSAxIGF1dG87CiAgYm94LXNoYWRvdzogMCAycHggMTJweCAwIHJnYmEoMCwgMCwgMCwgMC4wNik7CiAgYm9yZGVyOiBzb2xpZCAxcHggI2U0ZTdlZDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmOwogIG92ZXJmbG93LXk6IHNjcm9sbDsKICBzY3JvbGxiYXItd2lkdGg6IHRoaW47Cn0KCi5jb250ZW50IDo6di1kZWVwIC5lbC1sb2FkaW5nLXNwaW5uZXIgLnBhdGggewogIHN0cm9rZTogJGFwcC1wcmltYXJ5LWNvbG9yOwp9CgouY29udGVudCA6OnYtZGVlcCAuc3RlcC1pdGVtOmZpcnN0LWNoaWxkIC5zZXBlcmF0b3ItcGF0aCB7CiAgZGlzcGxheTogbm9uZTsKfQoKLmNvbnRlbnQgOjp2LWRlZXAgLnN0ZXAtaXRlbTpub3QoOmZpcnN0LWNoaWxkKSAuc2VwZXJhdG9yLXBhdGggewogIHdpZHRoOiA0ODZweDsKICBoZWlnaHQ6IDBweDsKICBib3JkZXI6IHNvbGlkIDFweCAjZTRlN2VkOwogIGJhY2tncm91bmQtY29sb3I6ICNlNGU3ZWQ7Cn0KCi5zY3JvbGxiYXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNrIHsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmNWY1ZjU7Cn0KCi5zY3JvbGxiYXI6Oi13ZWJraXQtc2Nyb2xsYmFyIHsKICB3aWR0aDogMTJweDsKICByaWdodDogLTEycHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2Y1ZjVmNTsKfQoKLnNjcm9sbGJhcjo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWIgewogIGJvcmRlci1yYWRpdXM6IDRweDsKICBib3gtc2hhZG93OiAwIDJweCA0cHggMCByZ2JhKDAsIDAsIDAsIDAuMDYpOwogIGJhY2tncm91bmQtY29sb3I6ICM5Nzk3OTc7Cn0KCjo6di1kZWVwIC5lbC1pbnB1dF9fc3VmZml4IHsKICBwYWRkaW5nLXJpZ2h0OiAxMHB4Owp9Cgo6OnYtZGVlcCAubXktZHJhd2VyIHsKICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDApOwogIGJveC1zaGFkb3c6IG5vbmU7Cn0K"},{"version":3,"sources":["SidebarContent.vue"],"names":[],"mappings":";AA+aA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"SidebarContent.vue","sourceRoot":"node_modules/@abi-software/map-side-bar/src/components","sourcesContent":["<template>\n  <el-card :body-style=\"bodyStyle\" class=\"content-card\">\n    <div slot=\"header\" class=\"header\">\n      <el-input\n        class=\"search-input\"\n        placeholder=\"Search\"\n        v-model=\"searchInput\"\n        @keyup.native=\"searchEvent\"\n        clearable\n        @clear=\"clearSearchClicked\"\n      ></el-input>\n      <el-button class=\"button\" @click=\"searchEvent\">Search</el-button>\n    </div>\n    <SearchFilters\n      class=\"filters\"\n      ref=\"filtersRef\"\n      :entry=\"filterEntry\"\n      :envVars=\"envVars\"\n      @filterResults=\"filterUpdate\"\n      @numberPerPage=\"numberPerPageUpdate\"\n      @loading=\"filtersLoading\"\n      @cascaderReady=\"cascaderReady\"\n    ></SearchFilters>\n    <div class=\"content scrollbar\" v-loading=\"loadingCards\" ref=\"content\">\n      <div class=\"error-feedback\" v-if=\"results.length === 0 && !loadingCards\">\n        No results found - Please change your search / filter criteria.\n      </div>\n      <div v-for=\"result in results\" :key=\"result.doi\" class=\"step-item\">\n        <DatasetCard\n          :entry=\"result\"\n          :envVars=\"envVars\"\n        ></DatasetCard>\n      </div>\n      <el-pagination\n        class=\"pagination\"\n        :current-page.sync=\"page\"\n        hide-on-single-page\n        large\n        layout=\"prev, pager, next\"\n        :page-size=\"numberPerPage\"\n        :total=\"numberOfHits\"\n        @current-change=\"pageChange\"\n      ></el-pagination>\n    </div>\n  </el-card>\n</template>\n\n\n<script>\n/* eslint-disable no-alert, no-console */\nimport Vue from \"vue\";\nimport {\n  Button,\n  Card,\n  Drawer,\n  Icon,\n  Input,\n  Loading,\n  Pagination,\n} from \"element-ui\";\nimport lang from \"element-ui/lib/locale/lang/en\";\nimport locale from \"element-ui/lib/locale\";\nimport SearchFilters from \"./SearchFilters\";\nimport DatasetCard from \"./DatasetCard\";\nimport EventBus from \"./EventBus\";\n\nimport { AlgoliaClient } from \"../algolia/algolia.js\";\nimport { getFilters, facetPropPathMapping } from \"../algolia/utils.js\";\n\nlocale.use(lang);\nVue.use(Button);\nVue.use(Card);\nVue.use(Drawer);\nVue.use(Icon);\nVue.use(Input);\nVue.use(Loading);\nVue.use(Pagination);\n\n// handleErrors: A custom fetch error handler to recieve messages from the server\n//    even when an error is found\nvar handleErrors = async function (response) {\n  if (!response.ok) {\n    let parse = await response.json();\n    if (parse) {\n      throw new Error(parse.message);\n    } else {\n      throw new Error(response);\n    }\n  }\n  return response;\n};\n\nvar initial_state = {\n  searchInput: \"\",\n  lastSearch: \"\",\n  results: [],\n  numberOfHits: 0,\n  filter: [],\n  loadingCards: false,\n  numberPerPage: 10,\n  page: 1,\n  pageModel: 1,\n  start: 0,\n  hasSearched: false,\n  contextCardEnabled: false,\n};\n\nexport default {\n  components: { SearchFilters, DatasetCard },\n  name: \"SideBarContent\",\n  props: {\n    visible: {\n      type: Boolean,\n      default: false,\n    },\n    isDrawer: {\n      type: Boolean,\n      default: true,\n    },\n    entry: {\n      type: Object,\n      default: () => initial_state,\n    },\n    envVars: {\n      type: Object,\n      default: () => {},\n    },\n  },\n  data: function () {\n    return {\n      ...this.entry,\n      bodyStyle: {\n        flex: \"1 1 auto\",\n        \"flex-flow\": \"column\",\n        display: \"flex\",\n      },\n      cascaderIsReady: false,\n    };\n  },\n  computed: {\n    // This computed property populates filter data's entry object with $data from this sidebar\n    filterEntry: function () {\n      return {\n        numberOfHits: this.numberOfHits,\n        filterFacets: this.filter,\n      };\n    },\n  },\n  methods: {\n    resetSearch: function () {\n      this.numberOfHits = 0;\n      this.discoverIds = [];\n      this._dois = [];\n      this.results = [];\n      this.loadingCards = false;\n    },\n    openSearch: function (filter, search = \"\") {\n      this.searchInput = search;\n      this.resetPageNavigation();\n      //Proceed normally if cascader is ready\n      if (this.cascaderIsReady) {\n        this.filter = this.$refs.filtersRef.getValidatedFilters(filter);\n        //Facets provided but cannot find at least one valid\n        //facet. Tell the users the search is invalid and reset\n        //facets check boxes.\n        if (\n          filter &&\n          filter.length > 0 &&\n          this.filter &&\n          this.filter.length === 0\n        ) {\n          this.$refs.filtersRef.checkShowAllBoxes();\n          this.resetSearch();\n        } else if (this.filter) {\n          this.searchAlgolia(this.filter, search);\n          this.$refs.filtersRef.setCascader(this.filter);\n        }\n      } else {\n        //cascader is not ready, perform search if no filter is set,\n        //otherwise waith for cascader to be ready\n        this.filter = filter;\n        if (!filter || filter.length == 0) {\n          this.searchAlgolia(this.filter, search);\n        }\n      }\n    },\n    addFilter: function (filter) {\n      if (this.cascaderIsReady) {\n        this.resetPageNavigation();\n        if (filter) {\n          if (this.$refs.filtersRef.addFilter(filter))\n            this.$refs.filtersRef.initiateSearch();\n        }\n      } else {\n        if (Array.isArray(this.filter)) {\n          this.filter.push(filter);\n        } else {\n          this.filter = [filter];\n        }\n      }\n    },\n    cascaderReady: function () {\n      this.cascaderIsReady = true;\n      this.openSearch(this.filter, this.searchInput);\n    },\n    clearSearchClicked: function () {\n      this.searchInput = \"\";\n      this.resetPageNavigation();\n      this.searchAlgolia(this.filters, this.searchInput);\n    },\n    searchEvent: function (event = false) {\n      if (event.keyCode === 13 || event instanceof MouseEvent) {\n        this.resetPageNavigation();\n        this.searchAlgolia(this.filters, this.searchInput);\n      }\n    },\n    filterUpdate: function (filters) {\n      this.filters = [...filters];\n      this.resetPageNavigation();\n      this.searchAlgolia(filters, this.searchInput);\n      this.$emit(\"search-changed\", {\n        value: filters,\n        type: \"filter-update\",\n      });\n    },\n    searchAlgolia(filters, query = \"\") {\n      // Algolia search\n      this.loadingCards = true;\n      this.algoliaClient\n        .anatomyInSearch(getFilters(filters), query)\n        .then((anatomy) => {\n          EventBus.$emit(\"available-facets\", {\n            'uberons': anatomy,\n            'labels': this.algoliaClient.anatomyFacetLabels\n          });\n        });\n      this.algoliaClient\n        .search(getFilters(filters), query, this.numberPerPage, this.page)\n        .then((searchData) => {\n          this.numberOfHits = searchData.total;\n          this.discoverIds = searchData.discoverIds;\n          this._dois = searchData.dois;\n          this.results = searchData.items;\n          this.loadingCards = false;\n          this.scrollToTop();\n          this.$emit(\"search-changed\", {\n            value: this.searchInput,\n            type: \"query-update\",\n          });\n          if (this._abortController) this._abortController.abort();\n          this._abortController = new AbortController();\n          const signal = this._abortController.signal;\n          //Search ongoing, let the current flow progress\n          this.perItemSearch(signal, { count: 0 });\n        });\n    },\n    filtersLoading: function (val) {\n      this.loadingCards = val;\n    },\n    numberPerPageUpdate: function (val) {\n      this.numberPerPage = val;\n      this.pageChange(1);\n    },\n    pageChange: function (page) {\n      this.start = (page - 1) * this.numberPerPage;\n      this.page = page;\n      this.searchAlgolia(\n        this.filters,\n        this.searchInput,\n        this.numberPerPage,\n        this.page\n      );\n    },\n    handleMissingData: function (doi) {\n      let i = this.results.findIndex((res) => res.doi === doi);\n      if (this.results[i]) this.results[i].detailsReady = true;\n    },\n    perItemSearch: function (signal, data) {\n      //Maximum 10 downloads at once to prevent long waiting time\n      //between unfinished search and new search\n      const maxDownloads = 10;\n      if (maxDownloads > data.count) {\n        const doi = this._dois.shift();\n        if (doi) {\n          data.count++;\n          this.callSciCrunch(this.envVars.API_LOCATION, { dois: [doi] }, signal)\n            .then((result) => {\n              if (result.numberOfHits === 0) this.handleMissingData(doi);\n              else this.resultsProcessing(result);\n              this.$refs.content.style[\"overflow-y\"] = \"scroll\";\n              data.count--;\n              //Async::Download finished, get the next one\n              this.perItemSearch(signal, data);\n            })\n            .catch((result) => {\n              if (result.name !== \"AbortError\") {\n                this.handleMissingData(doi);\n                data.count--;\n                //Async::Download not aborted, get the next one\n                this.perItemSearch(signal, data);\n              }\n            });\n          //Check and make another request until it gets to max downloads\n          this.perItemSearch(signal, data);\n        }\n      }\n    },\n    scrollToTop: function () {\n      if (this.$refs.content) {\n        this.$refs.content.scroll({ top: 0, behavior: \"smooth\" });\n      }\n    },\n    resetPageNavigation: function () {\n      this.start = 0;\n      this.page = 1;\n    },\n    resultsProcessing: function (data) {\n      this.lastSearch = this.searchInput;\n\n      if (data.results.length === 0) {\n        return;\n      }\n      data.results.forEach((element) => {\n        // match the scicrunch result with algolia result\n        let i = this.results.findIndex((res) =>\n          element.doi ? element.doi.includes(res.doi) : false\n        );\n        // Assign scicrunch results to the object\n        Object.assign(this.results[i], element);\n        // Assign the attributes that need some processing\n        Object.assign(this.results[i], {\n          numberSamples: element.sampleSize ? parseInt(element.sampleSize) : 0,\n          numberSubjects: element.subjectSize\n            ? parseInt(element.subjectSize)\n            : 0,\n          updated:\n            (element.updated && element.updated.length) > 0\n              ? element.updated[0].timestamp.split(\"T\")[0]\n              : \"\",\n          url: element.uri[0],\n          datasetId: element.dataset_identifier,\n          datasetRevision: element.dataset_revision,\n          datasetVersion: element.dataset_version,\n          organs:\n            element.organs && element.organs.length > 0\n              ? [...new Set(element.organs.map((v) => v.name))]\n              : undefined,\n          species: element.organisms\n            ? element.organisms[0].species\n              ? [\n                  ...new Set(\n                    element.organisms.map((v) =>\n                      v.species ? v.species.name : null\n                    )\n                  ),\n                ]\n              : undefined\n            : undefined, // This processing only includes each gender once into 'sexes'\n          scaffolds: element[\"abi-scaffold-metadata-file\"],\n          thumbnails: element[\"abi-thumbnail\"]\n            ? element[\"abi-thumbnail\"]\n            : element[\"abi-scaffold-thumbnail\"],\n          scaffoldViews: element[\"abi-scaffold-view-file\"],\n          videos: element.video,\n          plots: element[\"abi-plot\"],\n          images: element[\"common-images\"],\n          contextualInformation:\n            element[\"abi-contextual-information\"].length > 0\n              ? element[\"abi-contextual-information\"]\n              : undefined,\n          segmentation: element[\"mbf-segmentation\"],\n          simulation: element[\"abi-simulation-file\"],\n          additionalLinks: element.additionalLinks,\n          detailsReady: true,\n        });\n        Vue.set(this.results, i, this.results[i]);\n      });\n    },\n    createfilterParams: function (params) {\n      let p = new URLSearchParams();\n      //Check if field is array or value\n      for (const key in params) {\n        if (Array.isArray(params[key])) {\n          params[key].forEach((e) => {\n            p.append(key, e);\n          });\n        } else {\n          p.append(key, params[key]);\n        }\n      }\n      return p.toString();\n    },\n    callSciCrunch: function (apiLocation, params = {}, signal) {\n      return new Promise((resolve, reject) => {\n        // Add parameters if we are sent them\n        let fullEndpoint =\n          this.envVars.API_LOCATION +\n          this.searchEndpoint +\n          \"?\" +\n          this.createfilterParams(params);\n        fetch(fullEndpoint, { signal })\n          .then(handleErrors)\n          .then((response) => response.json())\n          .then((data) => resolve(data))\n          .catch((data) => reject(data));\n      });\n    },\n    getAlgoliaFacets: async function(){\n      let facets = await this.algoliaClient.getAlgoliaFacets(facetPropPathMapping)\n      return facets;\n    }\n  },\n  mounted: function () {\n    // initialise algolia\n    this.algoliaClient = new AlgoliaClient(\n      this.envVars.ALGOLIA_ID,\n      this.envVars.ALGOLIA_KEY,\n      this.envVars.PENNSIEVE_API_LOCATION\n    );\n    this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX);\n    this.openSearch(this.filter, this.searchInput);\n  },\n  created: function () {\n    //Create non-reactive local variables\n    this.searchEndpoint = \"dataset_info/using_multiple_dois/\";\n  },\n};\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped lang=\"scss\">\n@import \"~element-ui/packages/theme-chalk/src/button\";\n@import \"~element-ui/packages/theme-chalk/src/card\";\n@import \"~element-ui/packages/theme-chalk/src/drawer\";\n@import \"~element-ui/packages/theme-chalk/src/icon\";\n@import \"~element-ui/packages/theme-chalk/src/input\";\n@import \"~element-ui/packages/theme-chalk/src/loading\";\n@import \"~element-ui/packages/theme-chalk/src/pagination\";\n\n.content-card {\n  height: 100%;\n  flex-flow: column;\n  display: flex;\n}\n\n.button {\n  background-color: $app-primary-color;\n  border: $app-primary-color;\n  color: white;\n}\n\n.step-item {\n  font-size: 14px;\n  margin-bottom: 18px;\n  text-align: left;\n}\n\n.search-input {\n  width: 298px !important;\n  height: 40px;\n  padding-right: 14px;\n  align-items: left;\n}\n\n.header {\n  border: solid 1px #292b66;\n  background-color: #292b66;\n  text-align: left;\n}\n\n.pagination {\n  padding-bottom: 16px;\n  background-color: white;\n  text-align: center;\n}\n\n.pagination ::v-deep button {\n  background-color: white !important;\n}\n.pagination ::v-deep li {\n  background-color: white !important;\n}\n.pagination ::v-deep li.active {\n  color: $app-primary-color;\n}\n\n.error-feedback {\n  font-family: Asap;\n  font-size: 14px;\n  font-style: italic;\n  padding-top: 15px;\n}\n\n.content-card ::v-deep .el-card__header {\n  background-color: #292b66;\n  border: solid 1px #292b66;\n}\n\n.content-card ::v-deep .el-card__body {\n  background-color: #f7faff;\n  overflow-y: hidden;\n}\n\n.content {\n  width: 518px;\n  flex: 1 1 auto;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);\n  border: solid 1px #e4e7ed;\n  background-color: #ffffff;\n  overflow-y: scroll;\n  scrollbar-width: thin;\n}\n\n.content ::v-deep .el-loading-spinner .path {\n  stroke: $app-primary-color;\n}\n\n.content ::v-deep .step-item:first-child .seperator-path {\n  display: none;\n}\n\n.content ::v-deep .step-item:not(:first-child) .seperator-path {\n  width: 486px;\n  height: 0px;\n  border: solid 1px #e4e7ed;\n  background-color: #e4e7ed;\n}\n\n.scrollbar::-webkit-scrollbar-track {\n  border-radius: 10px;\n  background-color: #f5f5f5;\n}\n\n.scrollbar::-webkit-scrollbar {\n  width: 12px;\n  right: -12px;\n  background-color: #f5f5f5;\n}\n\n.scrollbar::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);\n  background-color: #979797;\n}\n\n::v-deep .el-input__suffix {\n  padding-right: 10px;\n}\n\n::v-deep .my-drawer {\n  background: rgba(0, 0, 0, 0);\n  box-shadow: none;\n}\n</style>\n"]}]}