diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index fde1bfdb..297ad126 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,25 +1,31 @@
-<!--- Provide a general summary of your changes in the Title above -->
+<!--- Provide a general summary of your changes in the Title above. -->
+<!--- Do not include backticks (`) in the Title above.  -->
 
 ## Description
 
-<!--- Describe your changes in detail -->
+<!--- Describe your changes in detail. -->
 <!--- Why is this change required? What problem does it solve? -->
+<!--- Do not include backticks (`).  -->
 
 ## Related issue
 
-<!--- Please link to the issue here. -->
+<!--- Replace only the '000' with the issue number. -->
+<!--- Do not include a URL. -->
+
+#000
 
 ## How Has This Been Tested?
 
 <!--- Please describe in detail how you tested your changes. -->
-<!--- Include details of your testing environment, the tests you ran to -->
+<!--- Include details of your testing environment, the tests you ran to. -->
 <!--- see how your change affects other areas of the code, etc. -->
+<!--- Do not include backticks (`).  -->
 
 ## Screenshots (if appropriate):
 
 ## Types of changes
 
-<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
+<!--- What types of changes does your code introduce? Put an 'x' in all the boxes that apply: -->
 
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
@@ -27,7 +33,7 @@
 
 ## Checklist:
 
-<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
+<!--- Go over all the following points, and put an 'x' in all the boxes that apply. -->
 <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
 
 - [ ] My code follows the code style of this project.
diff --git a/package.json b/package.json
index af776735..b27678aa 100644
--- a/package.json
+++ b/package.json
@@ -12,33 +12,32 @@
     "test": "jest --verbose"
   },
   "dependencies": {
-    "@intlify/unplugin-vue-i18n": "^5.0.0",
-    "@quasar/extras": "^1.16.12",
+    "@intlify/unplugin-vue-i18n": "^5.2.0",
+    "@quasar/extras": "^1.16.13",
     "axios": "^1.7.7",
     "dagre": "^0.8.5",
     "grid-layout-plus": "^1.0.5",
     "idb-keyval": "^6.2.1",
-    "ip-address": "^9.0.5",
+    "ip-address": "^10.0.1",
     "plotly.js-dist": "^2.35.2",
-    "quasar": "^2.17.0",
-    "swagger-ui": "^5.17.14",
-    "v-network-graph": "^0.9.16",
-    "vue": "^3.5.6",
-    "vue-i18n": "^10.0.1",
+    "quasar": "^2.17.2",
+    "swagger-ui": "^5.18.2",
+    "v-network-graph": "^0.9.18",
+    "vue": "^3.5.12",
+    "vue-i18n": "^10.0.4",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.25.4",
-    "@quasar/vite-plugin": "^1.7.0",
+    "@babel/preset-env": "^7.26.0",
+    "@quasar/vite-plugin": "^1.8.0",
     "@rushstack/eslint-patch": "^1.10.4",
     "@vitejs/plugin-vue": "^5.1.4",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "eslint": "^9.10.0",
-    "eslint-plugin-vue": "^9.28.0",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "eslint": "^9.14.0",
+    "eslint-plugin-vue": "^9.30.0",
     "jest": "^29.7.0",
     "joi": "^17.13.3",
     "prettier": "^3.3.3",
-    "stylus": "^0.63.0",
-    "vite": "^5.4.6"
+    "vite": "^5.4.10"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 23440d81..aecb9155 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -51,69 +51,65 @@ onBeforeUnmount(() => {
   <LocalStorageBanner :disable="true" />
 </template>
 
-<style lang="stylus">
-menu-delinkify(val)
-  font-size 1rem
-  color white
-  text-decoration none
-  text-transform capitalize
-  if val
-    font-weight 700
-
-.IHR_
-  &menu-entries
-    a, button
-      menu-delinkify 1
-
-    button
-      box-shadow none
-
-  &footer
-    & a
-      color white
-
-      &first-child
-        border-left none
-
-    ~/copyright
-      & > div
-        margin 0.5rem 0
-
-    ~/external-links
-      font-size 3.0em
-      text-decoration none
-
-      & a
-        color white
-
-  &scroll-btn
-    position fixed
-    bottom 20px
-    right 20px
-    z-index 2000
-    cursor pointer
-    transition all 0.6s
-    border-radius 50%
-    color white
-    padding 0.7rem 0.8rem
-    border 1px solid white
-    opacity 0.8
-    &:hover
-      transform scale(1.1)
-
-#IHR_
-  &home-button
-    padding 0px 13px 0px 2px
-
-  &forgotten-password
-    white-space nowrap
-
-  &user-menu
-    padding 0.25rem
-    font-size 1rem
-    & *:first-letter
-      text-transform capitalize
+<style>
+.IHR_menu-entries a,
+.IHR_menu-entries button {
+  font-size: 1rem;
+  color: #fff;
+  text-decoration: none;
+  text-transform: capitalize;
+  font-weight: 700;
+}
+.IHR_menu-entries button {
+  box-shadow: none;
+}
+.IHR_footer a {
+  color: #fff;
+}
+.IHR_footer afirst-child {
+  border-left: none;
+}
+.IHR_copyright > div {
+  margin: 0.5rem 0;
+}
+.IHR_external-links {
+  font-size: 3em;
+  text-decoration: none;
+}
+.IHR_external-links a {
+  color: #fff;
+}
+.IHR_scroll-btn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 2000;
+  cursor: pointer;
+  transition: all 0.6s;
+  border-radius: 50%;
+  color: #fff;
+  padding: 0.7rem 0.8rem;
+  border: 1px solid #fff;
+  opacity: 0.8;
+}
+.IHR_scroll-btn:hover {
+  transform: scale(1.1);
+}
+#IHR_home-button {
+  padding: 0px 13px 0px 2px;
+}
+#IHR_forgotten-password {
+  white-space: nowrap;
+}
+#IHR_user-menu {
+  padding: 0.25rem;
+  font-size: 1rem;
+}
+#IHR_user-menu *:first-letter {
+  text-transform: capitalize;
+}
+#IHR_last-element {
+  height: 50px;
+}
 
-  &last-element
-    height 50px;
 </style>
diff --git a/src/components/DateTimePicker.vue b/src/components/DateTimePicker.vue
index f186f314..e1531f10 100644
--- a/src/components/DateTimePicker.vue
+++ b/src/components/DateTimePicker.vue
@@ -86,17 +86,17 @@ const textColor = computed(() => {
   </QIcon>
 </template>
 
-<style lang="stylus" scoped>
-.IHR_
-  &date-time-picker
-    cursor pointer
-
-  &white-text
-    color white
-
-  &black-text
-    color black
-
-  &date-input
-    font-weight bolder
+<style scoped>
+.IHR_date-time-picker {
+  cursor: pointer;
+}
+.IHR_white-text {
+  color: #fff;
+}
+.IHR_black-text {
+  color: #000;
+}
+.IHR_date-input {
+  font-weight: bolder;
+}
 </style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 5d0e8bf0..26e1ebb5 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -165,115 +165,118 @@ import { version } from '../../package.json'
   </QFooter>
 </template>
 
-<style lang="stylus">
-.inline-block:hover{
+<style>
+.inline-block:hover {
   transform: scale(1.2);
 }
-.ihr-logo{
+.ihr-logo {
   width: 80px;
-  border 4px solid transparent
+  border: 4px solid transparent;
+}
+.IHR_menu-entries a,
+.IHR_menu-entries button {
+  font-size: 1rem;
+  color: #fff;
+  text-decoration: none;
+  text-transform: capitalize;
+  font-weight: 700;
+}
+.IHR_menu-entries button {
+  box-shadow: none;
+}
+.IHR_footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.IHR_footer_contents {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+@media screen and (min-width: 1000px) {
+  .IHR_footer_contents {
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: flex-start;
+  }
+}
+.IHR_ a {
+  color: #fff;
+}
+.IHR_fsection {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  border: none;
+}
+@media screen and (max-width: 600px) {
+  .IHR_fsection {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}
+@media screen and (max-width: 1000px) {
+  .IHR_license-section {
+    display: flex;
+    flex-direction: column;
+  }
+}
+.IHR_external-links {
+  font-size: 3em;
+  margin-top: 0.5rem;
+}
+.IHR_external-links a {
+  color: #fff;
+  text-decoration: none;
+}
+.IHR_sitemap {
+  display: flex;
+  justify-content: center;
+  font-size: 1rem;
+  font-weight: 300;
+  text-align: center;
+}
+@media screen and (max-width: 600px) {
+  .IHR_sitemap {
+    flex-direction: column;
+  }
+}
+.IHR_sitemap > ul {
+  min-width: 10rem;
+  list-style-type: none;
+  margin: 0;
+  padding: 0.5rem 1.5rem;
+}
+.IHR_sitemap > ul > li > a {
+  text-decoration: none;
+  text-transform: capitalize;
+}
+.IHR_sitemap > ul > li > a:hover {
+  text-decoration: underline;
+}
+.IHR_sitemap > ul > .links-title {
+  font-size: 1.25rem;
+}
+.IHR_sitemap > ul > .links-title > a:hover {
+  text-decoration: none;
+}
+#IHR_home-button {
+  padding: 0px 13px 0px 2px;
+}
+#IHR_forgotten-password {
+  white-space: nowrap;
+}
+#IHR_user-menu {
+  padding: 0.25rem;
+  font-size: 1rem;
+}
+#IHR_user-menu *:first-letter {
+  text-transform: capitalize;
+}
+#IHR_last-element {
+  height: 50px;
 }
-
-menu-delinkify(val)
-  font-size 1rem
-  color white
-  text-decoration none
-  text-transform capitalize
-  if val
-    font-weight 700
-
-.IHR_
-
-  &menu-entries
-    a, button
-      menu-delinkify 1
-
-    button
-      box-shadow none
-
-  &footer
-    display flex
-    flex-direction column
-    align-items center
-
-  &footer_contents
-      display flex
-      flex-direction column
-      align-items center
-      @media screen and (min-width: 1000px)
-        width 80%
-        margin-left auto
-        margin-right auto
-        flex-direction row
-        justify-content space-evenly
-        align-items flex-start
-
-    & a
-      color white
-
-    ~/fsection
-      padding-top 1.5rem
-      padding-bottom 1.5rem
-      border none
-      @media screen and (max-width: 600px)
-        padding-top 1rem
-        padding-bottom 1rem
-
-    ~/license-section
-      @media screen and (max-width: 1000px)
-        display flex
-        flex-direction column
-
-    ~/external-links
-      font-size 3.0em
-      margin-top .5rem
-
-      & a
-        color white
-        text-decoration none
-
-    ~/sitemap
-      display flex
-      justify-content center
-      font-size 1rem
-      font-weight 300
-      text-align center
-      @media screen and (max-width 600px)
-        flex-direction column
-
-      & > ul
-        min-width 10rem
-        list-style-type none
-        margin 0
-        padding .5rem 1.5rem
-
-        & > li > a
-          text-decoration none
-          text-transform capitalize
-
-          &:hover
-            text-decoration underline
-
-
-        & > .links-title
-          font-size 1.25rem
-
-          & > a:hover
-            text-decoration none
-
-#IHR_
-  &home-button
-    padding 0px 13px 0px 2px
-
-  &forgotten-password
-    white-space nowrap
-
-  &user-menu
-    padding 0.25rem
-    font-size 1rem
-    & *:first-letter
-      text-transform capitalize
-
-  &last-element
-    height 50px;
 </style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 49820205..5913b223 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -284,55 +284,57 @@ watch(simpleMenu, () => {
   </QHeader>
 </template>
 
-<style lang="stylus">
-menu-delinkify(val)
-  font-size 1rem
-  color white
-  text-decoration none
-  text-transform capitalize
-  margin-right 10px
-  if val
-    font-weight 700
-
-.IHR_
-  &minimum-width
-    min-width 640px !important
-
-  &menu-entries
-    a, button
-      menu-delinkify 1
-
-    button
-      box-shadow none
-
-  &dropdown-menu
-    background-color #263238
-
-    a
-      menu-delinkify 1
-
-#IHR_
-  &home-button
-    padding 0px 13px 0px 2px
-
-  &forgotten-password
-    white-space nowrap
-
-  &user-menu
-    padding 0.25rem
-    font-size 1rem
-    & *:first-letter
-      text-transform capitalize
-
-  &last-element
-    height 50px;
-
-@media screen and (max-width: 1024px)
-  .col-12.row.no-wrap.items-center
-    justify-content space-around
-
-@media screen and (max-width: 1024px)
-  .IHR_
-    &search-box.col-4
-      flex-grow 1
+<style>
+.IHR_minimum-width {
+  min-width: 640px !important;
+}
+.IHR_menu-entries a,
+.IHR_menu-entries button {
+  font-size: 1rem;
+  color: #fff;
+  text-decoration: none;
+  text-transform: capitalize;
+  margin-right: 10px;
+  font-weight: 700;
+}
+.IHR_menu-entries button {
+  box-shadow: none;
+}
+.IHR_dropdown-menu {
+  background-color: #263238;
+}
+.IHR_dropdown-menu a {
+  font-size: 1rem;
+  color: #fff;
+  text-decoration: none;
+  text-transform: capitalize;
+  margin-right: 10px;
+  font-weight: 700;
+}
+#IHR_home-button {
+  padding: 0px 13px 0px 2px;
+}
+#IHR_forgotten-password {
+  white-space: nowrap;
+}
+#IHR_user-menu {
+  padding: 0.25rem;
+  font-size: 1rem;
+}
+#IHR_user-menu *:first-letter {
+  text-transform: capitalize;
+}
+#IHR_last-element {
+  height: 50px;
+}
+@media screen and (max-width: 1024px) {
+  .col-12.row.no-wrap.items-center {
+    justify-content: space-around;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .IHR_search-box.col-4 {
+    flex-grow: 1;
+  }
+}
 </style>
diff --git a/src/components/LanguageSwitcher.vue b/src/components/LanguageSwitcher.vue
index feef8ce6..d532004a 100644
--- a/src/components/LanguageSwitcher.vue
+++ b/src/components/LanguageSwitcher.vue
@@ -32,4 +32,4 @@ const switchLanguage = async (newLocale) => {
   </QBtn>
 </template>
 
-<style lang="stylus"></style>
+<style></style>
diff --git a/src/components/UserInfo.vue b/src/components/UserInfo.vue
index 1d5680aa..0c47a886 100644
--- a/src/components/UserInfo.vue
+++ b/src/components/UserInfo.vue
@@ -108,21 +108,22 @@ onMounted(() => {
   </QMarkupTable>
 </template>
 
-<style lang="stylus">
-.user-info-card
-  width inherit
-  background-color rgba(0,0,0,0) !important
-  border-color white !important
-  color white !important
-
-.user-info-text
-  font-size 14px !important
-  font-weight 500 !important
-
-.user-info-link
-  color white !important
-
-.loading-spinner
-  margin-bottom 10px
-  text-align center
+<style>
+.user-info-card {
+  width: inherit;
+  background-color: rgba(0,0,0,0) !important;
+  border-color: #fff !important;
+  color: #fff !important;
+}
+.user-info-text {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+}
+.user-info-link {
+  color: #fff !important;
+}
+.loading-spinner {
+  margin-bottom: 10px;
+  text-align: center;
+}
 </style>
diff --git a/src/components/charts/AsInterdependenciesChart.vue b/src/components/charts/AsInterdependenciesChart.vue
index 84fcf2c8..84f85703 100644
--- a/src/components/charts/AsInterdependenciesChart.vue
+++ b/src/components/charts/AsInterdependenciesChart.vue
@@ -890,20 +890,19 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
-.bgplay-container
-    overflow hidden
-    padding-top 0px !important
-    position relative
-
-.IpFamilyContainer{
-  display flex
-  width 100%
-  flex-direction column
-  margin-bottom 3px
+<style>
+.bgplay-container {
+  overflow: hidden;
+  padding-top: 0px !important;
+  position: relative;
 }
-
-.toggleIpFamilyButton{
-  align-self end
+.IpFamilyContainer {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  margin-bottom: 3px;
+}
+.toggleIpFamilyButton {
+  align-self: end;
 }
 </style>
diff --git a/src/components/charts/CountryHegemonyChart.vue b/src/components/charts/CountryHegemonyChart.vue
index e227b355..496c5f68 100644
--- a/src/components/charts/CountryHegemonyChart.vue
+++ b/src/components/charts/CountryHegemonyChart.vue
@@ -305,19 +305,18 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
-.bgplay-container
-  overflow hidden
-  padding-top 1100px
-  position relative
-
-
-.bgplay-container
-  &iframe
-    border 0
-    height 100%
-    left 0
-    position absolute
-    top 0
-    width 100%
+<style>
+.bgplay-container {
+  overflow: hidden;
+  padding-top: 1100px;
+  position: relative;
+}
+.bgplay-containeriframe {
+  border: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
 </style>
diff --git a/src/components/charts/DelayAndForwardingChart.vue b/src/components/charts/DelayAndForwardingChart.vue
index ca8dda3d..11e4e63f 100644
--- a/src/components/charts/DelayAndForwardingChart.vue
+++ b/src/components/charts/DelayAndForwardingChart.vue
@@ -379,4 +379,4 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus"></style>
+<style></style>
diff --git a/src/components/charts/NetworkDelayChart.vue b/src/components/charts/NetworkDelayChart.vue
index 8bc52905..a4518f34 100644
--- a/src/components/charts/NetworkDelayChart.vue
+++ b/src/components/charts/NetworkDelayChart.vue
@@ -521,24 +521,29 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus" scoped>
-.IHR_
-  &charts-title
-    overflow hidden
-    ~/last
-      right 50px
-  &searchbar
-    position absolute
-    transition top .6s
-  &showed-bar
-    top 10px
-    visibility visible
-    opacity 1
-  &hidden-bar
-    top 60px
-    opacity 0
-.btn
-    margin-bottom 0.8125rem
-    width 80pt
-    margin-right 0.8125rem
+<style scoped>
+.IHR_charts-title {
+  overflow: hidden;
+}
+.IHR_last {
+  right: 50px;
+}
+.IHR_searchbar {
+  position: absolute;
+  transition: top 0.6s;
+}
+.IHR_showed-bar {
+  top: 10px;
+  visibility: visible;
+  opacity: 1;
+}
+.IHR_hidden-bar {
+  top: 60px;
+  opacity: 0;
+}
+.btn {
+  margin-bottom: 0.8125rem;
+  width: 80pt;
+  margin-right: 0.8125rem;
+}
 </style>
diff --git a/src/components/charts/PrefixHegemonyChart.vue b/src/components/charts/PrefixHegemonyChart.vue
index d4ae1a7b..619173c4 100644
--- a/src/components/charts/PrefixHegemonyChart.vue
+++ b/src/components/charts/PrefixHegemonyChart.vue
@@ -560,4 +560,4 @@ watch(
   </div>
 </template>
 
-<style lang="stylus"></style>
+<style></style>
diff --git a/src/components/charts/ReactiveChart.vue b/src/components/charts/ReactiveChart.vue
index f5686608..7ca93005 100644
--- a/src/components/charts/ReactiveChart.vue
+++ b/src/components/charts/ReactiveChart.vue
@@ -201,19 +201,22 @@ watch(
   </div>
 </template>
 
-<style lang="stylus" scoped>
-.IHR_
-  &no-data
-    position relative
-    bottom 0
-    left 0
-    & > div:first-child
-      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-      padding 1.25rem
-      position relative
-      font-weight: 500;
-      top -250px
-      left 0%
-      &:first-letter
-        text-transform uppercase
+<style scoped>
+.IHR_no-data {
+  position: relative;
+  bottom: 0;
+  left: 0;
+}
+.IHR_no-data > div:first-child {
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  padding: 1.25rem;
+  position: relative;
+  font-weight: 500;
+  top: -250px;
+  left: 0%;
+}
+.IHR_no-data > div:first-child:first-letter {
+  text-transform: uppercase;
+}
+
 </style>
diff --git a/src/components/controllers/GenericCardController.vue b/src/components/controllers/GenericCardController.vue
index cb5e8a82..d7dae445 100644
--- a/src/components/controllers/GenericCardController.vue
+++ b/src/components/controllers/GenericCardController.vue
@@ -90,14 +90,16 @@ const getUrlAnchor = () => {
   </div>
 </template>
 
-<style lang="stylus">
-.bar
-  height 100% !important
-  background-color #263238 !important
-  color white !important
-.anchor
-  display block
-  position relative
-  top -80px
-  visibility hidden
+<style>
+.bar {
+  height: 100% !important;
+  background-color: #263238 !important;
+  color: #fff !important;
+}
+.anchor {
+  display: block;
+  position: relative;
+  top: -80px;
+  visibility: hidden;
+}
 </style>
diff --git a/src/components/networks/AS.vue b/src/components/networks/AS.vue
index 9d635749..9eb44965 100644
--- a/src/components/networks/AS.vue
+++ b/src/components/networks/AS.vue
@@ -161,7 +161,7 @@ onMounted(() => {
         <DateTimePicker
           :min="minDate"
           :max="maxDate"
-          :value="maxDate"
+          :value="endTime"
           @input="setReportDate"
           hideTime
         />
@@ -235,7 +235,8 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
-.cards
-  display inline-block
+<style>
+.cards {
+  display: inline-block;
+}
 </style>
diff --git a/src/components/networks/Country.vue b/src/components/networks/Country.vue
index bd93c508..4e3b1afc 100644
--- a/src/components/networks/Country.vue
+++ b/src/components/networks/Country.vue
@@ -147,7 +147,7 @@ onMounted(() => {
         <DateTimePicker
           :min="minDate"
           :max="maxDate"
-          :value="maxDate"
+          :value="endTime"
           @input="setReportDate"
           hideTime
         />
@@ -210,7 +210,8 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
-.cards
-  display inline-block
+<style>
+.cards {
+  display: inline-block;
+}
 </style>
diff --git a/src/components/networks/HostName.vue b/src/components/networks/HostName.vue
index 23596a84..2269aaf9 100644
--- a/src/components/networks/HostName.vue
+++ b/src/components/networks/HostName.vue
@@ -132,7 +132,8 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
-.cards
-  display inline-block
+<style>
+.cards {
+  display: inline-block;
+}
 </style>
diff --git a/src/components/networks/IXP.vue b/src/components/networks/IXP.vue
index a587a8db..706d0154 100644
--- a/src/components/networks/IXP.vue
+++ b/src/components/networks/IXP.vue
@@ -149,7 +149,7 @@ onMounted(() => {
         <DateTimePicker
           :min="minDate"
           :max="maxDate"
-          :value="maxDate"
+          :value="endTime"
           @input="setReportDate"
           hideTime
         />
@@ -210,7 +210,8 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
-.cards
-  display inline-block
+<style>
+.cards {
+  display: inline-block;
+}
 </style>
diff --git a/src/components/networks/Prefix.vue b/src/components/networks/Prefix.vue
index cc31d55d..5bcade7f 100644
--- a/src/components/networks/Prefix.vue
+++ b/src/components/networks/Prefix.vue
@@ -137,7 +137,8 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
-.cards
-  display inline-block
+<style>
+.cards {
+  display: inline-block;
+}
 </style>
diff --git a/src/components/networks/Rank.vue b/src/components/networks/Rank.vue
index b42f71bd..14eaf792 100644
--- a/src/components/networks/Rank.vue
+++ b/src/components/networks/Rank.vue
@@ -113,7 +113,8 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
-.cards
-  display inline-block
+<style>
+.cards {
+  display: inline-block;
+}
 </style>
diff --git a/src/components/networks/Tag.vue b/src/components/networks/Tag.vue
index 35f3345f..5e42749c 100644
--- a/src/components/networks/Tag.vue
+++ b/src/components/networks/Tag.vue
@@ -120,7 +120,8 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
-.cards
-  display inline-block
+<style>
+.cards {
+  display: inline-block;
+}
 </style>
diff --git a/src/components/networks/as/ASCustom.vue b/src/components/networks/as/ASCustom.vue
index 9326d20a..e1cfd436 100644
--- a/src/components/networks/as/ASCustom.vue
+++ b/src/components/networks/as/ASCustom.vue
@@ -386,7 +386,8 @@ onMounted(() => {
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/as/ASDNS.vue b/src/components/networks/as/ASDNS.vue
index c49df7cc..32b78137 100644
--- a/src/components/networks/as/ASDNS.vue
+++ b/src/components/networks/as/ASDNS.vue
@@ -36,7 +36,8 @@ const props = defineProps(['asNumber', 'pageTitle'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/as/ASMonitoring.vue b/src/components/networks/as/ASMonitoring.vue
index 49d88385..375c2c80 100644
--- a/src/components/networks/as/ASMonitoring.vue
+++ b/src/components/networks/as/ASMonitoring.vue
@@ -136,7 +136,8 @@ const toggleIpFamily = () => {
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/as/ASOverview.vue b/src/components/networks/as/ASOverview.vue
index d34f6ff2..aabad695 100644
--- a/src/components/networks/as/ASOverview.vue
+++ b/src/components/networks/as/ASOverview.vue
@@ -315,7 +315,7 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
+<style>
 p {
   font-size: 1rem;
   margin-bottom: 0;
@@ -331,6 +331,6 @@ h3 {
   text-align: right;
 }
 .topology {
-  padding 0 0 0 0 !important;
+  padding: 0 0 0 0 !important;
 }
 </style>
diff --git a/src/components/networks/as/ASPeering.vue b/src/components/networks/as/ASPeering.vue
index 3440d656..f2a5f8a3 100644
--- a/src/components/networks/as/ASPeering.vue
+++ b/src/components/networks/as/ASPeering.vue
@@ -56,7 +56,8 @@ const props = defineProps(['asNumber', 'pageTitle'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/as/ASRankings.vue b/src/components/networks/as/ASRankings.vue
index 250336dc..6c395296 100644
--- a/src/components/networks/as/ASRankings.vue
+++ b/src/components/networks/as/ASRankings.vue
@@ -16,7 +16,8 @@ const props = defineProps(['asNumber', 'pageTitle'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/as/ASRegistration.vue b/src/components/networks/as/ASRegistration.vue
index fb98dc24..42a974b6 100644
--- a/src/components/networks/as/ASRegistration.vue
+++ b/src/components/networks/as/ASRegistration.vue
@@ -26,7 +26,8 @@ const props = defineProps(['asNumber', 'pageTitle'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/as/ASRouting.vue b/src/components/networks/as/ASRouting.vue
index 47ad4564..aebdd9a7 100644
--- a/src/components/networks/as/ASRouting.vue
+++ b/src/components/networks/as/ASRouting.vue
@@ -56,7 +56,8 @@ const props = defineProps(['asNumber', 'pageTitle'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/country/CountryCustom.vue b/src/components/networks/country/CountryCustom.vue
index f573d46f..97d54225 100644
--- a/src/components/networks/country/CountryCustom.vue
+++ b/src/components/networks/country/CountryCustom.vue
@@ -256,7 +256,8 @@ onMounted(() => {
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/country/CountryMonitoring.vue b/src/components/networks/country/CountryMonitoring.vue
index 7fa5737d..3925a0d0 100644
--- a/src/components/networks/country/CountryMonitoring.vue
+++ b/src/components/networks/country/CountryMonitoring.vue
@@ -121,7 +121,8 @@ const setMajorEyeballs = (asns) => {
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/country/CountryOverview.vue b/src/components/networks/country/CountryOverview.vue
index d410e6f3..e55490f0 100644
--- a/src/components/networks/country/CountryOverview.vue
+++ b/src/components/networks/country/CountryOverview.vue
@@ -217,7 +217,7 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
+<style>
 p {
   font-size: 1rem;
   margin-bottom: 0;
diff --git a/src/components/networks/country/CountryPeering.vue b/src/components/networks/country/CountryPeering.vue
index c4d3eda1..c62b5748 100644
--- a/src/components/networks/country/CountryPeering.vue
+++ b/src/components/networks/country/CountryPeering.vue
@@ -16,7 +16,8 @@ const props = defineProps(['countryCode', 'pageTitle'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/country/CountryRankings.vue b/src/components/networks/country/CountryRankings.vue
index dcf6f637..f33b03c2 100644
--- a/src/components/networks/country/CountryRankings.vue
+++ b/src/components/networks/country/CountryRankings.vue
@@ -17,7 +17,8 @@ const props = defineProps(['countryCode', 'pageTitle'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/country/CountryRouting.vue b/src/components/networks/country/CountryRouting.vue
index 869f5ceb..433afc12 100644
--- a/src/components/networks/country/CountryRouting.vue
+++ b/src/components/networks/country/CountryRouting.vue
@@ -26,7 +26,8 @@ const props = defineProps(['countryCode', 'pageTitle'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/hostName/HostNameCustom.vue b/src/components/networks/hostName/HostNameCustom.vue
index 3ded5096..099aa9b1 100644
--- a/src/components/networks/hostName/HostNameCustom.vue
+++ b/src/components/networks/hostName/HostNameCustom.vue
@@ -141,7 +141,8 @@ onMounted(() => {
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/hostName/HostNameDNS.vue b/src/components/networks/hostName/HostNameDNS.vue
index 0406775f..9d4ce9df 100644
--- a/src/components/networks/hostName/HostNameDNS.vue
+++ b/src/components/networks/hostName/HostNameDNS.vue
@@ -36,7 +36,8 @@ const props = defineProps(['pageTitle', 'hostName'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/hostName/HostNameRankings.vue b/src/components/networks/hostName/HostNameRankings.vue
index 37da6084..94e7cfd0 100644
--- a/src/components/networks/hostName/HostNameRankings.vue
+++ b/src/components/networks/hostName/HostNameRankings.vue
@@ -16,7 +16,8 @@ const props = defineProps(['pageTitle', 'hostName'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/hostName/HostNameRouting.vue b/src/components/networks/hostName/HostNameRouting.vue
index bb670d84..78ab0a80 100644
--- a/src/components/networks/hostName/HostNameRouting.vue
+++ b/src/components/networks/hostName/HostNameRouting.vue
@@ -16,7 +16,8 @@ const props = defineProps(['pageTitle', 'hostName'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/ixp/IXPCustom.vue b/src/components/networks/ixp/IXPCustom.vue
index 11e17c81..eeb0c919 100644
--- a/src/components/networks/ixp/IXPCustom.vue
+++ b/src/components/networks/ixp/IXPCustom.vue
@@ -190,7 +190,8 @@ onMounted(() => {
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/ixp/IXPMonitoring.vue b/src/components/networks/ixp/IXPMonitoring.vue
index 72342b97..15d342c4 100644
--- a/src/components/networks/ixp/IXPMonitoring.vue
+++ b/src/components/networks/ixp/IXPMonitoring.vue
@@ -43,7 +43,8 @@ const fetch = ref(true)
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/ixp/IXPOverview.vue b/src/components/networks/ixp/IXPOverview.vue
index 94f9672c..2f38b5cf 100644
--- a/src/components/networks/ixp/IXPOverview.vue
+++ b/src/components/networks/ixp/IXPOverview.vue
@@ -150,7 +150,7 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
+<style>
 p {
   font-size: 1rem;
   margin-bottom: 0;
diff --git a/src/components/networks/ixp/IXPPeering.vue b/src/components/networks/ixp/IXPPeering.vue
index 8aa7a9f9..582e6099 100644
--- a/src/components/networks/ixp/IXPPeering.vue
+++ b/src/components/networks/ixp/IXPPeering.vue
@@ -36,7 +36,8 @@ const props = defineProps(['ixpNumber', 'pageTitle'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/ixp/IXPRouting.vue b/src/components/networks/ixp/IXPRouting.vue
index 7d2eac65..0c25b587 100644
--- a/src/components/networks/ixp/IXPRouting.vue
+++ b/src/components/networks/ixp/IXPRouting.vue
@@ -16,7 +16,8 @@ const props = defineProps(['ixpNumber', 'pageTitle'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/prefix/PrefixCustom.vue b/src/components/networks/prefix/PrefixCustom.vue
index d7a0a17f..7774af48 100644
--- a/src/components/networks/prefix/PrefixCustom.vue
+++ b/src/components/networks/prefix/PrefixCustom.vue
@@ -174,7 +174,8 @@ onMounted(() => {
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/prefix/PrefixDNS.vue b/src/components/networks/prefix/PrefixDNS.vue
index 4d39d15f..eff116c2 100644
--- a/src/components/networks/prefix/PrefixDNS.vue
+++ b/src/components/networks/prefix/PrefixDNS.vue
@@ -36,7 +36,8 @@ const props = defineProps(['getPrefix', 'pageTitle'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/prefix/PrefixOverview.vue b/src/components/networks/prefix/PrefixOverview.vue
index c69c1c10..b8b008d0 100644
--- a/src/components/networks/prefix/PrefixOverview.vue
+++ b/src/components/networks/prefix/PrefixOverview.vue
@@ -245,12 +245,12 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
+<style>
 p {
   font-size: 1rem;
   margin-bottom: 0;
 }
 .topology {
-  padding 0 0 0 0 !important;
+  padding: 0 0 0 0 !important;
 }
 </style>
diff --git a/src/components/networks/prefix/PrefixRouting.vue b/src/components/networks/prefix/PrefixRouting.vue
index f6f2c251..03029c6b 100644
--- a/src/components/networks/prefix/PrefixRouting.vue
+++ b/src/components/networks/prefix/PrefixRouting.vue
@@ -46,7 +46,8 @@ const props = defineProps(['getPrefix', 'pageTitle'])
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/rank/RankCustom.vue b/src/components/networks/rank/RankCustom.vue
index b2ce5fa5..fc83b510 100644
--- a/src/components/networks/rank/RankCustom.vue
+++ b/src/components/networks/rank/RankCustom.vue
@@ -132,7 +132,8 @@ onMounted(() => {
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/tag/TagCustom.vue b/src/components/networks/tag/TagCustom.vue
index c2244a01..ab4a9108 100644
--- a/src/components/networks/tag/TagCustom.vue
+++ b/src/components/networks/tag/TagCustom.vue
@@ -169,7 +169,8 @@ onMounted(() => {
   </GenericCardController>
 </template>
 
-<style lang="stylus">
-.card
-  margin-top 20px
+<style>
+.card {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/networks/tag/TagOverview.vue b/src/components/networks/tag/TagOverview.vue
index 0d520c01..45f45e1f 100644
--- a/src/components/networks/tag/TagOverview.vue
+++ b/src/components/networks/tag/TagOverview.vue
@@ -76,7 +76,7 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
+<style>
 p {
   font-size: 1rem;
   margin-bottom: 0;
diff --git a/src/components/ripe/Bgplay.vue b/src/components/ripe/Bgplay.vue
index 8e771772..550cb426 100644
--- a/src/components/ripe/Bgplay.vue
+++ b/src/components/ripe/Bgplay.vue
@@ -105,4 +105,4 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus"></style>
+<style></style>
diff --git a/src/components/ripe/Latencymon.vue b/src/components/ripe/Latencymon.vue
index 0021f976..87cefa62 100644
--- a/src/components/ripe/Latencymon.vue
+++ b/src/components/ripe/Latencymon.vue
@@ -85,11 +85,12 @@ onMounted(() => {
   <div class="IHR_nowrap" :id="myId"></div>
 </template>
 
-<style lang="stylus">
-.latencymon-container .probe-multi-info .probe-info-line
-    white-space normal!important;
-    margin-top 10px!important;
-
-.IHR_nowrap
-    white-space normal !important;
+<style>
+.latencymon-container .probe-multi-info .probe-info-line {
+  white-space: normal !important;
+  margin-top: 10px !important;
+}
+.IHR_nowrap {
+  white-space: normal !important;
+}
 </style>
diff --git a/src/components/ripe/ReverseDnsIp.vue b/src/components/ripe/ReverseDnsIp.vue
index 8bcc3be8..476581a9 100644
--- a/src/components/ripe/ReverseDnsIp.vue
+++ b/src/components/ripe/ReverseDnsIp.vue
@@ -65,4 +65,4 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus"></style>
+<style></style>
diff --git a/src/components/search/LocationSearchBar.vue b/src/components/search/LocationSearchBar.vue
index 0a6b9647..d161b565 100644
--- a/src/components/search/LocationSearchBar.vue
+++ b/src/components/search/LocationSearchBar.vue
@@ -174,12 +174,13 @@ watch(
   </QSelect>
 </template>
 
-<style lang="stylus" scoped>
-.IHR_
-  &asn-element
-    width 100%
-    margin 0px
-    padding 0px
-    &-name
-      text-align left
+<style scoped>
+.IHR_asn-element {
+  width: 100%;
+  margin: 0px;
+  padding: 0px;
+}
+.IHR_asn-element-name {
+  text-align: left;
+}
 </style>
diff --git a/src/components/search/SearchBar.vue b/src/components/search/SearchBar.vue
index 4efb8dcf..c19dc099 100644
--- a/src/components/search/SearchBar.vue
+++ b/src/components/search/SearchBar.vue
@@ -575,18 +575,19 @@ watch(
   </QSelect>
 </template>
 
-<style lang="stylus" scoped>
-.IHR_
-  &asn-element
-    width 100%
-    margin 0px
-    padding 0px
-    &-name
-      text-align left
-      margin-left 10px
-
-.IHR_search-bar
-  text-color 'white'
-  color 'white'
-  input white
+<style scoped>
+.IHR_asn-element {
+  width: 100%;
+  margin: 0px;
+  padding: 0px;
+}
+.IHR_asn-element-name {
+  text-align: left;
+  margin-left: 10px;
+}
+.IHR_search-bar {
+  text-color: 'white';
+  color: 'white';
+  input: #fff;
+}
 </style>
diff --git a/src/components/tables/AsInterdependenciesTable.vue b/src/components/tables/AsInterdependenciesTable.vue
index 6eb66475..71690f39 100644
--- a/src/components/tables/AsInterdependenciesTable.vue
+++ b/src/components/tables/AsInterdependenciesTable.vue
@@ -195,4 +195,4 @@ const getCalssByHegemony = (props) => {
   </QTable>
 </template>
 
-<style lang="stylus"></style>
+<style></style>
diff --git a/src/components/tables/CountryHegemonyTable.vue b/src/components/tables/CountryHegemonyTable.vue
index 0a8018f3..d8598133 100644
--- a/src/components/tables/CountryHegemonyTable.vue
+++ b/src/components/tables/CountryHegemonyTable.vue
@@ -198,4 +198,4 @@ const getClassByHegemony = (hegemony) => {
   </QTable>
 </template>
 
-<style lang="stylus"></style>
+<style></style>
diff --git a/src/components/tables/DelayAlarmsTable.vue b/src/components/tables/DelayAlarmsTable.vue
index cdbb36aa..cf60ad32 100644
--- a/src/components/tables/DelayAlarmsTable.vue
+++ b/src/components/tables/DelayAlarmsTable.vue
@@ -284,44 +284,49 @@ onMounted(() => {
   </QTable>
 </template>
 
-<style lang="stylus">
-.IHR_
-  &probe-popup
-    padding 10px
-    max-width 200px
-    background transparent
-
-    & > span:first-child
-      font-weight 500
-      margin-right 0.5rem
-
-  &prefix-overview-popup
-    max-width 400px
-
-  &popup
-    border-color black
-    max-width 600px
-    min-width 300px
-
-  &reverse-dns-ip-improved
-    min-width 250px
-    width 100%
-    margin-bottom 0px
-    padding-bottom 0px
-    & > div:first-child
-      margin 0px
-      & > .stat-widget.full-box
-          margin 0px
-      & > .box-content
-        border none
-        padding 0 10px
-        margin 0px
-        & > .controls-container
-          display none
-        & > div:last-child
-          & > .res_info_holder
-            margin 0px
-            padding-bottom 10px
-            & > a
-              color #405057 !important
+<style>
+.IHR_probe-popup {
+  padding: 10px;
+  max-width: 200px;
+  background: transparent;
+}
+.IHR_probe-popup > span:first-child {
+  font-weight: 500;
+  margin-right: 0.5rem;
+}
+.IHR_prefix-overview-popup {
+  max-width: 400px;
+}
+.IHR_popup {
+  border-color: #000;
+  max-width: 600px;
+  min-width: 300px;
+}
+.IHR_reverse-dns-ip-improved {
+  min-width: 250px;
+  width: 100%;
+  margin-bottom: 0px;
+  padding-bottom: 0px;
+}
+.IHR_reverse-dns-ip-improved > div:first-child {
+  margin: 0px;
+}
+.IHR_reverse-dns-ip-improved > div:first-child > .stat-widget.full-box {
+  margin: 0px;
+}
+.IHR_reverse-dns-ip-improved > div:first-child > .box-content {
+  border: none;
+  padding: 0 10px;
+  margin: 0px;
+}
+.IHR_reverse-dns-ip-improved > div:first-child > .box-content > .controls-container {
+  display: none;
+}
+.IHR_reverse-dns-ip-improved > div:first-child > .box-content > div:last-child > .res_info_holder {
+  margin: 0px;
+  padding-bottom: 10px;
+}
+.IHR_reverse-dns-ip-improved > div:first-child > .box-content > div:last-child > .res_info_holder > a {
+  color: #405057 !important;
+}
 </style>
diff --git a/src/components/tables/DiscoAlarmsTable.vue b/src/components/tables/DiscoAlarmsTable.vue
index 3654fde9..20acae7d 100644
--- a/src/components/tables/DiscoAlarmsTable.vue
+++ b/src/components/tables/DiscoAlarmsTable.vue
@@ -179,30 +179,26 @@ const msmPrbIds = (probes) => {
   </QTable>
 </template>
 
-<style lang="stylus">
-.IHR_nohover
-    &:first-child
-      padding-top 0px
-      padding-bottom 20px
-      padding-right 20px
-      padding-left 20px
-      background #fafafa
-
-.IHR_side_borders
-    &:first-child
-        padding-top 20px
-        border-style solid
-        border-color #dddddd
-        border-top-width 0px
-        border-left-width 1px
-        border-right-width 1px
-        border-bottom-width 1px
-        border-radius 5px
-        background #ffffff
-
-
-.myClass
-
-    tbody td
-        text-align left
+<style>
+.IHR_nohover:first-child {
+  padding-top: 0px;
+  padding-bottom: 20px;
+  padding-right: 20px;
+  padding-left: 20px;
+  background: #fafafa;
+}
+.IHR_side_borders:first-child {
+  padding-top: 20px;
+  border-style: solid;
+  border-color: #ddd;
+  border-top-width: 0px;
+  border-left-width: 1px;
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  border-radius: 5px;
+  background: #fff;
+}
+.myClass tbody td {
+  text-align: left;
+}
 </style>
diff --git a/src/components/tables/ForwardingAlarmsTable.vue b/src/components/tables/ForwardingAlarmsTable.vue
index 09e2eec9..9ac8af1b 100644
--- a/src/components/tables/ForwardingAlarmsTable.vue
+++ b/src/components/tables/ForwardingAlarmsTable.vue
@@ -140,4 +140,4 @@ const columns = ref([
   </QTable>
 </template>
 
-<style lang="stylus"></style>
+<style></style>
diff --git a/src/components/tables/IypGenericTable.vue b/src/components/tables/IypGenericTable.vue
index 0bbc5e35..5cfe283c 100644
--- a/src/components/tables/IypGenericTable.vue
+++ b/src/components/tables/IypGenericTable.vue
@@ -422,7 +422,7 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus">
+<style>
 .underline:hover {
   text-decoration: underline;
 }
diff --git a/src/components/tables/MetisTable.vue b/src/components/tables/MetisTable.vue
index cf73754f..cdefb9e7 100644
--- a/src/components/tables/MetisTable.vue
+++ b/src/components/tables/MetisTable.vue
@@ -117,4 +117,4 @@ const exportTable = () => {
   </QTable>
 </template>
 
-<style lang="stylus"></style>
+<style></style>
diff --git a/src/components/tables/NetworkDelayAlarmsTable.vue b/src/components/tables/NetworkDelayAlarmsTable.vue
index 01ee5a5a..fd366b1c 100644
--- a/src/components/tables/NetworkDelayAlarmsTable.vue
+++ b/src/components/tables/NetworkDelayAlarmsTable.vue
@@ -246,41 +246,37 @@ onMounted(() => {
   </QTable>
 </template>
 
-<style lang="stylus">
-.IHR_ndelay_table_cell
-    max-width 700px
-
-.IHR_ndelay_destinations
-    text-overflow ellipsis
-    /* Required for text-overflow to do anything */
-    white-space nowrap
-    overflow hidden
-    font-style italic
-    color #555
-
-.IHR_nohover
-    &:first-child
-      padding-top 0px
-      padding-bottom 20px
-      padding-right 20px
-      padding-left 20px
-      background #fafafa
-
-.IHR_side_borders
-    &:first-child
-        padding-top 20px
-        border-style solid
-        border-color #dddddd
-        border-top-width 0px
-        border-left-width 1px
-        border-right-width 1px
-        border-bottom-width 1px
-        border-radius 5px
-        background #ffffff
-
-
-.myClass
-
-    tbody td
-        text-align left
+<style>
+.IHR_ndelay_table_cell {
+  max-width: 700px;
+}
+.IHR_ndelay_destinations {
+  text-overflow: ellipsis;
+/* Required for text-overflow to do anything */
+  white-space: nowrap;
+  overflow: hidden;
+  font-style: italic;
+  color: #555;
+}
+.IHR_nohover:first-child {
+  padding-top: 0px;
+  padding-bottom: 20px;
+  padding-right: 20px;
+  padding-left: 20px;
+  background: #fafafa;
+}
+.IHR_side_borders:first-child {
+  padding-top: 20px;
+  border-style: solid;
+  border-color: #ddd;
+  border-top-width: 0px;
+  border-left-width: 1px;
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  border-radius: 5px;
+  background: #fff;
+}
+.myClass tbody td {
+  text-align: left;
+}
 </style>
diff --git a/src/components/tables/NetworkDelayTable.vue b/src/components/tables/NetworkDelayTable.vue
index 88d83181..795e1707 100644
--- a/src/components/tables/NetworkDelayTable.vue
+++ b/src/components/tables/NetworkDelayTable.vue
@@ -154,4 +154,4 @@ onMounted(() => {
   </QTable>
 </template>
 
-<style lang="stylus"></style>
+<style></style>
diff --git a/src/components/tables/PrefixHegemonyTable.vue b/src/components/tables/PrefixHegemonyTable.vue
index 2c6add9b..1d22b042 100644
--- a/src/components/tables/PrefixHegemonyTable.vue
+++ b/src/components/tables/PrefixHegemonyTable.vue
@@ -412,7 +412,8 @@ const simpleDependenciesFormat = (val) => {
   </div>
 </template>
 
-<style lang="stylus">
-.comma:not(:empty) ~ .comma:not(:empty):before
-  content ", "
+<style>
+.comma:not(:empty) ~ .comma:not(:empty):before {
+  content: ", ";
+}
 </style>
diff --git a/src/components/tables/PrefixHegemonyTableStats.vue b/src/components/tables/PrefixHegemonyTableStats.vue
index 1d9cf3f1..050ecc93 100644
--- a/src/components/tables/PrefixHegemonyTableStats.vue
+++ b/src/components/tables/PrefixHegemonyTableStats.vue
@@ -198,7 +198,8 @@ const getClassByHegemony = (hegemony) => {
   </div>
 </template>
 
-<style lang="stylus">
-.comma:not(:empty) ~ .comma:not(:empty):before
-  content ", "
+<style>
+.comma:not(:empty) ~ .comma:not(:empty):before {
+  content: ", ";
+}
 </style>
diff --git a/src/views/Api.vue b/src/views/Api.vue
index 6d7e0e19..96c9b5aa 100644
--- a/src/views/Api.vue
+++ b/src/views/Api.vue
@@ -23,4 +23,4 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="stylus" scoped></style>
+<style scoped></style>
diff --git a/src/views/Contact.vue b/src/views/Contact.vue
index 2ac4d2b6..edc5d156 100644
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -19,59 +19,71 @@
   </div>
 </template>
 
-<style lang="stylus">
-#IHR_
-  &contact-page
-    width 60%
-    margin 0 auto
-    @media screen and (max-width: 600px)
-      width 100%
-      padding: 0 1rem;
-
-.IHR_background
-    width 1000px
-    height 1000px
-    max-width 100%
-    background-repeat no-repeat
-    background-position left top
-    background-size 1000px 1000px
-    opacity 0.1
-    position absolute
-    top 450px
-    overflow-x hidden
-    position fixed
-    @media screen and (max-width: 600px)
-      width: 100%
-
-
-.IHR_
-  &contact-page
-
-    & > h1
-        line-height 1.5rem
-        padding 0.5rem 0
-        font-weight 500;
-        border-bottom 1px solid #ccc
-        margin 4rem 0 1.5rem
-        @media screen and (max-width: 600px)
-          font-size 1.8125rem
-
-    & > h2
-      margin-bottom 1.625rem
-      font-weight 500;
-      line-height 1.5rem
-      border-bottom 1px solid #ccc
-      margin 4rem 0 1.5rem
-      @media screen and (max-width: 600px)
-        font-size 1.5rem
-
-    & > p
-      font-size 1.5rem
-      width 100%
-      margin 2.5rem auto
-      text-align left
-      @media screen and (max-width: 600px)
-        font-size 1rem
-      & > a
-        word-break break-word
+<style>
+#IHR_contact-page {
+  width: 60%;
+  margin: 0 auto;
+}
+@media screen and (max-width: 600px) {
+  #IHR_contact-page {
+    width: 100%;
+    padding: 0 1rem;
+  }
+}
+.IHR_background {
+  width: 1000px;
+  height: 1000px;
+  max-width: 100%;
+  background-repeat: no-repeat;
+  background-position: left top;
+  background-size: 1000px 1000px;
+  opacity: 0.1;
+  position: absolute;
+  top: 450px;
+  overflow-x: hidden;
+  position: fixed;
+}
+@media screen and (max-width: 600px) {
+  .IHR_background {
+    width: 100%;
+  }
+}
+.IHR_contact-page > h1 {
+  line-height: 1.5rem;
+  padding: 0.5rem 0;
+  font-weight: 500;
+  border-bottom: 1px solid #ccc;
+  margin: 4rem 0 1.5rem;
+}
+@media screen and (max-width: 600px) {
+  .IHR_contact-page > h1 {
+    font-size: 1.8125rem;
+  }
+}
+.IHR_contact-page > h2 {
+  margin-bottom: 1.625rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  border-bottom: 1px solid #ccc;
+  margin: 4rem 0 1.5rem;
+}
+@media screen and (max-width: 600px) {
+  .IHR_contact-page > h2 {
+    font-size: 1.5rem;
+  }
+}
+.IHR_contact-page > p {
+  font-size: 1.5rem;
+  width: 100%;
+  margin: 2.5rem auto;
+  text-align: left;
+}
+@media screen and (max-width: 600px) {
+  .IHR_contact-page > p {
+    font-size: 1rem;
+  }
+}
+.IHR_contact-page > p > a {
+  word-break: break-word;
+}
 </style>
diff --git a/src/views/Corona.vue b/src/views/Corona.vue
index b52d8c90..c94a2ab8 100644
--- a/src/views/Corona.vue
+++ b/src/views/Corona.vue
@@ -211,31 +211,39 @@ watch(selected, (newValue) => {
   </div>
 </template>
 
-<style lang="stylus">
-.IHR_anchor
-    display block
-    position relative
-    top -250px
-    visibility hidden
-
-.toolbox
-    padding 16px
-    justify-content: flex-end
-
-p
-    font-size 1.2rem
-.center
-    text-align center
-.box_corona
-    padding-top 40px
-    padding-bottom 50px
-.column_corona
-  float left
-  width 33.33%
-@media screen and (max-width:720px)
-  .column_corona
-    width 100%
-@media screen and (max-width:1024px) and (min-width 720px)
-  .column_corona
-    width 50%
+<style>
+.IHR_anchor {
+  display: block;
+  position: relative;
+  top: -250px;
+  visibility: hidden;
+}
+.toolbox {
+  padding: 16px;
+  justify-content: flex-end;
+}
+p {
+  font-size: 1.2rem;
+}
+.center {
+  text-align: center;
+}
+.box_corona {
+  padding-top: 40px;
+  padding-bottom: 50px;
+}
+.column_corona {
+  float: left;
+  width: 33.33%;
+}
+@media screen and (max-width: 720px) {
+  .column_corona {
+    width: 100%;
+  }
+}
+@media screen and (max-width: 1024px) and (min-width: 720px) {
+  .column_corona {
+    width: 50%;
+  }
+}
 </style>
diff --git a/src/views/Countries.vue b/src/views/Countries.vue
index caf02a68..c1b7dc2b 100644
--- a/src/views/Countries.vue
+++ b/src/views/Countries.vue
@@ -117,14 +117,18 @@ onMounted(() => {
   <Feedback />
 </template>
 
-<style lang="stylus">
-.examples
-  column-gap 30px
-@media screen and (max-width: 500px)
-  .examples
-    flex-direction column
-.ul_styles
-  padding 0
-  margin 0
-  list-style-position: inside
+<style>
+.examples {
+  column-gap: 30px;
+}
+@media screen and (max-width: 500px) {
+  .examples {
+    flex-direction: column;
+  }
+}
+.ul_styles {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
 </style>
diff --git a/src/views/Documentation.vue b/src/views/Documentation.vue
index 5958e292..d61b2687 100644
--- a/src/views/Documentation.vue
+++ b/src/views/Documentation.vue
@@ -210,102 +210,108 @@ const sectionActive = ref('')
   </div>
 </template>
 
-<style lang="stylus">
-#IHR_
-  &documentation-page
-    margin 0 auto
-    width 100%
-    max-width 1200px
-    padding 0 1rem
-    overflow-x scroll
-
-.IHR_
-  &documentation-page
-    & > h1
-      line-height 2rem
-      padding 0.5rem 0
-      font-weight 500
-      border-bottom 1px solid #ccc
-      margin 4rem 0 1.5rem
-      @media screen and (max-width: 720px)
-        font-size 1.8125rem
-        margin 2rem 0 1rem
-
-    & > div
-      & > h2
-        margin-top 2.875rem
-        margin-bottom 1rem
-        font-size 1.5rem !important
-        font-weight 500
-        line-height 1.5rem
-        @media screen and (max-width: 600px)
-          font-size 1.25rem
-          margin-bottom 0.8125rem
-      & > .text-body1
-        overflow-anchor none
-        & > a
-          overflow-anchor none
-          word-break break-word
-        & > ul
-          & > li
-            & > a
-              word-break break-word
-        & > p
-          & > a
-            word-break break-word
-#cod
-      background-color: #e7e9eb
-      padding:1em
-      border-radius: 0.5rem
-      padding-bottom: 0
-
-.IHR_
-  &documentation-page-sidebar
-    & > h3
-      margin-top 0.1875rem
-      width 88%
-      margin 0px auto
-      font-size 1.25rem
-      font-weight 500
-      @media screen and (max-width: 600px)
-        font-size 1rem
-
-      &:first-letter
-        text-transform capitalize
-
-    & > div
-      width 82%
-      margin 0.375rem auto 0.1875rem auto
-
-      & a:hover
-        border-bottom 1px solid #263238
-
-      & a:active
-        border-bottom 1px solid #405057
-
-      & ul
-        margin 5px
-        padding 0px
-
-      & li
-        list-style-type none
-        margin 0px
-        padding 0px
-        padding-left 15px
-
-.IHR_anchor
-  display block
-  position relative
-  top -100px
-  visibility hidden
-
-.router-link-inactived
-  border-bottom 0
-
-.router-link-actived
-  border-bottom 1px solid red
-
+<style>
+#IHR_documentation-page {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1200px;
+  padding: 0 1rem;
+  overflow-x: scroll;
+}
+.IHR_documentation-page > h1 {
+  line-height: 2rem;
+  padding: 0.5rem 0;
+  font-weight: 500;
+  border-bottom: 1px solid #ccc;
+  margin: 4rem 0 1.5rem;
+}
+@media screen and (max-width: 720px) {
+  .IHR_documentation-page > h1 {
+    font-size: 1.8125rem;
+    margin: 2rem 0 1rem;
+  }
+}
+.IHR_documentation-page > div > h2 {
+  margin-top: 2.875rem;
+  margin-bottom: 1rem;
+  font-size: 1.5rem !important;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+@media screen and (max-width: 600px) {
+  .IHR_documentation-page > div > h2 {
+    font-size: 1.25rem;
+    margin-bottom: 0.8125rem;
+  }
+}
+.IHR_documentation-page > div > .text-body1 {
+  overflow-anchor: none;
+}
+.IHR_documentation-page > div > .text-body1 > a {
+  overflow-anchor: none;
+  word-break: break-word;
+}
+.IHR_documentation-page > div > .text-body1 > ul > li > a {
+  word-break: break-word;
+}
+.IHR_documentation-page > div > .text-body1 > p > a {
+  word-break: break-word;
+}
+#cod {
+  background-color: #e7e9eb;
+  padding: 1em;
+  border-radius: 0.5rem;
+  padding-bottom: 0;
+}
+.IHR_documentation-page-sidebar > h3 {
+  margin-top: 0.1875rem;
+  width: 88%;
+  margin: 0px auto;
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+@media screen and (max-width: 600px) {
+  .IHR_documentation-page-sidebar > h3 {
+    font-size: 1rem;
+  }
+}
+.IHR_documentation-page-sidebar > h3:first-letter {
+  text-transform: capitalize;
+}
+.IHR_documentation-page-sidebar > div {
+  width: 82%;
+  margin: 0.375rem auto 0.1875rem auto;
+}
+.IHR_documentation-page-sidebar > div a:hover {
+  border-bottom: 1px solid #263238;
+}
+.IHR_documentation-page-sidebar > div a:active {
+  border-bottom: 1px solid #405057;
+}
+.IHR_documentation-page-sidebar > div ul {
+  margin: 5px;
+  padding: 0px;
+}
+.IHR_documentation-page-sidebar > div li {
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+  padding-left: 15px;
+}
+.IHR_anchor {
+  display: block;
+  position: relative;
+  top: -100px;
+  visibility: hidden;
+}
+.router-link-inactived {
+  border-bottom: 0;
+}
+.router-link-actived {
+  border-bottom: 1px solid #f00;
+}
 .router-link-inactived:hover,
-.router-link-actived:hover
-  border-bottom 1px solid #263238
+.router-link-actived:hover {
+  border-bottom: 1px solid #263238;
+}
 </style>
diff --git a/src/views/GlobalReport.vue b/src/views/GlobalReport.vue
index a616f90f..be1eb6f3 100644
--- a/src/views/GlobalReport.vue
+++ b/src/views/GlobalReport.vue
@@ -264,7 +264,7 @@ onMounted(() => {
           <DateTimePicker
             :min="minDate"
             :max="maxDate"
-            :value="maxDate"
+            :value="endTime"
             @input="setReportDate"
             hideTime
           />
diff --git a/src/views/HostNames.vue b/src/views/HostNames.vue
index 8117adc0..e717317b 100644
--- a/src/views/HostNames.vue
+++ b/src/views/HostNames.vue
@@ -116,14 +116,18 @@ onMounted(() => {
   <Feedback />
 </template>
 
-<style lang="stylus">
-.examples
-  column-gap 30px
-@media screen and (max-width: 500px)
-  .examples
-    flex-direction column
-.ul_styles
-  padding 0
-  margin 0
-  list-style-position: inside
+<style>
+.examples {
+  column-gap: 30px;
+}
+@media screen and (max-width: 500px) {
+  .examples {
+    flex-direction: column;
+  }
+}
+.ul_styles {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
 </style>
diff --git a/src/views/MetisDeployment.vue b/src/views/MetisDeployment.vue
index 2998adf8..54bc8e2f 100644
--- a/src/views/MetisDeployment.vue
+++ b/src/views/MetisDeployment.vue
@@ -65,4 +65,4 @@ const nbprobes = ref('100')
   </div>
 </template>
 
-<style lang="stylus"></style>
+<style></style>
diff --git a/src/views/MetisSelection.vue b/src/views/MetisSelection.vue
index 95ab6ec1..1e50ad4d 100644
--- a/src/views/MetisSelection.vue
+++ b/src/views/MetisSelection.vue
@@ -247,13 +247,12 @@ const copyAPI = () => {
   </div>
 </template>
 
-<style lang="stylus">
-
-
-.IHR_block
-  max-width 900px
-
-.apiTextarea
-  width 100%
-  min-height 500px
+<style>
+.IHR_block {
+  max-width: 900px;
+}
+.apiTextarea {
+  width: 100%;
+  min-height: 500px;
+}
 </style>
diff --git a/src/views/Networks.vue b/src/views/Networks.vue
index 3160e656..04aaa63a 100644
--- a/src/views/Networks.vue
+++ b/src/views/Networks.vue
@@ -157,14 +157,18 @@ onMounted(() => {
   <Feedback />
 </template>
 
-<style lang="stylus">
-.examples
-  column-gap 30px
-@media screen and (max-width: 500px)
-  .examples
-    flex-direction column
-.ul_styles
-  padding 0
-  margin 0
-  list-style-position: inside
+<style>
+.examples {
+  column-gap: 30px;
+}
+@media screen and (max-width: 500px) {
+  .examples {
+    flex-direction: column;
+  }
+}
+.ul_styles {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
 </style>
diff --git a/src/views/PageNotFound.vue b/src/views/PageNotFound.vue
index d8434634..b6acbccf 100644
--- a/src/views/PageNotFound.vue
+++ b/src/views/PageNotFound.vue
@@ -16,34 +16,30 @@ import { QBtn } from 'quasar'
   </div>
 </template>
 
-<style lang="stylus" scoped>
+<style scoped>
 #page {
-  margin : 0;
+  margin: 0;
   padding: 0;
   position: relative;
   height: 60vh;
 }
-
 #page .notfound {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -50%);
-      -ms-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
 }
-
 .notfound {
   max-width: 520px;
   width: 100%;
   text-align: center;
   line-height: 1.5;
 }
-
 .notfound .image404 {
   height: 190px;
 }
-
 .notfound .image404 h1 {
   font-family: 'Montserrat', sans-serif;
   font-size: 170px !important;
@@ -51,19 +47,17 @@ import { QBtn } from 'quasar'
   margin: 0px;
   color: #232323;
 }
-
 .notfound .image404 h1>span {
   display: inline-block;
   width: 100px;
   height: 100px;
-  background-image: url('../assets/imgs/ihr_logo.svg');
+  background-image: url("../assets/imgs/ihr_logo.svg");
   background-size: cover;
   -webkit-transform: scale(1.4);
-      -ms-transform: scale(1.4);
-          transform: scale(1.4);
+  -ms-transform: scale(1.4);
+  transform: scale(1.4);
   z-index: -1;
 }
-
 .notfound h2 {
   font-family: 'Montserrat', sans-serif;
   font-size: 22px;
@@ -72,13 +66,11 @@ import { QBtn } from 'quasar'
   text-transform: uppercase;
   color: #232323;
 }
-
 .notfound p {
   font-family: 'Montserrat', sans-serif;
   color: #787878;
   font-weight: 300;
 }
-
 .sec {
   font-family: 'Montserrat', sans-serif;
   display: inline-block;
@@ -91,13 +83,10 @@ import { QBtn } from 'quasar'
   -webkit-transition: 0.2s all;
   transition: 0.2s all;
 }
-
 .notfound button:hover {
   opacity: 0.8;
 }
-
 @media screen and (max-width: 320px) {
-
   #page {
     width: 100vw;
   }
@@ -112,12 +101,9 @@ import { QBtn } from 'quasar'
     height: 40px;
   }
 }
-
 @media screen and (max-width: 767px) {
-
   #page {
     width: 100vw;
-
   }
   .notfound .image404 {
     height: 115px;
diff --git a/src/views/ROV.vue b/src/views/ROV.vue
index b28839a3..d32d9a0c 100644
--- a/src/views/ROV.vue
+++ b/src/views/ROV.vue
@@ -134,7 +134,7 @@ onMounted(() => {
         <DateTimePicker
           :min="minDate"
           :max="maxDate"
-          :value="maxDate"
+          :value="endTime"
           @input="setReportDate"
           hideTime
         />
diff --git a/src/views/Ranks.vue b/src/views/Ranks.vue
index 42a7ab1f..01ae1a7f 100644
--- a/src/views/Ranks.vue
+++ b/src/views/Ranks.vue
@@ -130,14 +130,18 @@ onMounted(() => {
   <Feedback />
 </template>
 
-<style lang="stylus">
-.examples
-  column-gap 30px
-@media screen and (max-width: 500px)
-  .examples
-    flex-direction column
-.ul_styles
-  padding 0
-  margin 0
-  list-style-position: inside
+<style>
+.examples {
+  column-gap: 30px;
+}
+@media screen and (max-width: 500px) {
+  .examples {
+    flex-direction: column;
+  }
+}
+.ul_styles {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
 </style>
diff --git a/src/views/Tags.vue b/src/views/Tags.vue
index fcf9fcf3..2ca9fc10 100644
--- a/src/views/Tags.vue
+++ b/src/views/Tags.vue
@@ -121,14 +121,19 @@ onMounted(() => {
   <Feedback />
 </template>
 
-<style lang="stylus">
-.examples
-  column-gap 30px
-@media screen and (max-width: 500px)
-  .examples
-    flex-direction column
-.ul_styles
-  padding 0
-  margin 0
-  list-style-position: inside
+<style>
+.examples {
+  column-gap: 30px;
+}
+@media screen and (max-width: 500px) {
+  .examples {
+    flex-direction: column;
+  }
+}
+.ul_styles {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
+
 </style>