/* DPstar.in weekly Jodi and Panel chart pages (jodi.html, panel.html only).
   Written for DPstar.in. The home page and style.css are not touched. */
html{-webkit-text-size-adjust:100%}
body.chart-page{
  margin:0;
  padding:8px 8px 20px;
  background:#ffcc99;
  color:#000;
  font-family:Helvetica,Arial,sans-serif;
  font-weight:700;
  font-size:16px;
  text-align:center;
  box-sizing:border-box;
}
.chart-page *,.chart-page *::before,.chart-page *::after{box-sizing:border-box}

/* same DPstar.in logo box as the approved home page */
.chart-page .brand{
  display:flex;align-items:center;justify-content:center;
  height:77px;margin:0 0 5px;padding:0 10px;
  background:#ffcc99;border:3px solid #ff0016;border-radius:12px;
  text-decoration:none;
}
.chart-page .brand--stacked{
  flex-direction:column;
  gap:3px;
}
.chart-page .brand-text-logo{
  display:inline-flex;align-items:baseline;justify-content:center;
  max-width:100%;gap:clamp(5px,1.5vw,18px);
  background:transparent;line-height:1;white-space:nowrap;
}
.chart-page .brand-text-logo__dp{
  color:#ff0090;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:clamp(30px,8vw,42px);font-style:italic;font-weight:400;line-height:1;
}
.chart-page .brand-text-logo__star{
  color:#101828;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(20px,5.2vw,38px);font-style:italic;font-weight:900;line-height:1;
  letter-spacing:clamp(.4px,.3vw,1.4px);
}

.chart-page .brand-subtitle{
  color:#101828;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(12px,2.2vw,15px);
  font-style:normal;font-weight:700;line-height:1;
  letter-spacing:.5px;
  white-space:nowrap;
}

/* Market Jodi/Panel masthead: the approved Homepage DPstar.in logo. */
.chart-page .brand.market-chart-brand{
  height:auto;
  min-height:96px;
  padding-block:clamp(6px,1.1vw,16px);
}
.chart-page .market-chart-brand .brand-text-logo{
  width:auto;
  max-width:100%;
  justify-content:center;
  gap:0;
}
.chart-page .market-chart-brand .brand-text-logo__dp{
  font-size:clamp(43px,14.8vw,110px);
}
.chart-page .market-chart-brand .brand-text-logo__star{
  font-size:clamp(34px,11.2vw,84px);
  letter-spacing:0;
}

.chart-back{
  display:inline-block;min-width:120px;min-height:44px;margin:0 0 4px;padding:12px 20px;
  background:#522f92;color:#fff;border:1px solid #e6e6e6;
  font-size:14px;font-weight:700;line-height:18px;text-decoration:none;
  -webkit-tap-highlight-color:rgba(82,47,146,.3);
}

h1.chart-h1{
  margin:3px 0;padding:5px 10px;
  background:#ff00a2;color:#fff8f8;border:2px solid #fff;
  font-size:18px;font-weight:700;text-align:center;
  text-shadow:1px 1px 2px #000;
}

.para3,.chart-result{
  color:#00094d;
  text-shadow:1px 1px 2px #fff;
  box-shadow:0 0 20px 0 rgba(0,0,0,.4);
  line-height:1.4;
}
.para3{
  margin:0 0 3px;padding:4px 10px;
  background-image:linear-gradient(187deg,#ffcc99 50%,#ffc387 50%);
  border:2px outset #ff0016;
  font-size:14px;
}
.para3 h2{margin:0;font-size:14px}
.para3 p{margin:0;font-size:12px;line-height:14px}

.chart-result{
  margin:6px 2px;padding:4px 10px;
  border:1px solid #000;
  font-size:14px;
}
.chart-result .res-name{font-size:22px;line-height:30.8px}
.chart-result .res-value{display:inline-block;min-height:29px;color:#880e4f;font-size:21px;line-height:29.4px;text-shadow:1px 1px 2px #ffe2c6}
.chart-result .res-meta{margin:2px 0 0;font-size:11px;line-height:14px;font-weight:700;text-shadow:none}
.refresh-btn{
  display:inline-block;min-height:44px;margin:4px 0 2px;padding:14px 12px;
  background:#522f92;color:#fff;border:1px solid #e6e6e6;
  font-size:12px;font-weight:700;line-height:14px;text-decoration:none;text-shadow:none;cursor:pointer;
  -webkit-tap-highlight-color:rgba(82,47,146,.3);
}

.btn-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:8px 0 10px}
.button2{
  display:inline-block;min-height:44px;margin:0 0 5px;padding:12px 24px;
  background:#a0d5ff;color:#220c82;border:2px solid rgba(0,0,0,.36);
  font-size:14px;font-weight:800;line-height:18px;text-decoration:none;
  text-shadow:1px 1px 0 #00bcd4;
  box-shadow:0 8px 10px 0 rgba(0,0,0,.2),0 6px 8px 0 rgba(0,0,0,.19);
  cursor:pointer;-webkit-tap-highlight-color:rgba(34,12,130,.25);
}

.chart-view-note{margin:0 2px 6px;font-size:12px;line-height:16px;color:#00094d}
.cell-info{min-height:20px;margin:0 2px 6px;font-size:13px;line-height:20px;color:#880e4f}

.panel{margin:0 -2px 0 0;border:1px solid #3f51b5}
.panel-heading{margin:0;padding:0;background:#3f51b5}
.panel-heading h3{margin:0;padding:5px;font-size:16px;font-weight:700;color:#fff;text-align:center}
.panel-body{margin:0;padding:0}
.chart-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}

table.chart-table{
  width:100%;margin:0;border-collapse:collapse;border-spacing:2px;
  text-align:center;table-layout:auto;
}
table.chart-table thead{background:#ffc107}
table.chart-table th,table.chart-table td{padding:2px;font-weight:700;vertical-align:middle}
table.chart-table td[data-date]{cursor:pointer}

/* jodi chart: black grid, large numbers */
table.jodi-table{border:1px solid #000}
table.jodi-table th{
  border:1px solid #000;font-size:16px;
  text-shadow:1px 1px 2px rgba(154,116,0,.67);
}
table.jodi-table td{border:1px solid #000;padding:5px 0;font-size:24px}

/* panel chart: light blue grid, small panna digits, bigger jodi */
table.panel-table{
  border:1px solid rgba(3,169,244,.66);min-width:100%;
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
table.panel-table th{
  border:1px solid rgba(3,169,244,.66);font-size:11px;
  text-shadow:1px 1px 2px rgba(154,116,0,.67);
}
table.panel-table th.date-col{width:55px}
table.panel-table td{padding:5px 0;font-size:11px;border:0 solid rgba(3,169,244,.66);border-top-width:1px;border-bottom-width:1px}
table.panel-table td.date{width:59px;border-width:1px;font-size:9px}
table.panel-table td.open{border-left-width:1px}
table.panel-table td.close{border-right-width:1px}
table.panel-table td.jodi{font-size:16px}

table.chart-table td.r{color:#ff0000}
table.chart-table td.empty{color:transparent}

.chart-msg{margin:10px 2px;padding:10px;border:1px solid #000;background:#ffe0c2;color:#00094d;font-size:14px;line-height:20px;text-shadow:none}
.chart-msg a{color:#220c82}
.chart-msg button{min-height:44px;margin-top:6px;padding:10px 16px;background:#522f92;color:#fff;border:1px solid #e6e6e6;font:inherit;font-size:13px}

.bottom-row{margin:12px 0 10px}
.chart-list{margin:0 7px 10px;border:2px solid #003c6c;text-align:center}
.chart-list h3{margin:0;padding:6px 4px;background:#004d8c;color:#fff;font-size:24px;line-height:28px;font-weight:700}
.chart-list a{
  display:block;min-height:44px;padding:9px 7px 8px;border-top:1px solid #003c6c;
  color:#003c6c;font-size:20px;font-weight:600;line-height:26px;text-decoration:none;
}
.chart-list a.is-current{background:#fff;text-decoration:underline}
.chart-foot{margin:14px 0 0;font-size:12px;line-height:18px;font-weight:700}
.chart-foot a{color:#220c82;padding:6px 4px;display:inline-block}

@media (min-width:640px){
  body.chart-page{max-width:760px;margin:0 auto}
}
@media (max-width:360px){
  .button2{padding:12px 14px;font-size:13px}
  table.jodi-table td{font-size:22px;min-width:40px}
}