bnstooltips 1.9.2 → 1.9.3

package/build/index.js

@@ -58,7 +58,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = "*[class*=\"00008130.UI.Label_LightYellow_12\"] {\n  color: #ecd967 !important; }\n\n*[class*=\"00008130.UI.Vital_LightBlue\"] {\n  color: #46bee1 !important;\n  font-weight: 500 !important; }\n\n*[class*=\"00008130.UI.Label_Green03_12\"] {\n  color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_Chatting_Color_19\"] {\n  color: #58ff77; }\n\n.TooltipBase_grade-none {\n  color: #c2cadc; }\n\n.TooltipBase_grade-1 {\n  color: #6c6c6c !important; }\n\n.TooltipBase_border-grade-1 {\n  border-color: #6c6c6c !important; }\n\n.TooltipBase_border-hover-grade-1:hover {\n  border-color: #6c6c6c !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_1\"] {\n  color: #6c6c6c !important;\n  border-color: #6c6c6c !important; }\n\n.TooltipBase_grade-2 {\n  color: #ffffff !important; }\n\n.TooltipBase_border-grade-2 {\n  border-color: #ffffff !important; }\n\n.TooltipBase_border-hover-grade-2:hover {\n  border-color: #ffffff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_2\"] {\n  color: #ffffff !important;\n  border-color: #ffffff !important; }\n\n.TooltipBase_grade-3 {\n  color: #58ff77 !important; }\n\n.TooltipBase_border-grade-3 {\n  border-color: #58ff77 !important; }\n\n.TooltipBase_border-hover-grade-3:hover {\n  border-color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_3\"] {\n  color: #58ff77 !important;\n  border-color: #58ff77 !important; }\n\n.TooltipBase_grade-4 {\n  color: #46bee1 !important; }\n\n.TooltipBase_border-grade-4 {\n  border-color: #46bee1 !important; }\n\n.TooltipBase_border-hover-grade-4:hover {\n  border-color: #46bee1 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_4\"] {\n  color: #46bee1 !important;\n  border-color: #46bee1 !important; }\n\n.TooltipBase_grade-5 {\n  color: #d739ff !important; }\n\n.TooltipBase_border-grade-5 {\n  border-color: #d739ff !important; }\n\n.TooltipBase_border-hover-grade-5:hover {\n  border-color: #d739ff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_5\"] {\n  color: #d739ff !important;\n  border-color: #d739ff !important; }\n\n.TooltipBase_grade-6 {\n  color: #f1b248 !important; }\n\n.TooltipBase_border-grade-6 {\n  border-color: #f1b248 !important; }\n\n.TooltipBase_border-hover-grade-6:hover {\n  border-color: #f1b248 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_6\"] {\n  color: #f1b248 !important;\n  border-color: #f1b248 !important; }\n\n.TooltipBase_grade-7 {\n  color: #ff770a !important; }\n\n.TooltipBase_border-grade-7 {\n  border-color: #ff770a !important; }\n\n.TooltipBase_border-hover-grade-7:hover {\n  border-color: #ff770a !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_7\"] {\n  color: #ff770a !important;\n  border-color: #ff770a !important; }\n\n.TooltipBase_grade-8 {\n  color: #ff0084 !important; }\n\n.TooltipBase_border-grade-8 {\n  border-color: #ff0084 !important; }\n\n.TooltipBase_border-hover-grade-8:hover {\n  border-color: #ff0084 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_8\"] {\n  color: #ff0084 !important;\n  border-color: #ff0084 !important; }\n\n.TooltipBase_iconbg-grade-1 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_1.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-2 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_2.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-3 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_3.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-4 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_4.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-5 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_5.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-6 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_6.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-7 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_7.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-8 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-9 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_container {\n  box-sizing: border-box;\n  font-family: \"Montserrat\", sans-serif !important;\n  scroll-behavior: smooth;\n  touch-action: manipulation;\n  -webkit-overflow-scrolling: touch;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  background-color: rgba(3, 3, 3, 0.9);\n  backdrop-filter: brightness(1.5) blur(5px);\n  -webkit-backdrop-filter: brightness(1.5) blur(5px);\n  padding: 1rem;\n  border: 1px solid;\n  border-color: #6c6c6c;\n  font-weight: 500;\n  font-size: 16px;\n  text-decoration: none;\n  color: #fff;\n  width: 380px;\n  max-height: calc(100vh - 50px);\n  overflow-y: auto;\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n  border-radius: 3px;\n  text-shadow: black 1px 1px 0; }\n\n.TooltipBase_containerFullHeight {\n  height: 99%; }\n\n.TooltipBase_container::-webkit-scrollbar {\n  display: none; }\n\n.TooltipBase_downgradeBlue {\n  color: #28A9F0; }\n\n.TooltipBase_upgradeRed {\n  color: #FF2818; }\n\n@media only screen and (max-width: 380px) {\n  .TooltipBase_container {\n    width: 100%; } }\n\n@supports not (backdrop-filter: brightness(1.5) blur(5px)) {\n  .TooltipBase_container {\n    background-color: rgba(0, 0, 0, 0.95); }\n  .TooltipBase_container-loading {\n    background-color: rgba(0, 0, 0, 0.95); } }\n\n.TooltipBase_container-loading {\n  background-color: rgba(3, 3, 3, 0.9);\n  backdrop-filter: brightness(1.5) blur(5px);\n  -webkit-backdrop-filter: brightness(1.5) blur(5px);\n  padding: 1rem; }\n\n.TooltipBase_titlesubtitle {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 1rem; }\n\n.TooltipBase_title {\n  flex: 1;\n  overflow: hidden;\n  padding-right: 1rem; }\n\n.TooltipBase_title_text {\n  font-size: 18px;\n  text-shadow: black 1px 1px 0;\n  font-weight: 500; }\n\n.TooltipBase_subtitle {\n  text-align: end;\n  font-size: 12px; }\n\n.TooltipBase_iconmaininfo {\n  display: flex;\n  margin-bottom: 0.8rem; }\n\n.TooltipBase_iconcontainer {\n  margin-right: 0.5rem;\n  margin-bottom: 0.25rem;\n  float: left;\n  position: relative; }\n\n.TooltipBase_iconBg {\n  width: 64px;\n  height: 64px;\n  background-origin: content-box !important; }\n\n.TooltipBase_icon {\n  width: calc(64px - (0px * 2));\n  height: calc(64px - (0px * 2));\n  padding: 0px; }\n\n.TooltipBase_maininfocontainer {\n  font-size: 16px;\n  font-weight: 500; }\n\n.TooltipBase_maininfocontainer > div:not(:last-child) {\n  margin-bottom: 0.2rem; }\n\n.TooltipBase_fullwidthContainer {\n  line-height: 17px; }\n\n.TooltipBase_fullwidthContainer > div:not(:last-child) {\n  margin-bottom: 0.5rem; }\n\n.TooltipBase_fullwidthContainer-subContainer {\n  font-size: 12px; }\n\n.TooltipBase_fullwidthContainer-subContainer > div:not(:last-child) {\n  margin-bottom: 0.1rem; }\n\n.TooltipBase_flex {\n  display: flex;\n  align-items: center; }\n\n.TooltipBase_flex-col {\n  display: flex;\n  justify-content: center;\n  flex-direction: column; }\n\n.TooltipBase_descriptions-description-title {\n  font-weight: 500; }\n";
+var css_248z$d = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n.TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n*[class*=\"00008130.UI.Label_LightYellow_12\"] {\n  color: #ecd967 !important; }\n\n*[class*=\"00008130.UI.Vital_LightBlue\"] {\n  color: #46bee1 !important;\n  font-weight: 500 !important; }\n\n*[class*=\"00008130.UI.Label_Green03_12\"] {\n  color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_Chatting_Color_19\"] {\n  color: #58ff77; }\n\n.TooltipBase_grade-none {\n  color: #c2cadc; }\n\n.TooltipBase_grade-1 {\n  color: #6c6c6c !important; }\n\n.TooltipBase_border-grade-1 {\n  border-color: #6c6c6c !important; }\n\n.TooltipBase_border-hover-grade-1:hover {\n  border-color: #6c6c6c !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_1\"] {\n  color: #6c6c6c !important;\n  border-color: #6c6c6c !important; }\n\n.TooltipBase_grade-2 {\n  color: #ffffff !important; }\n\n.TooltipBase_border-grade-2 {\n  border-color: #ffffff !important; }\n\n.TooltipBase_border-hover-grade-2:hover {\n  border-color: #ffffff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_2\"] {\n  color: #ffffff !important;\n  border-color: #ffffff !important; }\n\n.TooltipBase_grade-3 {\n  color: #58ff77 !important; }\n\n.TooltipBase_border-grade-3 {\n  border-color: #58ff77 !important; }\n\n.TooltipBase_border-hover-grade-3:hover {\n  border-color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_3\"] {\n  color: #58ff77 !important;\n  border-color: #58ff77 !important; }\n\n.TooltipBase_grade-4 {\n  color: #46bee1 !important; }\n\n.TooltipBase_border-grade-4 {\n  border-color: #46bee1 !important; }\n\n.TooltipBase_border-hover-grade-4:hover {\n  border-color: #46bee1 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_4\"] {\n  color: #46bee1 !important;\n  border-color: #46bee1 !important; }\n\n.TooltipBase_grade-5 {\n  color: #d739ff !important; }\n\n.TooltipBase_border-grade-5 {\n  border-color: #d739ff !important; }\n\n.TooltipBase_border-hover-grade-5:hover {\n  border-color: #d739ff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_5\"] {\n  color: #d739ff !important;\n  border-color: #d739ff !important; }\n\n.TooltipBase_grade-6 {\n  color: #f1b248 !important; }\n\n.TooltipBase_border-grade-6 {\n  border-color: #f1b248 !important; }\n\n.TooltipBase_border-hover-grade-6:hover {\n  border-color: #f1b248 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_6\"] {\n  color: #f1b248 !important;\n  border-color: #f1b248 !important; }\n\n.TooltipBase_grade-7 {\n  color: #ff770a !important; }\n\n.TooltipBase_border-grade-7 {\n  border-color: #ff770a !important; }\n\n.TooltipBase_border-hover-grade-7:hover {\n  border-color: #ff770a !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_7\"] {\n  color: #ff770a !important;\n  border-color: #ff770a !important; }\n\n.TooltipBase_grade-8 {\n  color: #ff0084 !important; }\n\n.TooltipBase_border-grade-8 {\n  border-color: #ff0084 !important; }\n\n.TooltipBase_border-hover-grade-8:hover {\n  border-color: #ff0084 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_8\"] {\n  color: #ff0084 !important;\n  border-color: #ff0084 !important; }\n\n.TooltipBase_iconbg-grade-1 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_1.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-2 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_2.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-3 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_3.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-4 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_4.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-5 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_5.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-6 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_6.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-7 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_7.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-8 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-9 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_container {\n  box-sizing: border-box;\n  font-family: \"Montserrat\", sans-serif !important;\n  scroll-behavior: smooth;\n  touch-action: manipulation;\n  -webkit-overflow-scrolling: touch;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  background-color: rgba(3, 3, 3, 0.9);\n  backdrop-filter: brightness(1.5) blur(5px);\n  -webkit-backdrop-filter: brightness(1.5) blur(5px);\n  padding: 1rem;\n  border: 1px solid;\n  border-color: #6c6c6c;\n  font-weight: 500;\n  font-size: 16px;\n  text-decoration: none;\n  color: #fff;\n  width: 380px;\n  max-height: calc(100vh - 50px);\n  overflow-y: auto;\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n  border-radius: 3px;\n  text-shadow: black 1px 1px 0; }\n\n.TooltipBase_containerFullHeight {\n  height: 99%; }\n\n.TooltipBase_container::-webkit-scrollbar {\n  display: none; }\n\n.TooltipBase_downgradeBlue {\n  color: #28A9F0; }\n\n.TooltipBase_upgradeRed {\n  color: #FF2818; }\n\n@media only screen and (max-width: 380px) {\n  .TooltipBase_container {\n    width: 100%; } }\n\n@supports not (backdrop-filter: brightness(1.5) blur(5px)) {\n  .TooltipBase_container {\n    background-color: rgba(0, 0, 0, 0.95); }\n  .TooltipBase_container-loading {\n    background-color: rgba(0, 0, 0, 0.95); } }\n\n.TooltipBase_container-loading {\n  background-color: rgba(3, 3, 3, 0.9);\n  backdrop-filter: brightness(1.5) blur(5px);\n  -webkit-backdrop-filter: brightness(1.5) blur(5px);\n  padding: 1rem; }\n\n.TooltipBase_titlesubtitle {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 1rem; }\n\n.TooltipBase_title {\n  flex: 1;\n  overflow: hidden;\n  padding-right: 1rem; }\n\n.TooltipBase_title_text {\n  font-size: 18px;\n  text-shadow: black 1px 1px 0;\n  font-weight: 500; }\n\n.TooltipBase_subtitle {\n  text-align: end;\n  font-size: 12px; }\n\n.TooltipBase_iconmaininfo {\n  display: flex;\n  margin-bottom: 0.8rem; }\n\n.TooltipBase_iconcontainer {\n  margin-right: 0.5rem;\n  margin-bottom: 0.25rem;\n  float: left;\n  position: relative; }\n\n.TooltipBase_iconBg {\n  width: 64px;\n  height: 64px;\n  background-origin: content-box !important; }\n\n.TooltipBase_icon {\n  width: calc(64px - (0px * 2));\n  height: calc(64px - (0px * 2));\n  padding: 0px; }\n\n.TooltipBase_maininfocontainer {\n  font-size: 16px;\n  font-weight: 500; }\n\n.TooltipBase_maininfocontainer > div:not(:last-child) {\n  margin-bottom: 0.2rem; }\n\n.TooltipBase_fullwidthContainer {\n  line-height: 17px; }\n\n.TooltipBase_fullwidthContainer > div:not(:last-child) {\n  margin-bottom: 0.5rem; }\n\n.TooltipBase_fullwidthContainer-subContainer {\n  font-size: 12px; }\n\n.TooltipBase_fullwidthContainer-subContainer > div:not(:last-child) {\n  margin-bottom: 0.1rem; }\n\n.TooltipBase_flex {\n  display: flex;\n  align-items: center; }\n\n.TooltipBase_flex-col {\n  display: flex;\n  justify-content: center;\n  flex-direction: column; }\n\n.TooltipBase_descriptions-description-title {\n  font-weight: 500; }\n";
 styleInject(css_248z$d);
 
 function TooltipBase(_a) {
@@ -161,7 +161,7 @@ function __generator(thisArg, body) {
     }
 }
 
-var css_248z$c = ".ItemTooltip_itemIconLoading {\n  width: 50px;\n  padding: 0.22rem 0;\n  display: flex;\n  justify-content: center;\n  align-items: center; }\n\n.ItemTooltip_jobstyleToggleContainer {\n  display: flex; }\n\n.ItemTooltip_optionPadding {\n  margin: .2rem 0 .5rem 0; }\n\n.ItemTooltip_showButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.2);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .ItemTooltip_showButton:hover {\n    background-color: rgba(255, 255, 255, 0.3);\n    opacity: 1; }\n  .ItemTooltip_showButton-active {\n    background-color: rgba(255, 255, 255, 0.4) !important;\n    color: #fff;\n    opacity: 1; }\n\n.ItemTooltip_jobstyleButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.1);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .ItemTooltip_jobstyleButton:hover {\n    background-color: rgba(255, 255, 255, 0.2);\n    opacity: 1; }\n  .ItemTooltip_jobstyleButton-active {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    color: #fff;\n    opacity: 1; }\n\n.ItemTooltip_itemiconnamedivspan {\n  display: flex;\n  justify-content: center;\n  align-items: center; }\n\n.ItemTooltip_cooldown {\n  font-weight: 400;\n  font-size: 12px; }\n\n.ItemTooltip_subInfo {\n  font-size: 14px; }\n\n.ItemTooltip_stats_mainstat {\n  font-size: 16px;\n  margin-bottom: 0.05rem; }\n\n.ItemTooltip_stats_substat {\n  font-size: 14px; }\n\n.ItemTooltip_itemIconInline {\n  width: 18px !important;\n  height: 18px !important;\n  margin: 0 1px;\n  top: 3px;\n  position: relative; }\n\n.ItemTooltip_itemIconRandom {\n  width: 36px !important;\n  top: 6px;\n  margin: 0 1px 0 2px; }\n\n.ItemTooltip_itemIconSmall {\n  width: 20px !important;\n  height: 20px !important;\n  margin-right: 0.33rem; }\n\n.ItemTooltip_setBonus {\n  margin-bottom: 0.8rem !important; }\n\n.ItemTooltip_setContainer {\n  padding-left: 0.33rem;\n  padding-top: 0.22rem; }\n\n.ItemTooltip_setStageContainer {\n  display: flex;\n  margin: 0.25rem 0 0.35rem 0; }\n\n.ItemTooltip_setStageNumber {\n  margin-top: 0.2rem;\n  padding-top: 0.1rem;\n  line-height: 16px;\n  width: 16px;\n  height: 16px;\n  max-height: 16px;\n  font-weight: 500;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: rgba(88, 255, 119, 0.8);\n  border: 1px solid rgba(88, 255, 119, 0.9);\n  border-radius: 3px; }\n\n.ItemTooltip_setStageContent {\n  padding-top: 0.2rem;\n  flex-grow: 2;\n  padding-left: 0.55rem;\n  max-width: 90%;\n  color: #58ff77; }\n\n.ItemTooltip_itemiconnamediv {\n  display: flex;\n  align-items: center;\n  padding: 0.15rem 0 0.15rem 0.33rem;\n  line-height: 20px; }\n\n.ItemTooltip_setItemIconNameDiv {\n  display: flex;\n  align-items: center;\n  padding: 0.11rem 0 0.11rem 0.33rem;\n  line-height: 20px; }\n\n.ItemTooltip_setItemsContainer {\n  display: flex;\n  font-size: 12px; }\n\n.ItemTooltip_setItemsSubContainer {\n  flex: 1; }\n\n.ItemTooltip_itemNameRandomDiv {\n  display: flex;\n  align-items: center; }\n\n@media only screen and (max-width: 380px) {\n  .ItemTooltip_jobstyleButton {\n    padding: 0.5rem; } }\n\n/**\r\n * ==============================================\r\n * Dot Elastic\r\n * ==============================================\r\n */\n.dot-elastic {\n  position: relative;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n  background-color: rgba(127, 127, 127, 0.8);\n  color: rgba(127, 127, 127, 0.8);\n  animation: dotElastic 1s infinite linear; }\n\n.dot-elastic::before,\n.dot-elastic::after {\n  content: \"\";\n  display: inline-block;\n  position: absolute;\n  top: 0; }\n\n.dot-elastic::before {\n  left: -15px;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n  background-color: rgba(127, 127, 127, 0.8);\n  color: rgba(127, 127, 127, 0.8);\n  animation: dotElasticBefore 1s infinite linear; }\n\n.dot-elastic::after {\n  left: 15px;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n  background-color: rgba(127, 127, 127, 0.8);\n  color: rgba(127, 127, 127, 0.8);\n  animation: dotElasticAfter 1s infinite linear; }\n\n@keyframes dotElasticBefore {\n  0% {\n    transform: scale(1, 1); }\n  25% {\n    transform: scale(1, 1.5); }\n  50% {\n    transform: scale(1, 0.67); }\n  75% {\n    transform: scale(1, 1); }\n  100% {\n    transform: scale(1, 1); } }\n\n@keyframes dotElastic {\n  0% {\n    transform: scale(1, 1); }\n  25% {\n    transform: scale(1, 1); }\n  50% {\n    transform: scale(1, 1.5); }\n  75% {\n    transform: scale(1, 1); }\n  100% {\n    transform: scale(1, 1); } }\n\n@keyframes dotElasticAfter {\n  0% {\n    transform: scale(1, 1); }\n  25% {\n    transform: scale(1, 1); }\n  50% {\n    transform: scale(1, 0.67); }\n  75% {\n    transform: scale(1, 1.5); }\n  100% {\n    transform: scale(1, 1); } }\n";
+var css_248z$c = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n.ItemTooltip_itemIconLoading {\n  width: 50px;\n  padding: 0.22rem 0;\n  display: flex;\n  justify-content: center;\n  align-items: center; }\n\n.ItemTooltip_jobstyleToggleContainer {\n  display: flex; }\n\n.ItemTooltip_optionPadding {\n  margin: .2rem 0 .5rem 0; }\n\n.ItemTooltip_showButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.2);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .ItemTooltip_showButton:hover {\n    background-color: rgba(255, 255, 255, 0.3);\n    opacity: 1; }\n  .ItemTooltip_showButton-active {\n    background-color: rgba(255, 255, 255, 0.4) !important;\n    color: #fff;\n    opacity: 1; }\n\n.ItemTooltip_jobstyleButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.1);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .ItemTooltip_jobstyleButton:hover {\n    background-color: rgba(255, 255, 255, 0.2);\n    opacity: 1; }\n  .ItemTooltip_jobstyleButton-active {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    color: #fff;\n    opacity: 1; }\n\n.ItemTooltip_itemiconnamedivspan {\n  display: flex;\n  justify-content: center;\n  align-items: center; }\n\n.ItemTooltip_cooldown {\n  font-weight: 400;\n  font-size: 12px; }\n\n.ItemTooltip_subInfo {\n  font-size: 14px; }\n\n.ItemTooltip_stats_mainstat {\n  font-size: 16px;\n  margin-bottom: 0.05rem; }\n\n.ItemTooltip_stats_substat {\n  font-size: 14px; }\n\n.ItemTooltip_itemIconInline {\n  width: 18px !important;\n  height: 18px !important;\n  margin: 0 1px;\n  top: 3px;\n  position: relative; }\n\n.ItemTooltip_itemIconRandom {\n  width: 36px !important;\n  top: 6px;\n  margin: 0 1px 0 2px; }\n\n.ItemTooltip_itemIconSmall {\n  width: 20px !important;\n  height: 20px !important;\n  margin-right: 0.33rem; }\n\n.ItemTooltip_setBonus {\n  margin-bottom: 0.8rem !important; }\n\n.ItemTooltip_setContainer {\n  padding-left: 0.33rem;\n  padding-top: 0.22rem; }\n\n.ItemTooltip_setStageContainer {\n  display: flex;\n  margin: 0.25rem 0 0.35rem 0; }\n\n.ItemTooltip_setStageNumber {\n  margin-top: 0.2rem;\n  padding-top: 0.1rem;\n  line-height: 16px;\n  width: 16px;\n  height: 16px;\n  max-height: 16px;\n  font-weight: 500;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: rgba(88, 255, 119, 0.8);\n  border: 1px solid rgba(88, 255, 119, 0.9);\n  border-radius: 3px; }\n\n.ItemTooltip_setStageContent {\n  padding-top: 0.2rem;\n  flex-grow: 2;\n  padding-left: 0.55rem;\n  max-width: 90%;\n  color: #58ff77; }\n\n.ItemTooltip_itemiconnamediv {\n  display: flex;\n  align-items: center;\n  padding: 0.15rem 0 0.15rem 0.33rem;\n  line-height: 20px; }\n\n.ItemTooltip_setItemIconNameDiv {\n  display: flex;\n  align-items: center;\n  padding: 0.11rem 0 0.11rem 0.33rem;\n  line-height: 20px; }\n\n.ItemTooltip_setItemsContainer {\n  display: flex;\n  font-size: 12px; }\n\n.ItemTooltip_setItemsSubContainer {\n  flex: 1; }\n\n.ItemTooltip_itemNameRandomDiv {\n  display: flex;\n  align-items: center; }\n\n@media only screen and (max-width: 380px) {\n  .ItemTooltip_jobstyleButton {\n    padding: 0.5rem; } }\n\n/**\r\n * ==============================================\r\n * Dot Elastic\r\n * ==============================================\r\n */\n.dot-elastic {\n  position: relative;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n  background-color: rgba(127, 127, 127, 0.8);\n  color: rgba(127, 127, 127, 0.8);\n  animation: dotElastic 1s infinite linear; }\n\n.dot-elastic::before,\n.dot-elastic::after {\n  content: \"\";\n  display: inline-block;\n  position: absolute;\n  top: 0; }\n\n.dot-elastic::before {\n  left: -15px;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n  background-color: rgba(127, 127, 127, 0.8);\n  color: rgba(127, 127, 127, 0.8);\n  animation: dotElasticBefore 1s infinite linear; }\n\n.dot-elastic::after {\n  left: 15px;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n  background-color: rgba(127, 127, 127, 0.8);\n  color: rgba(127, 127, 127, 0.8);\n  animation: dotElasticAfter 1s infinite linear; }\n\n@keyframes dotElasticBefore {\n  0% {\n    transform: scale(1, 1); }\n  25% {\n    transform: scale(1, 1.5); }\n  50% {\n    transform: scale(1, 0.67); }\n  75% {\n    transform: scale(1, 1); }\n  100% {\n    transform: scale(1, 1); } }\n\n@keyframes dotElastic {\n  0% {\n    transform: scale(1, 1); }\n  25% {\n    transform: scale(1, 1); }\n  50% {\n    transform: scale(1, 1.5); }\n  75% {\n    transform: scale(1, 1); }\n  100% {\n    transform: scale(1, 1); } }\n\n@keyframes dotElasticAfter {\n  0% {\n    transform: scale(1, 1); }\n  25% {\n    transform: scale(1, 1); }\n  50% {\n    transform: scale(1, 0.67); }\n  75% {\n    transform: scale(1, 1.5); }\n  100% {\n    transform: scale(1, 1); } }\n";
 styleInject(css_248z$c);
 
 function BuildIconPath(iconPath, iconIndex) {
@@ -1406,7 +1406,7 @@ var ItemDownloadClient = /** @class */ (function () {
 var css_248z$b = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
 styleInject(css_248z$b);
 
-var css_248z$a = "";
+var css_248z$a = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n";
 styleInject(css_248z$a);
 
 var top = 'top';
@@ -5580,10 +5580,10 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 
 var Tippy = index;
 
-var css_248z$9 = ".ItemImproveTooltip_PrevCurNext {\n  display: flex;\n  align-items: center;\n  justify-content: center; }\n  .ItemImproveTooltip_PrevCurNext_container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 90%; }\n    .ItemImproveTooltip_PrevCurNext_container > div {\n      margin: 0 .5rem;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center; }\n    .ItemImproveTooltip_PrevCurNext_container_itemChild {\n      flex: 3; }\n    .ItemImproveTooltip_PrevCurNext_container_itemChildExtra {\n      flex: 3.5; }\n      .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container {\n        display: flex;\n        justify-content: center;\n        align-items: center; }\n        .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          text-align: center;\n          border: solid 1px rgba(108, 108, 108, 0.6);\n          border-radius: 3px;\n          padding: 1rem 0;\n          cursor: pointer;\n          opacity: .8; }\n          .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow:hover {\n            opacity: 1;\n            filter: brightness(1.5); }\n    .ItemImproveTooltip_PrevCurNext_container_arrowChild {\n      flex: 1; }\n      .ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton {\n        cursor: pointer;\n        opacity: .8; }\n        .ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton:hover {\n          opacity: 1;\n          filter: brightness(1.5); }\n\n.ItemImproveTooltip_ItemWithText {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center; }\n  .ItemImproveTooltip_ItemWithText_icon {\n    width: 56px;\n    height: 56px; }\n  .ItemImproveTooltip_ItemWithText_iconSmall {\n    width: 40px;\n    height: 40px; }\n  .ItemImproveTooltip_ItemWithText_iconPad {\n    border-width: 2px;\n    border-color: rgba(108, 108, 108, 0.6);\n    border-style: solid;\n    border-radius: 3px;\n    padding: 1px;\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n  .ItemImproveTooltip_ItemWithText_name {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center; }\n\n.ItemImproveUpgradeCost {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin-top: 2rem;\n  margin-bottom: 1rem; }\n  .ItemImproveUpgradeCost_title {\n    text-align: center;\n    font-size: 18px;\n    padding-top: 1rem; }\n  .ItemImproveUpgradeCost > div {\n    width: 100%; }\n  .ItemImproveUpgradeCost_money {\n    margin-top: .5rem; }\n\n.SubCostSelector {\n  display: flex;\n  justify-content: center;\n  align-items: stretch;\n  margin-top: .5rem;\n  margin-bottom: .5rem;\n  overflow-x: auto; }\n  .SubCostSelector > div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex: 2; }\n\n.MainCostSelector {\n  margin: .33rem 0 .5rem 0;\n  display: flex;\n  justify-content: center;\n  align-items: stretch; }\n  .MainCostSelector_or {\n    flex: 0 1 0px !important;\n    padding: 0 2rem;\n    font-size: 18px; }\n  .MainCostSelector > div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex: 1; }\n  .MainCostSelector_warning {\n    min-height: 1rem;\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n    .MainCostSelector_warning_active {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: .5rem; }\n  .MainCostSelector_container {\n    display: flex;\n    flex-direction: column;\n    padding: 0 .1rem .33rem .1rem; }\n    .MainCostSelector_container_space {\n      flex: 1;\n      margin: 0 0 .1rem 0; }\n";
+var css_248z$9 = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n.ItemImproveTooltip_PrevCurNext {\n  display: flex;\n  align-items: center;\n  justify-content: center; }\n  .ItemImproveTooltip_PrevCurNext_container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 90%; }\n    .ItemImproveTooltip_PrevCurNext_container > div {\n      margin: 0 .5rem;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center; }\n    .ItemImproveTooltip_PrevCurNext_container_itemChild {\n      flex: 3; }\n    .ItemImproveTooltip_PrevCurNext_container_itemChildExtra {\n      flex: 3.5; }\n      .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container {\n        display: flex;\n        justify-content: center;\n        align-items: center; }\n        .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          text-align: center;\n          border: solid 1px rgba(108, 108, 108, 0.6);\n          border-radius: 3px;\n          padding: 1rem 0;\n          cursor: pointer;\n          opacity: .8; }\n          .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow:hover {\n            opacity: 1;\n            filter: brightness(1.5); }\n    .ItemImproveTooltip_PrevCurNext_container_arrowChild {\n      flex: 1; }\n      .ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton {\n        cursor: pointer;\n        opacity: .8; }\n        .ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton:hover {\n          opacity: 1;\n          filter: brightness(1.5); }\n\n.ItemImproveTooltip_ItemWithText {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center; }\n  .ItemImproveTooltip_ItemWithText_icon {\n    width: 56px;\n    height: 56px; }\n  .ItemImproveTooltip_ItemWithText_iconSmall {\n    width: 40px;\n    height: 40px; }\n  .ItemImproveTooltip_ItemWithText_iconPad {\n    border-width: 2px;\n    border-color: rgba(108, 108, 108, 0.6);\n    border-style: solid;\n    border-radius: 3px;\n    padding: 1px;\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n  .ItemImproveTooltip_ItemWithText_name {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center; }\n\n.ItemImproveUpgradeCost {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin-top: 2rem;\n  margin-bottom: 1rem; }\n  .ItemImproveUpgradeCost_title {\n    text-align: center;\n    font-size: 18px;\n    padding-top: 1rem; }\n  .ItemImproveUpgradeCost > div {\n    width: 100%; }\n  .ItemImproveUpgradeCost_money {\n    margin-top: .5rem; }\n\n.SubCostSelector {\n  display: flex;\n  justify-content: center;\n  align-items: stretch;\n  margin-top: .5rem;\n  margin-bottom: .5rem;\n  overflow-x: auto; }\n  .SubCostSelector > div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex: 2; }\n\n.MainCostSelector {\n  margin: .33rem 0 .5rem 0;\n  display: flex;\n  justify-content: center;\n  align-items: stretch; }\n  .MainCostSelector_or {\n    flex: 0 1 0px !important;\n    padding: 0 2rem;\n    font-size: 18px; }\n  .MainCostSelector > div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex: 1; }\n  .MainCostSelector_warning {\n    min-height: 1rem;\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n    .MainCostSelector_warning_active {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: .5rem; }\n  .MainCostSelector_container {\n    display: flex;\n    flex-direction: column;\n    padding: 0 .1rem .33rem .1rem; }\n    .MainCostSelector_container_space {\n      flex: 1;\n      margin: 0 0 .1rem 0; }\n";
 styleInject(css_248z$9);
 
-var css_248z$8 = ".tippy-box {\n  max-width: none !important;\n  background-color: transparent !important;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n  .tippy-box:hover {\n    box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 60px 0px !important; }\n\n.tippy-content {\n  padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff0084 !important; }\n";
+var css_248z$8 = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n.tippy-box {\n  max-width: none !important;\n  background-color: transparent !important;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n  .tippy-box:hover {\n    box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 60px 0px !important; }\n\n.tippy-content {\n  padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff0084 !important; }\n";
 styleInject(css_248z$8);
 
 var ItemTooltipWrapper = function (_a) {
@@ -5646,10 +5646,10 @@ function ItemWithText(_a) {
         React__default["default"].createElement("div", { dangerouslySetInnerHTML: { __html: item.name }, className: "TooltipBase_grade-" + item.grade + " ItemImproveTooltip_ItemWithText_name" })));
 }
 
-var css_248z$7 = "";
+var css_248z$7 = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n";
 styleInject(css_248z$7);
 
-var css_248z$6 = ".ItemImproveEffectsTooltip_entry {\n  padding: 0.1rem 0 0 .5rem; }\n";
+var css_248z$6 = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n.ItemImproveEffectsTooltip_entry {\n  padding: 0.1rem 0 0 .5rem; }\n";
 styleInject(css_248z$6);
 
 function ItemImproveEffectsTooltip(_a) {
@@ -6795,7 +6795,7 @@ function JsonArrayToJsxArray(stringArray) {
     return jsxArray;
 }
 
-var css_248z$4 = ".SkillTooltip_skillIconContainer {\n  width: 60px;\n  height: 60px;\n  padding: 0;\n  float: left;\n  position: relative; }\n\n.SkillTooltip_skillIcon {\n  width: 60px;\n  height: 60px; }\n\n.SkillTooltip_buttonIcon {\n  position: absolute;\n  right: 1px;\n  bottom: 1px;\n  height: 18px;\n  opacity: 0.9; }\n\n.SkillTooltip_buttonIconMouse {\n  background-color: rgba(0, 0, 0, 0.8); }\n\n.SkillTooltip_mainText {\n  font-weight: 500; }\n\n.SkillTooltip_smallText {\n  font-size: 12px; }\n\n.SkillTooltip_subTextMargin {\n  margin-bottom: 0.3rem; }\n\n.SkillTooltip_boundaryContainer {\n  display: flex;\n  width: 100%;\n  margin-bottom: 0.5rem;\n  line-height: 17px; }\n\n.SkillTooltip_boundary {\n  flex: 1;\n  flex-basis: 0px;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  color: black;\n  margin: 0.15rem; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryHead {\n  border-radius: 3px 0 0 0; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryHead {\n  border-radius: 0 3px 0 0; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryBody {\n  border-radius: 0 0 0 3px; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryBody {\n  border-radius: 0 0 3px 0; }\n\n.SkillTooltip_boundaryHead {\n  color: white;\n  font-weight: 500;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  padding: 0.3rem;\n  text-align: center;\n  flex: 1;\n  min-height: 26px;\n  background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBody {\n  color: white;\n  padding: 0.5rem 0.3rem;\n  margin-top: 0.15rem;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40px;\n  flex: 2;\n  background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBodyModifier {\n  min-height: 33px !important; }\n\n.SkillTooltip_boundaryHasIcon {\n  min-height: 50px !important; }\n\n.SkillTooltip_conditionRow {\n  display: flex;\n  align-items: center;\n  font-size: 12px; }\n\n.SkillTooltip_conditionRow:not(:last-of-type) {\n  margin-bottom: 0.1rem; }\n\n.SkillTooltip_conditionIcon {\n  width: 20px;\n  height: 20px;\n  margin-right: 0.33rem; }\n\n.SkillTooltip_conditionIconSmall {\n  width: 12px;\n  height: 12px;\n  margin-right: 0.22rem; }\n\n.tooltipArg {\n  color: #46bee1;\n  font-weight: 600; }\n\n.target-360 {\n  background-image: url(\"./360.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 60%;\n  background-size: auto 64px; }\n\n.target-front-180 {\n  background-image: url(\"./180.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 70%;\n  background-size: auto 64px; }\n\n.laser {\n  background-image: url(\"./laser.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n  background-size: auto 64px; }\n";
+var css_248z$4 = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n.SkillTooltip_skillIconContainer {\n  width: 60px;\n  height: 60px;\n  padding: 0;\n  float: left;\n  position: relative; }\n\n.SkillTooltip_skillIcon {\n  width: 60px;\n  height: 60px; }\n\n.SkillTooltip_buttonIcon {\n  position: absolute;\n  right: 1px;\n  bottom: 1px;\n  height: 18px;\n  opacity: 0.9; }\n\n.SkillTooltip_buttonIconMouse {\n  background-color: rgba(0, 0, 0, 0.8); }\n\n.SkillTooltip_mainText {\n  font-weight: 500; }\n\n.SkillTooltip_smallText {\n  font-size: 12px; }\n\n.SkillTooltip_subTextMargin {\n  margin-bottom: 0.3rem; }\n\n.SkillTooltip_boundaryContainer {\n  display: flex;\n  width: 100%;\n  margin-bottom: 0.5rem;\n  line-height: 17px; }\n\n.SkillTooltip_boundary {\n  flex: 1;\n  flex-basis: 0px;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  color: black;\n  margin: 0.15rem; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryHead {\n  border-radius: 3px 0 0 0; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryHead {\n  border-radius: 0 3px 0 0; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryBody {\n  border-radius: 0 0 0 3px; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryBody {\n  border-radius: 0 0 3px 0; }\n\n.SkillTooltip_boundaryHead {\n  color: white;\n  font-weight: 500;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  padding: 0.3rem;\n  text-align: center;\n  flex: 1;\n  min-height: 26px;\n  background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBody {\n  color: white;\n  padding: 0.5rem 0.3rem;\n  margin-top: 0.15rem;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40px;\n  flex: 2;\n  background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBodyModifier {\n  min-height: 33px !important; }\n\n.SkillTooltip_boundaryHasIcon {\n  min-height: 50px !important; }\n\n.SkillTooltip_conditionRow {\n  display: flex;\n  align-items: center;\n  font-size: 12px; }\n\n.SkillTooltip_conditionRow:not(:last-of-type) {\n  margin-bottom: 0.1rem; }\n\n.SkillTooltip_conditionIcon {\n  width: 20px;\n  height: 20px;\n  margin-right: 0.33rem; }\n\n.SkillTooltip_conditionIconSmall {\n  width: 12px;\n  height: 12px;\n  margin-right: 0.22rem; }\n\n.tooltipArg {\n  color: #46bee1;\n  font-weight: 600; }\n\n.target-360 {\n  background-image: url(\"./360.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 60%;\n  background-size: auto 64px; }\n\n.target-front-180 {\n  background-image: url(\"./180.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 70%;\n  background-size: auto 64px; }\n\n.laser {\n  background-image: url(\"./laser.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n  background-size: auto 64px; }\n";
 styleInject(css_248z$4);
 
 function getButtonIconPath(button) {
@@ -7072,24 +7072,24 @@ function AddIds(subInfoGroups, skill) {
         texts: [
             React__default["default"].createElement("div", null,
                 "Id: ",
-                React__default["default"].createElement(ColoredText, { text: skill.ID.toString() })),
+                React__default["default"].createElement(BlueColoredText, { text: skill.ID.toString() })),
             React__default["default"].createElement("div", null,
                 "Variation: ",
-                React__default["default"].createElement(ColoredText, { text: skill.Variation.toString() })),
+                React__default["default"].createElement(BlueColoredText, { text: skill.Variation.toString() })),
         ],
     };
     if (skill.GcdGroup != null) {
         subInfoGroup.texts.push(React__default["default"].createElement("div", null,
             "Gcd group: ",
-            React__default["default"].createElement(ColoredText, { text: skill.GcdGroup.toString() })));
+            React__default["default"].createElement(BlueColoredText, { text: skill.GcdGroup.toString() })));
     }
     if (skill.CdRecycle != null) {
         subInfoGroup.texts.push(React__default["default"].createElement("div", null,
             "Cd group: ",
-            React__default["default"].createElement(ColoredText, { text: skill.CdRecycle.Item1.toString() })));
+            React__default["default"].createElement(BlueColoredText, { text: skill.CdRecycle.Item1.toString() })));
         subInfoGroup.texts.push(React__default["default"].createElement("div", null,
             "Cd id: ",
-            React__default["default"].createElement(ColoredText, { text: skill.CdRecycle.Item2.toString() })));
+            React__default["default"].createElement(BlueColoredText, { text: skill.CdRecycle.Item2.toString() })));
     }
     subInfoGroups.push(subInfoGroup);
 }
@@ -7099,21 +7099,20 @@ function AddRealCastConds(subInfoGroups, skill) {
         return;
     var subInfoGroup = {
         title: "Real cast conditions",
-        texts: [
-            React__default["default"].createElement("div", null,
-                "Cast condition id: ",
-                React__default["default"].createElement(ColoredText, { text: realCastCondition.Id.toString() })),
-            React__default["default"].createElement("div", null,
-                "Stance: ",
-                React__default["default"].createElement(ColoredText, { text: realCastCondition.Stance })),
-            React__default["default"].createElement("div", null,
-                "Required weapon: ",
-                React__default["default"].createElement(ColoredText, { text: realCastCondition.RequiredWeaponType })),
-            React__default["default"].createElement("div", null,
-                "Move type: ",
-                React__default["default"].createElement(ColoredText, { text: realCastCondition.MoveType }))
-        ],
+        texts: [],
     };
+    if (realCastCondition.Id != null) {
+        subInfoGroup.texts.push(React__default["default"].createElement("div", null,
+            "Id: ",
+            React__default["default"].createElement(BlueColoredText, { text: realCastCondition.Id.toString() })));
+    }
+    subInfoGroup.texts.push(React__default["default"].createElement("div", null,
+        "Stance: ",
+        React__default["default"].createElement(BlueColoredText, { text: realCastCondition.Stance })), React__default["default"].createElement("div", null,
+        "Required weapon: ",
+        React__default["default"].createElement(BlueColoredText, { text: realCastCondition.RequiredWeaponType })), React__default["default"].createElement("div", null,
+        "Move type: ",
+        React__default["default"].createElement(BlueColoredText, { text: realCastCondition.MoveType })));
     if (realCastCondition.PrevComboIds != null && realCastCondition.PrevComboIds.length > 0) {
         var subInfoGroup2 = {
             title: "Prev combo Ids",
@@ -7131,9 +7130,9 @@ function AddRealCastConds(subInfoGroups, skill) {
         realCastCondition.SuccessRecycles.forEach(function (recycle) {
             subInfoGroup3.texts.push(React__default["default"].createElement("div", null,
                 "Group: ",
-                React__default["default"].createElement(ColoredText, { text: recycle.Item1 }),
+                React__default["default"].createElement(BlueColoredText, { text: recycle.Item1 }),
                 ", Id: ",
-                React__default["default"].createElement(ColoredText, { text: recycle.Item2.toString() })));
+                React__default["default"].createElement(BlueColoredText, { text: recycle.Item2.toString() })));
         });
     }
     if (realCastCondition.FailRecycles != null && realCastCondition.FailRecycles.length > 0) {
@@ -7144,18 +7143,26 @@ function AddRealCastConds(subInfoGroups, skill) {
         realCastCondition.FailRecycles.forEach(function (recycle) {
             subInfoGroup4.texts.push(React__default["default"].createElement("div", null,
                 "Group: ",
-                React__default["default"].createElement(ColoredText, { text: recycle.Item1 }),
+                React__default["default"].createElement(BlueColoredText, { text: recycle.Item1 }),
                 ", Id: ",
-                React__default["default"].createElement(ColoredText, { text: recycle.Item2.toString() })));
+                React__default["default"].createElement(BlueColoredText, { text: recycle.Item2.toString() })));
         });
     }
     if (realCastCondition.UnnecessaryAcquired) {
         subInfoGroup.texts.push(React__default["default"].createElement("div", null,
-            React__default["default"].createElement(ColoredText, { text: "UnnecessaryAcquired true" })));
+            React__default["default"].createElement(GreenColoredText, { text: "UnnecessaryAcquired: true" })));
+    }
+    else {
+        subInfoGroup.texts.push(React__default["default"].createElement("div", null,
+            React__default["default"].createElement(RedColoredText, { text: "UnnecessaryAcquired: false" })));
     }
     if (realCastCondition.NoFlagsAndFilters) {
         subInfoGroup.texts.push(React__default["default"].createElement("div", null,
-            React__default["default"].createElement(ColoredText, { text: "NoFlagsAndFilters" })));
+            React__default["default"].createElement(GreenColoredText, { text: "FlagsAndFilters: none" })));
+    }
+    else {
+        subInfoGroup.texts.push(React__default["default"].createElement("div", null,
+            React__default["default"].createElement(RedColoredText, { text: "FlagsAndFilters: yes" })));
     }
     subInfoGroups.push(subInfoGroup);
     if (subInfoGroup2 != null)
@@ -7165,12 +7172,20 @@ function AddRealCastConds(subInfoGroups, skill) {
     if (subInfoGroup4 != null)
         subInfoGroups.push(subInfoGroup4);
 }
-function ColoredText(_a) {
+function BlueColoredText(_a) {
     var text = _a.text;
     return (React__default["default"].createElement("span", { className: "tooltipArg" }, text));
+}
+function RedColoredText(_a) {
+    var text = _a.text;
+    return (React__default["default"].createElement("span", { className: "TooltipBase_bns_upgradeRed_color" }, text));
+}
+function GreenColoredText(_a) {
+    var text = _a.text;
+    return (React__default["default"].createElement("span", { className: "00008130.UI.Label_Green03_12" }, text));
 }
 
-var css_248z$3 = ".tippy-box {\n  max-width: none !important;\n  background-color: transparent !important;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n  .tippy-box:hover {\n    box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 60px 0px !important; }\n\n.tippy-content {\n  padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff0084 !important; }\n";
+var css_248z$3 = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n.tippy-box {\n  max-width: none !important;\n  background-color: transparent !important;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n  .tippy-box:hover {\n    box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 60px 0px !important; }\n\n.tippy-content {\n  padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff0084 !important; }\n";
 styleInject(css_248z$3);
 
 var SkillTooltipWrapper = function (_a) {
@@ -7199,7 +7214,7 @@ exports.ServerRegion = void 0;
     ServerRegion["KoreaTest"] = "KoreaTest";
 })(exports.ServerRegion || (exports.ServerRegion = {}));
 
-var css_248z$2 = ".NpcTooltip_toggleBarContainer {\n  display: flex; }\n\n.NpcTooltip_toggleButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.1);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .NpcTooltip_toggleButton:hover {\n    background-color: rgba(255, 255, 255, 0.2);\n    opacity: 1; }\n  .NpcTooltip_toggleButton-active {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    color: #fff;\n    opacity: 1; }\n\n.NpcTooltip_storeEntry {\n  display: flex;\n  align-items: stretch;\n  background-color: rgba(233, 233, 233, 0.1);\n  padding: 0.33rem;\n  font-size: 14px; }\n  .NpcTooltip_storeEntry:not(:last-child) {\n    margin-bottom: 0.2rem; }\n\n.NpcTooltip_storeEntryItemNameLimit {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center; }\n\n.NpcTooltip_storeEntryItemLimit {\n  font-size: 12px; }\n\n.NpcTooltip_storeEntryItemName {\n  flex: 1;\n  display: flex;\n  align-items: center; }\n\n.NpcTooltip_storeEntryItemIconName {\n  display: flex;\n  align-items: center; }\n  .NpcTooltip_storeEntryItemIconName img {\n    width: 48px;\n    height: 48px;\n    margin-right: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntriesContainer {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  align-items: flex-end;\n  justify-content: center;\n  padding-left: 2rem; }\n\n.NpcTooltip_itemBuyPriceEntries {\n  display: flex; }\n  .NpcTooltip_itemBuyPriceEntries-moneyMargin {\n    margin-bottom: 0.2rem; }\n\n.NpcTooltip_itemBuyPriceEntry:not(:first-child) {\n  margin-left: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntryContainer {\n  position: relative;\n  height: 32px; }\n  .NpcTooltip_itemBuyPriceEntryContainer img {\n    width: 32px;\n    height: 32px; }\n  .NpcTooltip_itemBuyPriceEntryContainer-shadow {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-shadow: inset 0 0 2px 0px #000000; }\n\n.NpcTooltip_itemBuyPriceEntryCount {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  color: #ffffff;\n  background-color: rgba(0, 0, 0, 0.4);\n  width: 32px;\n  line-height: 12px;\n  text-align: center; }\n\n.NpcTooltip_moneyContainer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end; }\n  .NpcTooltip_moneyContainer_center {\n    justify-content: center; }\n  .NpcTooltip_moneyContainer > span {\n    display: flex;\n    align-items: center; }\n    .NpcTooltip_moneyContainer > span:not(:first-child) {\n      margin-left: 0.1rem; }\n    .NpcTooltip_moneyContainer > span > img {\n      width: 16px;\n      height: 16px; }\n";
+var css_248z$2 = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n.NpcTooltip_toggleBarContainer {\n  display: flex; }\n\n.NpcTooltip_toggleButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.1);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .NpcTooltip_toggleButton:hover {\n    background-color: rgba(255, 255, 255, 0.2);\n    opacity: 1; }\n  .NpcTooltip_toggleButton-active {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    color: #fff;\n    opacity: 1; }\n\n.NpcTooltip_storeEntry {\n  display: flex;\n  align-items: stretch;\n  background-color: rgba(233, 233, 233, 0.1);\n  padding: 0.33rem;\n  font-size: 14px; }\n  .NpcTooltip_storeEntry:not(:last-child) {\n    margin-bottom: 0.2rem; }\n\n.NpcTooltip_storeEntryItemNameLimit {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center; }\n\n.NpcTooltip_storeEntryItemLimit {\n  font-size: 12px; }\n\n.NpcTooltip_storeEntryItemName {\n  flex: 1;\n  display: flex;\n  align-items: center; }\n\n.NpcTooltip_storeEntryItemIconName {\n  display: flex;\n  align-items: center; }\n  .NpcTooltip_storeEntryItemIconName img {\n    width: 48px;\n    height: 48px;\n    margin-right: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntriesContainer {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  align-items: flex-end;\n  justify-content: center;\n  padding-left: 2rem; }\n\n.NpcTooltip_itemBuyPriceEntries {\n  display: flex; }\n  .NpcTooltip_itemBuyPriceEntries-moneyMargin {\n    margin-bottom: 0.2rem; }\n\n.NpcTooltip_itemBuyPriceEntry:not(:first-child) {\n  margin-left: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntryContainer {\n  position: relative;\n  height: 32px; }\n  .NpcTooltip_itemBuyPriceEntryContainer img {\n    width: 32px;\n    height: 32px; }\n  .NpcTooltip_itemBuyPriceEntryContainer-shadow {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-shadow: inset 0 0 2px 0px #000000; }\n\n.NpcTooltip_itemBuyPriceEntryCount {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  color: #ffffff;\n  background-color: rgba(0, 0, 0, 0.4);\n  width: 32px;\n  line-height: 12px;\n  text-align: center; }\n\n.NpcTooltip_moneyContainer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end; }\n  .NpcTooltip_moneyContainer_center {\n    justify-content: center; }\n  .NpcTooltip_moneyContainer > span {\n    display: flex;\n    align-items: center; }\n    .NpcTooltip_moneyContainer > span:not(:first-child) {\n      margin-left: 0.1rem; }\n    .NpcTooltip_moneyContainer > span > img {\n      width: 16px;\n      height: 16px; }\n";
 styleInject(css_248z$2);
 
 function StoreToggle(_a) {
@@ -7389,7 +7404,7 @@ function AddStores(subInfoGroups, activeTab, client, Stores) {
     });
 }
 
-var css_248z$1 = ".ItemImproveSelectStageTooltip_item {\n  cursor: pointer;\n  border: solid 1px transparent; }\n  .ItemImproveSelectStageTooltip_item:hover {\n    border: solid 1px #ffffff; }\n";
+var css_248z$1 = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n.ItemImproveSelectStageTooltip_item {\n  cursor: pointer;\n  border: solid 1px transparent; }\n  .ItemImproveSelectStageTooltip_item:hover {\n    border: solid 1px #ffffff; }\n";
 styleInject(css_248z$1);
 
 function ItemImproveSelectStageTooltip(_a) {
@@ -7419,7 +7434,7 @@ function ItemImproveSelectStageTooltip(_a) {
     return (React__default["default"].createElement(TooltipBase, __assign({}, tooltipBaseProps)));
 }
 
-var css_248z = "";
+var css_248z = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n";
 styleInject(css_248z);
 
 var ItemImproveSelectStageTooltipWrapper = function (_a) {