/*  CSS Document
    Copyright(c) 2025. Kajuq.com Market Insights
*/
@font-face {
font-family:"Source Sans Pro";
src:url("source-sans.woff2") format("woff2"),url("source-sans.woff") format("woff"),url("source-sans.ttf") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}
@font-face {
font-family:"Rboto";
src:url("roboto.woff2") format("woff2"),url("roboto.woff") format("woff"),url("roboto.ttf") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Roboto",Arial, Helvetica, sans-serif;
  font-size: 12px;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.dark-mode {
    background: #1e1e1e;
    color: #eee; 
}
body.dark-mode canvas {
    background-color: #1e1e1e;
    border: 1px solid #444;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #2B1A62;
  background: linear-gradient(90deg, rgba(43, 26, 98, 1) 40%, rgba(16, 185, 129, 1) 100%);
  z-index: 999;
  color: #fff;
  padding :0 1%;
  align-content: center;
  display: inline-flex;
}
.header h1{
  font-size: 18px;
  align-self: center;
}
.header .logo{
  align-content: center;
  height: 100%;
}
.header .logo img{
  max-height: 80%;
}
.header button#theme-toggle{
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.wrapper {
  flex: 1 0 auto;
  padding: 0 1%;
}
.main {
  margin-top: 65px;
}
.footer {
  color:#fff;
  height: 60px;
  flex-shrink: 0;
  background-color: #020f18;
  align-content: center;
  width: 100%;
  text-align: center;
}
.footer a:link, .footer a:visited{
  color:#fff;
}
.footer a:hover{
  text-decoration: none;
}
.main .lastinfo ul{
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
.main .lastinfo ul li{
  font-weight: 700;
  width:60%;
  height: 100px;
  margin:10px auto;
  border-radius: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.main .lastinfo ul li:nth-child(-n+3){
  border:1px #36a2eb solid;
}
.main .lastinfo ul li:nth-child(n+4):nth-child(-n+6) {
  border:1px #ff6384 solid;
}
.main .lastinfo ul li span{
  font-weight: 400;
}
.main .lastinfo .text-up { background:rgb(250, 223, 223);color: red !important; }
.main .lastinfo .text-down { background:rgb(205, 245, 205);color: green !important; }
body.dark-mode .main .disclaimer a:link,body.dark-mode .main .disclaimer a:visited{
  color:#006dfb;
}
body.dark-mode .main .disclaimer a:link,body.dark-mode .main .disclaimer a:visited{
  color:#fff;
}
.main .disclaimer .text{
  text-align: justify;
  font-size: 14px;
}
.main .forecast table {
    border-collapse: collapse;
    margin: 25px auto;
    font-size: 14px;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    table-layout: fixed;
    width: 90%;
}
.main .forecast table th:first-child,
.main .forecast table td:first-child {
    width: 30%;
    white-space: nowrap;
}
.main .forecast table th:first-child{
  text-align: center;
}
.main .forecast table th:not(:first-child),
.main .forecast table td:not(:first-child) {
    width: calc(70% / 3);
    text-align: center;
}
.main .forecast table thead tr {
    background-color: #290098;
    color: #ffffff;
    text-align: left;
}
.main .forecast table tbody tr {
    border-bottom: 1px solid #dddddd;
}
.main .forecast table  tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}
body.dark-mode .main .forecast table  tbody tr:nth-of-type(even) {
    background-color: #333;
}
.main .forecast table tbody tr:last-of-type {
    border-bottom: 2px solid #290098;
}
.main .table-container table {
    border-collapse: collapse;
    margin: 25px auto;
    font-size: 14px;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    table-layout: fixed;
    width: 90%;
}
.main .table-container table th:first-child,
.main .table-container table td:first-child {
    width: 30%;
    white-space: nowrap;
    text-align: center;
}
.main .table-container table th:not(:first-child),
.main .table-container table td:not(:first-child) {
    width: calc(70% / 3);
    text-align: center;
}
.main .table-container table thead tr {
    background-color: #006e65;
    color: #ffffff;
    text-align: left;
}
.main .table-container table tbody tr {
    border-bottom: 1px solid #dddddd;
}
.main .table-container table  tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}
body.dark-mode .main .table-container table  tbody tr:nth-of-type(even) {
    background-color: #333;
}
.main .table-container table tbody tr:last-of-type {
    border-bottom: 2px solid #006e65;
}
.main .pastinfo canvas,.main .forecast canvas{
  border:0px;
}
.main .pastinfo .interval-buttons{
  width:100%;
  display: flex;
  justify-content: center;
}
.main .pastinfo .interval-buttons button{
  -webkit-appearance: none;
  appearance: none;
  background:#003cff;
  border:0px;
  border-radius:10px;
  color:#fff;
  line-height: 30px;
  padding:0px 10px;
  margin:0px 4px;
}
@media screen and (min-width:768px){
.header{
  height: 80px;
  align-content: center;
}
.header h1{
  font-size: 24px;
}
.main{
  margin-top: 85px;
}
.main h2{
  font-size: 25px;
  color:#333;
  display: inline-flex;
  padding:5px 15px;
  border-radius: 20px;
  line-height: 30px;
}
.main h2 i{
  margin:auto 4px;
}
.main h3{
  font-size: 18px;
}
body.dark-mode .main h2{
  color:#fff;
}
.main .lastinfo ul {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
}
.main .lastinfo ul li {
  width: auto;
  flex: 1;
  margin: 10px 0px;
  max-width: 200px;
  height: 80px;
}
body.dark-mode .main .lastinfo ul li{
  border:1px #fff solid !important;
}
.main .pastinfo .graficos,.main .forecast .graficos{
  display: flex;
  width:100%;
  align-items: center;
  justify-content: center;
}
.main .pastinfo .grafico1-cont,.main .pastinfo .grafico2-cont,.main .forecast .grafico3-cont{
  width: 650px;
}
.main .forecast table {
  width:400px;
  box-shadow: 0px 0px 0px;
}
.main .table-container table {
  width:550px;
  box-shadow: 0px 0px 0px;
}
}