{"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/flatmapvuer/src/components/Tooltip.vue?vue&type=script&lang=js&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/flatmapvuer/src/components/Tooltip.vue","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/thread-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/babel-loader/lib/index.js","mtime":456789000000},{"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:DQovKiBlc2xpbnQtZGlzYWJsZSBuby1hbGVydCwgbm8tY29uc29sZSAqLw0KaW1wb3J0IFZ1ZSBmcm9tICJ2dWUiOw0KaW1wb3J0IHsNCiAgQnV0dG9uLA0KICBDb250YWluZXIsDQogIEhlYWRlciwNCiAgSWNvbiwNCiAgTWFpbg0KfSBmcm9tICJlbGVtZW50LXVpIjsNCmltcG9ydCBsYW5nIGZyb20gImVsZW1lbnQtdWkvbGliL2xvY2FsZS9sYW5nL2VuIjsNCmltcG9ydCBsb2NhbGUgZnJvbSAiZWxlbWVudC11aS9saWIvbG9jYWxlIjsNCmxvY2FsZS51c2UobGFuZyk7DQpWdWUudXNlKEJ1dHRvbik7DQpWdWUudXNlKENvbnRhaW5lcik7DQpWdWUudXNlKEhlYWRlcik7DQpWdWUudXNlKEljb24pOw0KVnVlLnVzZShNYWluKTsNCg0KaW1wb3J0IEV2ZW50QnVzIGZyb20gJy4vRXZlbnRCdXMnDQppbXBvcnQgRXh0ZXJuYWxSZXNvdXJjZUNhcmQgZnJvbSAnLi9FeHRlcm5hbFJlc291cmNlQ2FyZC52dWUnOw0KDQpjb25zdCB0aXRsZUNhc2UgPSAoc3RyKSA9PiB7DQogIHJldHVybiBzdHIucmVwbGFjZSgvXHdcUyovZywgKHQpID0+IHsgcmV0dXJuIHQuY2hhckF0KDApLnRvVXBwZXJDYXNlKCkgKyB0LnN1YnN0cigxKS50b0xvd2VyQ2FzZSgpIH0pOw0KfQ0KDQpjb25zdCBjYXBpdGFsaXNlID0gZnVuY3Rpb24oc3RyKXsNCiAgaWYgKHN0cikNCiAgICByZXR1cm4gc3RyLmNoYXJBdCgwKS50b1VwcGVyQ2FzZSgpICsgc3RyLnNsaWNlKDEpDQogIHJldHVybiAiIg0KfQ0KDQpleHBvcnQgZGVmYXVsdCB7DQogIGNvbXBvbmVudHM6IHsgRXh0ZXJuYWxSZXNvdXJjZUNhcmQgfSwNCiAgbmFtZTogIlRvb2x0aXAiLA0KICBwcm9wczogeyANCiAgICB2aXNpYmxlOiB7DQogICAgICB0eXBlOiBCb29sZWFuLA0KICAgICAgZGVmYXVsdDogZmFsc2UNCiAgICB9LA0KICAgIGVudHJ5OiB7DQogICAgICB0eXBlOiBPYmplY3QsDQogICAgICBkZWZhdWx0OiAoKSA9PiAoew0KICAgICAgICBkZXN0aW5hdGlvbnM6IFtdLCANCiAgICAgICAgb3JpZ2luczogW10sDQogICAgICAgIGNvbXBvbmVudHM6IFtdLA0KICAgICAgICBkZXN0aW5hdGlvbnNXaXRoRGF0YXNldHM6IFtdLA0KICAgICAgICBvcmlnaW5zV2l0aERhdGFzZXRzOiBbXSwNCiAgICAgICAgY29tcG9uZW50c1dpdGhEYXRhc2V0czogW10sDQogICAgICAgIHJlc291cmNlOiB1bmRlZmluZWQNCiAgICAgIH0pDQogICAgfSwNCiAgfSwNCiAgZGF0YTogZnVuY3Rpb24oKSB7DQogICAgcmV0dXJuIHsNCiAgICAgIGNvbnRyb2xsZXI6IHVuZGVmaW5lZCwNCiAgICAgIGFjdGl2ZVNwZWNpZXM6IHVuZGVmaW5lZCwNCiAgICAgIGFwcGVuZFRvQm9keTogZmFsc2UsDQogICAgICBwdWJtZWRTZWFyY2hVcmw6ICcnLA0KICAgICAgbG9hZGluZzogZmFsc2UsDQogICAgICBzaG93VG9vbGlwOiBmYWxzZSwNCiAgICAgIHNob3dEZXRhaWxzOiBmYWxzZSwNCiAgICAgIG9yaWdpbkRlc2NyaXB0aW9uczogew0KICAgICAgICAnbW90b3InOiAnaXMgdGhlIGxvY2F0aW9uIG9mIHRoZSBpbml0aWFsIGNlbGwgYm9keSBvZiB0aGUgY2lyY3VpdCcsDQogICAgICAgICdzZW5zb3J5JzogJ2lzIHRoZSBsb2NhdGlvbiBvZiB0aGUgaW5pdGlhbCBjZWxsIGJvZHkgaW4gdGhlIFBOUyBjaXJjdWl0Jw0KICAgICAgfSwNCiAgICAgIGNvbXBvbmVudHNXaXRoRGF0YXNldHM6IFtdLA0KICAgICAgdWJlcm9uczogW3tpZDogdW5kZWZpbmVkLCBuYW1lOiB1bmRlZmluZWR9XQ0KICAgIH07DQogIH0sDQogIGNvbXB1dGVkOiB7DQogICAgcmVzb3VyY2VzOiBmdW5jdGlvbigpew0KICAgICAgbGV0IHJlc291cmNlcyA9IFtdDQogICAgICBpZih0aGlzLmVudHJ5ICYmIHRoaXMuZW50cnkuaHlwZXJsaW5rcyl7DQogICAgICAgIHJlc291cmNlcyA9IHRoaXMuZW50cnkuaHlwZXJsaW5rcw0KICAgICAgfQ0KICAgICAgcmV0dXJuIHJlc291cmNlcw0KICAgIH0sDQogICAgb3JpZ2luRGVzY3JpcHRpb246IGZ1bmN0aW9uKCl7DQogICAgICBpZih0aGlzLmVudHJ5ICYmIHRoaXMuZW50cnkudGl0bGUgJiYgdGhpcy5lbnRyeS50aXRsZS50b0xvd2VyQ2FzZSgpLmluY2x1ZGVzKCdtb3RvcicpKXsNCiAgICAgICAgcmV0dXJuIHRoaXMub3JpZ2luRGVzY3JpcHRpb25zLm1vdG9yDQogICAgICB9IGVsc2Ugew0KICAgICAgICByZXR1cm4gdGhpcy5vcmlnaW5EZXNjcmlwdGlvbnMuc2Vuc29yeQ0KICAgICAgfQ0KICAgIH0sDQogICAgcHJvdlNwZWNpZXNEZXNjcmlwdGlvbjogZnVuY3Rpb24oKXsNCiAgICAgIGxldCB0ZXh0ID0gIk9ic2VydmVkIGluIg0KICAgICAgdGhpcy5lbnRyeS5wcm92ZW5hbmNlVGF4b25vbXlMYWJlbC5mb3JFYWNoKGxhYmVsID0+IHsNCiAgICAgICAgdGV4dCArPSBgICR7bGFiZWx9LGANCiAgICAgIH0pOw0KICAgICAgdGV4dCA9IHRleHQuc2xpY2UoMCwtMSkgLy8gcmVtb3ZlIGxhc3QgY29tbWENCiAgICAgIHRleHQgKz0gIiBzcGVjaWVzIg0KICAgICAgcmV0dXJuIHRleHQNCiAgICB9DQogIH0sDQogIG1ldGhvZHM6IHsNCiAgICB0aXRsZUNhc2U6IGZ1bmN0aW9uKHRpdGxlKXsNCiAgICAgIHJldHVybiB0aXRsZUNhc2UodGl0bGUpDQogICAgfSwNCiAgICBjYXBpdGFsaXNlOiBmdW5jdGlvbih0ZXh0KXsNCiAgICAgIHJldHVybiBjYXBpdGFsaXNlKHRleHQpDQogICAgfSwNCiAgICBvbkNsb3NlOiBmdW5jdGlvbigpIHsNCiAgICAgIHRoaXMuJGVtaXQoIm9uQ2xvc2UiKQ0KICAgIH0sDQogICAgb3BlblVybDogZnVuY3Rpb24odXJsKXsNCiAgICAgIHdpbmRvdy5vcGVuKHVybCwgJ19ibGFuaycpDQogICAgfSwNCiAgICBvcGVuQWxsOiBmdW5jdGlvbigpew0KICAgICAgRXZlbnRCdXMuJGVtaXQoJ29uQWN0aW9uQ2xpY2snLCB7dHlwZTonRmFjZXRzJywgbGFiZWxzOiB0aGlzLmVudHJ5LmNvbXBvbmVudHNXaXRoRGF0YXNldHMubWFwKGE9PmEubmFtZSl9KQ0KICAgIH0sDQogICAgb3BlbkF4b25zOiBmdW5jdGlvbigpew0KICAgICAgRXZlbnRCdXMuJGVtaXQoJ29uQWN0aW9uQ2xpY2snLCB7dHlwZTonRmFjZXRzJywgbGFiZWxzOiB0aGlzLmVudHJ5LmRlc3RpbmF0aW9uc1dpdGhEYXRhc2V0cy5tYXAoYT0+YS5uYW1lKX0pDQogICAgfSwNCiAgICBvcGVuRGVuZHJpdGVzOiBmdW5jdGlvbigpew0KICAgICAgRXZlbnRCdXMuJGVtaXQoJ29uQWN0aW9uQ2xpY2snLCB7dHlwZTonRmFjZXRzJywgbGFiZWxzOiB0aGlzLmVudHJ5Lm9yaWdpbnNXaXRoRGF0YXNldHMubWFwKGE9PmEubmFtZSl9KQ0KICAgIH0sDQogICAgcHVibWVkU2VhcmNoVXJsVXBkYXRlOiBmdW5jdGlvbiAodmFsKXsNCiAgICAgIHRoaXMucHVibWVkU2VhcmNoVXJsID0gdmFsDQogICAgfSwNCiAgfQ0KfTsNCg=="},{"version":3,"sources":["Tooltip.vue"],"names":[],"mappings":";AA2FA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Tooltip.vue","sourceRoot":"node_modules/@abi-software/flatmapvuer/src/components","sourcesContent":["<template>\r\n  <div class=\"tooltip-container\">\r\n     <el-main v-if=\"entry\" class=\"main\" v-loading=\"loading\">\r\n      <div class=\"block\" v-if=\"entry.title\">\r\n        <span class=\"title\">{{capitalise(entry.title)}}</span>\r\n        <div v-if=\"entry.provenanceTaxonomyLabel && entry.provenanceTaxonomyLabel.length > 0\" class=\"subtitle\">\r\n          {{provSpeciesDescription}}\r\n        </div>\r\n      </div>\r\n      <div class=\"block\" v-else>\r\n        <span class=\"title\">{{entry.featureId}}</span>\r\n      </div>\r\n      <div v-show=\"showDetails\" class=\"hide\" @click=\"showDetails = false\">\r\n          Hide path information\r\n          <i class=\"el-icon-arrow-up\"></i>\r\n        </div>\r\n        <div v-show=\"!showDetails\" class=\"hide\" @click=\"showDetails = true\">\r\n          Show path information\r\n          <i class=\"el-icon-arrow-down\"></i>\r\n        </div>\r\n      <transition name=\"slide-fade\">\r\n        <div v-show=\"showDetails\" class=\"content-container scrollbar\">\r\n          {{entry.paths}}\r\n          <div v-if=\"entry.origins && entry.origins.length > 0\" class=\"block\">\r\n            <div>\r\n              <span class=\"attribute-title\">Origin</span>\r\n              <el-popover\r\n              width=\"250\"\r\n              trigger=\"hover\"\r\n              :append-to-body=false\r\n              popper-class=\"popover-origin-help\"\r\n              >\r\n              <i slot=\"reference\" class=\"el-icon-warning-outline info\"/>\r\n              <span style=\"word-break: keep-all;\">\r\n                <i>Origin</i> {{originDescription}}\r\n              </span>\r\n              </el-popover>\r\n            </div>\r\n            <div v-for=\"(origin, i) in entry.origins\" class=\"attribute-content\"  :key=\"origin\">\r\n              {{ capitalise(origin) }}\r\n              <div v-if=\"i != entry.origins.length - 1\" class=\"seperator\"></div>\r\n            </div>\r\n            <el-button v-show=\"entry.originsWithDatasets && entry.originsWithDatasets.length > 0\" class=\"button\" @click=\"openDendrites\">\r\n              Explore origin data\r\n            </el-button>\r\n          </div>\r\n          <div v-if=\"entry.components && entry.components.length > 0\" class=\"block\">\r\n            <div class=\"attribute-title\">Components</div>\r\n            <div v-for=\"(component, i) in entry.components\" class=\"attribute-content\"  :key=\"component\">\r\n              {{ capitalise(component) }}\r\n              <div v-if=\"i != entry.components.length - 1\" class=\"seperator\"></div>\r\n            </div>\r\n          </div>\r\n          <div v-if=\"entry.destinations && entry.destinations.length > 0\" class=\"block\">\r\n            <div>\r\n              <span class=\"attribute-title\">Destination</span>\r\n              <el-popover\r\n              width=\"250\"\r\n              trigger=\"hover\"\r\n              :append-to-body=false\r\n              popper-class=\"popover-origin-help\"\r\n              >\r\n              <i slot=\"reference\" class=\"el-icon-warning-outline info\"/>\r\n              <span style=\"word-break: keep-all;\">\r\n              <i>Destination</i> is where the axons terminate\r\n              </span>\r\n              </el-popover>\r\n            </div>\r\n            <div v-for=\"(destination, i) in entry.destinations\" class=\"attribute-content\"  :key=\"destination\">\r\n              {{ capitalise(destination) }}\r\n              <div v-if=\"i != entry.destinations.length - 1\" class=\"seperator\"></div>\r\n            </div>\r\n            <el-button v-show=\"entry.destinationsWithDatasets && entry.destinationsWithDatasets.length > 0\" class=\"button\" @click=\"openAxons\">\r\n              Explore destination data\r\n            </el-button>\r\n          </div>\r\n\r\n          <el-button v-show=\"entry.componentsWithDatasets && entry.componentsWithDatasets.length > 0\" class=\"button\" @click=\"openAll\">\r\n            Search for data on components\r\n          </el-button>\r\n\r\n          <external-resource-card :resources=\"resources\"></external-resource-card>\r\n\r\n        </div>\r\n      </transition>\r\n    </el-main>\r\n  </div>\r\n</template>\r\n\r\n\r\n<script>\r\n/* eslint-disable no-alert, no-console */\r\nimport Vue from \"vue\";\r\nimport {\r\n  Button,\r\n  Container,\r\n  Header,\r\n  Icon,\r\n  Main\r\n} from \"element-ui\";\r\nimport lang from \"element-ui/lib/locale/lang/en\";\r\nimport locale from \"element-ui/lib/locale\";\r\nlocale.use(lang);\r\nVue.use(Button);\r\nVue.use(Container);\r\nVue.use(Header);\r\nVue.use(Icon);\r\nVue.use(Main);\r\n\r\nimport EventBus from './EventBus'\r\nimport ExternalResourceCard from './ExternalResourceCard.vue';\r\n\r\nconst titleCase = (str) => {\r\n  return str.replace(/\\w\\S*/g, (t) => { return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase() });\r\n}\r\n\r\nconst capitalise = function(str){\r\n  if (str)\r\n    return str.charAt(0).toUpperCase() + str.slice(1)\r\n  return \"\"\r\n}\r\n\r\nexport default {\r\n  components: { ExternalResourceCard },\r\n  name: \"Tooltip\",\r\n  props: { \r\n    visible: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    entry: {\r\n      type: Object,\r\n      default: () => ({\r\n        destinations: [], \r\n        origins: [],\r\n        components: [],\r\n        destinationsWithDatasets: [],\r\n        originsWithDatasets: [],\r\n        componentsWithDatasets: [],\r\n        resource: undefined\r\n      })\r\n    },\r\n  },\r\n  data: function() {\r\n    return {\r\n      controller: undefined,\r\n      activeSpecies: undefined,\r\n      appendToBody: false,\r\n      pubmedSearchUrl: '',\r\n      loading: false,\r\n      showToolip: false,\r\n      showDetails: false,\r\n      originDescriptions: {\r\n        'motor': 'is the location of the initial cell body of the circuit',\r\n        'sensory': 'is the location of the initial cell body in the PNS circuit'\r\n      },\r\n      componentsWithDatasets: [],\r\n      uberons: [{id: undefined, name: undefined}]\r\n    };\r\n  },\r\n  computed: {\r\n    resources: function(){\r\n      let resources = []\r\n      if(this.entry && this.entry.hyperlinks){\r\n        resources = this.entry.hyperlinks\r\n      }\r\n      return resources\r\n    },\r\n    originDescription: function(){\r\n      if(this.entry && this.entry.title && this.entry.title.toLowerCase().includes('motor')){\r\n        return this.originDescriptions.motor\r\n      } else {\r\n        return this.originDescriptions.sensory\r\n      }\r\n    },\r\n    provSpeciesDescription: function(){\r\n      let text = \"Observed in\"\r\n      this.entry.provenanceTaxonomyLabel.forEach(label => {\r\n        text += ` ${label},`\r\n      });\r\n      text = text.slice(0,-1) // remove last comma\r\n      text += \" species\"\r\n      return text\r\n    }\r\n  },\r\n  methods: {\r\n    titleCase: function(title){\r\n      return titleCase(title)\r\n    },\r\n    capitalise: function(text){\r\n      return capitalise(text)\r\n    },\r\n    onClose: function() {\r\n      this.$emit(\"onClose\")\r\n    },\r\n    openUrl: function(url){\r\n      window.open(url, '_blank')\r\n    },\r\n    openAll: function(){\r\n      EventBus.$emit('onActionClick', {type:'Facets', labels: this.entry.componentsWithDatasets.map(a=>a.name)})\r\n    },\r\n    openAxons: function(){\r\n      EventBus.$emit('onActionClick', {type:'Facets', labels: this.entry.destinationsWithDatasets.map(a=>a.name)})\r\n    },\r\n    openDendrites: function(){\r\n      EventBus.$emit('onActionClick', {type:'Facets', labels: this.entry.originsWithDatasets.map(a=>a.name)})\r\n    },\r\n    pubmedSearchUrlUpdate: function (val){\r\n      this.pubmedSearchUrl = val\r\n    },\r\n  }\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@import \"~element-ui/packages/theme-chalk/src/button\";\r\n@import \"~element-ui/packages/theme-chalk/src/container\";\r\n@import \"~element-ui/packages/theme-chalk/src/header\";\r\n@import \"~element-ui/packages/theme-chalk/src/main\";\r\n\r\n.tooltip-container {\r\n  text-align:justify;\r\n  border-radius: 4px;\r\n  box-shadow: 0 1px 2px rgba(0,0,0,.1);\r\n  pointer-events: auto;\r\n  background: #fff;\r\n  border: 1px solid $app-primary-color;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.display {\r\n  width: 44px;\r\n  word-break: normal;\r\n}\r\n\r\n.title {\r\n  text-align: left;\r\n  width: 16em;\r\n  line-height: 1.5em !important;\r\n  font-size: 1em;\r\n  font-family: Helvetica;\r\n  font-weight: 500;\r\n  /* font-weight: bold; */\r\n  padding-bottom: 8px;\r\n}\r\n\r\n.block {\r\n  margin-bottom: 0.5em;\r\n}\r\n\r\n.pub {\r\n  width: 16rem;\r\n}\r\n\r\n.icon {\r\n  right: 0px;\r\n  position: absolute;\r\n  top: 10px;\r\n}\r\n\r\n.icon:hover {\r\n  cursor: pointer;\r\n}\r\n\r\n.popover-origin-help {\r\n  text-transform: none !important; // need to overide the tooltip text transform\r\n}\r\n\r\n.info{\r\n  transform: rotate(180deg);\r\n  color: #8300bf;\r\n  margin-left: 8px;\r\n}\r\n\r\n.seperator {\r\n  width:90%;\r\n  height:1px;\r\n  background-color:#bfbec2;\r\n}\r\n\r\n.hide{\r\n  color: $app-primary-color;\r\n  cursor: pointer;\r\n  margin-right: 6px;\r\n  margin-top: 3px;\r\n}\r\n\r\n.slide-fade-enter-active {\r\n  transition: opacity 0.5s, transform 0.5s;\r\n}\r\n.slide-fade-leave-active {\r\n  transition: opacity 0.2s, transform 0.2s;\r\n}\r\n.slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active in <2.1.8 */ {\r\n  opacity: 0;\r\n  transform: translateY(-8px);\r\n}\r\n\r\n.main {\r\n  font-size: 14px;\r\n  text-align: left;\r\n  line-height: 1.5em;\r\n  font-family: Helvetica;\r\n  font-weight: 400;\r\n  /* outline: thin red solid; */\r\n  padding: 1em !important;\r\n  overflow: hidden;\r\n  min-width: 16rem;\r\n\r\n}\r\n\r\n.title{\r\n  font-size: 18px;\r\n  font-weight: 500;\r\n  font-weight: bold;\r\n  padding-bottom: 8px;\r\n  color: rgb(131, 0, 191);\r\n\r\n}\r\n\r\n.attribute-title{\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  /* font-weight: bold; */\r\n  text-transform: uppercase;\r\n}\r\n\r\n.attribute-content{\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n}\r\n\r\n.popover-container {\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\n.main {\r\n  .el-button.is-round{\r\n    border-radius: 4px;\r\n    padding: 9px 20px 10px 20px;\r\n    display: flex;\r\n    height: 36px;\r\n  }\r\n}\r\n\r\n.button {\r\n  margin-left: 0px !important;\r\n  margin-top: 0px !important;\r\n  font-size: 14px !important;\r\n  background-color: $app-primary-color;\r\n  color: #fff;\r\n  &+.button {\r\n    margin-top: 10px !important;\r\n  }\r\n  &:hover {\r\n    color: #fff !important;\r\n    background: #ac76c5 !important;\r\n    border: 1px solid #ac76c5 !important;\r\n  }\r\n}\r\n\r\n.tooltip-container{\r\n  &::after, &::before {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    width: 0;\r\n    height: 0;\r\n    border-style: solid;\r\n    flex-shrink: 0;\r\n  }\r\n  .tooltip {\r\n    &::after {\r\n      display: none;\r\n    }\r\n    &::before {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.maplibregl-popup-anchor-bottom {\r\n  .tooltip-container {\r\n    &::after, &::before {\r\n      top: 100%;\r\n      border-width: 12px;\r\n    }\r\n    &::after {\r\n      margin-top:-1px;\r\n      border-color: rgb(255, 255, 255) transparent transparent  transparent ;\r\n    }\r\n    &::before {\r\n      margin: 0 auto;\r\n      border-color: $app-primary-color  transparent  transparent transparent ;\r\n    }\r\n  }\r\n}\r\n\r\n.maplibregl-popup-anchor-top {\r\n  .tooltip-container {\r\n    &::after, &::before {\r\n      top: -24px;\r\n      border-width: 12px;\r\n    }\r\n    &::after {\r\n      margin-top: 1px;\r\n      border-color: transparent transparent rgb(255, 255, 255) transparent ;\r\n    }\r\n    &::before {\r\n      margin: 0 auto;\r\n      border-color: transparent transparent $app-primary-color transparent ;\r\n    }\r\n  }\r\n}\r\n\r\n.content-container {\r\n  overflow-y: scroll;\r\n  scrollbar-width: thin !important;\r\n  max-height: 240px;\r\n}\r\n\r\n.scrollbar::-webkit-scrollbar-track {\r\n  border-radius: 10px;\r\n  background-color: #f5f5f5;\r\n}\r\n\r\n.scrollbar::-webkit-scrollbar {\r\n  width: 12px;\r\n  right: -12px;\r\n  background-color: #f5f5f5;\r\n}\r\n\r\n.scrollbar::-webkit-scrollbar-thumb {\r\n  border-radius: 4px;\r\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);\r\n  background-color: #979797;\r\n}\r\n\r\n\r\n/* Fix for chrome bug where under triangle pops up above one on top of it  */\r\n.selector:not(*:root), .tooltip-container::after{\r\n  top: 99.4%;\r\n}\r\n</style>\r\n"]}]}