@import url('https://fonts.googleapis.com/css?family=Montserrat');

[v-cloak] {
  display: none;
}
div.scroller-x {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
  div.scroller-x {
    scroll-behavior: auto;
  }
}
div#overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: transparent;
  touch-action: pan-x;
}
div#md {
  min-width: 1100px;
  margin: auto;
  position: relative;

  /* Prevent user selection */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none; /* >= IE10 */
  user-select: none;
}
div.inline {
  display: inline-block;
}
div.left table {
  padding-right: 0.5em;
}
div.mid table {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
div.right table {
  padding-left: 0.5em;
}
table {
  width: 100%;
  border-spacing: 0;
  font-family: arial, sans-serif;
}
table caption {
  background: #d0ecf9;
  border-top: 1px solid #2cb8f0;
  padding: 0.25em;
  line-height: 3ex;
  margin-bottom: 1ex;
  margin-top: 2ex;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
}
table tbody tr {
  height: 3ex;
}
table tbody tr.selected {
  background-color: rgba(66, 105, 122, 0.25) !important;
  outline: 1px solid rgba(39, 61, 71, 0.40) !important;
}
table td, table th {
  padding: 0 0.25em;
  text-align: center;
}
table td.px {
  padding-right: 0px;
}
table td.rate {
  padding-left: 0px;
}
table th {
  border-bottom: 1px solid #aaa;
}
table th.group {
  padding-top: 0.5em;
}
div#spot_chart table th {
  border-bottom: 0;
}
div#spot_chart table caption {
  margin-bottom: -1ex;
}
table tbody tr:nth-child(even) {
  background: rgba(217, 234, 242, 0.5);
}
table thead, table caption {
  font-size: 13px;
}
table tbody {
  font-size: 12px;
}
iframe {
  margin: 0 auto;
  display: block;
}
td.bid {
  background-color: rgba(0,0,255,.6);
  color: white;
  font-weight: bold;
}
td.ask {
  background-color: rgba(255,0,0,.7);
  color: white;
  font-weight: bold;
}
td.mid.theo {
  color: #555;
}
.footer {
  margin-top: 1ex;
  font-size: 11px;
  color: #aaa;
  text-align: justify;
}
div#compare {
  text-align: center;
  background-color: #d0ecf9;
  font-size: 15px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.075);
  padding: 8px;
  margin: 3ex 15em;
  border-radius: 4px;
  font-family: Montserrat, sans-serif;
}
div#compare code {
  font-weight: bold;
  background-color: #2c2c2c;
  color: #eeeeee;
  padding: 2px 5px 0px 6px;
}
div.upper {
  margin-bottom: 3ex;
}
div.lower {
  margin-top: 0ex;
}
div.chart {
  height: 40ex;
}
div.toggle_container {
  font-family: sans-serif; /* Not Montserrat */
  position: relative;
  left: 3px;
  margin-top: 2px;
  float:left;
  display: block;
  width: 100%;
  margin-bottom: -21px;
  top: 14px;
}
.triple-width {
  width: 300%;
  display: flex;
}
.scroll-snap {
  scroll-snap-type: x mandatory;
}
.scroll-snap .scroll-snap-align {
  scroll-snap-align: start;
}
.on-top {
  position: relative;
  z-index: 20;
}
.float.left {
  float: left;
}
.float.right {
  float: right;
}
.btn-nav {
  display: flex;
  text-decoration: none;
  color: black;
  cursor: pointer;
  height: 2.65ex;
  width:  10ex;
}
.btn-nav span {
  font-size: 80%;
  color: rgba(0,0,0,0.65);
  flex-grow: 1;
}
.btn-nav.right span {
  text-align: right;
  margin-right: -0.2em;
}
.btn-nav.left span {
  text-align: left;
  margin-left: -0.2em;
}
.btn-nav.left {
  margin-left:  0;
  margin-right: calc(0ex - 10ex - 0.5em);
}
.btn-nav.right {
  margin-right: 0;
  margin-left:  calc(0ex - 10ex - 0.5em);
}
/* Hide scrollbar for Chrome, Safari and Opera */
.hidden-scrollbars::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.hidden-scrollbars {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
div#table-dom table.expanded {
    box-shadow: 0px 0px 12px rgb(0 0 0 / 33%);
    position: absolute;
    width: calc(-1em + 25% - 1px);
    background: white;
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding: 0;
}
div#table-dom table.expanded caption {
  margin-left: -0.6538461em;
  margin-right: -0.6538461em;
}
.note-down {
  font-family: 'Montserrat', sans-serif;
  font-size: 75%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.note-down div.label {
  position: absolute;
  margin-top: 0.1ex;
}
.note-down div.icon {
  position: absolute;
  margin-top: 1.4ex;
}
.rot90 {
  transform: rotate(90deg);
}

/* radio button tab group */
.toggle_group_container {
  /* Centered tabs */
  margin: auto;
  display: flex;
  justify-content: center;

  /* For underline-style tabs */
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 600;

  /* For button-style tabs    */
  /* font-family: sans-serif; */
  /* font-size: 13px;         */
  /* font-weight: 600;        */
}
.toggle_group_container__label:first-child {
  /* For button-style tabs       */
  /* border-radius: 4px 0 0 4px; */
}
.toggle_group_container__label {
  /* Centered tabs */
  align-items: center;
  display: inline-flex;
  justify-content: center;

  /* For underline-style tabs */
  width: 5em;
  padding: 3px;
  cursor: pointer;
  opacity: 0.35;
  border-bottom: 3px solid rgba(0,0,0,0.35);
  transition: opacity 0.2s, border-bottom 0.2s;

  /* For button-style tabs                          */
  /* width: 10em;                                   */
  /* height: 2em;                                   */
  /* border: 1px solid rgba(0, 0, 0, 0.3);          */
  /* border-right: 0;                               */
  /* background-color: transparent;                 */
  /* color: #999;                                   */
  /* transition: background-color 0.2s, color 0.2s; */
}
.toggle_group_container__label:last-child {
  /* For button-style tabs                       */
  /* border-radius: 0 4px 4px 0;                 */
  /* border-right: 1px solid rgba(0, 0, 0, 0.3); */
}
.toggle_group_container__label--selected {
  /* For underline-style tabs */
  border-bottom: 3px solid #3cb9f3;
  opacity: 1;
  /* For button-style tabs      */
  /* background-color: #23527c; */
  /* color: #FFF;               */
}
.toggle_group_container__input {
  /* Hide it */
  display: none;
}