#main {
  padding: 16px;
}
html {
  font-family: "Noto Sans", "Arial", "sans-serif"
}
body {
  background-color: white;
}
.text-right {
  text-align: right;
}
.no-deco {text-decoration: none}

@media (min-width: 480px) {
  html { font-size: 0.4rem; }
}
@media (min-width: 576px) {
  html { font-size: 0.6rem; }
}
@media (min-width: 768px) {
  html { font-size: 0.8rem; }
}
@media (min-width: 992px) {
  html { font-size: 1em; }
}
.litli {
  font-size: smaller;
  margin-top: 1rem;
  padding-left: 1rem;
}
.wrapper {
  width:100%;
  margin:auto;
}
.bg-frBlue {
  background-color: rgb(66,114,138);
}
.bg-frRed {
  background-color: rgb(173,61,69);
}
.bg-frGrey {
  background-color: rgb(145,145,145);
}
.chartArea {
  background-color: white;
}
.pointer
  {cursor: pointer;
}
.scrollY {
  overflow-y: scroll;
}
#svgDIV {
  position: relative;
  height: 200vh;
}
svg {
  display: block;
}
.nav-tabs--vertical {
  border-bottom: none;
  border-right: 1px solid #ccc;
  display: flex;
  flex-flow: column nowrap;
}
.nav-tabs--left {
  margin: 0 0;
}
.nav-tabs--left .nav-item + .nav-item {
  margin-top: .25rem;
}
.nav-tabs--left .nav-link {
  transition: border-color .125s ease-in;
  white-space: nowrap;
  color: #111111;
}
.nav-tabs--left .nav-link:hover {
  background-color: #f7f7f7;
  border-color: transparent;
}
.nav-tabs--left .nav-link.active {
  border-bottom-color: #ccc;
  border-left-color: #ccc;
  border-top-color: #ccc;
  border-right-color: #fff;
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0;
  margin-right: -5px;
}
.nav-tabs--left .nav-link.active:hover {
  background-color: #fff;
  border-color: #ccc #fff #ccc #ccc;
}
/*Set the row height to the viewport*/
.row-height{
  height: 100vh;
}
/*Set up the columns with a 100% height, body color and overflow scroll*/
.left{
  height: 100%;
  overflow-y: scroll;
}
.right{
  height: 120%;
  overflow-y: scroll;
}
.txtRight {
  text-align: right;
}
#ChartArea {
  max-width: 60%;
  z-index: 2000;
  min-height: 100%;
  background-color: rgba(250, 250, 250, 1);
  box-shadow: 10px 10px 5px #cccccc;
}
.stretchLeft{
  animation-name: stretchLeft;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  transform-origin: 100% 0%;
}
@keyframes stretchLeft {
  0%   {transform: scaleX(0); }
  100% {transform: scaleX(1); }
}
.stretchRight{
  animation-name: stretchRight;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  transform-origin: 100% 0%;
}
@keyframes stretchRight {
  0%   {transform: scaleX(1) }
  100% {transform: scaleX(0) }
}
.tr {
  position: absolute;
  right: 0px;
  display: block;
  cursor: pointer;
}
.modebar{
  display: none !important;
}
.spanBtn {
  cursor: pointer;
  color: #007bff;
}