/* color for concept card theme */
/* end of concept card theme */
/* color:#d32841;  lipstick, for uprising stocks */
.color-up {
  color: crimson;
}

.color-up-reverse {
  background-color: crimson;
  color: white;
}

.color-up-dark {
  padding: 0px;
  margin: 0px;
  background-color: rgb(112, 2, 2);
  color: white;
}

.color-down {
  color: #00ff00;
  margin: 0px;
  padding: 0px;
}

.color-player {
  color: #246efd;
}

.color-watched {
  color: #F6C244;
}

.emab-clr {
  color: blue;
}

.emab-bg {
  background-color: blue;
  color: white;
}

.emai-clr {
  color: purple;
}

.emai-bg {
  background-color: Purple;
  color: white;
}

.emaf-clr {
  color: rgb(179, 69, 50);
}

.emaf-bg {
  background-color: rgba(179, 69, 50, 0.3);
  color: white;
}

/* Jumpbox area */
#index-board {
  position: fixed;
  top: 5px;
  left: 3px;
  padding: 10px;
  width: 250px;
  border-radius: 10px;
  background-color: #282626;
  z-index: 100;
  transition: opacity 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
#index-board .control-bar {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#index-board:hover .control-bar {
  opacity: 1;
}
#index-board:hover {
  background-color: #202020;
  z-index: 1000;
}

.index-chart {
  height: 65px;
  width: 100%;
}

.index-board-movement {
  height: 75px;
  width: 90%;
}

.dismiss-btn {
  position: absolute;
  display: inline-block;
  background-color: blueviolet;
  color: #CECECE;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  top: 7px;
  line-height: 13px;
  right: 12px;
  margin: 0px;
  padding: 0px;
}

.board-dismissbtn {
  position: absolute;
  display: inline-block;
  background-color: blueviolet;
  color: #CECECE;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  top: 7px;
  line-height: 13px;
  right: 12px;
  margin: 0px;
  padding: 0px;
}

#stock-panel-mobile {
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  top: calc(100vh - 850px);
  left: 2%;
  min-height: 200px;
  width: 96vw;
  max-width: 600px;
  background-color: #161612;
  padding: 8px 10px 10px 12px;
  display: none;
  border: 1px solid rgb(118, 68, 118);
}

#stock-panel {
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  top: calc(100vh - 850px);
  right: 3%;
  min-height: 800px;
  border-radius: 25px;
  width: 96vw;
  max-width: 600px;
  background-color: rgba(22, 22, 18, 0.88);
  backdrop-filter: blur(8px);
  padding: 0px;
  display: none;
  border: 1px solid rgb(118, 68, 118);
  transition: background-color 0.3s ease-in-out;
}
#stock-panel:hover {
  background-color: rgba(22, 22, 18, 0.95);
  backdrop-filter: blur(15px);
}
#stock-panel:hover .hide-btn {
  opacity: 1;
}
#stock-panel:hover .mcs-panel, #stock-panel:hover .bca-panel {
  opacity: 0.75;
}

#panel-head-top {
  width: 100%;
  border-radius: 25px 25px 0px 0px;
}

#panelhead-topcontainer {
  border-radius: 25px 25px 0px 0px;
  padding: 20px 20px 10px 20px;
  width: 100%;
}

#panel-head-mid {
  padding: 15px 20px 5px 20px;
  width: 100%;
}
#panel-head-mid #panel-concept-hidden {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: max-height 1.5s ease-in-out, opacity 0.8s ease-in-out;
}
#panel-head-mid:hover #panel-concept-hidden {
  max-height: 500px;
  opacity: 1;
}

#panel-head-bottom {
  padding: 5px 20px 5px 20px;
  width: 100%;
}

#panel-live-icon {
  position: absolute;
  top: -6px;
  right: 20px;
}

#etf-panel {
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  top: calc(100vh - 850px);
  right: 3%;
  min-height: 600px;
  border-radius: 25px;
  width: 96vw;
  max-width: 600px;
  background-color: #161612;
  padding: 0px;
  display: none;
  border: 1px solid rgb(39, 10, 39);
}

#etf-panel-head {
  background-color: #363537;
  padding: 20px;
  height: 150px;
  border-radius: 25px 25px 0px 0px;
}

#etf-panel-chart {
  width: 600px;
  height: 550px;
  padding: 20px;
}

#panel-minutechart {
  width: 200px;
  height: 80px;
  position: absolute;
  background-color: #161612;
  top: 20px;
  left: 250px;
}

.etf-minutechart {
  padding: 5px;
  min-width: 240px;
  height: 80px;
}

#stock-head {
  min-height: 150px;
  display: inline-block;
  width: 100%;
}

.headtop-normal {
  background-color: #2f2f2f;
}

.scroll-y {
  overflow-y: scroll;
}
.scroll-y::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
.scroll-y {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#stock-body {
  min-height: 500px;
  overflow: scroll;
  display: inline-block;
}
#stock-body::-webkit-scrollbar {
  display: none;
}
#stock-body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#stock-stats {
  overflow: scroll;
  display: inline-block;
}
#stock-stats::-webkit-scrollbar {
  display: none;
}
#stock-stats {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#live-board {
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  width: 96vw;
  background-color: rgba(22, 22, 18, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 0px 0px 25px 0px;
  display: none;
  overflow: hidden;
  position: fixed !important;
}

#live-board-headwrapper {
  background-color: #332c52;
  position: relative;
}

#live-board-head {
  border-radius: 20px 20px 0px 0px;
  width: 100%;
  height: 70px;
}

#liveboard-head-btm {
  font-size: 13px;
  font-weight: 350;
  background-color: #211d35;
  height: 32px;
  transition: background-color 0.3s ease-in-out;
}
#liveboard-head-btm:hover {
  background-color: #100e1a;
}

#live-board-prompt {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 75px;
}

#live-update-status {
  position: absolute;
  top: 15px;
  left: 90px;
  width: 50px;
}

#live-content-icon {
  position: absolute;
  top: 15px;
  left: 150px;
}

#live-board-body {
  padding: 15px 15px 30px 15px;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  position: relative;
}
#live-board-body::-webkit-scrollbar {
  display: none;
}
#live-board-body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#live-board-sidebar {
  width: 85px;
  position: absolute !important;
  left: 0px !important;
  top: 65px !important;
  z-index: 200;
}

.liveboard-sidebar-offset {
  padding-left: 85px !important;
}

#live-board-quote {
  position: absolute;
  top: 3px;
  left: 3px;
  height: 100px;
  width: 400px;
  background-color: #161612;
  z-index: 500;
}

#user-board {
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  width: 96vw;
  height: 90vh;
  background-color: rgba(20, 20, 18, 0.88);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 0px;
  display: none;
  flex-direction: column;
}

#user-board-headwrapper {
  background-color: #2e2b2b;
}

#user-board-head {
  border-radius: 20px 20px 0px 0px;
  width: 100%;
  height: 65px;
  padding: 15px;
  background-color: rgb(31, 31, 31);
}

#user-board-body {
  padding: 15px;
  width: 100%;
  flex: 1;
  overflow-y: auto;
}
#user-board-body::-webkit-scrollbar {
  display: none;
}
#user-board-body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#market-board {
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  top: 15vh;
  left: 3%;
  width: 1024px;
  background-color: #2d2b2b;
  border-radius: 20px;
  padding: 0px;
  display: none;
  border: 1px solid rgb(118, 68, 118);
  overflow: scroll;
}
#market-board::-webkit-scrollbar {
  display: none;
}
#market-board {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#market-board-head {
  padding: 15px;
  border-radius: 15px 15px 0px 0px;
  width: 100%;
  height: 50px;
}

#market-board-body {
  padding: 15px;
  width: 100%;
  height: 100%;
  overflow: scroll;
}
#market-board-body::-webkit-scrollbar {
  display: none;
}
#market-board-body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#cube-expand {
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  top: 65%;
  left: 15%;
  width: 1200px;
  z-index: 100;
  padding: 24px 20px 20px 30px;
  background-color: #161612;
  white-space: nowrap;
  border: 1px solid rgb(118, 68, 118);
  display: none;
}

#concept-board {
  /* list board is the main display windows for showing 
  */
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  background-color: #3c3838;
  width: 1480px;
  top: 6%;
  left: 5%;
  min-height: 150px;
  max-height: 95vh;
  border-radius: 15px;
  display: none;
  border: 1px solid rgba(118, 68, 118, 0.5);
  z-index: 100;
  padding: 0px;
}

#concept-board-head {
  color: silver;
  height: 130px;
  font-size: 14px;
  padding: 0px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: rgb(51, 47, 47);
}

.bg-fabric {
  background-image: url("../img/dark-green.jpeg");
  background-repeat: repeat;
}

#concept-board-body {
  padding: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px 35px;
  min-height: 550px;
  max-height: 80vh;
  overflow-y: scroll;
}
#concept-board-body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
#concept-board-body {
  overflow-x: scroll;
}
#concept-board-body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#concept-board-footer {
  font-size: 12px;
}

#concept-popup-box {
  position: absolute;
  min-width: 250px;
  max-height: 500px;
  min-height: 50px;
  background-color: silver;
  color: black;
  font-size: 12px;
  display: none;
  padding: 15px;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid gray;
}

#segmentboard-info-wrapper {
  height: 100%;
  width: 100%;
  border-radius: 15px 15px 0px 0px;
  padding: 0px;
  display: flex;
  flex-direction: row;
}

.segmentboard-title {
  height: 35px;
}

.segmentboard-browsebar {
  height: 23px;
  line-height: 23px;
  font-size: 13px;
}

#segboard-minute-chart {
  width: 120px;
  height: 72px;
}

#segment-inform-barchart {
  width: 200px;
  height: 72px;
}

#segmentboard-chartwrapper {
  background-color: rgba(51, 47, 47, 0.75);
  backdrop-filter: blur(8px);
  height: 100%;
  border-radius: 15px 0px 0px 0px;
  padding: 0px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0px;
}

#segmentboard-segment {
  height: 100%;
  width: 905px;
  padding-top: 15px;
}

#segmentboard-sector {
  height: 100%;
  width: 220px;
  border-radius: 0px 15px 0px 0px;
  padding: 0px;
  padding-top: 25px;
  font-size: 12px;
  margin: 0px;
}

#sector-board {
  /* list board is the main display windows for showing 
  */
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  width: 1520px;
  top: 6%;
  left: 5%;
  min-height: 150px;
  padding-top: 10px;
  max-height: 95vh;
  border-radius: 15px;
  display: none;
  background-color: #4a3f3f;
  box-shadow: 5px 5px 15px 0px black;
  z-index: 100;
  white-space: nowrap;
}

#sector-board-head {
  color: #e6e4e4;
  width: 100%;
  min-height: 100px;
  font-size: 14px;
}

#sector-board-content {
  padding: 15px;
  flex-wrap: wrap;
  gap: 15px 35px;
  min-height: 550px;
  max-height: 80vh;
  overflow-y: scroll;
}
#sector-board-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
#sector-board-content {
  overflow-x: scroll;
}
#sector-board-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* end of sector board  */
#float-concept-chart-wrapper {
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  bottom: 5%;
  right: 1%;
  width: 420px;
  height: 210px;
  background-color: black;
  border-radius: 15px;
  display: none;
  z-index: 1000;
}

#float-concept-chart {
  width: 100%;
  height: 100%;
  padding: 10px 1px 5px 10px;
}

#explode-chart-wrapper {
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  bottom: 5%;
  right: 1%;
  width: 420px;
  background-color: black;
  border-radius: 15px;
  display: none;
  z-index: 1000;
}

#stock-list-board {
  /* list board is the main display windows for showing 
  */
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  background-color: #252525;
  width: 96vw;
  max-width: 1440px;
  top: 6%;
  left: 2%;
  min-height: 50px;
  display: none;
  border: 1px solid rgb(118, 68, 118);
  z-index: 100;
  white-space: nowrap;
}

#stock-list-board-head {
  background-color: #38363F;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding: 12px 12px 12px 24px;
}

#stock-list-board-body {
  padding: 1px 12px 8px 12px;
  min-height: 55px;
  max-height: 85vh;
  overflow-y: scroll;
}
#stock-list-board-body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
#stock-list-board-body {
  overflow-x: scroll;
}
#stock-list-board-body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#flex-board {
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  top: 35%;
  left: 25%;
  min-width: 640px;
  min-height: 420px;
  padding: 25px 25px 25px 25px;
  background-color: #250527;
  display: none;
  z-index: 100;
}

#form-board {
  position: fixed;
  background-color: #403105;
  box-shadow: 2px 2px 5px black;
  color: rgb(131, 254, 0);
  top: 35%;
  max-width: 1440px;
  min-width: 640px;
  left: 15%;
  padding: 12px 25px 25px 25px;
  min-height: 50px;
  display: none;
  z-index: 100;
  border-radius: 20px;
}

#form-board-head {
  min-height: 25px;
}

#form-board-body {
  max-height: 90vh;
  width: 100%;
  min-height: 250px;
}

#industry-board {
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  background-color: #3E3A3A;
  top: 5%;
  left: 2%;
  min-height: 500px;
  width: 1260px;
  max-width: 1360px;
  display: none;
  border: 1px solid gray;
  padding: 0px;
  z-index: 100;
  white-space: nowrap;
}

#industry-board-head {
  background-color: #454545;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding-left: 25px;
  padding-top: 18px;
  padding-bottom: 18px;
}

#industry-board-body {
  min-height: 25px;
  padding: 12px 20px 5px 20px;
  overflow-y: scroll;
  max-height: 78vh;
}
#industry-board-body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
#industry-board-body {
  overflow-x: scroll;
}
#industry-board-body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#industry-board-footer {
  font-size: 12px;
  color: #cccccc;
  padding: 1px 12px 8px 25px;
}

#toggle-on {
  display: inline-block;
}

#toggle-off {
  display: None;
}

#portfolio-board {
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.3);
  top: 10%;
  left: 3%;
  border-radius: 25px;
  background-color: #221e1e;
  min-height: 50px;
  max-width: 94vw;
  padding: 12px 25px 25px 25px;
  display: none;
  border: 1px solid rgb(118, 68, 118);
  z-index: 100;
}

.portfolio-board-body {
  overflow-y: scroll;
}
.portfolio-board-body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.portfolio-board-footer {
  max-height: 55vh;
  overflow-y: scroll;
}
.portfolio-board-footer::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#message-box {
  position: fixed;
  top: 35%;
  left: 15%;
  min-width: 960px;
  max-width: 1560px;
  background-color: #2b3222;
  box-shadow: 2px 2px 5px black;
  color: #FEBD00;
  display: none;
  border-radius: 20px;
  padding: 5px;
  padding-left: 20px;
  z-index: 100;
}

#message-box-content {
  padding: 20px;
  min-height: 200px;
  max-height: 85vh;
  overflow-y: scroll;
  padding: 20px 25px 50px 25px;
}
#message-box-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#stock-filtrum-panel {
  position: fixed;
  display: none;
  top: 105px;
  right: 25px;
  width: 90px;
  min-height: 80px;
  font-size: 11px;
  border-radius: 13px;
  padding: 25px 10px 25px 10px;
  background-color: #2D2C26;
  z-index: 500;
}

#log-board {
  position: fixed;
  background-color: #403105;
  box-shadow: 2px 2px 5px black;
  color: rgb(131, 254, 0);
  top: 8%;
  right: 3%;
  width: 480px;
  display: None;
  padding: 25px;
  border-radius: 20px;
  padding: 5px;
  padding-left: 20px;
  z-index: 100;
}

#log-board-head {
  padding: 25px 15px 15px 15px;
  min-height: 50px;
}

#log-board-content {
  padding: 20px;
  min-height: 640px;
  max-height: 65vh;
  font-size: 12px;
  overflow-y: scroll;
}
#log-board-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#notepad {
  position: fixed;
  background-color: #403105;
  box-shadow: 2px 2px 5px black;
  color: rgb(131, 254, 0);
  top: 8%;
  right: 3%;
  width: 480px;
  display: None;
  padding: 25px;
  border-radius: 20px;
  padding: 5px;
  padding-left: 20px;
  z-index: 100;
}

#notepad-content {
  padding: 20px;
  min-height: 640px;
  max-height: 65vh;
  font-size: 12px;
  overflow-y: scroll;
}
#notepad-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#assign-popup {
  position: fixed;
  display: inline-block;
  background-color: #403105;
  box-shadow: 2px 2px 5px black;
  color: rgb(131, 254, 0);
  border-radius: 15px;
  padding: 25px;
  font-size: 14px;
  min-width: 320px;
  min-height: 200px;
  z-index: 500;
}

#watchtype-popup {
  position: fixed;
  display: inline-block;
  border-radius: 3px;
  font-size: 12px;
  padding: 15px;
  background-color: #2D2C26;
  z-index: 500;
}

#rank-board {
  position: fixed;
  top: 10%;
  left: 10px;
  border-radius: 25px;
  background-color: #403105;
  box-shadow: 2px 2px 5px black;
  color: rgb(131, 254, 0);
  z-index: 101;
  display: none;
}

#rank-board-head {
  padding: 25px 15px 15px 15px;
}

#rank-board-content {
  min-height: 320px;
  min-width: 200px;
  padding: 15px 15px 50px 15px;
  overflow-y: scroll;
}
#rank-board-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#rank-ddboard {
  position: fixed;
  display: inline-block;
  top: 8%;
  right: 3%;
  min-width: 100px;
  min-height: 240px;
  display: None;
  background-color: #403105;
  box-shadow: 2px 2px 5px black;
  color: rgb(131, 254, 0);
  border-radius: 20px;
  padding: 5px;
  padding-left: 20px;
  z-index: 100;
}

#rank-boaddrd-content {
  padding: 20px;
  min-height: 320px;
  max-height: 65vh;
  overflow-y: scroll;
}
#rank-boaddrd-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.bubble-box {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 150px;
  min-height: 150px;
  background-color: gray;
  color: white;
  font-size: 80%;
  display: none;
}

#bg-white {
  background-color: #11042C;
  min-height: 50px;
}

#dashboard {
  position: fixed;
  background-color: #191919;
  padding: 0px;
  display: none;
  width: 1440px;
  left: 15%;
  top: 8%;
  border-radius: 25px;
  border: 1px solid gray;
}

#dashboard-head {
  background-color: #38363F;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding: 1px 12px 8px 12px;
  min-height: 50px;
  padding: 25px;
}

#dashboard-body {
  padding: 25px;
  min-width: 200px;
  max-height: 80vh;
  white-space: nowrap;
  overflow-y: scroll;
}
#dashboard-body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#dashboard-footer {
  padding: 25px;
}

#spotboard {
  position: fixed;
  display: none;
  background-color: #403105;
  color: rgb(131, 254, 0);
  width: 1560px;
  left: 15%;
  top: 8%;
  border-radius: 25px;
  border: 1px solid black;
  z-index: 100;
  box-shadow: 10px 5px 5px black;
}

#spotboard-head {
  background-color: #38363F;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding: 1px 12px 8px 12px;
  min-height: 35px;
  padding: 25px;
  background-color: #38363F;
}

#spotboard-body {
  min-width: 200px;
  max-height: 90vh;
  min-height: 50vh;
  white-space: nowrap;
  padding: 0px 30px 30px 30px;
  overflow-y: scroll;
}
#spotboard-body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#tip-board {
  display: None;
  position: fixed;
  background-color: #191919;
  padding: 0px;
  width: 260px;
  right: 1%;
  top: 15%;
  border-radius: 8px;
  border: 1px solid gray;
}

#tip-board-body {
  padding: 25px;
  min-width: 200px;
  max-height: 90vh;
  white-space: nowrap;
  overflow-x: scroll;
}
#tip-board-body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.wallpaper {
  padding: 0px;
  background: black;
}

.board-wallpaper {
  padding: 0px;
  margin: 0px;
  background-color: #232320;
}

#act-board {
  position: fixed;
  background-color: #4d4325;
  padding: 0px;
  display: none;
  width: 100%;
  margin-left: 50px;
  margin-right: 50px;
  top: 100px;
  border-radius: 25px 25px 12px 12px;
  border: 1px solid #4d4325;
  -webkit-box-shadow: 0px 0px 6px 0px rgba(110, 111, 124, 0.9);
  -moz-box-shadow: 0px 0px 6px 0px rgba(164, 111, 106, 0.9);
  box-shadow: 2px 2px 8px #000000;
  z-index: 100;
}

#act-board-head {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding: 15px 20px 10px 20px;
  min-height: 98px;
}

#act-board-body {
  padding: 25px;
  max-width: 100%;
  width: 100%;
  min-height: 600px;
  max-height: 85vh;
  background-color: #3F3A3A;
  white-space: nowrap;
  overflow-y: scroll;
}
#act-board-body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#act-board-footer {
  padding: 0px 25px 25px 25px;
}

#prompt-window {
  position: fixed;
  width: 450px;
  height: 150px;
  background-color: rgb(69, 82, 2);
  border-radius: 25px;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  border: 1px solid gray;
  display: inline-block;
  z-index: 1050;
}

#tool-bar {
  position: fixed;
  display: None;
  background-color: #191919;
  font-size: 13px;
  padding: 5px 5px 5px 15px;
  width: 450px;
  height: 35px;
  right: 1%;
  top: 51px;
  border-radius: 8px;
  border: 1px solid gray;
}

.ruler {
  border: 1px solid rgb(69, 68, 68);
  min-height: 100px;
  padding: 5px;
  border-radius: 12px;
  margin-bottom: 25px;
}

#magnify-board {
  width: 1380px;
  height: 880px;
  position: fixed;
  display: none;
  right: 2%;
  bottom: 5%;
  border: 1px solid #343434;
  border-radius: 15px;
  box-shadow: 3px 3px 6px rgb(11, 1, 45);
  z-index: 100;
  background-color: rgba(29, 21, 6, 0.89);
  backdrop-filter: blur(10px);
  transition: background-color 0.3s ease-in-out;
}
#magnify-board:hover {
  background-color: rgba(29, 21, 6, 0.95);
  backdrop-filter: blur(15px);
}
#magnify-board:hover #magnify-stats {
  opacity: 1;
}
#magnify-board:hover .hide-btn {
  opacity: 1;
}

#magnify-header {
  border-radius: 15px 15px 0px 0px;
  width: 100%;
  height: 125px;
}

#magnify-stats {
  width: 100%;
  height: 20px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#magnify-chart {
  width: 100%;
  height: 686px;
  padding: 0px;
  padding-top: 10px;
}
#magnify-chart:hover #tooltip-minutechart {
  opacity: 1;
}

#magnify-inform {
  padding: 10px 10px 2px 2px;
  height: 100%;
  border-radius: 15px 15px 0px 0px;
}

#price-tooltip {
  position: absolute;
  top: 245px;
  left: 796px;
  z-index: 6000;
  font-size: 14px;
  padding: 10px;
  background-color: #191919;
}

.meta-mag {
  background-color: #3d3022;
}

#mag-minute-chart {
  position: absolute;
  width: 260px;
  height: 100px;
  top: 0px;
  left: 520px;
}

#magnify-stop-price {
  position: absolute;
  top: 650px;
  right: 130px;
  opacity: 0.7;
}

#magnify-kchart {
  width: 100%;
  height: 100%;
  padding: 0px;
  padding-top: 10px;
}

#mag-chartwrapper {
  width: 100%;
  height: 680px;
  padding: 0px;
}

#magnify-segment-chart {
  width: 100%;
  height: 680px;
  padding: 0px;
  padding-top: 10px;
  overflow: scroll;
  display: inline-block;
}
#magnify-segment-chart::-webkit-scrollbar {
  display: none;
}
#magnify-segment-chart {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#magnify-bidding {
  position: absolute;
  width: 75px;
  right: 8px;
  top: 80px;
  color: silver;
  font-weight: 450;
  font-size: 10px;
}

#magnify-sidesegbar {
  position: absolute;
  right: 480px;
  top: 10px;
  font-size: 12px;
}

#magnify-minutebar {
  position: absolute;
  top: 38px;
  left: 568px;
  display: None;
}

#magnify-dayweek-switch {
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 24px;
}

#magnify-dayweek-label {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 18px;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  color: yellow;
  border-radius: 3px;
  border: 1px solid yellow;
}

#magnify-attr {
  position: absolute;
  right: 8px;
  top: 580px;
  width: 90px;
  font-size: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

#panel-chart {
  position: relative;
}

#panel-dayweek-label {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 14px;
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  color: yellow;
  border-radius: 3px;
  border: 1px solid yellow;
}

#panel-chart-quote {
  position: absolute;
  right: 150px;
  top: 0px;
}

.weekly-kchart {
  background-color: rgba(20, 11, 20, 0.9) !important;
}

#tooltip-minutechart {
  position: absolute;
  top: 135px;
  left: 568px;
  background-color: #282930;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#magnify-live-icon {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
}

#concept-upscaleboard {
  position: fixed;
  box-shadow: 5px 5px 5px black;
  color: #CECECE;
  z-index: 100;
  position: fixed;
  top: 15%;
  left: 15%;
  max-height: 90vh;
  width: 960px;
  border-radius: 30px;
  background-color: rgba(50, 49, 46, 0.8);
  backdrop-filter: blur(10px);
  box-shadow: 3px 3px 10px 0px black;
  transition: background-color 0.3s ease-in-out;
  display: none;
}
#concept-upscaleboard:hover {
  background-color: rgba(50, 49, 46, 0.95);
}

#upscale-wrapper {
  border-radius: 30px;
}

#upscale-inform {
  border-radius: 30px 30px 0px 0px;
  padding: 0px;
}

#segment-upscale-inform {
  padding: 25px 25px 5px 25px;
  border-radius: 30px 30px 0px 0px;
}

#upscale-chartquote {
  margin-bottom: -25px;
  padding-right: 110px;
}

#upscale-barchart {
  padding: 5px 25px 15px 25px;
  border-radius: 0px 0px 30px 30px;
  height: 380px;
}

#upscaleboard-hot-stocks {
  width: 100%;
  min-height: 320px;
  overflow-y: scroll;
}
#upscaleboard-hot-stocks::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#concept-upscale-barchart {
  width: 100%;
  height: 320px;
}

.upscale-barchart {
  width: 100%;
  height: 320px;
}

#area-tooltip {
  position: fixed;
  top: 4%;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  vertical-align: center;
  border-radius: 8px;
  font-size: 14px;
  background-color: #FFAA00;
  color: black;
  display: none;
  z-index: 200;
}

.inline-concept-movement {
  display: inline-block;
  padding: 0px;
  margin: 0px;
  background-color: black;
  background-image: url("../img/dark-green.jpeg");
  background-repeat: repeat;
}

.nav-concept-chart {
  display: none;
}

#sector-nav {
  overflow: auto;
}
#sector-nav::-webkit-scrollbar {
  display: none;
}
#sector-nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#playground {
  height: 400px;
  width: 1200px;
  border-radius: 15px;
  border: 1px solid gray;
}

#portfolio-tooltip-board {
  width: 210px;
  min-height: 60px;
  display: none;
  background-color: #181812;
  position: fixed;
  font-size: 13px;
  top: 80px;
  right: 15px;
  padding: 12px;
  border-radius: 15px;
  z-index: 1000;
  border: 1px rgb(14, 236, 14) solid;
  box-shadow: 5px 5px black;
}

#scroll-up-btn {
  position: fixed;
  top: 55px;
  display: none;
  right: 15px;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid gray;
  z-index: 1000;
}

#stock-board {
  position: fixed;
  display: none;
  top: 250px;
  left: 350px;
  width: 960px;
  min-height: 800px;
  padding: 25px;
  background-color: #32312E;
  border-radius: 25px 25px 12px 12px;
  border: 1px solid rgb(118, 68, 118);
  z-index: 500;
}

#stock-board-content {
  max-height: 90vh;
  overflow-y: scroll;
}
#stock-board-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/*

    Definition of styles for concept and stock display cards.

*/
/* 
    Flexbox enabled attributes
*/
.card-selected {
  border: 1px solid red !important;
}

.conceptcard-selected,
.segmentcard-selected {
  border: 1px solid #8a2be2 !important;
}

.tech-label {
  display: inline-block;
  width: 75px;
  font-size: 15px;
  font-weight: 600;
}

.glimpse-stock-chart {
  display: inline-block;
  width: 480px;
  height: 340px;
  padding: 10px;
}

/* 
    ATTR CAT portal card
*/
.attrcat-card {
  padding: 25px;
  width: 450px;
  display: inline-block;
}

.concept-card-plate {
  display: flex;
  flex-direction: column;
  width: 420px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  background-color: #32312E;
  border-radius: 10px 10px 10px 10px;
  padding: 0px;
  box-shadow: 2px 2px 8px #000000;
  color: silver;
}

.concept-favcard-plate {
  display: flex;
  flex-direction: column;
  width: 300px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  background-color: #230529;
  border-radius: 10px 10px 10px 10px;
  padding: 0px;
  box-shadow: 2px 2px 8px #000000;
  color: silver;
}

.concept-card-plate-top {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: nowrap;
}

.concept-card-plate-topinfo {
  flex-grow: 1;
  padding: 15px;
  font-size: 10px;
}

.concept-card-plate-barchart {
  width: 280px;
  height: 160px;
  padding: 0px;
}

.concept-plate-kchart {
  width: 60px;
  height: 60px;
  padding: 10px;
  background-color: #0b0322;
  border-radius: 5px;
  flex: 0 0 auto;
}

.concept-favcard-plate-barchart {
  width: 300px;
  height: 180px;
  padding: 0px;
}

.concept-card-plate-bottom {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: start;
  min-height: 75px;
  padding: 15px;
  font-size: 10px;
}

.card-placeholder {
  padding: 15px;
  background-color: #463709;
  border-radius: 15px 15px 0px 0px;
  box-shadow: 1px 1px 5px #000000;
  padding: 5px 10px 10px 10px;
}

.conceptcard-placeholder {
  padding: 15px;
  background-color: #443504;
  border-radius: 15px 15px 0px 0px;
  box-shadow: 1px 1px 5px #000000;
  padding: 5px 10px 10px 10px;
}

.segmentcard-placeholder {
  border-radius: 15px 15px 0px 0px;
  box-shadow: 1px 1px 5px #000000;
  padding: 5px 10px 10px 10px;
  background-color: #0d2805;
}

.nonsegconceptcard-placeholder {
  padding: 15px;
  background-color: #2f2b0e;
  border-radius: 15px 15px 0px 0px;
  box-shadow: 1px 1px 5px #000000;
  padding: 5px 10px 10px 10px;
}

.card-placeholder-unmixed {
  padding: 15px;
  background-color: #463709;
  border-radius: 15px 15px 0px 0px;
  box-shadow: 1px 1px 5px #000000;
  padding: 5px 10px 10px 10px;
}

.segcard-wrapper {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 250px;
}

.segcard-wrapper:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.5);
}

.segcard-wrapper:hover .segment-userfav {
  opacity: 1 !important;
}

.segment-userfav {
  transition: opacity 0.3s ease;
}

/*
    legacy CSS attributes
*/
.concept-minicard,
.segment-minicard {
  width: 320px;
  display: inline-block;
  height: 200px;
  border: 1px solid transparent;
  background-color: #32312E;
  border-radius: 15px 15px 0px 0px;
  box-shadow: 1px 1px 5px #000000;
}

.segment-minicard-meta {
  border-radius: 15px 15px 0px 0px;
  padding: 5px 10px 10px 10px;
}

.segment-minicard-barchart {
  padding: 15px 5px 5px 10px;
}

.segment-block {
  width: 360px;
  min-height: 180px;
  padding: 15px;
}

.concept-minicard-meta,
.segment-minicard-meta {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  height: 40px;
}

.concept-minicard-barchart,
.segment-minicard-barchart {
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 10px 10px 5px 10px;
}

.concept-legendcard {
  width: 110px;
  border-radius: 8px;
  box-shadow: 1px 1px 3px #000000;
  background-color: #32312E;
  padding: 13px;
}

.concept-barbox {
  width: 220px;
  border-radius: 8px 8px 0px 0px;
  box-shadow: 1px 1px 3px #000000;
  background-color: #32312E;
  font-size: 10px;
  padding: 10px;
}

.concept-card {
  width: 380px;
  display: inline-block;
  margin: 10px;
  margin-left: 5px;
  background-color: #32312E;
  border-radius: 15px 15px 0px 0px;
  padding: 0px;
  box-shadow: 2px 2px 8px #000000;
}

.concept-card-meta {
  border-radius: 15px 15px 0px 0px;
  padding: 5px;
  padding: 8px 20px 5px 20px;
  background-color: #403437;
  color: silver;
}

.meta-font-small {
  font-size: 14px;
}

.concept-card-barchart {
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 15px;
  padding-top: 30px;
}

.stat-legend-block {
  width: 12px;
  margin-right: 1px;
  display: inline-block;
  border-radius: 2px;
  height: 12px;
  box-shadow: 1px 1px 2px black;
}

.concept-gse-label {
  display: inline-block;
  width: 24px;
  height: 24px;
  font-size: 18px;
  text-align: center;
  background: silver;
  border-radius: 2px;
  border: 1px solid gray;
}

#mini-barchart-wrapper {
  display: inline-block;
  margin: 5px;
  padding: 0px;
  background-color: #171819;
  box-shadow: 2px 2px 6px rgb(8, 3, 13);
  border-radius: 10px 10px 0px 0px;
  width: 284px;
  height: 185px;
}

.mini-barchart-meta {
  display: inline-block;
  padding-top: 5px;
  padding-left: 15px;
  padding-right: 5px;
  color: silver;
  border-radius: 10px 10px 0px 0px;
  font-size: 13px;
  width: 100%;
  height: 35px;
  background-color: #3D3935;
}

.mini-barchart {
  display: inline-block;
  margin: 5px;
  padding: 15px;
  width: 284px;
  height: 145px;
}

.cf-card-normal {
  width: 360px;
  display: inline-block;
  padding: 0px;
  margin: 0px 8px 0px 8px;
  margin: 10px 10px 15px 10px;
  padding: 0px;
}

.cf-meta-normal {
  width: 100%;
  height: 80px;
  background-color: #2E2929;
  color: silver;
  margin: 0px;
  padding: 2px;
  font-size: 14px;
  line-height: 28px;
  border-radius: 15px 15px 0px 0px;
  border: 1px 0px 0px 1px #545454 solid;
}

.cf-chart-normal {
  width: 100%;
  background-color: black;
  padding: 20px 20px 5px 20px;
  margin: 0px;
  position: relative;
}

.cf-card-trend {
  width: 450px;
  display: inline-block;
  padding: 0px;
  margin: 0px 8px 0px 8px;
  margin: 0px 10px 15px 10px;
  padding: 0px;
}

.cf-meta-trend {
  width: 100%;
  height: 65px;
  background-color: #271128;
  color: rgb(198, 196, 196);
  margin: 0px;
  padding: 2px;
  padding-top: 10px;
  font-size: 15px;
  line-height: 20px;
  border-radius: 25px 25px 0px 0px;
  border: 1px 0px 0px 1px #545454 solid;
}

.cf-card-mini {
  width: 350px;
  display: inline-block;
  padding: 0px;
  margin: 0px 8px 0px 8px;
  margin: 15px 10px 20px 10px;
  padding: 0px;
}

.cf-meta-mini {
  width: 100%;
  height: 45px;
  background-color: #413826;
  color: rgb(198, 196, 196);
  margin: 0px;
  padding: 2px;
  padding-top: 12px;
  font-size: 13px;
  line-height: 18px;
  border-radius: 15px 15px 0px 0px;
  border: 1px 0px 0px 1px #545454 solid;
}

.card-meta-title {
  font-size: 14px;
}

.cf-meta-mix {
  width: 100%;
  height: 80px;
  background-color: hsl(257, 64%, 11%);
  color: silver;
  margin: 0px;
  padding: 2px;
  font-size: 14px;
  line-height: 28px;
  border-radius: 15px 15px 0px 0px;
  border: 1px 0px 0px 1px #545454 solid;
}

.concept-card-mature {
  width: 600px;
  height: 370px;
  margin: 20px;
  padding: 20px;
  background-color: #110A2C;
}

.concept-card-favorite {
  width: 600px;
  height: 370px;
  margin: 20px;
  padding: 20px;
  background-color: #11062C;
}

.concept-card-compact {
  width: 400px;
  height: 270px;
  display: inline-block;
  margin: 5px;
  padding: 12px;
  background-color: #282828;
}

.concept-barchart-card {
  width: 100%;
  height: 180px;
}

.concept-tiny-chartcard {
  display: inline-block;
  width: 220px;
  height: 110px;
  background-color: #000;
  padding: 5px 5px 5px 5px;
  margin: 0px;
}

.concept-barchart-tiny,
.segment-barchart-tiny {
  border-radius: 3px;
  width: 230px;
  height: 100px;
}

/*      concept trend card - Styles   for */
.concept-trend-card {
  position: relative;
  background-color: #261f11;
  box-shadow: 3px 3px 1px black;
  border-radius: 25px 25px 0px 0px;
  display: inline-block;
  text-align: left;
  border-top: 1px solid rgb(49, 49, 52);
  border-left: 1px solid rgb(49, 49, 52);
  border-right: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid rgb(1, 1, 1);
  margin: 15px;
  padding: 10px;
  width: 420px;
}

/*
//  ---Created this on 10th September 2023 ----------
//
//
// Stock Cards

*/
.card-unit {
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.card-unit .st-card-tag {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-unit:hover {
  transform: translateY(-4px);
  box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.card-unit:hover .hide-btn, .card-unit:hover .st-card-footer, .card-unit:hover .st-card-tag {
  opacity: 1;
}

.st-card-footer {
  opacity: 0;
  font-family: "Courier New", Courier, monospace;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.st-card-normal {
  border-radius: 10px 10px 0px 0px;
  width: 440px;
  display: inline-block;
  padding: 0px;
  margin: 2px;
  color: silver;
  padding: 0px;
  background-color: #171819;
  box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.7);
  font-size: 12px;
  padding-bottom: 5px;
  height: 370px;
}

.st-card-subtitle {
  line-height: 20px;
  font-size: 13px;
}

.st-meta-toplead {
  font-size: 11px;
  width: 380px;
}

.st-meta-topend {
  width: 255px;
}

.st-meta-stkname {
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
}

.st-meta-sector {
  position: absolute;
  top: -15px;
  width: 100%;
  left: 0px;
}

.card-soldmap {
  position: absolute;
  top: 65px;
  left: 25px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 999;
}
.card-soldmap:hover .dismiss-soldmap {
  opacity: 1;
}

.dismiss-soldmap {
  opacity: 0;
  transition: opacity 1s ease;
}

.stockcard-mark-text {
  position: absolute;
  top: 135px;
  left: 100px;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 1.5rem;
  color: rgba(192, 192, 192, 0.5);
  pointer-events: none;
  user-select: none;
  z-index: 999;
}

.watermark {
  position: fixed;
  top: 50%;
  left: 50%;
}

.st-meta {
  width: 100%;
  height: 73px;
  border-radius: 8px 8px 0px 0px;
  padding: 8px;
  background-color: #171819;
}

.meta-normal {
  background-color: #3d3935;
}

.meta-watch {
  background-color: #545104;
}

.meta-invest {
  background-color: #554909;
}

.meta-track {
  background-color: #2a3047;
}

.meta-order {
  background-color: #2b3b01;
}

.meta-portfolio {
  background-color: #492142;
}

.meta-portfolio-minor {
  background-color: #46045e;
}

.meta-stlabeled {
  background-color: #252526;
}

.st-card-mini {
  width: 360px;
  display: inline-block;
  padding: 0px;
  margin: 0px 8px 0px 8px;
  color: silver;
  padding: 0px;
  background-color: #171819;
  margin-bottom: 15px;
}

.st-meta-mini {
  width: 360px;
  display: inline-block;
  padding: 0px;
  margin: 0px 8px 0px 8px;
  color: silver;
  padding: 0px;
  background-color: #171819;
  margin-bottom: 15px;
}

.st-chart-normal {
  width: 435px;
  height: 280px;
  margin: 0px;
  position: relative;
  padding: 2px 0px 2px 4px;
  background-color: #171819;
  transition: background-color 0.3s ease;
}
.st-chart-normal:hover .card-soldmap {
  opacity: 1;
}

.stockcard-dayweek {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 12px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  opacity: 0;
  border-radius: 3px;
  border: 1px solid yellow;
  color: yellow;
  transition: opacity 0.3s ease;
}

.show-weekly {
  opacity: 1 !important;
}

.st-chart-mini {
  width: 350px;
  height: 300px;
  margin: 0px;
  position: relative;
  padding: 15px;
}

.st-chart-graph {
  width: 100%;
  height: 100%;
  padding: 8px 2px 2px 2px;
  z-index: 50;
}

.st-card-tinyfont {
  font-size: 11px;
}

.st-card-tinyfont {
  font-size: 11px;
}

.st-card-tinyicon {
  font-size: 12px;
}

.elevated {
  box-shadow: 1px 1px 5px black;
}

/*  stock list unit attributes
 */
.stock-list-unit {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.stock-list-unit:hover {
  background-color: #32312e;
}

/*

    CSS properties for sector cards and boards

*/
.sector-card {
  width: 320px;
  height: 160px;
  border-radius: 10px 10px 10px 10px;
  display: inline-block;
  background-color: #32312e;
  box-shadow: 1px 1px 5px black;
}

.sector-card-title {
  padding: 10px;
  height: 65px;
  background-color: #383836;
}

.sector-card-body {
  padding: 10px;
}

.sector-title-icon {
  font-size: 18px;
  font-weight: 650;
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  background-color: orange;
  color: white;
}

.sector-title-icon-normal {
  font-size: 18px;
  font-weight: 650;
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  color: orange;
}

.sector-title-icon-fav {
  font-size: 18px;
  font-weight: 650;
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  background-color: red;
  color: white;
}

.sector-title {
  font-size: 16px;
}

.sector-subtitle {
  font-size: 10px;
  font-style: italic;
}

.sector-body {
  font-size: 10px;
}

.stochart-panel {
  width: 100%;
  min-height: 360px;
}

.segment-watch {
  background-color: rgb(70, 43, 57);
}

.segment-track {
  background-color: rgb(36, 45, 64);
}

.segment-ignore {
  background-color: rgb(33, 33, 33);
}

.segment-normal {
  background-color: transparent;
}

.segment-userdriftbar {
  position: absolute;
  top: -6px;
  right: -9px;
}

.segment-sectoricon {
  position: absolute;
  top: -7px;
  left: -12px;
  font-size: 12px;
  border-radius: 50%;
  border: 1px solid silver;
  background-color: black;
  height: 18px;
  width: 18px;
  line-height: 18px;
  text-align: center;
}

.charter-glow-cyan {
  -webkit-box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.9);
  -moz-box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.9);
}

.charter-glow {
  -webkit-box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.9);
  -moz-box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.9);
}

.charter-glow-red {
  -webkit-box-shadow: 0px 0px 17px 3px rgba(247, 255, 0, 0.9);
  -moz-box-shadow: 0px 0px 17px 3px rgba(247, 255, 0, 0.9);
  box-shadow: 0px 0px 17px 3px rgba(247, 255, 0, 0.9);
}

.cc-up-glow {
  -webkit-box-shadow: 0px 0px 10px 2px rgba(255, 255, 0, 0.9);
  -moz-box-shadow: 0px 0px 10px 2px rgba(255, 255, 0, 0.9);
  box-shadow: 0px 0px 10px 2px rgba(255, 255, 0, 0.9);
}

.cc-down-glow {
  -webkit-box-shadow: 0px 0px 12px 3px rgba(0, 255, 0, 0.9);
  -moz-box-shadow: 0px 0px 12px 3px rgba(0, 255, 0, 0.9);
  box-shadow: 0px 0px 12px 3px rgba(0, 255, 0, 0.9);
}

.charter-glow-red {
  -webkit-box-shadow: 0px 0px 17px 3px rgba(247, 255, 0, 0.9);
  -moz-box-shadow: 0px 0px 17px 3px rgba(247, 255, 0, 0.9);
  box-shadow: 0px 0px 17px 3px rgba(247, 255, 0, 0.9);
}

.basket-glow {
  -webkit-box-shadow: 0px 0px 7px 0px rgba(255, 255, 255, 0.9);
  -moz-box-shadow: 0px 0px 7px 0px rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 7px 0px rgba(255, 255, 255, 0.9);
  border-radius: 5px;
}

.charter-glow-down {
  -webkit-box-shadow: 0px 0px 10px 2px rgba(46, 255, 178, 0.9);
  -moz-box-shadow: 0px 0px 10px 2px rgba(46, 255, 178, 0.9);
  box-shadow: 0px 0px 10px 2px rgba(46, 255, 178, 0.9);
}

.charter-glow-up {
  -webkit-box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.9);
  -moz-box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.9);
}

.charter-glow-down {
  -webkit-box-shadow: 0px 0px 12px 5px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 0px 12px 5px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 12px 5px rgba(0, 0, 0, 0.9);
}

.movement-glow {
  -webkit-box-shadow: 0px 0px 3px 0px rgba(255, 255, 255, 0.9);
  -moz-box-shadow: 0px 0px 3px 0px rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 3px 0px rgba(255, 255, 255, 0.9);
}

.observe-glow {
  border-radius: 1px;
  padding: 1px;
  -webkit-box-shadow: 0px 0px 3px 3px rgba(255, 255, 255, 0.9);
  -moz-box-shadow: 0px 0px 3px 3px rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 3px 3px rgba(255, 255, 255, 0.9);
}

.speculate-glow {
  border-radius: 1px;
  padding: 1px;
  -webkit-box-shadow: 0px 0px 4px 4px rgba(210, 11, 224, 0.9);
  -moz-box-shadow: 0px 0px 4px 4px rgba(164, 11, 206, 0.9);
  box-shadow: 0px 0px 4px 4px rgba(210, 9, 228, 0.9);
}

.lna-glow {
  border-radius: 1px;
  padding: 1px;
  -webkit-box-shadow: 0px 0px 4px 4px rgba(116, 216, 238, 0.9);
  -moz-box-shadow: 0px 0px 4px 4px rgba(116, 216, 238, 0.9);
  box-shadow: 0px 0px 4px 4px rgba(116, 216, 238, 0.9);
}

.sector-speculate-glow {
  border-radius: 3px;
  -webkit-box-shadow: 0px 0px 18px 3px rgba(255, 255, 255, 0.9);
  -moz-box-shadow: 0px 0px 18px 3px rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 18px 3px rgba(255, 255, 255, 0.9);
}

.upward-glow {
  border-bottom: 3px solid red;
}

.border-highlight {
  border: 1px solid yellow !important;
}

.transparent-btn {
  background: none;
  border: none;
  color: none;
  border: 1px transparent;
  display: inline-block;
  padding: 0px;
  margin: 0px;
}

.t-btn {
  background: none;
  border: none;
  color: none;
  border: 1px transparent;
  display: inline-block;
  padding: 0px;
  margin: 0px;
  border: 1px solid transparent;
  transition: opacity 0.3s ease;
}
.t-btn:hover {
  opacity: 0.75;
}

.hide-btn {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.drift {
  border: 1px dashed red;
}

.pad-btn {
  background: none;
  border: none;
  color: none;
  border: 1px transparent;
  display: inline-block;
  padding: 0px;
  margin: 0px;
  border-bottom: 2px solid transparent;
}

.ts-btn {
  background: none;
  border: none;
  color: none;
  display: inline-block;
  padding: 0px;
  margin: 0px;
}

.btn-disabled {
  color: gray;
}

.btn-space {
  padding-left: 10px;
  padding-right: 10px;
}

.btn-inactive {
  pointer-events: none;
  opacity: 0.5;
}

.btn-border {
  border: 1px solid silver;
  border-radius: 2px;
  padding: 0px;
  padding-left: 2px;
  padding-right: 2px;
}

.beautify-btn {
  display: inline-block;
  min-width: 23px;
  padding: 1px;
  font-size: 18px;
}

.highlight-btn {
  background-color: yellow;
  color: black;
  display: inline-block;
  min-width: 25px;
}

.filter-btn {
  background: none;
  border: none;
  color: none;
  border: 1px transparent;
  display: inline-block;
  width: 24px;
  height: 24px;
  padding: 2px;
  font-size: 12px;
  margin: 0px;
  border-radius: 3px;
  background-color: rgb(20, 19, 19);
}

.filter-btn-active {
  background: none;
  border: none;
  color: none;
  border: 1px transparent;
  display: inline-block;
  width: 24px;
  height: 24px;
  padding: 2px;
  font-size: 12px;
  margin: 0px;
  border-radius: 3px;
  background-color: green;
  color: yellow;
  border-radius: 3px;
}

.transparent-sup-btn {
  background: none;
  border: none;
  color: none;
  border: 1px transparent;
  display: inline-block;
  font-size: 45%;
}

.transparent-btn-border {
  background: none;
  border: none;
  color: none;
  border: 1px transparent;
  display: inline-block;
  border: 1px solid gray;
  margin: 1px;
  font-style: bold;
}

.transparent-btn-gray {
  background: none;
  border: none;
  color: none;
  border: 1px transparent;
  display: inline-block;
  color: gray;
}

.transparent-btn-standard {
  background: none;
  border: none;
  color: none;
  border: 1px transparent;
  display: inline-block;
  border-radius: 10px;
}

/*
    filtrum button area 
*/
.filtrum-btn {
  width: 20px;
  height: 20px;
  padding: 1px;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  margin: 1px;
  border: 1px solid gray;
}

.filtrum-btn-mask {
  width: 20px;
  height: 20px;
  padding: 1px;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  margin: 1px;
  border: 1px solid rgb(110, 110, 110);
  color: rgb(110, 110, 110);
}

.filtrum-btn-active {
  width: 20px;
  height: 20px;
  padding: 1px;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  margin: 1px;
  background-color: red;
  color: white;
}

.filtrum-btn-active-mask {
  width: 20px;
  height: 20px;
  padding: 1px;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  margin: 1px;
  background-color: rgb(110, 110, 110);
  color: #1F1F1F;
  border: 1px solid rgb(110, 110, 110);
}

.filtrum-btn-shift {
  width: 20px;
  height: 20px;
  padding: 1px;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  margin: 1px;
  border: 1px solid gray;
  border-radius: 10px;
}

.filtrum-toggle-active {
  background-color: cyan;
  color: black;
  border-radius: 1px;
  padding: 2px;
}

.filtrum-toggle {
  border-radius: 1px;
  padding: 2px;
}

/* 
    menu-button
*/
.mainmenu-btn {
  background: none;
  border: none;
  display: inline-block;
  font-size: 13px;
  height: 100%;
  width: 80px;
  text-align: center;
  padding: 5px 0px 0px 0px;
  letter-spacing: 1px;
  font-weight: 350;
  margin-left: 5px;
  margin-right: 5px;
  font-weight: 300px;
}

.ex-submenu-btn {
  background-color: none;
  border: 1px solid gray;
  border-radius: 5px;
  min-width: 45px;
  display: inline-block;
  padding-left: 2px;
  padding-right: 2px;
}

.mainmenu-selected {
  background-color: rgba(143, 141, 141, 0.56) !important;
  color: yellow !important;
}

.mainmenu-overlight {
  color: fuchsia !important;
}

.submenu-btn {
  background: none;
  border: none;
  color: none;
  border: 1px transparent;
  display: inline-block;
  min-width: 55px;
  padding-left: 10px;
  padding-right: 10px;
  height: 23px;
}

.submenu-selected {
  background-color: navy !important;
  color: white !important;
}

.ext-submenu-btn {
  background: none;
  border: none;
  color: none;
  border: 1px transparent;
  display: inline-block;
  padding-left: 2px;
  padding-right: 2px;
  font-size: 12px;
  min-width: 35px;
}

.extmenu-btn {
  background: none;
  border: none;
  color: none;
  border: 1px transparent;
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 12px;
  min-width: 40px;
}

.ext-submenu-btn-disabled {
  background: none;
  border: none;
  color: none;
  border: 1px transparent;
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px;
  min-width: 40px;
  color: gray;
}

.watch-type {
  text-wrap: nowrap;
  text-align: center;
}

/* 
    legancy buttons
*/
.stk-name-btn {
  background: none;
  border: none;
  transition-duration: 0.2s;
}
.stk-name-btn:hover {
  color: yellow;
}

.download-button {
  text-align: center;
  color: white;
  width: 75px;
}
.download-button a {
  transition-duration: 0.25s;
}
.download-button a:link {
  text-decoration: none;
}
.download-button a:visited {
  text-decoration: none;
}
.download-button a:active {
  text-decoration: none;
}
.download-button a:hover {
  color: gray;
}

.maintain-btn {
  padding: 2px 8px 2px 8px;
  border-radius: 3px;
}

.beacon-on {
  background-color: #FF6A00;
}

.flat-btn {
  background: none;
  height: 29px;
  min-width: 80px;
  border-radius: 5px;
  border: 1px solid;
  border-color: gray;
  transition-duration: 0.2s;
  color: #CECECE;
  display: inline-block;
  font-weight: bold;
  font-size: 85%;
}
.flat-btn:hover {
  background-color: #0b0a42;
}

.flat-btn-flex {
  background: none;
  border: 1px solid;
  border-color: gray;
  border-radius: 3px;
  transition-duration: 0.2s;
  min-width: 45px;
  color: #CECECE;
  display: inline-block;
}

.flat-btn-navi {
  background: cyan;
  color: black;
  transition-duration: 0.2s;
  min-width: 50px;
  border-radius: 4px;
  line-height: 18px;
  font-size: 14px;
  border: none;
  display: inline-block;
}
.flat-btn-navi:hover {
  background-color: #615803;
}

.flat-btn-active {
  background: none;
  background-color: black;
  min-width: 80px;
  height: 29px;
  border-radius: 5px;
  border: 1px solid;
  border-color: gray;
  background-color: orange;
  transition-duration: 0.2s;
  color: black;
  display: inline-block;
  font-size: 85%;
  font-weight: bold;
}
.flat-btn-active:hover {
  background-color: gray;
}

.btm-btn-unit {
  display: inline-block;
  position: relative;
  width: 35px;
  text-align: center;
}

.liveboard-btn-unit {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 26px;
  border-radius: 5px 5px 0px 0px;
  line-height: 26px;
  text-align: center;
}

.liveboard-btmbtn-unit {
  position: relative;
  display: inline-block;
  min-width: 55px;
  height: 22px;
  border-radius: 3px;
  line-height: 22px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  transition: background-color 0.3s ease-in-out;
}
.liveboard-btmbtn-unit:hover .corner-counter {
  font-weight: 500;
}
.liveboard-btmbtn-unit:hover .t-btn {
  color: yellow !important;
}

.rnd-btn {
  width: 50px;
  height: 25px;
  margin-left: 15px;
  margin-right: 15px;
  position: relative;
  background: #94c4fe;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(31%, #94c4fe), color-stop(100%, #d3f6fe));
  background: -webkit-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
  background: -moz-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
  background: -o-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
  background: -ms-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#94c4fe", endColorstr="#d3f6fe", GradientType=0);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  border: 1px solid #4864a9;
  color: #000;
  font-size: 0.75em;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  position: relative;
}

.preset-selected {
  border-bottom: 2px solid red;
}

.item-selected {
  border-bottom: 2px solid red;
}

.tab-sector {
  width: 30px;
  height: 25px;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  line-height: 14px;
  border-radius: 5px 5px 0px 0px;
  background-color: #4c2d63;
  transition: background-color 0.3s ease;
}
.tab-sector:hover {
  background-color: gray;
}

.btn-underscore {
  border-bottom: 2px solid red;
}

.btn-underline {
  border-bottom: 2px solid red;
}

.btn-underline-fuchsia {
  border-bottom: 1px solid fuchsia;
}

.btn-highlight {
  color: yellow;
}

.btn-reflect {
  background-color: red;
  color: white !important;
}

.btn-teal {
  background-color: teal;
  border-radius: 3px;
  color: white;
}

.bg-liveboard-main {
  background-color: #211d35;
}

.bg-liveboard-sub {
  background-color: #002000;
}

.btn-gray {
  background-color: gray;
  border-radius: 3px;
}

.btn-ugly {
  background-color: #6F6B6B;
  color: white;
}

.btn-dark {
  background-color: #171819;
  color: white;
}

.btn-reflect-green {
  background-color: rgb(26, 61, 39);
  color: white;
}

.btn-reflect-yellow {
  background-color: yellow;
  color: black;
}

.btn-warning {
  background: orange;
  color: black;
}

.btn-active-red {
  background-color: red;
  color: white;
}

.btn-active-yellow {
  background-color: yellow;
  color: black;
}

.btn-selected-navi {
  background-color: black;
}

.ub-segment-btn {
  width: 60px;
  height: 30px;
  border-radius: 5px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition-duration: 0.2s;
}
.ub-segment-btn:hover {
  background-color: rbga(12, 12, 12, 0.8);
}

.userstock-btn, .usershare-btn, .soldtrans-btn {
  padding-left: 10px;
  padding-right: 10px;
  min-width: 45px;
  border-radius: 5px;
}

.scan-init {
  width: 50px;
  background-color: teal;
  color: white;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  border-radius: 5px;
  padding: 2px;
}

.mcs-I {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: rgb(135, 8, 94);
}

.mcs-S {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: rgb(98, 18, 95);
}

.mcs-N {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: rgb(0, 61, 0);
}

.mcs-M {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: rgb(3, 73, 73);
}

.mcs-M-animate {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: rgb(3, 73, 73);
  animation: animatemcsM 4s infinite;
}

@keyframes animatemcsM {
  0%, 100% {
    background: rgba(3, 73, 73, 0);
  }
  50% {
    background: rgb(3, 73, 73);
  }
}
.mcs-G {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: rgb(0, 0, 128);
}

.mcs-G-animate {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: rgb(0, 0, 128);
  border: 1px solid rgb(0, 0, 128);
  animation: animatemcsG 4s infinite;
}

@keyframes animatemcsG {
  0%, 100% {
    background: rgba(12, 12, 128, 0);
  }
  50% {
    background: rgb(9, 9, 188);
  }
}
.mcs-L {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: rgb(106, 68, 0);
}

.mcs-X {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: rgb(133, 34, 34);
}

.bca-A {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: #470457;
}

.bca-B {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: #8e0f64;
}

.bca-C {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: #dc3719;
}

.bca-D {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: #8ba013;
  color: black;
}

.bca-E {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: #178e05;
  color: black;
}

.bca-F {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  background-color: #054409;
  color: silver;
}

.stk-name {
  color: #CECECE;
}

.rlms-N {
  color: silver;
}

.rlms-TA {
  color: #BB75EF;
}

.rlms-TE {
  color: #FCCE14;
}

.rlms-TB {
  color: #bcfa2f;
}

.mcs-si {
  display: inline-block;
  text-align: center;
  width: 18px;
  height: 21px;
  font-size: 13px;
  line-height: 21px;
  font-weight: 500;
  margin: 1px;
  border-radius: 3px;
}

.bca-si {
  display: inline-block;
  text-align: center;
  width: 18px;
  height: 21px;
  font-size: 13px;
  line-height: 21px;
  font-weight: 500;
  margin: 1px;
  border-radius: 3px;
}

.text-color-A {
  color: #008A0E;
}

.text-color-B {
  color: #54C45E;
}

.text-color-C {
  color: #FCCE14;
}

.text-color-D {
  color: #FF80DF;
}

.text-color-E {
  color: #ff00fe;
}

.icon-color-A {
  color: #008A0E;
}

.icon-color-B {
  color: #54C45E;
}

.icon-color-C {
  color: #FCCE14;
}

.icon-color-D {
  color: #FF80DF;
}

.icon-color-E {
  color: #ff00fe;
}

.stat-color-A {
  color: #008A0E;
}

.stat-color-B {
  color: #54C45E;
}

.stat-color-C {
  color: #FCCE14;
}

.stat-color-D {
  color: #FF80DF;
}

.stat-color-E {
  color: #ff00fe;
}

.stat-legend-blockupscale {
  width: 16px;
  margin-right: 2px;
  display: inline-block;
  line-height: 16px;
  border-radius: 4px;
  height: 16px;
  box-shadow: 1px 1px 2px rgb(36, 35, 35);
}

.stat-legend-blockmovement {
  width: 8px;
  margin-right: 0px;
  display: inline-block;
  border-radius: 2px;
  height: 10px;
  box-shadow: 1px 1px 2px black;
}

/*
    new lat legend attributes
*/
.stat-lat-sm {
  width: 6px;
  margin-right: 0px;
  display: inline-block;
  border-radius: 1px;
  height: 6px;
  box-shadow: 1px 1px 2px black;
}

.stat-lat-lg {
  width: 16px;
  margin-right: 3px;
  display: inline-block;
  line-height: 16px;
  font-size: 11px;
  text-align: center;
  border-radius: 4px;
  height: 16px;
  box-shadow: 1px 1px 2px rgb(36, 35, 35);
}

.lat-label {
  display: inline-block;
  height: 100%;
  width: 20px;
}

.latlbl-E {
  background-color: rgb(105, 2, 67);
}

.latlbl-D {
  background-color: #990707;
}

.latlbl-C {
  background-color: #a1a404;
}

.latlbl-B {
  background-color: #253b12;
}

.latlbl-A {
  background-color: #1d2819;
}

.seglbl-E {
  background-color: rgb(105, 2, 67);
}

.seglbl-D {
  background-color: #990707;
}

.seglbl-C {
  background-color: #a1a404;
  color: black;
}

.seglbl-B {
  background-color: #253b12;
  color: gray;
}

.seglbl-A {
  background-color: #1d2819;
  color: gray;
}

.stat-gse-sm {
  width: 10px;
  margin-right: 0px;
  display: inline-block;
  font-size: 10px;
  height: 10px;
}

.lg-bg-A {
  background-color: #008A0E;
}

.lg-bg-B {
  background-color: #54C45E;
}

.lg-bg-C {
  background-color: #8e8d00;
}

.lg-bg-D {
  background-color: #cc7800;
}

.lg-bg-E {
  background-color: rgb(252, 79, 0);
}

.lg-color-A {
  color: #008A0E;
}

.lg-color-B {
  color: #54C45E;
}

.lg-color-C {
  color: #8e8d00;
}

.lg-color-D {
  color: #cc7800;
}

.lg-color-E {
  color: rgb(252, 79, 0);
}

.card-flow-A {
  background-color: #031905;
}

.card-flow-B {
  background-color: #003b05;
}

.card-flow-C {
  background-color: #534b00;
}

.card-flow-D {
  background-color: #60003b;
}

.card-flow-E {
  background-color: rgb(79, 15, 65);
}

.seg-legend-A {
  background-color: rgba(0, 138, 14, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
}

.seg-legend-B {
  background-color: rgba(84, 196, 94, 0.25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
}

.seg-legend-C {
  background-color: rgba(252, 206, 20, 0.65);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
}

.seg-legend-D {
  background-color: rgb(236, 42, 100);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
}

.seg-legend-E {
  background-color: rgb(198, 2, 198);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
}

.seg-legend-shadow {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
}

.seg-legend-A-A {
  background: linear-gradient(90deg, rgba(0, 138, 14, 0.15) 50%, rgba(0, 138, 14, 0.15) 50%);
}

.seg-legend-A-B {
  background: linear-gradient(90deg, rgba(0, 138, 14, 0.15) 50%, rgba(84, 196, 94, 0.25) 50%);
}

.seg-legend-A-C {
  background: linear-gradient(90deg, rgba(0, 138, 14, 0.15) 50%, rgba(252, 206, 20, 0.65) 50%);
}

.seg-legend-A-D {
  background: linear-gradient(90deg, rgba(0, 138, 14, 0.15) 50%, rgb(236, 42, 100) 50%);
}

.seg-legend-A-E {
  background: linear-gradient(90deg, rgba(0, 138, 14, 0.15) 50%, rgb(198, 2, 198) 50%);
}

.seg-legend-B-A {
  background: linear-gradient(90deg, rgba(84, 196, 94, 0.25) 50%, rgba(0, 138, 14, 0.15) 50%);
}

.seg-legend-B-B {
  background: linear-gradient(90deg, rgba(84, 196, 94, 0.25) 50%, rgba(84, 196, 94, 0.25) 50%);
}

.seg-legend-B-C {
  background: linear-gradient(90deg, rgba(84, 196, 94, 0.25) 50%, rgba(252, 206, 20, 0.65) 50%);
}

.seg-legend-B-D {
  background: linear-gradient(90deg, rgba(84, 196, 94, 0.25) 50%, rgb(236, 42, 100) 50%);
}

.seg-legend-B-E {
  background: linear-gradient(90deg, rgba(84, 196, 94, 0.25) 50%, rgb(198, 2, 198) 50%);
}

.seg-legend-C-A {
  background: linear-gradient(90deg, rgba(252, 206, 20, 0.65) 50%, rgba(0, 138, 14, 0.15) 50%);
}

.seg-legend-C-B {
  background: linear-gradient(90deg, rgba(252, 206, 20, 0.65) 50%, rgba(84, 196, 94, 0.25) 50%);
}

.seg-legend-C-C {
  background: linear-gradient(90deg, rgba(252, 206, 20, 0.65) 50%, rgba(252, 206, 20, 0.65) 50%);
}

.seg-legend-C-D {
  background: linear-gradient(90deg, rgba(252, 206, 20, 0.65) 50%, rgb(236, 42, 100) 50%);
}

.seg-legend-C-E {
  background: linear-gradient(90deg, rgba(252, 206, 20, 0.65) 50%, rgb(198, 2, 198) 50%);
}

.seg-legend-D-A {
  background: linear-gradient(90deg, rgb(236, 42, 100) 50%, rgba(0, 138, 14, 0.15) 50%);
}

.seg-legend-D-B {
  background: linear-gradient(90deg, rgb(236, 42, 100) 50%, rgba(84, 196, 94, 0.25) 50%);
}

.seg-legend-D-C {
  background: linear-gradient(90deg, rgb(236, 42, 100) 50%, rgba(252, 206, 20, 0.65) 50%);
}

.seg-legend-D-D {
  background: linear-gradient(90deg, rgb(236, 42, 100) 50%, rgb(236, 42, 100) 50%);
}

.seg-legend-D-E {
  background: linear-gradient(90deg, rgb(236, 42, 100) 50%, rgb(198, 2, 198) 50%);
}

.seg-legend-E-A {
  background: linear-gradient(90deg, rgb(198, 2, 198) 50%, rgba(0, 138, 14, 0.15) 50%);
}

.seg-legend-E-B {
  background: linear-gradient(90deg, rgb(198, 2, 198) 50%, rgba(84, 196, 94, 0.25) 50%);
}

.seg-legend-E-C {
  background: linear-gradient(90deg, rgb(198, 2, 198) 50%, rgba(252, 206, 20, 0.65) 50%);
}

.seg-legend-E-D {
  background: linear-gradient(90deg, rgb(198, 2, 198) 50%, rgb(236, 42, 100) 50%);
}

.seg-legend-E-E {
  background: linear-gradient(90deg, rgb(198, 2, 198) 50%, rgb(198, 2, 198) 50%);
}

.seg-lat-A {
  background: linear-gradient(90deg, rgba(0, 138, 14, 0.15) 50%, transparent 50%);
}

.seg-lat-B {
  background: linear-gradient(90deg, rgba(84, 196, 94, 0.25) 50%, transparent 50%);
}

.seg-lat-C {
  background: linear-gradient(90deg, rgba(252, 206, 20, 0.65) 50%, transparent 50%);
}

.seg-lat-D {
  background: linear-gradient(90deg, rgb(236, 42, 100) 50%, transparent 50%);
}

.seg-lat-E {
  background: linear-gradient(90deg, rgb(198, 2, 198) 50%, transparent 50%);
}

.cardmeta-wave-A {
  background-color: #031905;
}

.cardmeta-wave-B {
  background-color: #003b05;
}

.cardmeta-wave-C {
  background-color: #534b00;
}

.cardmeta-wave-D {
  background-color: #60003b;
}

.cardmeta-wave-E {
  background-color: rgb(79, 15, 65);
}

.stat-shadow-lg-A {
  box-shadow: 0px 0px 5px 5px #008A0E;
}

.stat-shadow-lg-B {
  box-shadow: 0px 0px 5px 5px #54C45E;
}

.stat-shadow-lg-C {
  box-shadow: 0px 0px 5px 5px #FCCE14;
}

.stat-shadow-lg-D {
  box-shadow: 0px 0px 5px 5px #FF80DF;
}

.stat-shadow-lg-E {
  box-shadow: 0px 0px 5px 5px #ff00fe;
}

.stat-shadow-sm-A {
  box-shadow: 0px 0px 2px 2px #008A0E;
}

.stat-shadow-sm-B {
  box-shadow: 0px 0px 2px 2px #54C45E;
}

.stat-shadow-sm-C {
  box-shadow: 0px 0px 2px 2px #FCCE14;
}

.stat-shadow-sm-D {
  box-shadow: 0px 0px 2px 2px #FF80DF;
}

.stat-shadow-sm-E {
  box-shadow: 0px 0px 2px 2px #ff00fe;
}

.seg-cell {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  margin: 2px;
  padding: 1px;
}

.seg-block {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 1px;
  padding: 2px;
}

/* 
    legacy attributes

*/
.stat-bg-A {
  background-color: #008A0E;
}

.stat-bg-B {
  background-color: #54C45E;
}

.stat-bg-C {
  background-color: #FCCE14;
}

.stat-bg-D {
  background-color: #FF80DF;
}

.stat-bg-E {
  background-color: #ff00fe;
}

.stat-theme-A {
  background-color: #13501a;
  color: black;
}

.stat-theme-B {
  background-color: #00aa0f;
  color: black;
}

.stat-theme-C {
  background-color: #b49000;
  color: white;
}

.stat-theme-D {
  background-color: #b10686;
  color: white;
}

.stat-theme-E {
  background-color: #65084d;
  color: white;
}

.background-color-a {
  background-color: #007700;
}

.background-color-b {
  background-color: #00ff00;
}

.background-color-c {
  background-color: #FFB215;
}

.background-color-d {
  background-color: #ff0000;
}

.background-color-e {
  background-color: #C078F6;
}

.fin-stake {
  color: yellow;
}

.fin-minor {
  color: gray;
}

.fin-negative {
  color: red;
}

/*

Industry colors

*/
.color-industry-1 {
  color: #007700;
}

.color-gray {
  color: gray;
}

.color-light-gray {
  color: #ced4db;
}

.color-lightsilver {
  color: #A0A0A0;
}

.color-dim {
  color: #A0A0A0;
}

.color-lightgray {
  color: lightgray;
}

.color-yellow {
  color: yellow;
}

.color-red {
  color: red;
}

.color-cyan {
  color: cyan;
}

.color-silver {
  color: silver;
}

.color-white {
  color: white;
}

.color-black {
  color: black;
}

.color-blue {
  color: blue;
}

.color-lightblue {
  color: #5cc8f2;
}

.color-green {
  color: green;
}

.color-lightgreen {
  color: #00ff00;
}

.color-orange {
  color: orange;
}

.color-purple {
  color: purple;
}

.color-pink {
  color: pink;
}

.color-brown {
  color: brown;
}

.color-gold {
  color: gold;
}

.color-skyblue {
  color: skyblue;
}

.color-lime {
  color: lime;
}

.color-pear {
  color: #BDFB50;
}

.color-puregreen {
  color: #00ff00;
}

.color-maroon {
  color: maroon;
}

.color-navy {
  color: navy;
}

.color-olive {
  color: olive;
}

.color-teal {
  color: teal;
}

.color-violet {
  color: violet;
}

.color-indigo {
  color: indigo;
}

.color-aqua {
  color: aqua;
}

.color-fuchsia {
  color: fuchsia;
}

.color-lavender {
  color: lavender;
}

.color-coral {
  color: coral;
}

.color-tomato {
  color: tomato;
}

.color-orchid {
  color: orchid;
}

.color-salmon {
  color: salmon;
}

.color-khaki {
  color: khaki;
}

.color-turquoise {
  color: turquoise;
}

.color-sienna {
  color: sienna;
}

.color-thistle {
  color: thistle;
}

.color-rosybrown {
  color: rosybrown;
}

.color-palegreen {
  color: palegreen;
}

.color-palevioletred {
  color: palevioletred;
}

.color-papayawhip {
  color: papayawhip;
}

.color-palegoldenrod {
  color: palegoldenrod;
}

.color-paleblue {
  color: paleblue;
}

.color-paleturquoise {
  color: paleturquoise;
}

.color-ubuntu {
  color: #e95420;
}

.color-apple {
  color: white;
}

.color-transparent {
  color: transparent;
}

.bg-violet {
  background-color: violet;
}

.bg-salmon {
  background-color: salmon;
}

.bg-teal {
  background-color: teal;
}

.bg-orchid {
  background-color: orchid;
}

.bg-tomato {
  background-color: tomato;
}

.bg-coral {
  background-color: coral;
}

.bg-lavender {
  background-color: lavender;
}

.bg-fuchsia {
  background-color: fuchsia;
}

.bg-aqua {
  background-color: aqua;
}

.bg-indigo {
  background-color: indigo;
}

.bg-olive {
  background-color: olive;
}

.bg-navy {
  background-color: navy;
}

.bg-maroon {
  background-color: maroon;
}

.bg-puregreen {
  background-color: #00ff00;
}

.bg-pear {
  background-color: #BDFB50;
}

.bg-lime {
  background-color: lime;
}

.bg-skyblue {
  background-color: skyblue;
}

.bg-gold {
  background-color: gold;
}

.bg-brown {
  background-color: brown;
}

.bg-pink {
  background-color: pink;
}

.bg-purple {
  background-color: purple;
}

.bg-orange {
  background-color: orange;
}

.bg-green {
  background-color: green;
}

.bg-blue {
  background-color: blue;
}

.bg-silver {
  background-color: silver;
}

.bg-cyan {
  background-color: cyan;
}

.bg-red {
  background-color: red;
}

.bg-yellow {
  background-color: yellow;
}

.bg-lightgray {
  background-color: lightgray;
}

.bg-gray {
  background-color: gray;
}

.bg-white {
  background-color: white;
}

.bg-black {
  background-color: black;
}

.bg-dim {
  background-color: #A0A0A0;
}

.bg-light-gray {
  background-color: #ced4db;
}

.bg-darkblue {
  background-color: #192841;
}

.bg-darkblue2 {
  background-color: #203354;
}

.bg-darkgreen {
  background-color: #002800;
}

.bg-chart-movement {
  background-color: #3C3A3A;
}

.bg-bottombar {
  background-color: #2d2b2b;
}

.bg-darkorange {
  background-color: #4c2500;
}

/* 

    probably legacy and obsoleted

*/
.stk-name {
  color: #CECECE;
}

.stk-name-N {
  color: silver;
}

.stk-name-TA {
  color: #BB75EF;
}

.stk-name-TE {
  color: #d6ae0e;
}

.color-star {
  background-color: rgba(204, 102, 203, 0.4);
}

.color-chinext {
  color: #ffc108;
}

.color-normal-profit {
  color: #CECECE;
}

.color-white {
  color: white;
}

.color-ignored {
  color: Gray;
}

.stk-industry {
  color: Cyan;
}

.stk-concept {
  color: #FC4359;
}

.ts-code {
  color: Yellow;
}

.background-color-b {
  background-color: #00ff00;
}

.background-color-c {
  background-color: #FFB215;
}

.background-color-d {
  background-color: #ff0000;
}

.background-color-e {
  background-color: #C078F6;
}

.text-color-a {
  color: #007700;
}

.text-color-b {
  color: #00ff00;
}

.text-color-c {
  color: #FFB215;
}

.text-color-d {
  color: #ff0000;
}

.text-color-e {
  color: #C078F6;
}

.icon-color-A {
  color: #007700;
}

.icon-color-B {
  color: #00ff00;
}

.icon-color-C {
  color: #FFB215;
}

.icon-color-D {
  color: #ff0000;
}

.icon-color-E {
  color: #C078F6;
}

.text-color-recession {
  color: #00bb00;
}

.text-nonconceptual-industry {
  color: white;
}

.color-highlight {
  color: #D7E0EB;
}

.color-grey {
  color: #4C5461;
}

.industry_0 {
  color: #552d34;
}

.industry_1 {
  color: #742b41;
}

.industry_2 {
  color: #913551;
}

.industry_3 {
  color: #b64366;
}

.industry_4 {
  color: #e45480;
}

.name-color-ta {
  color: #BB75EF;
}

.name-color-te {
  color: #FCCE14;
}

.stk-name-68 {
  color: #BB75EF;
}

.stk-name-30 {
  color: #FCCE14;
}

.pri-highlight {
  background-color: #200827;
}

.sec-highlight {
  background-color: rgb(56, 50, 50);
}

.highlight-warning {
  background-color: #FFB215;
}

.highlight-safe {
  background-color: #008A0E;
}

.highlight-danger {
  background-color: #850f0f;
}

.highlight-mature {
  background-color: #171819;
  color: white;
}

.trade-passed {
  display: inline-block;
  --circle-size: 10px;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  margin: 0px 2px;
  opacity: 0.7;
  background-color: #007700;
}

.trade-current {
  display: inline-block;
  --circle-size: 10px;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  margin: 0px 2px;
  opacity: 0.7;
  background-color: #ff0000;
}

.trade-future {
  display: inline-block;
  --circle-size: 10px;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  margin: 0px 2px;
  opacity: 0.7;
  background-color: gray;
}

.bg-grad-cyan {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(3, 105, 161, 0.25) 100%), linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 30, 60, 0.8) 100%);
}

.bg-grad-fuchsia {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.15) 0%, rgba(168, 85, 247, 0.25) 100%), linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(60, 0, 60, 0.8) 100%);
}

.low-weight {
  font-weight: 300;
}

.sub-note {
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  color: #666;
}

.mouseover-item-font {
  font-size: 13px;
  font-weight: 300;
}

.count-tiny {
  font-size: 10px;
  font-style: italic;
  font-weight: 200;
}

.title {
  font-size: 36px;
  font-weight: 450;
}

.heading {
  font-size: 24px;
  font-weight: 450;
}

.heading3 {
  font-size: 1.1rem;
}

.heading-5 {
  font-size: 12px;
  font-weight: 300;
}

.heading-retro {
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
}

.subheading {
  font-size: 13px;
  font-weight: 300;
  font-style: italic;
}

.heading-3 {
  font-size: 16px;
}

.stk-name-card {
  font-size: 15px;
  font-weight: 600;
  text-wrap: nowrap;
}

.stk-name-panel {
  font-size: 20px;
  font-weight: 600;
  text-wrap: nowrap;
}

.stk-name-magnify {
  font-size: 20px;
  font-weight: 700;
  text-wrap: nowrap;
}

.footnote-sm {
  font-size: 10px;
  font-weight: 250;
}

.body-text {
  font-size: 16px;
}

.font-bold {
  font-weight: 700;
}

.font-thin {
  font-weight: 300;
}

.font-slim {
  font-weight: 200;
}

.stat-icon {
  font-size: 12px;
}

.stat-icon-small {
  font-size: 10px;
}

.font-italic {
  font-style: italic;
}

.font-strike {
  text-decoration: line-through;
}

.font-small, .font-sm {
  font-size: 12px;
}

.font-tiny, .font-tn {
  font-size: 10px;
}

.font-medium {
  font-size: 14px;
}

.font-normal {
  font-size: 14px;
}

.stock-font-sm {
  font-size: 11px;
  font-weight: 250;
}

.font-cnt {
  font-size: 10px;
  font-style: italic;
  font-weight: 200;
}

.board-cnt {
  font-weight: 700;
  color: #fcce14;
}

.timestamp {
  font-size: 10px;
  font-weight: 250;
  color: silver;
}

.tt-label {
  font-size: 11px;
  font-weight: 250;
  color: silver;
}

.counter-sm {
  font-size: 12px;
  font-weight: 300;
  font-family: "Courier New", Courier, monospace;
}

.annotation {
  font-size: 10px;
  font-weight: 200;
}

.stk-cnt {
  font-size: 10px;
  font-style: italic;
  font-weight: 200;
}

.board-fort {
  font-size: 13px;
  font-weight: 500;
  color: fuchsia;
}

.board-wk {
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
}

.fade-weight {
  font-weight: 800;
  animation: fadeWeight 3s ease forwards;
}

@keyframes fadeWeight {
  0% {
    font-weight: 800;
  }
  100% {
    font-weight: 300;
  }
}
.strikethrough {
  text-decoration: line-through;
}

.l-title {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: inherit;
}

.l-title-lg {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.8rem;
  color: inherit;
}

.l-title-md {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.6rem;
  color: inherit;
}

.l-title-sm {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  color: inherit;
}

.l-subtitle {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.4;
  margin-bottom: 0.8rem;
  color: inherit;
  opacity: 0.8;
}

.l-subtitle-lg {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 450;
  line-height: 1.4;
  margin-bottom: 0.6rem;
  color: inherit;
  opacity: 0.8;
}

.l-subtitle-sm {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.4;
  margin-bottom: 0.4rem;
  color: inherit;
  opacity: 0.8;
}

.l-header-1 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: inherit;
}

.l-header-2 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.8rem;
  color: inherit;
}

.l-header-3 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.6rem;
  color: inherit;
}

.l-header-4 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  color: inherit;
}

.l-header-5 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.4;
  margin-bottom: 0.4rem;
  color: inherit;
}

.l-header-6 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.3rem;
  color: inherit;
}

.l-subheader {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 350;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  color: inherit;
  opacity: 0.9;
}

.l-subheader-lg {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 350;
  line-height: 1.4;
  margin-bottom: 0.6rem;
  color: inherit;
  opacity: 0.9;
}

.l-subheader-sm {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 350;
  line-height: 1.4;
  margin-bottom: 0.4rem;
  color: inherit;
  opacity: 0.9;
}

.l-paragraph {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 350;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: inherit;
}

.l-paragraph-lg {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 350;
  line-height: 1.6;
  margin-bottom: 1.2rem;
  color: inherit;
}

.l-paragraph-sm {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 350;
  line-height: 1.4;
  margin-bottom: 0.8rem;
  color: inherit;
}

.l-body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 350;
  line-height: 1.4;
  color: inherit;
}

.l-body-lg {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 350;
  line-height: 1.4;
  color: inherit;
}

.l-body-sm {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 350;
  line-height: 1.4;
  color: inherit;
}

.l-caption {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 350;
  line-height: 1.4;
  color: inherit;
  opacity: 0.7;
}

.l-caption-lg {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 350;
  line-height: 1.4;
  color: inherit;
  opacity: 0.7;
}

.l-caption-bold {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
  color: inherit;
  opacity: 0.8;
}

.l-label {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 450;
  line-height: 1.4;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.l-label-lg {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 450;
  line-height: 1.4;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.l-label-sm {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 450;
  line-height: 1.4;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.l-code {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: 350;
  line-height: 1.4;
  color: inherit;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
}

.l-code-inline {
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: 350;
  color: inherit;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
}

.l-mono {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: 350;
  line-height: 1.4;
  color: inherit;
}

.l-lead {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 350;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: inherit;
}

.l-quote {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 350;
  line-height: 1.6;
  font-style: italic;
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  color: inherit;
  opacity: 0.9;
}

.l-overline {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: inherit;
  opacity: 0.8;
}

.l-financial-value {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.4;
  text-align: right;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.l-stock-symbol {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  color: inherit;
}

.l-stock-name {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 350;
  line-height: 1.4;
  color: inherit;
  white-space: nowrap;
}

.l-percentage {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: 350;
  line-height: 1.4;
  text-align: right;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.l-text-muted {
  opacity: 0.6;
}

.l-text-emphasized {
  font-weight: 500;
}

.l-text-strong {
  font-weight: 600;
}

.l-text-light {
  font-weight: 250;
}

.l-text-italic {
  font-style: italic;
}

.l-text-uppercase {
  text-transform: uppercase;
}

.l-text-lowercase {
  text-transform: lowercase;
}

.l-text-capitalize {
  text-transform: capitalize;
}

.l-text-nowrap {
  white-space: nowrap;
}

.l-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .l-title {
    font-size: 24px;
  }
  .l-title-lg {
    font-size: 21px;
  }
  .l-header-1 {
    font-size: 21px;
  }
  .l-header-2 {
    font-size: 18px;
  }
}
@media (min-width: 1200px) {
  .l-title {
    font-size: 36px;
  }
  .l-title-lg {
    font-size: 28px;
  }
  .l-paragraph-lg {
    font-size: 16px;
  }
}
.grid-center {
  display: grid;
  place-items: center;
}

.sec-row {
  padding-top: 1px;
  padding-bottom: 1px;
}

.sec-ranking-no {
  width: 25px;
}

.sec-ranking-icon {
  width: 25px;
}

.sec-ranking-n {
  width: 95px;
}

.sec-ranking-cal {
  width: 25px;
  font-size: 12px;
}

.sec-ranking-pct {
  width: 46px;
  font-size: 14px;
  padding-right: 2px;
}

.sec-ranking-mv-dir {
  font-size: 12px;
  text-align: center;
}

.sec-ranking-watch {
  width: 45px;
}

.con-ranking-no {
  width: 25px;
}

.con-ranking-icon {
  width: 25px;
  font-size: 12px;
}

.con-ranking-n {
  width: 105px;
  font-size: 14px;
}

.con-ranking-cal {
  width: 30px;
  font-size: 12px;
}

.con-ranking-pct {
  width: 40px;
  font-size: 13px;
}

.con-ranking-tiny {
  font-size: 10px;
  font-style: italic;
  font-weight: 200;
}

.con-ranking-bar {
  width: 80px;
  height: 20px;
}

.con-ranking-watch {
  width: 45px;
}

.con-ranking-mv-dir {
  font-size: 10px;
  text-align: center;
}

.stk-ranking-n {
  width: 68px;
  text-align: center;
  font-size: 13px;
}

.stk-ranking-sym {
  width: 43px;
  opacity: 0.85;
  font-weight: 250;
}

.stk-ranking-pct {
  width: 20px;
  font-size: 11px;
  text-align: end;
}

.stk-ranking-sec {
  width: 52px;
  font-size: 10px;
  text-align: left;
  padding-left: 2px;
}

.stk-ranking-time {
  font-size: 11px;
  width: 32px;
  font-weight: 300;
  text-align: end;
}

.stk-ranking-filter {
  font-size: 12px;
  font-weight: 300;
  text-align: center;
}

.stk-ranking-tiny {
  font-size: 12px;
  text-align: center;
}

.ranking-container {
  padding-bottom: 30px;
}

.corner-counter {
  position: absolute;
  top: -3px;
  right: -25px;
  font-size: 10px;
  font-weight: 200;
  font-style: italic;
  width: 23px;
  text-align: left;
  transition: font-size 0.4s ease-in-out;
}

.corner-counter-padding {
  position: absolute;
  top: -3px;
  right: -20px;
  font-size: 10px;
  font-weight: 200;
  font-style: italic;
  width: 23px;
  text-align: left;
  transition: font-size 0.4s ease-in-out;
}

.snapin-counter {
  position: absolute;
  top: -3px;
  right: 1px;
  font-size: 10px;
  font-weight: 200;
  font-style: italic;
  text-align: right;
  transition: font-size 0.4s ease-in-out;
}

.snapin-counter-padding {
  padding-right: 15px !important;
}

.snapin-counter-padding2 {
  padding-right: 16px !important;
}

.snapin-counter-padding3 {
  padding-right: 20px !important;
}

#segment-ranking {
  width: 300px;
}
#segment-ranking #ranking-order {
  width: 100%;
  text-align: center;
  font-weight: 300;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
#segment-ranking:hover #ranking-order {
  opacity: 1;
}

.segment-tile {
  position: relative;
  color: gray;
  width: 65px;
  height: 60px;
  font-size: 12px;
  margin: 2px;
}

.segment-tile-head {
  font-size: 10px;
  color: gray;
}

.segment-tile-gse {
  position: absolute;
  width: 60px;
  height: 20px;
  padding: 1px;
  top: 20px;
  font-size: 12px;
}

.segment-tile-wav {
  position: absolute;
  width: 60px;
  height: 20px;
  padding: 1px;
  top: 40px;
  font-size: 12px;
}

#user-watch-pos {
  box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.5);
}

.stk-list-counter {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  width: 40px;
  font-size: 10px;
  color: gray;
}

.stk-list-n {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  width: 68px;
}

.stk-list-sym {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  width: 43px;
}

.stk-list-pct {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  width: 70px;
  font-weight: 500;
}

.stk-list-sec {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  width: 55px;
}

.stk-list-time {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
}

.stk-list-filter {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  width: 100px;
}

.stk-list-watch {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  width: 55px;
}

.stk-list-concepts {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  min-width: 400px;
  font-size: 12px;
}

.stock-list-row-even {
  padding-top: 3px;
  padding-bottom: 3px;
}

.stock-list-row {
  padding-top: 3px;
  padding-bottom: 3px;
  background-color: #3F3A3A;
}

.abs-btm-center {
  position: absolute;
  bottom: 5px;
  margin: auto;
}

/* 
/// Page Menu class and ID's
*/
#menu-bar {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 35px;
  line-height: 35px;
  width: 100%;
  color: #D6D6D6;
}

#menubar-index {
  position: fixed;
  top: 0px;
  left: 5px;
  height: 35px;
  font-size: 11px;
  line-height: 35px;
  font-weight: 250;
  width: 260px;
  color: #D6D6D6;
  z-index: 100;
}

#invest-submenu {
  position: fixed;
  top: 35px;
  left: 0px;
  min-height: 30px;
  height: 35px;
  font-size: 12px;
  justify-content: center;
  padding: 10px 0px 10px 0px;
  width: 100%;
  color: #abb0a6;
  background-color: rgba(29, 17, 39, 0.9);
  z-index: 50;
}

#mouseover-menu-board {
  position: fixed;
  top: 35px;
  left: 0px;
  display: none;
  min-height: 100px;
  max-height: 960px;
  max-width: 1240px;
  min-width: 640px;
  padding: 30px;
  padding-top: 15px;
  background-color: #403a3a;
  color: silver;
  z-index: 900;
  overflow-y: scroll;
}
#mouseover-menu-board::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
#mouseover-menu-board {
  border-radius: 0px 0px 15px 15px;
  box-shadow: 8px 8px 25px rgba(0, 0, 0, 0.7);
}

.pop-menu-col {
  display: flex;
  flex-direction: column;
}

#mm-userpref {
  transition: all 0.3s ease;
}

#ranking-boardstock:hover .ranking-title {
  opacity: 1;
}

.ranking-title {
  transition: opacity 0.5s ease-in-out;
  font-size: 12px;
  opacity: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 20px;
}

.bg-submenu {
  background-color: rgb(31, 31, 31);
}

.bg-menu {
  background-color: rgb(31, 31, 31);
}

.bg-dev {
  background: linear-gradient(135deg, #2d1b3d 0%, #a0122a 50%, #2d1b3d 100%);
}

.invest-submenu {
  min-height: 30px;
  font-size: 12px;
  width: 100%;
}

.invest-extmenu {
  font-size: 12px;
  width: 100%;
}

.menu-space-minor {
  width: 62px;
  padding-top: auto;
  text-align: center;
}

.index-up {
  background-color: red;
  color: white;
}

.index-down {
  background-color: green;
  background-color: #014408;
  color: white;
}

.on-trading-icon {
  width: 15px;
}

#staff-hostname {
  position: fixed;
  bottom: 50px;
  left: 10px;
  width: 300px;
  height: 50px;
  font-size: 25px;
  color: white;
  font-family: "Courier New", Courier, monospace;
  font-weight: 250;
  text-wrap: none;
  opacity: 0.3;
  z-index: 1000;
}

.mm-caption {
  min-width: 100px !important;
  display: inline-block;
  font-size: 16px;
}

#z-index-bar {
  color: yellow;
  width: 80px;
  text-align: center;
}

/*
    Containers and submenu
*/
.pos-relative {
  position: relative;
}

.sticky-top-left {
  position: absolute;
  left: 2px;
  top: 2px;
}

.sticky-btm-right {
  position: absolute;
  right: 2px;
  bottom: 2px;
}

.movement-entry {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

.concept-order-container {
  height: 120px;
  border-radius: 20px;
  padding: 5px 25px 5px 25px;
  font-size: 15px;
}

.concept-color-invest {
  background-color: #302236;
}

.concept-color-normal {
  background-color: #32312E;
}

.concept-order-chart {
  width: 180px;
}

.concept-order-meta {
  display: flex;
  flex-direction: column;
  width: 180px;
}

.concept-order-movement {
  width: 120px;
}

.concept-order-board {
  width: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.concept-order-intpct {
  width: 80px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#portal-dashboard {
  width: 1340px;
  min-height: 80px;
  transition: background-color 0.3s ease-in-out;
}
#portal-dashboard:hover {
  background-color: #202020;
}

#market-dashboard-news {
  width: 100%;
}

/* 
    invest containers 
*/
.norm-view-width {
  max-width: 1440px;
}

#invest-menubar-logo {
  position: fixed;
  top: 3px;
  right: 2px;
  font-size: 12px;
  width: 130px;
  z-index: 100;
}

#invest-content {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  top: 70px;
  flex-grow: 1;
  color: #DEDFDD;
  background-color: #474040;
  z-index: 45;
  padding-left: 25px;
  padding-right: 25px;
  transition: opacity 0.3s ease-in-out;
  overflow-y: scroll;
}
#invest-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
#invest-content {
  overflow-x: scroll;
}
#invest-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.benchmark-unit {
  width: 150px;
}

.benchmark-col {
  width: 450px;
}

.benchmark-row {
  width: 180px;
  transition: background-color 0.3s ease-in-out;
}
.benchmark-row:hover {
  background-color: #202020;
}
.benchmark-row .edit-group {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.benchmark-row:hover .edit-group {
  opacity: 1;
}

.avatar-col {
  width: 350px;
  min-height: 300px;
}

.avatar-adm-unit .avt-optionbar {
  font-size: 12px;
  font-family: "Courier New", Courier, monospace;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.avatar-adm-unit:hover .avt-optionbar {
  opacity: 1;
}

.hover-display {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.hover-anchor {
  position: relative;
}
.hover-anchor:hover .hover-display {
  opacity: 1;
}

.attradmin-avail {
  width: 400px;
  min-height: 300px;
  padding: 15px;
}

.attradmin-user {
  width: 800px;
  min-height: 300px;
  padding: 15px;
}

.attrcase-unit:hover .hover-btn {
  opacity: 1;
}

.hover-btn {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

#invest-bottombar {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 30px;
  width: auto;
  font-size: 11px;
  color: silver;
  min-height: 26px;
  padding: 3px;
  padding-bottom: 5px;
  z-index: 50;
  transition: background-color 0.5s ease;
}

.bb-idle {
  background-color: #2e2b2b;
}

.bg-bottom {
  background-color: #2e2b2b;
}

.bb-bidding-old {
  background-color: rgb(87, 57, 2);
}

.bb-session {
  background-color: rgb(61, 26, 73);
}

.bb-bidding {
  background: linear-gradient(90deg, #3d1a49 0%, #5c2d6b 25%, #3d1a49 50%, #5c2d6b 75%, #3d1a49 100%);
  background-size: 200% 100%;
  animation: bb-scroll-anim 8s linear infinite;
}

@keyframes bb-scroll-anim {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
#invest-bottomsidebar {
  position: fixed;
  top: 50px;
  right: 20px;
  width: 35px;
  height: 350px;
}

#bottomtop-bar {
  position: fixed;
  color: silver;
  left: 0;
  right: 30px;
  width: auto;
  bottom: 26px;
  height: 18px;
  font-size: 11px;
  background-color: transparent;
  z-index: 50;
}

#attr-bottombar-content {
  padding: 3px 20px 3px 20px;
  border-radius: 0px 5px 0px 0px;
}

#bottombar-userfavstock {
  width: 180px;
}

#bottombar-boardindicator {
  width: 45px;
}

#bottombar-userfavsegment {
  width: 45px;
}

#bottombar-pos {
  min-width: 25%;
}

#vertical-bar-right-bottom {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 5px;
  height: 600px;
  background-color: #2e2b2b;
  z-index: 100;
  width: 25px;
}

#mobile-bottombar {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  font-size: 14px;
  color: silver;
  min-height: 32px;
  padding: 3px;
  padding-bottom: 5px;
  background-color: #2e2b2b;
  z-index: 50;
}

#bottombar-content {
  max-width: 320px;
}

#bottombar-counter {
  min-width: 40px;
}

.port-stock-item {
  transition: background-color 0.3s ease-in-out;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 3px;
}
.port-stock-item:hover {
  background-color: black;
}

.bg-evenrow {
  background-color: #403b3b !important;
}

#login-window {
  position: fixed;
  padding: 25px;
  border-radius: 25px;
  left: 50%;
  top: 45%;
  height: 247px;
  width: 647px;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 10;
}

.login-box {
  position: relative;
  display: block;
  pointer-events: auto;
}

.login-box::after, .login-box::before {
  --angle: 0deg;
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: conic-gradient(from var(--angle), #1a1a1a, #2d1b3d, #404040, #3d2554, #2a1f3d, #1a1a1a);
  pointer-events: none;
}

.stk-hovericon-panel {
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

.portal-hover-stock {
  transition: background-color 0.3s ease-in-out;
}
.portal-hover-stock:hover {
  background-color: #202020;
}
.portal-hover-stock:hover .stk-hovericon-panel {
  display: block;
  opacity: 1;
}

#power-sector {
  width: 300px;
  padding: 10px;
}
#power-sector .sector-unit {
  width: 100%;
  padding: 4px;
  justify-content: flex-start;
  transition: background-color 0.3s ease-in-out;
}
#power-sector .sector-unit:hover {
  background-color: gray;
}
#power-sector .sector-icon {
  width: 45px;
}
#power-sector .hover-shadow {
  background: transparent;
  padding: 2px;
  transition: background-color 0.3s ease-in-out;
}
#power-sector .hover-shadow:hover {
  background-color: black;
}
#power-sector .hover-border {
  border: 1px solid transparent;
  transition: border-color 0.3s ease-in-out;
}
#power-sector .hover-border:hover {
  border: 1px solid black;
}

.power-sector-legend {
  width: 125px;
}

.power-fav-icon {
  width: 30px;
  text-align: center;
}

#attrstock-stockarea {
  transition: background 0.3s ease;
}

#attr-initial-selector {
  min-width: 75px;
  padding-left: 35px;
  padding-right: 35px;
}

#power-segmentset {
  width: 1200px;
  align-items: start;
}

.sector-icon {
  width: 15px;
  text-align: center;
}

.power-sectorsegment-head {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.power-sectorname {
  width: 75px;
}

.scan-delete-btn {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.scan-unit:hover .scan-delete-btn {
  opacity: 1;
}

/* 
    Flex related classes

*/
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-newline {
  flex: 1 0 100%;
}

.newline {
  flex: 1 0 100%;
}

.content-start {
  justify-content: flex-start;
}

.content-end {
  justify-content: flex-end;
}

.content-center {
  justify-content: center;
}

.content-evenly {
  justify-content: space-evenly;
}

.content-space-between {
  justify-content: space-between;
}

.vertical-center {
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.align-items-center {
  align-items: center;
  align-content: center;
}

.j-cnt-center {
  justify-content: center;
}

.j-cnt-start {
  justify-content: flex-start;
}

.j-cnt-end {
  justify-content: flex-end;
}

.j-cnt-space-between {
  justify-content: space-between;
}

.j-cnt-space-around {
  justify-content: space-around;
}

.j-cnt-space-evenly {
  justify-content: space-evenly;
}

.jc-center {
  justify-content: center;
}

.jc-start {
  justify-content: flex-start;
}

.jc-end {
  justify-content: flex-end;
}

.jc-space-between {
  justify-content: space-between;
}

.jc-space-around {
  justify-content: space-around;
}

.jc-space-evenly {
  justify-content: space-evenly;
}

.ac-start {
  align-content: flex-start;
}

.ac-end {
  align-content: flex-end;
}

.ac-center {
  align-content: center;
}

.ac-stretch {
  align-content: stretch;
}

.ac-space-around {
  align-content: space-around;
}

.ac-space-between {
  align-content: space-between;
}

.a-cnt-start {
  align-content: flex-start;
}

.a-cnt-end {
  align-content: flex-end;
}

.a-cnt-center {
  align-content: center;
}

.a-cnt-stretch {
  align-content: stretch;
}

.a-cnt-space-around {
  align-content: space-around;
}

.a-cnt-space-between {
  align-content: space-between;
}

.items-center {
  align-items: center;
}

.items-stretch {
  align-items: stretch;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.flex-item-end {
  align-self: flex-end;
}

.flexcol-end {
  align-items: flex-end;
}

.flex-align-end {
  margin-left: auto;
}

.flex-line {
  width: 85%;
  display: inline-block;
  align-self: center;
  border-top: 1px solid silver;
  padding: 3px;
}

.flex-line-gray {
  width: 85%;
  display: inline-block;
  align-self: center;
  border-top: 1px solid rgba(150, 150, 150, 0.6);
  margin-top: 15px;
  margin-bottom: 15px;
}

.flex-grow {
  flex-grow: 1;
}

.flex-nogrow {
  flex-grow: 0;
}

.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.f-full-width {
  flex: 1;
  width: 100%;
}

.title-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-gap-0 {
  row-gap: 0px;
}

.row-gap-1 {
  row-gap: 5px;
}

.row-gap-2 {
  row-gap: 10px;
}

.row-gap-3 {
  row-gap: 15px;
}

.row-gap-4 {
  row-gap: 20px;
}

.row-gap-5 {
  row-gap: 25px;
}

.row-gap-10 {
  row-gap: 50px;
}

.row-gap-15 {
  row-gap: 75px;
}

.row-gap-p1 {
  row-gap: 1px;
}

.row-gap-p2 {
  row-gap: 2px;
}

.row-gap-p3 {
  row-gap: 3px;
}

.row-gap-p4 {
  row-gap: 4px;
}

.col-gap-0 {
  column-gap: 0px;
}

.col-gap-1 {
  column-gap: 5px;
}

.col-gap-2 {
  column-gap: 10px;
}

.col-gap-3 {
  column-gap: 15px;
}

.col-gap-4 {
  column-gap: 20px;
}

.col-gap-5 {
  column-gap: 25px;
}

.col-gap-10 {
  column-gap: 50px;
}

.col-gap-15 {
  column-gap: 75px;
}

.col-gap-p1 {
  column-gap: 1px;
}

.col-gap-p2 {
  column-gap: 2px;
}

.col-gap-p3 {
  column-gap: 3px;
}

.col-gap-p4 {
  column-gap: 4px;
}

.gap-0 {
  gap: 0px;
}

.gap-1 {
  gap: 5px;
}

.gap-2 {
  gap: 10px;
}

.gap-3 {
  gap: 15px;
}

.gap-4 {
  gap: 20px;
}

.gap-5 {
  gap: 25px;
}

.gap-10 {
  gap: 50px;
}

.gap-15 {
  gap: 75px;
}

.gap-p1 {
  gap: 1px;
}

.gap-p2 {
  gap: 2px;
}

.gap-p3 {
  gap: 3px;
}

.gap-p4 {
  gap: 4px;
}

.f-gap-0 {
  gap: 0px;
}

.f-gap-1 {
  gap: 5px;
}

.f-gap-2 {
  gap: 10px;
}

.f-gap-3 {
  gap: 15px;
}

.f-gap-4 {
  gap: 20px;
}

.f-gap-5 {
  gap: 25px;
}

.f-gap-6 {
  gap: 30px;
}

.f-gap-7 {
  gap: 35px;
}

.f-gap-8 {
  gap: 40px;
}

.f-gap-9 {
  gap: 45px;
}

.f-gap-10 {
  gap: 50px;
}

.f-gap-15 {
  gap: 75px;
}

.gap-p1 {
  gap: 1px;
}

.gap-p2 {
  gap: 2px;
}

.gap-p3 {
  gap: 3px;
}

.gap-p4 {
  gap: 4px;
}

.mb-10 {
  margin-bottom: 100px;
}

/* 
 stock related CSS attributes
*/
.mcs-card {
  position: absolute;
  display: inline-block;
  opacity: 0.65;
  transition: opacity 0.3s ease-in-out;
  width: 50px;
  height: 50px;
  font-size: 32px;
  font-weight: 700;
  top: 10px;
  left: 10px;
}

.bca-card {
  position: absolute;
  display: inline-block;
  opacity: 0.65;
  transition: opacity 0.3s ease-in-out;
  width: 50px;
  height: 50px;
  font-size: 32px;
  font-weight: 700;
  top: 10px;
  left: 65px;
}

.mcs-panel {
  position: absolute;
  display: inline-block;
  opacity: 0.65;
  transition: opacity 0.3s ease-in-out;
  width: 80px;
  height: 80px;
  font-size: 50px;
  font-weight: 700;
  top: 20px;
  left: 10px;
}

.bca-panel {
  position: absolute;
  display: inline-block;
  opacity: 0.65;
  transition: opacity 0.3s ease-in-out;
  width: 80px;
  height: 80px;
  font-size: 50px;
  font-weight: 700;
  top: 20px;
  left: 95px;
}

.mcs-magnify {
  position: absolute;
  display: inline-block;
  opacity: 0.65;
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  display: inline-block;
  opacity: 0.65;
  transition: opacity 0.3s ease-in-out;
  width: 120px;
  height: 120px;
  top: 25px;
  font-size: 80px;
  font-weight: 800;
  left: 300px;
}

.bca-magnify {
  position: absolute;
  display: inline-block;
  opacity: 0.65;
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  display: inline-block;
  opacity: 0.65;
  transition: opacity 0.3s ease-in-out;
  width: 120px;
  height: 120px;
  top: 25px;
  font-size: 80px;
  font-weight: 800;
  left: 430px;
}

.stock-minutechart {
  width: 200px;
  height: 80px;
}

.concept-locked {
  border: 1px solid rgba(169, 169, 169, 0.5);
  padding: 1px;
}

.concept-unlocked {
  border: 1px solid rgba(169, 169, 169, 0);
  padding: 1px;
}

.stk-ls-counter {
  width: 20px;
  font-size: 10px;
  font-style: italic;
  font-weight: 200;
  text-align: end;
}

.stk-ls-name {
  font-size: 12px;
  width: 60px;
  text-align: center;
}

.stk-ls-sec {
  font-size: 12px;
  width: 60px;
  text-align: left;
  margin-left: 10px;
}

.stk-ls-symbol {
  font-size: 12px;
  width: 60px;
  font-weight: 350;
}

.stk-ls-marketcap {
  font-size: 12px;
  width: 30px;
  font-weight: 450;
}

.stk-ls-industry {
  font-size: 12px;
  width: 60px;
  text-align: left;
}

.stk-ls-price {
  font-size: 12px;
  width: 45px;
}

.stk-ls-icon {
  font-size: 12px;
  width: 20px;
}

.stk-ls-chg-pct {
  font-size: 12px;
  width: 55px;
  background-color: #222222;
  border-radius: 3px;
}

.stk-ls-filtrum {
  font-size: 12px;
  width: 85px;
}

.stk-ls-mixcon-container {
  font-size: 12px;
  min-width: 300px;
  font-size: 12px;
  margin-left: 10px;
}

.estm-concept {
  font-size: 12px;
  font-weight: 250;
}

.estm-concept-aux {
  font-size: 10px;
  font-weight: 300;
}

/*
    position 
*/
.stk-pos-shares {
  font-size: 12px;
  font-size: 11px;
  width: 40px;
}

.stk-pos-value {
  font-size: 12px;
  width: 65px;
}

.stk-pos-cost {
  font-size: 12px;
  width: 60px;
}

.stk-pos-pl-pct {
  font-size: 12px;
  width: 60px;
}

.stk-pos-pl {
  font-size: 12px;
  width: 70px;
}

.fin-cat {
  font-size: 12px;
  font-weight: 250;
  text-align: right;
  width: 35px;
  font-weight: 450;
}

.fin-item {
  font-size: 12px;
  font-weight: 250;
  text-align: right;
  text-wrap: wrap;
  width: 100px;
}

.fin-amount {
  font-size: 12px;
  font-weight: 250;
  text-align: right;
  width: 60px;
}

.fin-pct {
  font-size: 12px;
  font-weight: 250;
  text-align: right;
  width: 45px;
}

.panel-segment {
  font-size: 13px;
}

.panel-concept {
  font-size: 9px;
  font-weight: 400;
}

.panel-estm {
  font-size: 8px;
}

.hm-BL {
  font-size: 9px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-left: 1px;
  background-color: #292525;
}

.hm-BM {
  font-size: 9px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-left: 1px;
  background-color: #967d7d;
}

.hm-BX {
  font-size: 9px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-left: 1px;
  background-color: #ab2727;
}

.hm-AO {
  font-size: 9px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-left: 1px;
  background-color: fuchsia;
}

.hm-AF {
  font-size: 9px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-left: 1px;
  background-color: #5e1740;
}

.hm-AP {
  font-size: 9px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-left: 1px;
  background-color: #6e7a16;
}

.user-watch-plate .plate-btn {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.user-watch-plate:hover .plate-btn {
  opacity: 1;
}

.concept-inform-observed {
  background-color: #2f0528;
}

.concept-inform-ignored {
  background-color: #0e3b04;
  opacity: 0.8;
}

.concept-mix {
  font-size: 15px;
}

.concept-mixed {
  font-size: 13px;
  font-weight: 350;
}

.concept-stage {
  font-size: 13px;
  font-weight: 250;
}

.concept-suspend {
  font-size: 12px;
  font-weight: 350;
}

.concept-ignore {
  font-size: 12px;
  font-weight: 250;
}

.concept-filter {
  font-size: 12px;
  font-weight: 250;
}

.stake-con {
  border-radius: 3px;
  padding: 2px 4px 2px 4px;
  background-color: black;
  border: 1px solid gray;
}

.norm-con {
  border-radius: 3px;
  padding: 2px 4px 2px 4px;
  border: 1px solid rgba(0, 0, 0, 0);
}

.icon-block {
  font-size: 15px;
  display: inline-block;
  margin: 1px;
  width: 16px;
  height: 20px;
  text-align: center;
}

/*  foreground series */
.fltr-cap {
  width: 16px;
  height: 18px;
  font-size: 10px;
  font-weight: 300;
  line-height: 18px;
  display: inline;
  text-align: center;
  border-radius: 2px;
}

.fltr-board {
  width: 16px;
  height: 18px;
  font-size: 10px;
  font-weight: 300;
  line-height: 18px;
  display: inline;
  text-align: center;
  border-radius: 2px;
}

/*  background-series series */
.fltr-cap-bg {
  width: 16px;
  height: 18px;
  font-size: 10px;
  font-weight: 300;
  line-height: 18px;
  display: inline;
  text-align: center;
  border-radius: 2px;
  background-color: #200827;
  color: silver;
}

.fltr-board-bg {
  width: 16px;
  height: 18px;
  font-size: 10px;
  font-weight: 300;
  line-height: 18px;
  display: inline;
  text-align: center;
  border-radius: 2px;
  background-color: #200827;
  color: silver;
}

/* 
    CHARTER & MOVEMENT 
*/
.radius-2 {
  border-radius: 2px;
}

.radius-4 {
  border-radius: 4px;
}

.radius-6 {
  border-radius: 6px;
}

.radius-8 {
  border-radius: 8px;
}

.lat-osc-ao {
  border-radius: 2px;
  width: 20px;
  height: 20px;
  margin-right: 1px;
  font-size: 8px;
  display: inline-block;
  background-color: blue;
}

.lat-osc-bx {
  border-radius: 2px;
  width: 20px;
  height: 20px;
  margin-right: 1px;
  font-size: 8px;
  display: inline-block;
  background-color: red;
}

.lat-osc-bm {
  border-radius: 2px;
  width: 20px;
  height: 20px;
  margin-right: 1px;
  font-size: 8px;
  display: inline-block;
  background-color: #aaff00;
}

.lat-osc-bl {
  border-radius: 2px;
  width: 20px;
  height: 20px;
  margin-right: 1px;
  font-size: 8px;
  display: inline-block;
  background-color: green;
}

.lat-osc-af {
  border-radius: 2px;
  width: 20px;
  height: 20px;
  margin-right: 1px;
  font-size: 8px;
  display: inline-block;
  background-color: rgb(19, 3, 76);
}

.lat-osc-ap {
  border-radius: 2px;
  width: 20px;
  height: 20px;
  margin-right: 1px;
  font-size: 8px;
  display: inline-block;
  background-color: rgb(17, 3, 43);
}

.cc-move-up {
  display: inline-block;
  display: none;
  width: 55px;
  height: 18px;
  margin-right: 28px;
  text-align: left;
  font-size: 12px;
  padding-bottom: 0px;
  vertical-align: top;
  color: #ff0000;
}

.cc-move-upbig {
  display: inline-block;
  display: none;
  width: 55px;
  height: 18px;
  margin-right: 28px;
  text-align: left;
  font-size: 12px;
  padding-bottom: 0px;
  vertical-align: top;
  color: #ff0000;
}

.cc-move-down {
  display: inline-block;
  display: none;
  width: 55px;
  height: 18px;
  margin-right: 28px;
  text-align: left;
  font-size: 12px;
  padding-bottom: 0px;
  vertical-align: top;
  color: #00ff00;
}

.cc-move-downbig {
  display: inline-block;
  display: none;
  width: 55px;
  height: 18px;
  margin-right: 28px;
  text-align: left;
  font-size: 12px;
  padding-bottom: 0px;
  vertical-align: top;
  color: #00ff00;
}

.cc-move-flat {
  display: inline-block;
  display: none;
  width: 55px;
  height: 18px;
  margin-right: 28px;
  text-align: left;
  font-size: 12px;
  padding-bottom: 0px;
  vertical-align: top;
  color: white;
}

.cc-movement-wrapper {
  width: 55px;
  margin: 0px;
  line-height: 8px;
  margin-right: 18px;
  margin-left: 2px;
  padding: 0px;
  text-align: left;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

.move-up {
  display: inline-block;
  height: 8px;
  width: 5px;
  margin-right: 1px;
  border-radius: 1px;
  background-color: #ff0000;
}

.move-up-5th {
  display: inline-block;
  height: 8px;
  background-color: #ff0000;
  width: 1px;
  border-radius: 1px;
}

.move-down {
  display: inline-block;
  height: 8px;
  width: 5px;
  margin-right: 1px;
  border-radius: 1px;
  background-color: #00cc00;
}

.move-down-5th {
  height: 8px;
  display: inline-block;
  width: 1px;
  background-color: #00cc00;
  border-radius: 1px;
}

.move-flat {
  display: inline-block;
  height: 8px;
  width: 5px;
  margin-right: 1px;
  border-radius: 1px;
  border-radius: 2px;
  background-color: gray;
}

.cc-movement-wrapper-small {
  display: inline-block;
  width: 51px;
  margin: 0px;
  line-height: 10px;
  margin-right: 1px;
  padding: 0px;
  text-align: center;
}

/*  
   AC charter block definitions. "ac" stands for advanced charter??  

*/
.ac-block {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  height: 25px;
  width: 70px;
  margin-right: 5px;
}

.ac-a-low {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  height: 25px;
  font-family: "Courier New", Courier, monospace;
  width: 35px;
  text-align: center;
  font-size: 9px;
  border-radius: 5px;
  background-color: #003300;
  color: #00bb00;
}

.ac-a-high {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  height: 25px;
  font-family: "Courier New", Courier, monospace;
  width: 35px;
  text-align: center;
  font-size: 9px;
  border-radius: 5px;
  background-color: #003300;
  color: #00ff00;
}

.ac-b {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  height: 25px;
  font-family: "Courier New", Courier, monospace;
  width: 35px;
  text-align: center;
  font-size: 9px;
  border-radius: 5px;
  background-color: #008800;
}

.ac-c {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  height: 25px;
  font-family: "Courier New", Courier, monospace;
  width: 35px;
  text-align: center;
  font-size: 9px;
  border-radius: 5px;
  background-color: #aaff00;
  color: black;
}

.ac-d {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  height: 25px;
  font-family: "Courier New", Courier, monospace;
  width: 35px;
  text-align: center;
  font-size: 9px;
  border-radius: 5px;
  background-color: #aa0000;
}

.ac-e {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  height: 25px;
  font-family: "Courier New", Courier, monospace;
  width: 35px;
  text-align: center;
  font-size: 9px;
  border-radius: 5px;
  background-color: #660000;
  color: white;
}

.state-A {
  display: inline-block;
  width: 38px;
  line-height: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
  margin: 0px;
  background-color: #003300;
  color: #00bb00;
}

.state-B {
  display: inline-block;
  width: 38px;
  line-height: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
  margin: 0px;
  background-color: #008800;
}

.state-C {
  display: inline-block;
  width: 38px;
  line-height: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
  margin: 0px;
  background-color: #aaff00;
  color: #000000;
}

.state-D {
  display: inline-block;
  width: 38px;
  line-height: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
  margin: 0px;
  background-color: #aa0000;
}

.state-E {
  display: inline-block;
  width: 38px;
  line-height: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
  margin: 0px;
  background-color: #660000;
  color: white;
}

.state-A-sm {
  display: inline-block;
  width: 15px;
  line-height: 15px;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  border-radius: 3px;
  margin-left: -6px;
  margin-top: -8px;
  background-color: #003300;
  color: #00bb00;
}

.state-B-sm {
  display: inline-block;
  width: 15px;
  line-height: 15px;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  border-radius: 3px;
  margin-left: -6px;
  margin-top: -8px;
  background-color: #008800;
}

.state-C-sm {
  display: inline-block;
  width: 15px;
  line-height: 15px;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  border-radius: 3px;
  margin-left: -6px;
  margin-top: -8px;
  background-color: #aaff00;
  color: #000000;
}

.state-D-sm {
  display: inline-block;
  width: 15px;
  line-height: 15px;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  border-radius: 3px;
  margin-left: -6px;
  margin-top: -8px;
  background-color: #aa0000;
}

.state-E-sm {
  display: inline-block;
  width: 15px;
  line-height: 15px;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  border-radius: 3px;
  margin-left: -6px;
  margin-top: -8px;
  background-color: #660000;
  color: white;
}

.state-btn-A {
  display: inline-block;
  padding: 0px;
  width: 15px;
  text-align: center;
  height: 15px;
  font-size: 10px;
  font-weight: 500;
  border: none;
  border-radius: 3px;
  transition-duration: 0.5s;
}
.state-btn-A:hover {
  opacity: 0.75;
}
.state-btn-A {
  background-color: #003300;
  color: #00bb00;
}

.state-btn-B {
  display: inline-block;
  padding: 0px;
  width: 15px;
  text-align: center;
  height: 15px;
  font-size: 10px;
  font-weight: 500;
  border: none;
  border-radius: 3px;
  transition-duration: 0.5s;
}
.state-btn-B:hover {
  opacity: 0.75;
}
.state-btn-B {
  background-color: #008800;
  color: yellow;
}

.state-btn-C {
  display: inline-block;
  padding: 0px;
  width: 15px;
  text-align: center;
  height: 15px;
  font-size: 10px;
  font-weight: 500;
  border: none;
  border-radius: 3px;
  transition-duration: 0.5s;
}
.state-btn-C:hover {
  opacity: 0.75;
}
.state-btn-C {
  background-color: #aaff00;
  color: #000000;
}

.state-btn-D {
  display: inline-block;
  padding: 0px;
  width: 15px;
  text-align: center;
  height: 15px;
  font-size: 10px;
  font-weight: 500;
  border: none;
  border-radius: 3px;
  transition-duration: 0.5s;
}
.state-btn-D:hover {
  opacity: 0.75;
}
.state-btn-D {
  background-color: #aa0000;
  color: white;
}

.state-btn-E {
  display: inline-block;
  padding: 0px;
  width: 15px;
  text-align: center;
  height: 15px;
  font-size: 10px;
  font-weight: 500;
  border: none;
  border-radius: 3px;
  transition-duration: 0.5s;
}
.state-btn-E:hover {
  opacity: 0.75;
}
.state-btn-E {
  background-color: #660000;
  color: white;
}

/* ac-break */
.ac-break-up {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  height: 25px;
  width: 19px;
  text-align: center;
  margin-left: 1px;
  border-radius: 0px 3px 3px 0px;
  font-size: 16px;
  color: #FFA500;
}

.ac-break-down {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  height: 25px;
  width: 19px;
  text-align: center;
  margin-left: 1px;
  border-radius: 0px 3px 3px 0px;
  font-size: 16px;
  color: #00ff00;
  font-size: 12px;
}

.ac-break-flat {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  height: 25px;
  width: 19px;
  text-align: center;
  margin-left: 1px;
  border-radius: 0px 3px 3px 0px;
  font-size: 16px;
  background-color: None;
  color: None;
}

.ac-aplus {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  height: 25px;
  width: 15px;
  height: 13px;
  line-height: 13px;
  text-align: center;
  color: yellow;
  border-radius: 6px;
  font-size: 12px;
}

/* 
    Miscellenous
*/
.stat-unit {
  width: 40px;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  display: inline-block;
  text-align: right;
  margin-left: 2px;
  border-radius: 2px;
  padding: 2px;
}

.portrait {
  height: 65px;
  display: inline-block;
  border-radius: 10px;
  box-shadow: 5px 5px 20px #ccc;
}

.vol-pct-bar-unit {
  height: 12px;
  width: 1px;
  display: inline-block;
  background-color: gray;
}

/* 
    OSC & Tagging  
*/
.oscillo-c {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: #ff0000;
  color: white;
}

.oscillo-c-nbg {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: black;
  color: #ffff00;
}

.oscillo-ad {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  color: #ffaa00;
}

.oscillo-d {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: #990000;
}

.oscillo-d-nbg {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: black;
  color: #ffaa00;
}

.oscillo-e {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: #550000;
  color: white;
}

.oscillo-e-nbg {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: black;
  color: #ee9900;
}

.oscillo-f {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: #220000;
  color: white;
}

.oscillo-f-nbg {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  color: #dd8800;
}

.oscillo-j {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  color: #aaff00;
  margin-top: -2px;
  vertical-align: top;
  font-size: 13px;
  font-weight: 600;
}

.oscillo-s {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: #aaff00;
  color: black;
}

.oscillo-s-nbg {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: black;
  color: #ffff00;
}

.oscillo-t {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: #009900;
  color: yellow;
  opacity: 85%;
}

.oscillo-t-nbg {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: black;
  color: #ffff00;
}

.oscillo-u {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: #005500;
  color: yellow;
  opacity: 75%;
}

.oscillo-u-nbg {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: black;
  color: yellow;
}

.oscillo-v {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: #002200;
  color: yellow;
  opacity: 70%;
}

.oscillo-v-nbg {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  color: yellow;
  opacity: 60%;
}

.oscillo-p {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: #ffaa00;
  color: black;
}

.oscillo-p-nbg {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  background-color: #000000;
}

.oscillo-filler {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  width: 8px;
}

.oscillo-blank {
  margin: 0px;
  margin-right: 1px;
  text-align: center;
  display: inline-block;
  font-size: 8px;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  width: 20px;
}

.osc-gold {
  display: inline-block;
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: yellow;
}

.osc-gold-green {
  display: inline-block;
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: green;
}

.osc-gold-rush {
  display: inline-block;
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: yellow;
}

.osc-sm {
  border-radius: 1px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  font-size: 15px;
}

.osc-sm-half {
  border-radius: 1px;
  width: 12px;
  height: 8px;
  margin-top: 2px;
  font-size: 13px;
}

.osc-lg {
  margin-top: 5px;
  width: 18px;
  height: 20px;
  font-size: 18px;
}

.osc-n-bg {
  background-color: transparent;
  opacity: 100%;
}

.osc-new-high {
  border-top: 1px solid pink;
  border-radius: 4px;
}

.osc-ema5-below {
  border-bottom: 1px solid #aaff00;
  border-radius: 2px;
}

/* decorators */
.legend-icon {
  width: 18px;
  height: 18px;
  font-size: 11px;
  display: inline-block;
  margin: 0px 1px 0px 1px;
  text-align: center;
}

.area-grade-0 {
  font-size: 13px;
  opacity: 55%;
}

.area-grade-1 {
  font-size: 13px;
  background-color: yellow;
  color: black;
  opacity: 55%;
}

.area-grade-2 {
  font-size: 13px;
  background-color: red;
  color: white;
  opacity: 55%;
}

.area-grade-unknown {
  background-color: black;
}

.concept-essential {
  color: cyan;
}

.leader-item {
  width: 4px;
  height: 4px;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 1px;
  background-color: red;
}

.stake-item {
  width: 4px;
  height: 4px;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 1px;
  background-color: white;
}

.nonstake-item {
  width: 4px;
  height: 4px;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 1px;
}

.stone-filler {
  width: 4px;
  height: 4px;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 1px;
}

.sec-icon-lg {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 20px;
}

.sec-icon-sm {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
}

.circular {
  width: 30px;
  height: 30px;
  border: 1px solid silver;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.circular-sm {
  width: 16px;
  height: 16px;
  border: 1px solid silver;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 300;
  text-align: center;
}

.count-circle {
  width: 16px;
  height: 16px;
  border: 1px solid silver;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 300;
  text-align: center;
}

.rad-1 {
  border-radius: 1px;
}

.rad-2 {
  border-radius: 2px;
}

.rad-3 {
  border-radius: 3px;
}

.rad-4 {
  border-radius: 4px;
}

.rad-5 {
  border-radius: 5px;
}

.rad-6 {
  border-radius: 6px;
}

.rad-7 {
  border-radius: 7px;
}

.rad-8 {
  border-radius: 8px;
}

.rad-9 {
  border-radius: 9px;
}

.rad-10 {
  border-radius: 10px;
}

.rad-15 {
  border-radius: 15px;
}

.rad-20 {
  border-radius: 20px;
}

.rad-25 {
  border-radius: 25px;
}

.price-class-bd {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 3px;
  border: 1px solid gold;
}

.price-class-ba {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 3px;
  border: 1px dashed gold;
}

.price-class-downboard {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 3px;
  border: 1px solid green;
}

.price-class-da {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 3px;
  border: 1px dashed green;
}

.price-class-normal {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 3px;
}

.stat-blk-A {
  border-radius: 2px;
  background-color: #008A0E;
  border: 1px solid #008A0E;
  color: black;
}

.stat-blk-B {
  border-radius: 2px;
  background-color: #54C45E;
  border: 1px solid #54C45E;
  color: black;
}

.stat-blk-C {
  border-radius: 2px;
  background-color: #FCCE14;
  border: 1px solid #FCCE14;
  color: black;
}

.stat-blk-D {
  border-radius: 2px;
  background-color: #FF80DF;
  border: 1px solid #FF80DF;
  color: black;
}

.stat-blk-E {
  border-radius: 2px;
  background-color: #ff00fe;
  border: 1px solid #ff00fe;
  color: black;
}

.stat-bdr-A {
  border-radius: 0px 2px 2px 0px;
  border: 1px solid #008A0E;
}

.stat-bdr-B {
  border-radius: 0px 2px 2px 0px;
  border: 1px solid #54C45E;
}

.stat-bdr-C {
  border-radius: 0px 2px 2px 0px;
  border: 1px solid #FCCE14;
}

.stat-bdr-D {
  border-radius: 0px 2px 2px 0px;
  border: 1px solid #FF80DF;
}

.stat-bdr-E {
  border-radius: 0px 2px 2px 0px;
  border: 1px solid #ff00fe;
}

.st-blk-sm {
  display: inline-block;
  width: 18px;
  height: 14px;
  font-size: 10px;
  font-weight: 500;
  line-height: 13px;
  text-align: center;
}

.st-blk-lg {
  display: inline-block;
  width: 24px;
  height: 20px;
  font-size: 12px;
  text-align: center;
}

#bottombar-segmentmovement {
  border: 1px solid gray;
  border-radius: 4px;
  padding: 1px 5px 1px 5px;
  width: 220px;
  height: 18px;
}

#segment-movement-barchart {
  border: 1px solid gray;
  border-radius: 5px;
  padding: 2px 5px 2px 5px;
  width: 350px;
  height: 30px;
}

.portal-minutechart {
  width: 250px;
  height: 80px;
}

.mm-indexcandle {
  width: 420px;
  height: 240px;
}

.mm-indexchart {
  width: 400px;
  height: 220px;
  border-radius: 10px;
  padding: 10px;
  background-color: #161612;
}

.shadow-dark {
  box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.7);
}

.price-down-bg {
  padding: 2px 5px 2px 5px;
  border-radius: 2px;
  background-color: #138808;
  color: white;
}

.price-up-bg {
  padding: 2px 5px 2px 5px;
  border-radius: 2px;
  background-color: red;
  color: white;
}

.market-stockreport {
  width: 360px;
  height: 250px;
}

.card-live-icon {
  position: absolute;
  top: 2px;
  right: 8px;
}

.card-bcamcs {
  position: absolute;
  top: 25px;
  right: 40px;
}

.cal-card {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: inline-block;
  font-size: 14px;
  line-height: 22px;
  margin-left: 1px;
  margin-right: 1px;
}

.cal-board {
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin-left: 2px;
  margin-right: 2px;
  border-radius: 5px;
  font-size: 22px;
  display: inline-block;
}

.portal-header {
  width: 100%;
  height: 150px;
  background-color: #3c3a3a;
  padding: 10px 10px 5px 10px;
}

.sso-sector-icon {
  width: 32px;
}

.sso-sector-wrapper {
  width: 170px;
}

.sso-segment-wrapper {
  width: 320px;
}

.sso-segmentchart-wrapper {
  width: 960px;
}

.tt-AO {
  width: 25px;
  height: 18px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border-radius: 4px;
  font-weight: 600;
  background-color: rgb(195, 0, 15);
  color: white;
}

.tt-AP {
  width: 25px;
  height: 18px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border-radius: 4px;
  font-weight: 600;
  background-color: blue;
  color: white;
}

.tt-AF {
  width: 25px;
  height: 18px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border-radius: 4px;
  font-weight: 600;
  background-color: teal;
  color: white;
}

.tt-BX {
  width: 25px;
  height: 18px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border-radius: 4px;
  font-weight: 600;
  background-color: orange;
  color: black;
}

.tt-BM {
  width: 25px;
  height: 18px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border-radius: 4px;
  font-weight: 600;
  background-color: #aaff00;
  color: black;
}

.tt-BL {
  width: 25px;
  height: 18px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border-radius: 4px;
  font-weight: 600;
  background-color: #011f03;
  color: white;
}

.tt-ratio {
  font-size: 11px;
  font-weight: 450;
  font-style: italic;
}

.tt-block {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
}

.tt-range {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background-color: gray;
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
}

.tt-range-green {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background-color: #023002;
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
}

.tt-range-blue {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background-color: #192841;
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
}

.tt-range-blue {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background-color: #192841;
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
}

.tt-rng-lightblue {
  min-width: 25px;
  border-radius: 3px;
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
  border: lightblue 1px solid;
}

.tt-rng-lime {
  min-width: 25px;
  border-radius: 3px;
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
  border: lime 1px solid;
}

.tt-rng-orange {
  min-width: 25px;
  border-radius: 3px;
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
  border: orange 1px solid;
}

.tt-rng-cyan {
  min-width: 25px;
  border-radius: 3px;
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
  border: cyan 1px solid;
}

.tt-rng-teal {
  min-width: 25px;
  border-radius: 3px;
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
  border: teal 1px solid;
}

.tt-rng-silver {
  min-width: 25px;
  border-radius: 3px;
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
  border: silver 1px solid;
}

.tt-rng-fuchsia {
  min-width: 25px;
  border-radius: 3px;
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
  background-color: fuchsia;
  color: white;
}

.tt-dark-fuchsia {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: black;
  color: fuchsia;
}

.tt-dark-cyan {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: black;
  color: cyan;
}

.tt-dark-orange {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: black;
  color: orange;
}

.tt-dark-lime {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: black;
  color: lime;
}

.tt-dark-teal {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: black;
  color: teal;
}

.tt-dark-lightblue {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: black;
  color: lightblue;
}

.tt-dark-silver {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: black;
  color: silver;
}

.tt-dark-anchor {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: yellow;
  color: black;
}

.tt-lime-fill {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: lime;
  color: black;
}

.tt-orange-fill {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: orange;
  color: black;
}

.tt-fuchsia-fill {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: fuchsia;
  color: white;
}

.tt-cyan-fill {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: cyan;
  color: black;
}

.tt-silver-fill {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: silver;
  color: black;
}

.tt-black-fill {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: black;
  color: white;
}

.tt-blue-fill {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: blue;
  color: white;
}

.tt-purple-fill {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: purple;
  color: white;
}

.tt-pink-fill {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: pink;
  color: black;
}

.tt-brown-fill {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background: brown;
  color: white;
}

.tt-gap {
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  background-color: #f0f0f0;
}

.tt-pct {
  font-size: 8px;
  font-weight: 250;
}

.tt-icp {
  display: inline-block;
  text-align: center;
  padding: 3px;
  border-radius: 5px;
  min-width: 20px;
  font-size: 13px;
  line-height: 13px;
  background-color: teal;
  color: white;
  height: 18px;
}

.tt-degree {
  display: inline-block;
  text-align: center;
  padding: 3px;
  border-radius: 5px;
  min-width: 20px;
  font-size: 13px;
  line-height: 13px;
  background-color: cyan;
  background-color: black;
  font-weight: 600;
  color: cyan;
}

.tt-negative {
  display: inline-block;
  text-align: center;
  padding: 3px;
  border-radius: 5px;
  min-width: 20px;
  font-size: 13px;
  line-height: 13px;
  background-color: rgb(117, 2, 2);
  color: white;
}

.tt-width {
  width: 300px;
}

.tt-digit {
  display: inline-block;
  width: 38px;
  text-wrap: none;
  text-align: center;
}

.tt-blk-zone {
  background-color: black;
  color: cyan;
  width: 100%;
  font-size: 12px;
}

.tt-blk-ema {
  background-color: black;
  color: orange;
}

.tt-blk-anchor {
  background-color: black;
  color: fuchsia;
  font-family: monospace;
}

.lat-nameplate {
  width: 16px;
  display: inline-block;
  height: 22px;
  padding: 0;
  border: 1px transparent;
  border-radius: 3px 0px 0px 3px;
}

.gse-nameplate {
  display: inline-block;
  padding: 0px 5px 0px 3px;
  font-size: 12px;
  min-width: 50px;
}

.sgmov-nameplate {
  padding: 0px 5px 0px 1px;
  line-height: 22px;
  width: 18px;
  height: 22px;
}

.segment-nameplate {
  height: 22px;
}

.lat-dim {
  opacity: 0.85;
}

/*
    Animated Background Effects
*/
.bg-pulse {
  animation: bgPulse 3s ease-in-out infinite;
}

@keyframes bgPulse {
  0% {
    background-color: #1e1f22;
  }
  50% {
    background-color: #2a2d35;
  }
  100% {
    background-color: #1e1f22;
  }
}
.bg-rainbow {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: rainbowShift 6s ease infinite;
}

@keyframes rainbowShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.bg-breathe {
  animation: bgBreathe 4s ease-in-out infinite;
}

@keyframes bgBreathe {
  0% {
    background-color: rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
  50% {
    background-color: rgba(67, 68, 39, 0.8);
    transform: scale(1.02);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
}
.bg-neon-glow {
  background-color: #1e1f22;
  border: 2px solid #0ff;
  box-shadow: 0 0 10px #0ff;
  animation: neonGlow 2s ease-in-out infinite alternate;
}

@keyframes neonGlow {
  0% {
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff;
    border-color: #0ff;
  }
  100% {
    box-shadow: 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff;
    border-color: #ff00ff;
  }
}
.bg-market-up {
  animation: marketUp 3s ease-in-out infinite;
}

@keyframes marketUp {
  0% {
    background-color: #1e1f22;
  }
  25% {
    background-color: #2d1b1b;
  }
  50% {
    background-color: #4a1a1a;
  }
  75% {
    background-color: #2d1b1b;
  }
  100% {
    background-color: #1e1f22;
  }
}
.bg-market-down {
  animation: marketDown 3s ease-in-out infinite;
}

@keyframes marketDown {
  0% {
    background-color: #1e1f22;
  }
  25% {
    background-color: #1b2d1b;
  }
  50% {
    background-color: #1a4a1a;
  }
  75% {
    background-color: #1b2d1b;
  }
  100% {
    background-color: #1e1f22;
  }
}
.bg-wave {
  background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #f5576c);
  background-size: 800% 800%;
  animation: waveShift 8s ease infinite;
}

@keyframes waveShift {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.highlight-glow {
  animation: highlightGlow 2s ease-in-out infinite alternate;
}

@keyframes highlightGlow {
  0% {
    box-shadow: 0 0 5px rgba(88, 86, 106, 0.5), 0 0 10px rgba(88, 86, 106, 0.3), 0 0 15px rgba(88, 86, 106, 0.2);
    background-color: rgba(88, 86, 106, 0.1);
  }
  100% {
    box-shadow: 0 0 15px rgba(138, 126, 146, 0.8), 0 0 25px rgba(138, 126, 146, 0.6), 0 0 35px rgba(138, 126, 146, 0.4);
    background-color: rgba(138, 126, 146, 0.15);
  }
}
.bg-fade {
  animation: bgFade 5s ease-in-out infinite;
}

@keyframes bgFade {
  0% {
    background-color: rgb(30, 31, 34);
    opacity: 1;
  }
  50% {
    background-color: rgba(84, 84, 84, 0.7);
    opacity: 0.8;
  }
  100% {
    background-color: rgb(30, 31, 34);
    opacity: 1;
  }
}
.animate-slow {
  animation-duration: 6s !important;
}

.animate-fast {
  animation-duration: 1s !important;
}

.animate-pause {
  animation-play-state: paused !important;
}

.animate-reverse {
  animation-direction: reverse !important;
}

.liquid-glass {
  position: relative;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  overflow: hidden;
}
.liquid-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transition: 0.5s;
  opacity: 0;
}
.liquid-glass:hover {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.liquid-glass:hover::before {
  left: 100%;
  opacity: 1;
}
.liquid-glass.with-gradient {
  background: transparent;
}
.liquid-glass.with-gradient:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.15));
}
.liquid-glass.with-glow:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 255, 255, 0.1);
}

.opacity-pulse {
  opacity: 1;
  animation: opacityPulse 2s ease-in-out forwards;
}

@keyframes opacityPulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
.opacity-hover {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.opacity-hover:hover {
  opacity: 0.8;
}

.opacity-wave {
  opacity: 1;
  animation: opacityWave 3s ease-in-out infinite;
}

@keyframes opacityWave {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
.segment-userfav-icon {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.segment-hover {
  background: transparent;
  transition: background-color 0.3s ease;
  position: relative;
}
.segment-hover:hover {
  background-color: rgba(0, 0, 0, 0.8) !important;
}
.segment-hover:hover .segment-userfav-icon {
  opacity: 1;
}
.segment-hover.with-popup::after {
  content: attr(data-popup);
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  pointer-events: none;
}
.segment-hover.with-popup::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}
.segment-hover.with-popup:hover::after, .segment-hover.with-popup:hover::before {
  opacity: 1;
  visibility: visible;
}
.segment-hover.popup-bottom::after {
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}
.segment-hover.popup-bottom::before {
  top: calc(100% + 5px);
  border-top-color: transparent;
  border-bottom-color: rgba(0, 0, 0, 0.9);
}
.segment-hover.popup-right::after {
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
}
.segment-hover.popup-right::before {
  top: 50%;
  left: calc(100% + 5px);
  transform: translateY(-50%);
  border-top-color: transparent;
  border-left-color: rgba(0, 0, 0, 0.9);
}
.segment-hover.popup-left::after {
  top: 50%;
  right: calc(100% + 10px);
  left: auto;
  transform: translateY(-50%);
}
.segment-hover.popup-left::before {
  top: 50%;
  right: calc(100% + 5px);
  left: auto;
  transform: translateY(-50%);
  border-top-color: transparent;
  border-right-color: rgba(0, 0, 0, 0.9);
}

.counter-postock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 1px solid black;
  font-size: 0.75em;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  background-color: #492142;
  color: white;
}

.counter-orderstock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 1px solid black;
  font-size: 0.75em;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  background-color: #2b3b01;
  color: white;
}

.counter-trackstock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 1px solid black;
  font-size: 0.75em;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  background-color: #2a3047;
  color: white;
}

.counter-recommendstock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 1px solid black;
  font-size: 0.75em;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  background-color: #6f42c1;
  color: white;
}

.counter-watchstock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 1px solid black;
  font-size: 0.75em;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  background-color: #545104;
  color: white;
}

.attr-btn {
  font-size: 12px;
  height: 22px;
  line-height: 17px;
}

.attr-filter-concept {
  width: 24px;
  display: inline-block;
  font-size: 12px;
  padding: 2px;
  text-align: center;
  background-color: rgb(63, 36, 233);
  color: rgb(228, 228, 228);
}

.attr-filter-sector {
  width: 24px;
  display: inline-block;
  font-size: 12px;
  padding: 2px;
  text-align: center;
  background-color: rgb(201, 6, 170);
  color: rgb(228, 228, 228);
}

.attr-filter-on {
  width: 24px;
  display: inline-block;
  font-size: 12px;
  padding: 2px;
  text-align: center;
  background-color: rgb(2, 116, 116);
  color: rgb(228, 228, 228);
}

.attr-filter-off {
  width: 24px;
  display: inline-block;
  font-size: 12px;
  padding: 2px;
  text-align: center;
  color: silver;
}

.attr-filter-span {
  width: 24px;
  display: inline-block;
  font-size: 12px;
  padding: 2px;
  text-align: center;
  color: silver;
}

#attr-filter-beacon {
  width: 24px;
  display: inline-block;
  font-size: 12px;
  padding: 2px;
  text-align: center;
  color: gray;
}

#concept-filter-beacon {
  width: 24px;
  display: inline-block;
  font-size: 12px;
  padding: 2px;
  text-align: center;
  color: gray;
}

.attr-info {
  font-size: 13px;
  display: inline-block;
  color: silver;
  font-weight: 550px;
  border-radius: 5px;
}

.attr-trend {
  font-size: 13px;
  display: inline-block;
  color: silver;
  font-weight: 550px;
  border-radius: 5px;
  border: 1px #6F6B6B;
}

.attr-spot {
  font-size: 13px;
  display: inline-block;
  color: silver;
  font-weight: 550px;
  border-radius: 5px;
  border: 1px solid chocolate;
}

.attr-retro, .avt-retro {
  font-size: 13px;
  display: inline-block;
  color: silver;
  font-weight: 550px;
  border-radius: 5px;
  border: 1px solid green;
  min-width: 40px;
}

.attr-unclassified {
  font-size: 13px;
  display: inline-block;
  color: silver;
  font-weight: 550px;
  border-radius: 5px;
}

.attr-capture {
  font-size: 13px;
  display: inline-block;
  color: silver;
  font-weight: 550px;
  border-radius: 5px;
  background-color: #4c2d63;
}

.attr-prime {
  font-size: 13px;
  display: inline-block;
  color: silver;
  font-weight: 550px;
  border-radius: 5px;
  background-color: #310859;
}

.attr-essential {
  font-size: 13px;
  display: inline-block;
  color: silver;
  font-weight: 550px;
  border-radius: 5px;
}

.attr-lat {
  font-size: 13px;
  display: inline-block;
  color: silver;
  font-weight: 550px;
  border-radius: 5px;
  font-size: 11px;
}

.attr-concept {
  font-size: 13px;
  display: inline-block;
  color: silver;
  font-weight: 550px;
  border-radius: 5px;
  font-size: 11px;
}

.retro-btn {
  font-size: 13px;
  line-height: 18px;
  border-radius: 5px;
}

.attr-btn-alert {
  min-width: 40px;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  margin: 1px;
  margin-right: 10px;
  transition: background-color 0.3s ease;
  background-color: #282626;
  color: orange;
}

.attr-btn-user {
  min-width: 40px;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  margin: 1px;
  margin-right: 10px;
  transition: background-color 0.3s ease;
  background-color: #282626;
  color: silver;
}

.attr-btn-normal {
  min-width: 40px;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  margin: 1px;
  margin-right: 10px;
  transition: background-color 0.3s ease;
  background-color: #3c3a3a;
  color: silver;
}

.attr-btn-selected {
  background-color: rgb(138, 9, 101) !important;
}

.attr-btn-nohit {
  opacity: 0.5 !important;
  background-color: transparent !important;
}

.avt-btn-alert {
  min-width: 40px;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  margin: 1px;
  margin-right: 10px;
  transition: background-color 0.3s ease;
  border-color: rgba(255, 255, 0, 0.35);
  color: yellow;
}

.avt-btn-user {
  min-width: 40px;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  margin: 1px;
  margin-right: 10px;
  transition: background-color 0.3s ease;
  border-color: rgba(0, 255, 255, 0.35);
  border-color: gray;
  color: silver;
}

.avt-btn-spot {
  min-width: 40px;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  margin: 1px;
  margin-right: 10px;
  transition: background-color 0.3s ease;
  border-color: rgba(128, 128, 128, 0.35);
  color: silver;
}

.avt-btn-normal {
  min-width: 40px;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  margin: 1px;
  margin-right: 10px;
  transition: background-color 0.3s ease;
  border-color: rgba(128, 128, 128, 0.35);
  color: silver;
}

.flat-avt-btn {
  background: none;
  height: 25px;
  width: 50px;
  border-radius: 5px;
  border: 1px solid;
  border-color: gray;
  transition-duration: 0.2s;
  color: #CECECE;
  display: inline-block;
  font-weight: bold;
  font-size: 85%;
  margin-right: 5px;
  margin-bottom: 3px;
}
.flat-avt-btn:hover {
  background-color: #0b0a42;
}

.retro-heading {
  font-size: 12px;
  font-weight: bold;
  color: cyan;
  font-family: "Helvetica Neue";
}

@font-face {
  font-family: "Roboto";
  src: url("../font/Roboto-Regular.ttf") format("truetype");
  font-style: normal;
}
body {
  font-family: "Helvetica Neue";
  background-color: #1E1F22;
  background-color: #474040;
  color: #CECECE;
  border-color: #4C5461;
  padding-left: 50px;
  padding-right: 50px;
}

button {
  color: #CECECE;
}

.content-container {
  max-width: 1600px;
  min-width: 960px;
  padding-left: auto;
  padding-right: auto;
}

.in-block {
  display: inline-block;
}

.bg-black {
  background-color: black;
}

.bg-invest {
  background-color: #031405;
}

.bg-portfolio {
  background-color: #1d1127;
}

.int-lnk a {
  color: #CECECE;
  text-decoration: none;
}
.int-lnk a:hover {
  color: #FFB215;
}
.int-lnk a:active {
  color: yellow;
}

.ext-lnk {
  font-size: 75%;
  font-style: italic;
}
.ext-lnk a {
  color: GREY;
  text-decoration: none;
}
.ext-lnk a:link {
  color: GREY;
  text-decoration: none;
}
.ext-lnk a:visited {
  color: GREY;
}
.ext-lnk a:hover {
  color: hotpink;
}
.ext-lnk a:active {
  color: rgba(94, 4, 4, 0.995);
}

.no-display {
  display: none;
}

.genre-icon {
  display: inline-block;
  width: 30px;
  height: 18px;
  border-radius: 3px;
  text-align: center;
  line-height: 18px;
  font-size: 10px;
  color: cyan;
}

.index-quote-sh {
  text-align: right;
}

.index-quote-sz {
  text-align: right;
}

.index-chgpct {
  text-align: left;
}

.color-down-dark {
  padding: 0px;
  margin: 0px;
  color: #00ff00;
}

.segment-minutemove {
  width: 200px;
  height: 65px;
}

.color-follower {
  color: #00FFFF;
}

.color-trending {
  display: inline-block;
  text-align: center;
  padding: 5px 10px 5px 10px;
  border-radius: 5px;
  background-color: #ff0000;
  color: white;
}

.color-uprising {
  display: inline-block;
  text-align: center;
  padding: 5px 10px 5px 10px;
  border-radius: 5px;
  background-color: #ffff00;
  color: black;
}

.color-downfall {
  display: inline-block;
  text-align: center;
  padding: 5px 10px 5px 10px;
  border-radius: 5px;
  background-color: orange;
  color: black;
}

.color-recession {
  display: inline-block;
  text-align: center;
  padding: 5px 10px 5px 10px;
  border-radius: 5px;
  background-color: #00bb00;
  color: black;
}

.color-normal .color-mixed {
  display: inline-block;
  text-align: center;
  padding: 5px 10px 5px 10px;
  border-radius: 5px;
}

.bg-dark-cyan {
  background-color: rgb(2, 116, 116);
  color: rgb(228, 228, 228);
}

.color-dark-cyan {
  color: rgb(2, 116, 116);
}

.color-light-orange {
  color: #D99D1A;
}

.color-cyan {
  color: cyan;
}

.background-color-a {
  background-color: #007700;
}

.lat-AO {
  background-color: blue;
  color: white;
  display: inline-block;
  width: 35px;
  height: 20px;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  font-weight: 600;
}

.lat-AF {
  background-color: rgb(22, 5, 133);
  color: white;
  display: inline-block;
  width: 35px;
  height: 20px;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  font-weight: 600;
}

.lat-AP {
  background-color: rgb(2, 2, 38);
  color: white;
  display: inline-block;
  width: 35px;
  height: 20px;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  font-weight: 600;
}

.lat-BX {
  background-color: red;
  color: white;
  display: inline-block;
  width: 35px;
  height: 20px;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  font-weight: 600;
}

.lat-BM {
  background-color: #aaff00;
  color: black;
  display: inline-block;
  width: 35px;
  height: 20px;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  font-weight: 600;
}

.lat-BL {
  background-color: green;
  color: black;
  display: inline-block;
  width: 35px;
  height: 20px;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  font-weight: 600;
}

.run-AO {
  background-color: blue;
  color: white;
  display: inline-block;
  height: 20px;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  line-height: 20px;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
}

.run-AF {
  background-color: rgb(22, 5, 133);
  color: white;
  display: inline-block;
  height: 20px;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  line-height: 20px;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
}

.run-AP {
  background-color: rgb(2, 2, 38);
  color: white;
  display: inline-block;
  height: 20px;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  line-height: 20px;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
}

.run-BX {
  background-color: red;
  color: white;
  display: inline-block;
  height: 20px;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  line-height: 20px;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
}

.run-BM {
  background-color: #aaff00;
  color: black;
  display: inline-block;
  height: 20px;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  line-height: 20px;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
}

.run-BL {
  background-color: green;
  color: black;
  display: inline-block;
  height: 20px;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  line-height: 20px;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
}

.ls-concept-mv-name {
  width: 100px;
}

.ls-concept-mv-chgpct {
  width: 55px;
}

.ls-concept-mv-board {
  width: 25px;
}

.ls-concept-mv-legend {
  width: auto;
}

.fc-active {
  display: inline-block;
  line-height: 20px;
  font-size: 13px;
  color: yellow;
  background-color: #007700;
}

.fc-inactive {
  display: inline-block;
  line-height: 20px;
  font-size: 13px;
}

.fc-disable {
  display: inline-block;
  line-height: 20px;
  font-size: 13px;
  color: gray;
}

.active-underline {
  border-bottom: 2px solid red;
}

.color-active {
  color: yellow !important;
}

.underline {
  border-bottom: 1px solid rgba(211, 211, 211, 0);
  padding-bottom: 2px;
}

.underline-l-gray {
  border-bottom: 1px solid rgba(211, 211, 211, 0.5);
  padding-bottom: 2px;
}

.underline-d-gray {
  border-bottom: 1px solid rgba(169, 169, 169, 0.5);
  padding-bottom: 2px;
}

.underline-vd-gray {
  border-bottom: 1px solid rgba(40, 40, 40, 0.5);
  padding-bottom: 2px;
}

.topline-l-gray {
  border-top: 1px solid rgba(211, 211, 211, 0.5);
  padding-top: 2px;
}

.topline-d-gray {
  border-top: 1px solid rgba(169, 169, 169, 0.5);
  padding-top: 2px;
}

.topline-vd-gray {
  border-top: 1px solid rgba(40, 40, 40, 0.5);
  padding-top: 2px;
}

.leftline-l-gray {
  border-left: 1px solid rgba(211, 211, 211, 0.5);
}

.leftline-d-gray {
  border-left: 1px solid rgba(169, 169, 169, 0.5);
}

.leftline-vd-gray {
  border-left: 1px solid rgba(40, 40, 40, 0.5);
}

.rightline-l-gray {
  border-right: 1px solid rgba(211, 211, 211, 0.5);
}

.rightline-d-gray {
  border-right: 1px solid rgba(169, 169, 169, 0.5);
}

.rightline-vd-gray {
  border-right: 1px solid rgba(40, 40, 40, 0.5);
}

.border-l-gray {
  border: 1px solid rgba(211, 211, 211, 0.5);
  padding: 1px;
}

.border-d-gray {
  border: 1px solid rgba(169, 169, 169, 0.5);
  padding: 1px;
}

.border-vd-gray {
  border: 1px solid rgba(40, 40, 40, 0.5);
  padding: 1px;
}

.border-violet {
  border: 1px solid #7f32da;
  padding: 1px;
}

.border-dim {
  border: 1px solid #A0A0A0;
  padding: 1px;
}

.border-observe {
  border: 1px solid #7f32da;
  padding: 2px;
  border-radius: 3px;
}

.topline-red {
  border-top: 1px solid red;
}

.text-underline {
  text-decoration: underline;
}

.underline-fuchsia {
  border-bottom: 1px solid fuchsia;
  padding-bottom: 2px;
}

#concept-filtrum-bar,
#segment-filtrum-bar {
  font-size: 11px;
  width: 400px;
}

#concept-filtrum-tool {
  width: 80px;
}

#concept-filtrum-counter {
  min-width: 80px;
  line-height: 24px;
  display: inline-block;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
}

.mono-space {
  font-family: "Courier New", Courier, monospace;
}

.range-pct {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  width: 48px;
  text-align: center;
}

.range-pct-low {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  width: 24px;
  font-size: 12px;
  text-align: right;
  color: #FCA272;
  margin-right: 2px;
}

.range-pct-high {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  width: 24px;
  font-size: 12px;
  text-align: right;
  color: #B2E081;
  margin-right: 2px;
}

.range-pct-sup {
  display: inline-block;
  width: 12px;
  text-align: left;
}

.sup-count {
  display: inline-block;
  font-size: 9px;
  padding: 0px;
  color: #FFFF00;
  margin-top: -8px;
  margin-left: -2px;
}

.opaque-half {
  opacity: 0.5;
}

.opaque-full {
  opacity: 1;
}

.opaque-low {
  opacity: 0.25;
}

.opaque-high {
  opacity: 0.75;
}

/* button styles */
.container {
  color: #CECECE;
}

.ext-container {
  font-family: "Helvetica Neue";
  background-color: #1e1f22;
  /* from futu niuniu */
  color: white;
  border-color: #4C5461;
}

/* tables */
.ldg-table tr {
  background-color: #1E1F22;
  color: white;
}

.sell-row tr {
  background-color: #584E86;
  color: green;
}

.table tr:nth-child(even) {
  color: #d8dfeb;
  background-color: #1E1F22;
}
.table tr:nth-child(odd) {
  color: #d8dfeb;
  background-color: #191919;
}
.table th {
  color: white;
}

.box-shadow-1 {
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.3);
}

.box-shadow-2 {
  border: 1px solid rgba(239, 8, 224, 0.3) !important;
}

.header-inset {
  background-color: #565656;
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.5);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

.full-size {
  width: 100%;
  height: 100%;
}

.full-size-chart {
  width: 100%;
  height: 100%;
  padding: 15px;
}

/*

*/
.top-bazel {
  float: right;
  background: none;
  padding: 0px;
  padding-right: 10px;
  padding-top: 1px;
  margin-top: -10px;
  margin-right: -10px;
  color: white;
  border: none;
}

/*
icons
*/
.ldg-icon {
  color: blue;
  font-weight: bold;
}

.url-link {
  font-size: 85%;
  font-style: italic;
  font-weight: 500;
}

.sup-anchor {
  color: white;
}
.sup-anchor a {
  transition-duration: 0.25s;
}
.sup-anchor a:link {
  text-decoration: none;
}
.sup-anchor a:visited {
  text-decoration: none;
}
.sup-anchor a:hover {
  color: gray;
}
.sup-anchor a:active {
  text-decoration: none;
}

.uuid-anchor {
  min-width: 55px;
  font-size: 9px;
  color: silver;
  font-family: "Courier New", Courier, monospace;
  font-weight: 250;
  text-wrap: none;
}

.search-bar {
  padding: 2px;
  background-color: #000;
  color: silver;
  border-radius: 9px;
  border: none;
}

.sub-menu {
  width: 60px;
  text-align: center;
  font-size: 14px;
  display: inline-block;
  color: white;
  margin: 0px;
}

.sub-menu-item {
  display: inline-block;
  width: 50px;
  padding: 3px;
  border-radius: 5px;
  background-color: #1f651f;
  margin-right: 5px;
}

.sub-menu-span {
  display: inline-block;
  width: 28px;
}

.bar-patch-red {
  position: fixed;
  top: 0px;
  width: 50px;
  height: 50px;
  padding: 0px;
  margin: 0px;
  background-color: #941652;
  left: 0px;
}

.note-form {
  display: none;
}

.form-textarea {
  background-color: #1E1F22;
  color: #CECECE;
  border-radius: 15px;
  border: none;
  width: 83%;
  resize: none;
  margin-bottom: 5px;
}
.form-textarea textarea {
  resize: none;
}
.form-textarea textarea input:focus {
  background-color: #1E1F22;
}

.fixed-box-hr {
  border-top: 0.5px solid #707cbb;
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.under-line {
  border-bottom: 1px solid gray;
  margin-bottom: 5px;
}

.vertical-center {
  display: grid;
  place-items: center;
}

.dot-separator {
  display: inline-block;
  text-align: center;
  color: gray;
  min-width: 15px;
}

.separator {
  border-top: 0.5px solid #707cbb;
  padding-left: 30%;
  padding-right: 30%;
}

.lg-border {
  border-bottom: 0.5px solid white;
  text-align: center;
  margin-right: 1px;
}

.section-border {
  border: 0.5px solid gray;
  border-radius: 25px;
  padding: 15px;
}

.section-separator {
  display: inline-block;
  min-height: 25px;
  background-color: #002200;
}

/*  hover box */
/*   */
.fade-small {
  font-size: 75%;
  color: #a8a8b0;
}

.align-history-price {
  display: inline-block;
  width: 50px;
  text-align: right;
}

.unicell {
  display: inline-block;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  width: 50px;
}

.cell-span {
  margin-left: 15px;
  display: inline-block;
}

.cell-marketcap {
  display: inline-block;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  width: 80px;
}

.cell-marketcap-short {
  display: inline-block;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  text-align: right;
  width: 30px;
}

.cell-list-age {
  display: inline-block;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  width: 22px;
  font-size: 12px;
  font-weight: 550;
}

.cell-area {
  display: inline-block;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  width: 28px;
  font-size: 14px;
  line-height: 28px;
  vertical-align: center;
  background-color: blue;
  border-radius: 5px;
  border: 1px solid blue;
}

.cell-pe-ratio {
  display: inline-block;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  white-space: nowrap;
  text-align: right;
  width: 70px;
  font-size: 11px;
}

.cell-pb-ratio {
  display: inline-block;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  white-space: nowrap;
  text-align: left;
  font-size: 12px;
}

.cell-under-pressure {
  display: inline-block;
  height: 24px;
  width: 24px;
  border-radius: 6px;
  font-size: 18px;
  text-align: center;
  line-height: 24px;
  color: black;
  background-color: yellow;
}

.cell-scan-list {
  display: inline-block;
  width: 85px;
  font-size: 13px;
}

.unicell-lg {
  display: inline-block;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  width: 66px;
}

.unicell-sm {
  display: inline-block;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  width: 31px;
}

.concept-board-wk {
  color: cyan;
}

.concept-calibre-W {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  border-radius: 3px;
  color: #FFB215;
}

.concept-calibre-T {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  border-radius: 3px;
  background-color: red;
  color: white;
}

.concept-calibre-D {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  border-radius: 3px;
  background-color: black;
  color: red;
}

.concept-attr-search-form {
  width: 860px;
  display: inline-block;
}

.stock-search {
  display: inline-block;
  line-height: 18px;
  vertical-align: center;
  font-size: 12px;
}

.popular-color {
  color: #ff66cc;
}

.dim-popular-color {
  color: #CC66cb;
}

.warm-color {
  color: yellow;
}

.dim-warm-color {
  color: #d0e500;
}

.normal-color {
  color: #CECECE;
}

.base-color {
  color: #CECECE;
}

.ignored-color {
  color: #bbbbbb;
}

.text-area {
  width: 100%;
  border-radius: 5px;
}

.input-symbol {
  background-color: rgb(31, 24, 24);
  height: 25px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  border: none;
  color: white;
  width: 100px;
}
.input-symbol input:focus {
  background-color: black;
}

.stock-search-input {
  background-color: #1E1F22;
  color: silver;
}

.input-tag {
  border-radius: 5px;
  border: none;
  background-color: gray;
  width: 65px;
}
.input-tag input:focus {
  background-color: black;
}

.credit-anchor {
  margin-top: 25px;
  margin-bottom: 50px;
  height: 25px;
  display: inline-block;
}

.input-price {
  background-color: rgb(31, 24, 24);
  height: 25px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  border: none;
  color: white;
  width: 85px;
}
.input-price input:focus {
  background-color: black;
}

.cell-name {
  display: inline-block;
  width: 60px;
  margin-left: 2px;
  font-size: 85%;
  white-space: nowrap;
}

.cell-stock-name {
  display: inline-block;
  width: 54px;
  font-size: 13px;
  white-space: nowrap;
  color: white;
  text-align: center;
  background-color: black;
  border-radius: 5px;
}

.cell-stock-icon {
  display: inline-block;
  width: 40px;
  text-align: right;
  white-space: nowrap;
  font-size: 11px;
  margin: 2px;
  padding: 0px;
}

.cell-icon-sm {
  display: inline-block;
  width: 8px;
  white-space: nowrap;
  margin: 0px;
  padding: 0px;
  margin-right: 1px;
}

.cell-name-ext {
  display: inline-block;
  width: 270px;
}

.cell-ts-code {
  display: inline-block;
  display: inline-block;
  font-size: 12px;
  width: 45px;
}

.concept-legend-brk-high {
  display: inline-block;
  height: 14px;
  margin: 0px;
  padding: 0px;
  background-color: red;
  border-radius: 2px 0px 0px 2px;
}

.concept-legend-brk-middle {
  display: inline-block;
  height: 14px;
  margin: 0px;
  padding: 0px;
  background-color: red;
  border-radius: 2px 0px 0px 2px;
  opacity: 0.65;
}

.concept-legend-brk-low {
  display: inline-block;
  height: 14px;
  margin: 0px;
  padding: 0px;
  background-color: red;
  border-radius: 2px 0px 0px 2px;
  opacity: 0.35;
}

.concept-legend-unbrk {
  display: inline-block;
  height: 14px;
  margin: 0px;
  padding: 0px;
  background-color: gray;
}

#concept-inform-barchart,
#segment-inform-barchart {
  width: 252px;
  height: 108px;
  padding: 10px 15px 10px 15px;
}

#home-dashboard-menu {
  height: 50px;
  width: 100%;
  display: inline-block;
}

.industry-plate {
  background-color: #413836;
  color: silver;
  line-height: 24px;
  font-weight: 500;
  font-size: 14px;
  padding: 0px 5px 0px 5px;
  border-radius: 4px;
  display: inline-block;
}

.cell-toggle-icon {
  display: inline-block;
  font-size: 11px;
  width: 18px;
  margin: none;
}

.cell-concept {
  display: inline-block;
  font-size: 80%;
}

.cell-wave-rate {
  display: inline-block;
  width: 35px;
  border-radius: 5px;
  text-align: right;
  font-size: 14px;
  font-family: "Courier New", Courier, monospace;
  font-weight: 600;
  color: orange;
}

.cell-concept-meta {
  background-color: #282828;
  margin-bottom: 10px;
  padding: 8px;
  margin-left: 0px;
  margin-right: 0px;
}

.cell-percentage {
  display: inline-block;
  width: 65px;
  font-family: monospace;
  text-align: right;
}

.cell-tiny {
  display: inline-block;
  width: 23px;
  text-align: center;
  font-style: bold;
}

.cell-ema {
  display: inline-block;
  font-size: 95%;
  width: 105px;
  font-family: monospace;
  text-align: left;
}

.industry-signal {
  color: #ff66cc;
}

.cell-price {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  text-align: right;
  width: 50px;
  font-size: 14px;
  height: 24px;
  font-weight: 550;
  border-radius: 4px;
}

.cell-degree {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  width: 40px;
  font-size: 13px;
  text-align: center;
}

.cell-day-chg-pct {
  display: inline-block;
  display: inline-block;
  text-align: right;
  width: 30px;
  font-size: 12px;
  font-family: "Courier New", Courier, monospace;
}

.cell-price-plain {
  display: inline-block;
  font-family: "Monaco", Courier, monospace;
  text-align: right;
  width: 60px;
  font-size: 12px;
  height: 24px;
}

.cell-cap-age {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  text-align: right;
  width: 100px;
}

.cell-pe {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  text-align: right;
  width: 65px;
  font-size: 95%;
  margin-right: 10px;
}

.cell-chg-pct {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  text-align: right;
  width: 68px;
}

.cell-chg-pct-up {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  text-align: right;
  width: 68px;
  color: crimson;
}

.cell-chg-pct-down {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  text-align: right;
  width: 68px;
  color: #00ff00;
}

.inverted-pct-up {
  color: #FF2B48;
}

.inverted-pct-down {
  color: #00FF00;
}

.inverted-flat {
  color: silver;
}

.meta-pct-up {
  display: inline-block;
  text-align: center;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  background-color: #000;
  width: 40px;
  border-radius: 5px;
  color: red;
}

.meta-pct-down {
  display: inline-block;
  text-align: center;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  background-color: #000;
  width: 40px;
  border-radius: 5px;
  color: #54C45E;
}

.meta-pct-flat {
  display: inline-block;
  text-align: center;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  background-color: #000;
  width: 40px;
  border-radius: 5px;
  background-color: none;
  color: silver;
}

.board-wk-count {
  color: cyan;
}

.board-count {
  color: silver;
}

.highlighted-pct-up {
  display: inline-block;
  border-radius: 4px;
  padding: 3px;
  background-color: #FF2B48;
  color: white;
}

.highlighted-pct-down {
  display: inline-block;
  border-radius: 4px;
  padding: 3px;
  background-color: #00FF00;
  color: #000;
}

.highlighted-flat {
  display: inline-block;
  border-radius: 4px;
  padding: 3px;
  background-color: silver;
  color: #000;
}

.cell-simple-chg-pct {
  font-family: "Helvetica Neue";
  width: 22px;
  display: inline-block;
  text-align: right;
  padding: 1px;
  font-size: 12px;
  color: white;
  margin-right: 3px;
}

.cell-simple-chg-pct-down {
  font-family: "Helvetica Neue";
  width: 22px;
  display: inline-block;
  text-align: right;
  padding: 1px;
  font-size: 12px;
  background-color: #004400;
  color: #00ff00;
  margin-right: 3px;
  border-radius: 3px;
}

.cell-stock-count {
  display: inline-block;
  width: 25px;
  font-size: 12px;
  text-align: center;
}

.label {
  text-align: right;
  display: inline-block;
  color: #99ff00;
  width: 80px;
}

.cell-scan {
  font-size: 13px;
  font-style: italic;
  color: #aaff00;
  margin-right: 3px;
  display: inline-block;
}

.vol-weekly {
  display: inline-block;
  width: 48px;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}

.simple-color-pct {
  display: inline-block;
  font-family: monospace;
  width: 32px;
  font-size: 90%;
  margin-left: 2px;
  margin-right: 2px;
  padding-right: 2px;
  text-align: right;
}

.vol-pct {
  display: inline-block;
  width: 39px;
  text-align: right;
}

.chg-new {
  display: inline-block;
  width: 43px;
  font-size: 95%;
  text-align: right;
}

.vol-new {
  display: inline-block;
  width: 43px;
  font-size: 100%;
  text-align: right;
  font-family: "Helvetica Neue";
}

.ind-move-green {
  font-family: "Monaco", Courier, monospace;
  display: inline-block;
  text-align: center;
  width: 40px;
  padding: auto;
  font-size: 11px;
  font-style: bold;
  margin-right: 45px;
  border-radius: 3px;
  color: #2fe629;
}

.ind-move-green-big {
  font-family: "Monaco", Courier, monospace;
  display: inline-block;
  text-align: center;
  width: 40px;
  padding: auto;
  font-size: 11px;
  font-style: bold;
  margin-right: 45px;
  border-radius: 3px;
  background-color: #004400;
  color: white;
}

.ind-move-red {
  font-family: "Monaco", Courier, monospace;
  display: inline-block;
  text-align: center;
  width: 40px;
  padding: auto;
  font-size: 11px;
  font-style: bold;
  margin-right: 45px;
  border-radius: 3px;
  background-color: #cc0000;
}

.ind-move-red-big {
  font-family: "Monaco", Courier, monospace;
  display: inline-block;
  text-align: center;
  width: 40px;
  padding: auto;
  font-size: 11px;
  font-style: bold;
  margin-right: 45px;
  border-radius: 3px;
  background-color: #660000;
  color: white;
}

.ind-move-zero {
  font-family: "Monaco", Courier, monospace;
  display: inline-block;
  text-align: center;
  width: 40px;
  padding: auto;
  font-size: 11px;
  font-style: bold;
  margin-right: 45px;
  border-radius: 3px;
  color: white;
}

.ind-move {
  font-family: "Monaco", Courier, monospace;
  display: inline-block;
  text-align: center;
  width: 40px;
  padding: auto;
  font-size: 11px;
  font-style: bold;
  margin-right: 45px;
  border-radius: 3px;
}

.ind-move-plain {
  font-family: "Monaco", Courier, monospace;
  display: inline-block;
  text-align: center;
  width: 40px;
  padding: auto;
  font-size: 11px;
  font-style: bold;
  margin-right: 45px;
  border-radius: 3px;
  padding-bottom: 3px;
}

.mv-u-normal {
  display: inline-block;
  white-space: pre;
  width: 45px;
  font-size: 14px;
  font-family: "Courier New", Courier, monospace;
  text-align: right;
  color: #ff0000;
}

.mv-u-bold {
  display: inline-block;
  white-space: pre;
  width: 45px;
  font-size: 14px;
  font-family: "Courier New", Courier, monospace;
  text-align: right;
  color: #ff0000;
  font-weight: 800;
}

.mv-d-normal {
  display: inline-block;
  white-space: pre;
  width: 45px;
  font-size: 14px;
  font-family: "Courier New", Courier, monospace;
  text-align: right;
  color: #00ff00;
}

.mv-d-bold {
  display: inline-block;
  white-space: pre;
  width: 45px;
  font-size: 14px;
  font-family: "Courier New", Courier, monospace;
  text-align: right;
  color: #00ff00;
  font-weight: 1000;
}

.mv-flat {
  display: inline-block;
  white-space: pre;
  width: 45px;
  font-size: 14px;
  font-family: "Courier New", Courier, monospace;
  text-align: right;
}

.input-ema-diff {
  width: 55px;
}

.chart-frame {
  border-radius: 4px;
  padding: 2px;
  border: 1px solid gray;
}

.chartquote-magnify {
  margin-bottom: -20px;
  padding-right: 0px;
  margin-right: 106px;
}

.chartquote-panel {
  margin-bottom: -25px;
  padding-right: 0px;
  margin-right: 45px;
}

.chartquote-stockcard {
  margin-bottom: -15px;
  padding-right: 30px;
}

.chartquote-segmentupscale {
  margin-bottom: -25px;
  padding-right: 30px;
}

.chartquote-segmentcard {
  margin-bottom: -25px;
  padding-right: 30px;
}

.chartquote-segmentmini {
  margin-bottom: -20px;
  padding-right: 30px;
}

.chartquote-segmentminicard {
  margin-bottom: -20px;
  padding-right: 34px;
}

.circle-sm {
  display: inline-block;
  width: 15px;
  line-height: 15px;
  border-radius: 50%;
  border: 0px;
  text-align: center;
  margin-left: -8px;
  vertical-align: top;
  font-size: 12px;
  background-color: red;
  color: white;
}

.cell-profit {
  display: inline-block;
  width: 21px;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  text-align: right;
}

.calendar-unit {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
}

.calendar-today {
  border-radius: 18px;
  border: 1px solid #ff0000;
}

.calendar-month {
  height: 335px;
  color: #FEBD00;
  border-radius: 30px;
  padding: 15px 15px 0px 15px;
}

/*# new ledger cell definitions */
.lg-icon-lg {
  font-size: 21px;
}

.cell-tag {
  padding: 0px;
  margin: 0px;
  width: 30px;
  display: inline-block;
  white-space: nowrap pre;
  font-size: 12px;
  text-align: right;
  font-family: "Courier New", Courier, monospace;
}

.cell-tag-bar {
  display: inline-block;
  white-space: nowrap;
  padding: 0px;
  width: 120px;
}

.cell-osc-gap {
  display: inline-block;
  width: 3px;
}

.sm-italic {
  font-size: 10px;
}

.sm {
  font-size: 12px;
}

.sup-sm {
  font-size: 9px;
}

.flagged-circle {
  display: inline-block;
  width: 14px;
  font-size: 10px;
  height: 14px;
  background-color: blue;
  border-radius: 7px;
  text-align: center;
  vertical-align: top;
}

.cell-stake-sym {
  display: inline-block;
  width: 15px;
  height: 18px;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  background-color: blue;
  color: white;
}

.cell-nonstake-sym {
  display: inline-block;
  width: 15px;
  height: 18px;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  background-color: gray;
  color: white;
}

.opacity-full {
  opacity: 1;
}

.opacity-half {
  opacity: 0.5;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-25 {
  opacity: 0.25;
}

.clean {
  margin: 0px;
  padding: 0px;
}

#news-bar {
  margin-top: 26px;
  color: white;
  background-color: #11062C;
  height: 30px;
  display: None;
  font-size: 13px;
  font-weight: 300;
}

.glow {
  animation: glow;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
}

.concept-essential-s {
  display: inline-block;
  background-color: #FF6900;
  border-radius: 5px;
  padding: 3px;
  color: white;
}

.concept-essential-o {
  display: inline-block;
  background-color: #16D6D9;
  border-radius: 5px;
  padding: 3px;
  color: black;
}

.concept-essential-h {
  display: inline-block;
  background-color: gray;
  border-radius: 5px;
  padding: 3px;
  color: black;
}

.mark-up {
  padding: 0px;
  margin: 0px;
  color: white;
  font-weight: 500;
  background-color: #ee1010;
  border-radius: 5px;
}

.mark-down {
  padding: 0px;
  margin: 0px;
  background-color: #004400;
  color: #00ff00;
}

.strong {
  font-weight: 600;
}

.stat-label {
  font-family: "Helvetica Neue";
  font-size: 10px;
  color: silver;
  font-style: italic;
}

.stat-value {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  font-weight: 450;
}

.stat-mark {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  font-weight: 350;
}

.spec-tag {
  font-family: "Helvetica Neue";
  font-size: 10px;
  color: rgb(243, 183, 183);
  font-weight: 450;
  letter-spacing: 3px;
}

.attr-essential-old {
  font-weight: 550;
  display: inline-block;
  border-radius: 5px;
  background-color: yellow;
  color: black;
  padding: 4px;
  line-height: 18px;
}

.attr-fix {
  font-weight: 550;
  display: inline-block;
  border-radius: 5px;
  background-color: blue;
  color: white;
  padding: 4px;
  line-height: 18px;
}

.letter-space {
  letter-spacing: 3px;
}

.osc-text {
  font-family: "Helvetica Neue";
  font-size: 11px;
}

.rt-label {
  display: inline-block;
  width: 35px;
  text-align: right;
}

.rt-value {
  display: inline-block;
  width: 40px;
  text-align: right;
}

.cell-turnover {
  width: 24px;
  font-size: 11px;
  display: inline-block;
  text-align: right;
}

.indicator-area {
  display: none;
  width: 160px;
  font-size: 11px;
  margin-left: 5px;
}

.nc-movement {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  width: 36px;
  padding-top: 0px;
  font-size: 12px;
  text-align: center;
  margin-right: 28px;
  padding-left: 2px;
  border-radius: 6px;
  font-weight: 500;
}

.move-up-strong {
  color: #ff0000;
  font-weight: 900;
}

.move-up {
  color: #ff0000;
  font-weight: 700;
}

.move-down-strong {
  background-color: #002800;
  color: white;
}

.move-down {
  color: #00ff00;
}

.plain-movement {
  display: inline-block;
  width: 38px;
  font-size: 14px;
  text-align: right;
  font-family: "Courier New", Courier, monospace;
  white-space: pre;
  border-radius: 4px;
  margin-right: 2px;
}

.movement-filler {
  width: 15px;
  display: inline-block;
  white-space: pre;
}

.movement-gap {
  width: 15px;
  display: inline-block;
  white-space: nowrap;
}

.movement-up {
  font-size: 10px;
}

.omni-gap {
  width: 15px;
  display: inline-block;
}

.lm-up {
  display: inline-block;
  width: 44px;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  border-radius: 3px;
  color: #ff0000;
}

.lm-up-big {
  display: inline-block;
  width: 44px;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  border-radius: 3px;
  color: #ff0000;
  font-weight: 700;
}

.lm-down {
  display: inline-block;
  width: 44px;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  border-radius: 3px;
  color: #00bb00;
}

.lm-down-big {
  display: inline-block;
  width: 44px;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  border-radius: 3px;
  background-color: #00ff00;
  color: black;
}

.lm-flat {
  display: inline-block;
  width: 44px;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  border-radius: 3px;
}

.nowrap {
  white-space: nowrap;
}

.power-domain {
  width: 125px;
  display: inline-block;
  white-space: nowrap;
  text-align: right;
  margin-right: 2px;
  padding-right: 5px;
  font-size: 12px;
}

.proto {
  border: 1px dashed rgb(6, 163, 45);
}

.no-proto {
  border: none;
}

.proto-green {
  border: 1px dashed puregreen;
}

.proto-yellow {
  border: 1px dashed yellow;
}

.proto-red {
  border: 1px dashed red;
}

.proto-blue {
  border: 1px dashed blue;
}

.proto-cyan {
  border: 1px dashed cyan;
}

.proto-bg {
  background-color: rgb(3, 56, 3);
}

.proto-container {
  border-radius: 8px;
  padding: 8px;
  border: 2px solid rgb(100, 99, 99);
}

.power-charter-bar {
  width: 360px;
  display: inline-block;
  white-space: nowrap;
  background-color: #1E2022;
  padding: 1px;
  padding-left: 5px;
  margin-bottom: 2px;
  margin-left: 30px;
}

.power-pointer {
  display: inline-block;
  width: 25px;
  color: cyan;
  font-size: 11px;
  text-align: center;
}

.domain-headroom {
  display: inline-block;
  width: 150px;
}

.hide-movement {
  display: none;
}

.page-banner {
  background-color: #14adc6;
  padding: 12px;
  line-height: 25px;
  vertical-align: bottom;
}

.page-subtitle {
  background-color: #546981;
  padding: 3px;
  padding-left: 25px;
  vertical-align: bottom;
}

.intrinsic-color {
  color: #ffff7c;
}

.beautify-float {
  width: 30px;
  font-family: "Courier New", monospace;
  display: inline-block;
  text-align: right;
  font-size: 12px;
}

.attr-description {
  display: none;
}

.cell-concept-movement {
  display: inline-block;
  text-align: left;
  width: 110px;
  vertical-align: top;
}

.spec-switch {
  display: None;
}

.icon-red {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  text-align: center;
  font-size: 13px;
  line-height: 20px;
  background-color: red;
  color: white;
}

.icon-orange {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  text-align: center;
  font-size: 13px;
  line-height: 20px;
  background-color: orange;
  color: white;
}

.icon-blue {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  text-align: center;
  font-size: 13px;
  line-height: 20px;
  background-color: blue;
  color: white;
}

.icon-gray {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  text-align: center;
  font-size: 13px;
  line-height: 20px;
  background-color: gray;
  color: #32312E;
}

.cell-speculate {
  width: 35px;
  height: 35px;
  border-radius: 6px;
  font-size: 22px;
  display: inline-block;
  text-align: center;
  margin-right: 10px;
  background-color: orange;
}

.cell-break {
  width: 35px;
  height: 35px;
  border-radius: 6px;
  font-size: 22px;
  display: inline-block;
  text-align: center;
  margin-right: 10px;
  background-color: #AAFF00;
  color: black;
}

.cell-monitor {
  width: 35px;
  height: 35px;
  border-radius: 6px;
  font-size: 22px;
  display: inline-block;
  text-align: center;
  margin-right: 10px;
  background-color: cyan;
  color: black;
}

.cell-hibernate {
  width: 35px;
  height: 35px;
  border-radius: 6px;
  font-size: 22px;
  display: inline-block;
  text-align: center;
  margin-right: 10px;
  background-color: gray;
}

.cell-wave {
  width: 35px;
  height: 35px;
  border-radius: 6px;
  font-size: 22px;
  display: inline-block;
  text-align: center;
  margin-right: 10px;
  background-color: blue;
}

/* 
charter CSS attributes
*/
.chart-text {
  font-size: 14px;
  color: gray;
}

.cell-chart-name {
  display: inline-block;
  font-size: 14px;
  width: 160px;
}

.cell-chart-icon-bar {
  display: inline-block;
  font-size: 14px;
  width: 100px;
  font-size: 16px;
}

.cell-chart-metrics {
  display: inline-block;
  font-size: 14px;
  width: 140px;
}

.cell-chart-quote {
  display: inline-block;
}

.stock-legend-bar {
  width: 120px;
  display: inline-block;
  margin-left: 8px;
  margin-right: 8px;
}

/* stock set tier background
*/
/* 

used in rolling sector concept trend charts 

*/
/* 
    Bootstrap specific CSS
*/
.heading {
  border-radius: 8px;
}

.icon-box-h3 {
  display: inline-block;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  text-align: center;
  vertical-align: middle;
  line-height: 38px;
  margin-right: 8px;
}

/* 
    Table
*/
.nice-table table {
  border: 1px solid gray;
  border-radius: 4px;
}

.nice-table td {
  padding: 0px;
}

.nice-table th {
  background-color: #545454;
}

.heavy-weight {
  font-weight: 600;
}

.segment-label {
  display: inline-block;
  width: 112px;
  font-weight: 500;
  font-size: 16px;
  line-height: 35px;
  vertical-align: center;
  background-color: #545454;
  color: cyan;
  text-align: center;
  border-radius: 5px;
  box-shadow: 5px 5px black;
}

.chart-quote-chg-pct {
  display: inline-block;
  position: absolute;
  width: 340px;
  right: 3px;
  top: 2px;
  font-size: 13px;
  white-space: nowrap;
  font-family: "Courier New", Courier, monospace;
  font-weight: 350;
}

.icon-small {
  font-size: 14px;
}

.icon-normal {
  font-size: 18px;
}

.icon-large {
  font-size: 24px;
}

.inherit-size {
  width: 100%;
  height: 100%;
  margin: 0px;
}

.pos-relative {
  position: relative;
}

.pos-absolute {
  position: absolute;
}

.pos-fixed {
  position: fixed;
}

.sector-plate {
  width: 200px;
  height: 50px;
  display: inline-block;
}

.ranking-sector {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: black;
  color: silver;
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.ranking-sector-sm {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: black;
  color: silver;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
}

.ranking-concept {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  color: silver;
  border: 1px solid gray;
  font-size: 9px;
  line-height: 14px;
  text-align: center;
}

.ranking-concept-meta {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: silver;
  color: black;
  font-size: 10px;
  font-weight: 450;
  line-height: 16px;
  text-align: center;
}

.navi-counter {
  width: 23px;
}

.navi-sector-icon {
  width: 25px;
}

.navi-segment {
  width: 100px;
}

.navi-stocks {
  width: 35px;
}

.navi-movement {
  width: 35px;
}

.navi-integer {
  width: 35px;
}

.navi-list {
  font-size: 14px;
}

.navi-icon {
  width: 18px;
}

.navi-user {
  width: 50px;
}

.navi-userstock {
  width: 280px;
}

.card-meta {
  height: 50px;
  padding: 5px;
  text-align: center;
  margin-bottom: 15px;
  vertical-align: center;
}

.card-dark-background {
  background-color: black;
  border-radius: 15px;
  margin: 0px;
  padding: 10px;
}

.concept-favorite {
  background-color: rgb(74, 2, 74);
  border-radius: 10px;
}

.spot-tag {
  background-color: #38363F;
  color: white;
  width: 48px;
  text-align: center;
  display: inline-block;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
}

.spot-mark {
  color: white;
  width: 56px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  font-family: "Courier New", Courier, monospace;
}

.notification-count {
  display: inline-block;
  height: 20px;
  width: 20px;
  text-align: center;
  border-radius: 10px;
  background-color: red;
  color: white;
  font-size: 12px;
  font-weight: 600;
  margin-top: -10px;
  margin-left: -10px;
}

.tracker-status {
  display: inline-block;
  width: 120px;
  text-align: center;
}

.tracker-name {
  width: 80px;
  background-color: blue;
  color: white;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
}

.tracker-name-fluid {
  background-color: rgb(3, 3, 145);
  color: white;
  margin-left: 5px;
  padding: 3px 8px 3px 8px;
  display: inline-block;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  font-family: "Courier New", Courier, monospace;
  border-radius: 3px;
}

.mobile-container {
  width: 95vh;
  max-width: 450px;
  padding: 0px;
  margin: 0px;
  background-color: #1E2022;
}

.mobile-wrapper {
  width: 95vh;
  max-width: 450px;
  padding: 0px;
  margin: 0px;
  min-height: 860px;
  background-color: #1E2022;
}

.mobile-chart {
  margin: 15px;
  max-width: 420px;
  width: 65vh;
  height: 230px;
  background-color: #230233;
}

.mobile-bar-chart {
  display: inline-block;
  width: 210px;
  height: 140px;
}

.mobile-fav-avt {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 0px;
  padding-bottom: 0px;
  display: inline-block;
  color: yellow;
  border: 1px solid orange;
  border-radius: 5px;
}

.mobile-pos-avt {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 0px;
  padding-bottom: 0px;
  display: inline-block;
  border: 1px solid red;
  border-radius: 5px;
}

#favorite-stocks {
  padding: 15px;
  max-height: 72vh;
  border-radius: 0px 0px 25px 0px;
  overflow-y: scroll;
}
#favorite-stocks::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#tracker-stocks {
  padding: 15px;
  max-height: 82vh;
  border-radius: 0px 0px 25px 25px;
  overflow-y: scroll;
}
#tracker-stocks::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#spot-stocks {
  padding: 0px;
  max-height: 95vh;
  border-radius: 0px 0px 0px 25px;
  overflow-y: scroll;
}
#spot-stocks::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid white;
  display: inline-block;
}

.bid-tender {
  width: 55px;
  display: inline-block;
  text-align: right;
  color: #00ff00;
}

.ask-tender {
  width: 55px;
  display: inline-block;
  text-align: right;
  color: #ff0000;
}

.tender-vol {
  width: 60px;
  display: inline-block;
  text-align: right;
}

.alternative-theme {
  background-color: #2f2f2f;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.full-width {
  width: 100%;
}

.full-height {
  height: 100%;
}

.size-icon-normal {
  font-size: 32px;
}

.attr-unit {
  width: 66px;
  display: inline-block;
  border-radius: 3px;
  border: 1px solid gray;
  text-align: center;
  font-size: 13px;
  line-height: 22px;
}

.attr-unit-in-recipe {
  width: 66px;
  display: inline-block;
  border-radius: 3px;
  text-align: center;
  background-color: red;
  font-size: 13px;
  line-height: 22px;
  margin-right: 5px;
  font-weight: 500;
}

.hide {
  display: none;
}

/* loader animation while loading a large page 

*/
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.staff-color {
  color: cyan;
}

/* 
    Temporary placed here CSS class defintions
*/
.mm-retro-btn {
  width: 15px;
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
}

.mm-attr-btn {
  width: 75px;
  display: inline-block;
  font-weight: 500;
}

/*

    fixed and overflow css attributes

*/
.fixed-scroll {
  position: fixed;
  overflow-y: scroll;
}

#progress-container {
  position: relative;
  width: 100px;
}

.progress-bar {
  height: 18px;
  width: 100%;
  overflow: hidden;
}

.progress-text {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  font-family: "Courier New", Courier, monospace;
  transform: translate(-50%);
  text-align: center;
  color: yellow;
  font-size: 12px;
  line-height: 18px;
}

/*

    Curate related css attributes
*/
#concept-trend-esc {
  background-color: rgb(32, 28, 28);
  margin-bottom: 50px;
}

#concept-trend-up {
  background-color: rgb(29, 32, 49);
  margin-bottom: 50px;
}

#concept-trend-rebound {
  background-color: rgb(67, 68, 39);
  margin-bottom: 50px;
}

.curate-positive {
  color: #FF2B48;
}

.curate-negative {
  color: #00FF00;
}

.curate-neutral {
  color: white;
}

.int-span {
  display: inline-block;
  font-size: 14px;
  font-family: "Courier New", Courier, monospace;
  width: 45px;
  text-align: center;
}

.effect-slide {
  transition: all 0.3s ease;
}

.effect-slide:hover {
  opacity: 0.85;
}

/* Debug and fix bottom positioning issues */
.debug-bottom-fixed {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 100%;
  /* Ensure no margin/padding pushes it down */
  margin: 0px;
  font-size: 11px;
  padding: 5px;
  /* Set explicit height to prevent overflow */
  height: auto;
  max-width: 30px;
  /* Ensure high z-index */
  z-index: 100;
  /* Debug background */
  /* Prevent content overflow */
  overflow: hidden;
  box-sizing: border-box;
}

/* Fix for elements that might be pushing content below viewport */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scrollbar issues */
}

/* Ensure container doesn't have bottom margin/padding */
.bottom-container-fix {
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
}

#segment-hoverchart {
  width: 200px;
  height: 60px;
}

/*# sourceMappingURL=style.css.map */