* {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
/* Chart Heading Start */
.chart-heading {
margin: 0 ;
padding: 0;
text-align: center;
border:1px solid black;
background-color: green;
border-radius: 5px;
}
.chart-heading h2 {
padding: 10px 0;
font-size: 20px;
color: white;
font-family: 'Orbitron', sans-serif;
letter-spacing: 1px;
}
.chart-heading h3 {
font-size: 16px;
margin: 5px;
color: white;
letter-spacing: 1px;

}
/* Chart Heading End */
/* Subresults Start */
.subresults {

margin: 5px 0;
border: 1px solid black;
padding: 5px;
text-align: center;
background-color: white;
border-radius: 5px;

}
.subresults h3, h4 {

color:black;
letter-spacing: 1px;
}
.subresults h3 {
font-size: 20px;
}
.subresults h4 {
font-size: 18px;
}
/* Subresults End */
/* =========================================================================================================*/
/* =========================================================================================================*/
/* top-button Start */

.button-container {
margin: 5px auto 5px auto;
display: block;
text-align: center;
}
.top-btn {
border: 1px solid black;
border-radius: 5px;
padding: 5px 5px;
font-size: 14px;
cursor: pointer;
display: inline-block;
background: linear-gradient(to left, rgba(10,18,10,1), rgba(10,100,100,1));
}
i {
padding: 2px;
color: yellow;
}
.top-btn:hover {
background-color: rgb(81, 44, 148);
}
.top-btn:hover i {

color: white;
}
/* Green */
.success {
color: white;
}
.success:hover {
color: yellow;

}
/* top-button End */
/* =========================================================================================================*/
/* =========================================================================================================*/
/* jodi-chart Start */
.jodi-chart {
background-color:transparent;
margin-left: auto;
margin-right: auto;
font-size: large;

}
.jodi-chart table {
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
table-layout: fixed;
text-align: center;
background-color: white;
}
/* Zebra striping */
.jodi-chart tr:nth-of-type(odd) {
background: #eee;
}
.jodi-chart th {
background: #333;
color: white;
font-size: 10px;
overflow-wrap: break-word;
}
.jodi-chart td, th {
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
text-align: center;
background-color: white ;

}
.jodi-chart td {
font-size: 14px;
}
/* jodi-chart End */
/* rajani-pana-chart Start */
.rajani-pana-chart {
background-color:transparent;
margin-left: auto;
margin-right: auto;
font-size: large;

}
.rajani-pana-chart table {
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
text-align: center;
background-color: white;
}
/* Zebra striping */
.rajani-pana-chart tr:nth-of-type(odd) {
background: #eee;
}
.rajani-pana-chart th {
background: #333;
color: white;
font-size: 10px;
}
.rajani-pana-chart td, th {
padding: 5px;
border-top: 1px solid #ccc;
text-align: center;
background-color: white ;

}
.rajani-pana-chart td {
font-size: 12px;
}
.rajani-pana-chart p {
font-size: 10px;
}
/* rajani-pana-chart End */
/* bottom nav bar starts*/
/* Place the navbar at the bottom of the page, and make it stick */

.navbar {
background-color: #333;
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.navbar .active {
background-color: #04AA6D;
color: white;
}
/* bottom nav bar ends */
/* =========================================================================================================*/
/* =========================================================================================================*/
@media screen and (min-width: 500px) /* Desktop */  /* Chrome inspect Device - Ipad, Ipad Pro, Surface Duo*/
{

.jodi-chart table
{

margin-left: auto;
margin-right: auto;
text-align: center;
border-collapse: collapse;

}
.jodi-chart th
{
font-size:12px;
padding:10px 10px;
}
.jodi-chart td
{
font-size:18px;
padding: 10px 10px;
}
}
@media screen  and (max-width: 500px) /* Tablet */  /* Chrome inspect Device - Moto G4, Galaxy S5, Pixel X2, Pixel 2XL, iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 Plus, iPhone X, Galaxy Fold*/
{
.jodi-chart table
{


margin-left: auto;
margin-right: auto;
text-align: center;
border-collapse: collapse;

}
.jodi-chart th
{
font-size: 8px;
padding: 4px 4px
}
.jodi-chart td
{
font-size: 20px;
padding: 10px 10px;
}


}
@media screen  and (max-width: 320px) /* mobile  iPhone 5/SE*/
{

.jodi-chart table
{

text-align: center;
border-collapse: collapse;

}
.jodi-chart th
{
font-size:10px;
padding: 5px 3px;
}
.jodi-chart td
{
font-size:16px;
padding: 8px 8px;
}

}
/* jodi-chart End */
/* pana-chart Start */
@media screen and (min-width: 500px) /* Desktop */  /* Chrome inspect Device - Ipad, Ipad Pro, Surface Duo*/
{

.pana-chart table
{

table-layout: auto;
text-align: center;
border-collapse: collapse;

}
.pana-chart th
{
font-size:8px;
padding: 3px 3px;
}
.pana-chart td
{
font-size: 10px;
padding: 3px 3px;

}
.pana-chart p {
text-align: center;

}
p.chart-bold {
font-size: large;
}
.text-center p {

margin: 0;
padding: 0;
text-align: center;
}
}
@media screen  and (max-width: 500px) /* Tablet */  /* Chrome inspect Device - Moto G4, Galaxy S5, Pixel X2, Pixel 2XL, iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 Plus, iPhone X, Galaxy Fold*/
{
.pana-chart table
{

table-layout: fixed;
margin-left: auto;
margin-right: auto;
text-align: center;
border-collapse: collapse;
overflow:hidden;

}
.pana-chart th
{
font-size:6px;
padding: 3px 1px
}
.pana-chart td
{
font-size:8px;
padding: 3px 1px;
}
.pana-chart p {
font-size: 8px;
text-align: center;
}
p.chart-bold {
text-align: center;
font-size: 10px;
}
.text-center p {


text-align: center;
}
}
@media screen  and (max-width: 320px) /* mobile */
{

.pana-chart table
{
table-layout: auto;
text-align: center;
border-collapse: collapse;

}
.pana-chart th
{
font-size:6px;
padding:2px 1px;
text-align: center;
}
.pana-chart td
{
font-size:8px;
padding: 2px 1px;
text-align: center;
}
.pana-chart p {
font-size: 8px;
text-align: center;
}
p.chart-bold {
font-size: 12px;
}
.text-center p {


text-align: center;
}
}
/* pana-chart End */
/* =========================================================================================================*/
/* =========================================================================================================*/
/* rajani-pana-chart Start */
@media screen and (min-width: 500px) /* Desktop */  /* Chrome inspect Device - Ipad, Ipad Pro, Surface Duo*/
{

.rajani-pana-chart table
{

table-layout: auto;
text-align: center;
border-collapse: collapse;

}
.rajani-pana-chart th
{
font-size:10px;
padding: 3px 3px;
}
.rajani-pana-chart td
{
font-size: 20px;
padding: 3px 3px;

}


}
@media screen  and (max-width: 500px) /* Tablet */  /* Chrome inspect Device - Moto G4, Galaxy S5, Pixel X2, Pixel 2XL, iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 Plus, iPhone X, Galaxy Fold*/
{
.rajani-pana-chart table
{

table-layout: fixed;
margin-left: auto;
margin-right: auto;
text-align: center;
border-collapse: collapse;
overflow:hidden;

}
.rajani-pana-chart th
{
font-size:6px;
padding: 3px 1px
}
.rajani-pana-chart td
{
font-size:16px;
padding: 3px 1px;
}


}
@media screen  and (max-width: 320px) /* mobile */
{

.rajani-pana-chart table
{

table-layout: auto;
text-align: center;
border-collapse: collapse;

}
.rajani-pana-chart th
{
font-size:6px;
padding:2px 1px;
text-align: center;
}
.rajani-pana-chart td
{
font-size:14px;
padding: 2px 1px;
text-align: center;
}

}
/* pana-chart End */
/* X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap */
/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}