* {
	margin: 0px;
	padding: 0px;
	font-family: 'Open Sans', sans-serif;


}







/* Chart Heading Start */

.chart-heading {

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


}

.chart-heading h2 {

	padding: 10px 0px;  
  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 5px;
  border: 1px solid green; 
  padding: 5px;
  text-align: center;
  background-color: dimgray;
  border-radius: 5px;

  
}

.subresults h3, h4 { 

 
color:white;
letter-spacing: 1px;
text-shadow: 2px 2px 4px #000000;

}

.subresults h3 {

	font-size: 22px;

}

.subresults h4 {
	font-size: 18px;
}

/* Subresults End */






/* =========================================================================================================*/
/* =========================================================================================================*/

/* top-button Start */


.button-container {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: 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 */

.nav-container {
	
	
}

.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 a.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: 0px;
    	padding: 0px;
    	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) { 


 }