@charset "UTF-8";

@import "widget-root.css";

* {
  margin: 0;
  padding: 0;
}
.docSize {
  width:  100%;
  height: 100%;
  min-width: var(--min-width);
  min-height: 400px;
  margin: 0;
  /* disable margin collapse */
  padding-top: 0.05px;
  overflow: hidden;
}
.contentSize {
  width: 94%;
  height: 94%;
  margin: 3%;
}
body.noheader .contentSize {
  width: 100%;
  margin: 3% 0;
}

/* layout  */
div#wrapper {
  width: 100%;
  height: 100%;
  /* flex display child */
  display: flex;
  flex-flow: column nowrap;
  gap: 3%;
}

div#wrapper > header {
  /* flex display child */
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  /* flex display self */
  flex: 6;
}
div#wrapper > header > div.embed {
  /* flex display child */
  display: flex;
  flex-flow: row nowrap;
  align-content: stretch;
  justify-content: space-between;
  align-items: stretch;
  /* flex display self */
  align-self: stretch;
  flex: 0 1 5%;
  min-width: 25px;
}
div#wrapper > header > div.embed a {
  /* flex display self */
  flex: 1;
}

div#wrapper > div#share {
  /* flex display child */
  display: flex;
  flex-flow: row nowrap;
  align-content: stretch;
  justify-content: space-between;
  align-items: stretch;
  /* flex display self */
  flex: 3;
}
div#wrapper > div#share > span {
  /* flex display child */
  display: flex;
  flex-flow: row nowrap;
  align-content: stretch;
  justify-content: flex-start;
  align-items: center;
}
div#wrapper > div#share > span.link {
  white-space: nowrap;
  /* flex display self */
  flex: 1 1 auto;
}

div#wrapper > div#items {
  /* flex display child */
  display: flex;
  flex-flow: row wrap;
  align-content: stretch;
  justify-content: space-around;
  align-items: stretch;
  gap: 5%;
  /* flex display self */
  flex: 36;
}

div#wrapper > footer {
  /* flex display child */
  display: flex;
  flex-flow: row nowrap;
  align-content: space-around;
  justify-content: space-around;
  align-items: center;
  /* flex display self */
  flex: 1;
}
div#wrapper > footer > div {
  /* flex display self */
  flex: 1 1 50%;
}

article.row {
  /* flex display child */
  display: flex !important;
  flex-flow: column nowrap;
  /* flex display self */
  flex: 1 0 45%;
}
article.row > div.info_row {
  /* flex display child */
  display: flex;
  flex-flow: column nowrap;
  /* flex display self */
  flex: 0 0 45%;
}
article.row > div.info_row > h6 {
  /* flex: 2 0 calc(1.9rem + 70 * var(--window-ratio)); */
  flex: 1;
}
article.row > div.info_row > span {
  flex: 1;
}
article.row > div.value_row {
  /* flex display child */
  display: flex;
  flex-flow: row nowrap;
  align-content: stretch;
  gap: 5%;
  /* flex display self */
  flex: 0 0 45%;
}
article.row > div.value_row > div.change_col {
  /* flex display child */
  display: flex;
  flex-flow: column nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 5%;
  /* flex display self */
  flex: 2;
}
article.row > div.value_row > div.change_col > span {
  white-space: nowrap;
}
article.row > div.value_row > div.change_col > span.change {
  align-self: stretch;
}
article.row > div.value_row > div.icon_col {
  /* flex display child */
  display: flex;
  flex-flow: column nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 5%;
  /* flex display self */
  flex: 1;
}
article.row > div.value_row > div.icon_col > div {
  min-width: 32px;
  min-height: 32px;
  align-self: stretch;
  margin: 0 30%;
  /* flex display self */
  flex: 2;
}
article.row > div.value_row > div.icon_col > span {
  white-space: nowrap;
  /* flex display self */
  flex: 1;
}

/*The embed area*/
div.embed-area {
  position:absolute;
  display: none;
  z-index: 100;
  top: 0;
  left: 0;
  background: hsla(91, 20%, 100%, 0.94);
}
div.embed-area > div.contentSize {
  /* flex display child */
  display: flex;
  flex-flow: column nowrap;
  align-content: stretch;
  justify-content: space-evenly;
  gap: 0;
}
div.embed-area > div.contentSize > div:nth-child(1) {
  /* flex display child */
  display: flex;
  flex-flow: column nowrap;
  align-content: flex-end;
  justify-content: center;
  align-items: flex-end;
  /* flex display self */
  flex: 0 1 5%;
}
div.embed-area > div.contentSize > div:nth-child(2) {
  /* flex display self */
  flex: 0 0 25%;
}
div.embed-area > div.contentSize > div:nth-child(3) {
  /* flex display self */
  flex: 1 1 auto;
}
div.embed-area > div.contentSize > div:nth-child(1) > button {
  border: 0;
  background:url(../icons/icon-close-3x.svg) no-repeat right center;
  background-size: contain;
  /* flex display self */
  flex: 1;
}
div.embed-area > div.contentSize > div > p {
  margin: 1rem;
}
div.embed-area > div.contentSize > div > h5 {
  margin: 10% 0 0;
}
div.embed-area > div.contentSize > div > div.rss,
div.embed-area > div.contentSize > div > textarea {
  color: #4b636e;
  background: #fff;
  box-sizing: border-box;
  padding: 1rem;
}
div.embed-area > div.contentSize > div > textarea {
  border: 1px solid #4b636e;
  width: 100%;
  height: 40%;
}


/* style */
* {
  font-family: "Roboto", sans-serif !important;
  color: #3d3d3d;
}
a {
  text-decoration: none !important;
}
div#wrapper > header > h1 {
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
div#wrapper > header > h1 > a {
  color: black;
}
div#wrapper > header > div.embed a {
  background: url(../icons/icon-share-3x.svg) no-repeat center center;
  background-size: contain;
}
div#wrapper > div#share > span.link > a {
  font-weight: bold;
  background:url(../icons/icon-link.svg) no-repeat right center;
  background-size: contain;
}
div#wrapper > footer > div {
  text-align: center;
}
div#wrapper > footer  > div > span {
  margin-right: 0.25rem;
}
div#wrapper > footer  > div:last-child > span {
  vertical-align: super;
}


/* Fluid Typography */
div#wrapper > header > h1 {
  font-size: calc(1.0rem + 65 * var(--window-ratio)) !important;
}
div#wrapper > footer > div {
  font-size: calc(0.4rem + 12.5 * var(--window-ratio)) !important;
}
div#wrapper > div#share > span.link > a {
  font-size: calc(1.0rem + 25 * var(--window-ratio)) !important;
  padding-right: calc(1.5rem + 37.5 * var(--window-ratio)) !important;
}
article.row > div.value_row > div.change_col > span.change {
  color: rgb(137, 137, 137);
  font-size: calc(1.1rem + 75 * var(--window-ratio)) !important;
}
article.row > div.value_row > div.change_col > span.sub_change {
  font-size: calc(0.75rem + 12.5 * var(--window-ratio)) !important;
}
article.row > div.value_row > div.icon_col > span {
  font-size: calc(0.70rem + 12.5 * var(--window-ratio)) !important;
}
article.row > div.info_row > h6 > a {
  font-size: calc(0.95rem + 25 * var(--window-ratio)) !important;
  line-height: calc(0.95rem + 35 * var(--window-ratio)) !important;
}
article.row > div.info_row > span {
  font-size: calc(0.65rem + 12.5 * var(--window-ratio)) !important;
  line-height: calc(0.9rem + 25 * var(--window-ratio)) !important;
}
div.embed-area > div.contentSize > div > h5 {
  font-size: calc(1.1rem + 12.5 * var(--window-ratio)) !important;
  line-height: calc(1.3rem + 12.5 * var(--window-ratio)) !important;
}
div.embed-area > div.contentSize > div > p {
  font-size: calc(0.9rem + 12.5 * var(--window-ratio)) !important;
}
div.embed-area > div.contentSize > div > div.rss,
div.embed-area > div.contentSize > div > textarea {
  font-size: calc(0.8rem + 12.5 * var(--window-ratio)) !important;
}

/* On screens that are 769px or less */
@media screen and (max-width: 769px) {
  article.row > div.value_row > div.change_col > span.change {
    color: rgb(116, 116, 116);
  }
}
/* On screens that are 599px or less */
@media only screen and (max-width: 599px) {
  article.row > div.value_row > div.change_col > span.change {
    color: rgb(95, 95, 95);
  }
}
/* On screens that are 549px or less */
@media only screen and (max-width: 549px) {
  article.row > div.value_row > div.change_col > span.change {
    color: rgb(74, 74, 74);
  }
}
/* On screens that are 479px or less */
@media only screen and (max-width: 479px) {
  div#wrapper {
    gap: 1%;
  }
  
  div#wrapper > footer > div {
    font-size: calc(0.5rem + 12.5 * var(--window-ratio)) !important;
  }
  
  div#wrapper > header > h1 {
    font-size: calc(0.8rem + 70 * var(--window-ratio)) !important;
  }

  article.row > div.value_row > div.change_col > span.change {
    color: rgb(53, 53, 53);
  }
  article.row {
    padding: 0;
    /* flex display child */
    flex-flow: row nowrap;
    align-items: center;
    /* flex display self */
    flex: 1 1 25%;
  }
  article.row:not(:first-child) {
    border-top: 1px solid lightgray !important;
  }

  div#wrapper > div#items {
    /* flex display child */
    flex-flow: column nowrap;
    gap: 0;
  }
  article.row {
    /* flex display self */
    flex: 1 1 20%;
  }
  article.row > div.info_row {
    flex: 1 45%;
  }
  article.row > div.value_row > div.change_col {
    flex: 2 0 80%;
  }
  article.row > div.value_row > div.icon_col {
    flex: 1 0 20%;
  }
  article.row > div.value_row > div.icon_col > div {
      min-width: 28px;
      min-height: 28px;
      margin: 0;
  }
  article.row > div.value_row > div.icon_col > span {
    font-size: calc(0.65rem + 12.5 * var(--window-ratio)) !important;
  }
  article.row > div.value_row > div.change_col > span.change {
    font-size: calc(0.9rem + 75 * var(--window-ratio)) !important;
  }
}
/* On screens that are 419px or less */
@media only screen and (max-width: 419px) {
  .docSize {
    min-height: 225px;
  }

  .contentSize {
    margin: 2%;
  }
  article.row > div.value_row > div.change_col > span.change {
    color: rgb(32, 32, 32);
  }
}

/* 200px sidebar */
@media only screen and (max-width: 389px) {
  div#wrapper {
    gap: 1.0rem;
  }

  div#wrapper > div#items {
    gap: 0.75rem;
  }

  article.row {
    flex-flow: column nowrap;
    align-items: stretch;
    padding: 0;
  }
}

@media only screen and (max-width: 349px) {
  .contentSize {
    width: 98%;
    height: 98%;
    margin: 1%;
  }
  
  div#wrapper {
    height: unset;
    width: unset;
    gap: 1.0rem;
  }
  
  div#wrapper > header {
    flex: 4;
  }
  
  div#wrapper > div#share {
    flex: 2;
  }
  
  div#wrapper > header > h1 {
    font-size: calc(1.2rem + 60 * var(--window-ratio)) !important;
    white-space: break-spaces;
  }

  div#wrapper > header > div.embed {
    flex: 0 1 15%;
    max-width: 25px;
  }
  
  article.row {
    gap: 0.5rem;
  }
  
  article.row:not(:first-child) {
    border: 0 !important;
  }
  
  article.row > div.info_row > h6 {
    flex: 2 0;
  }
  
  article.row > div.value_row > div.icon_col > span {
    font-size: calc(0.85rem + 12.5 * var(--window-ratio)) !important;
  }
  
  div#wrapper > footer {
    flex-flow: column nowrap;
  }
  
  div#wrapper > footer > div {
    font-size: calc(0.7rem + 12.5 * var(--window-ratio)) !important;
    white-space: nowrap;
  }
}

@media only screen and (max-width: 350px) and (max-height: 579px) {
  article.row:nth-child(4) {
    display: none !important;
  }
}

@media only screen and (max-width: 350px) and (max-height: 459px) {
  article.row:nth-child(3) {
    display: none !important;
  }
}

@media only screen and (max-width: 350px) and (max-height: 339px) {
  article.row:nth-child(2) {
    display: none !important;
  }
}

@media only screen and (min-width: 250px) and (max-width: 349px) {
  div#wrapper > div#items {
    gap: 1.0rem;
    margin-top: 1.0rem;
  }
}