body{
	font-family: Arial, Verdana;
	font-size: 0.9em;
	text-align: center;
    /*background-color: lavender;*/
	color: gray;
}
.grid-container3{
	display: grid;
	grid-template-columns: auto auto auto;
}
.grid-container2{
	display: grid;
	grid-template-columns: auto auto;
}
.grid-container2 div{
	padding: 5px;
}
.coordinates{
	display: none;
}
.tela_e{
	background-color: white;
	display: none;
	z-index: 2;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
input[type=text], input[type=number], input[type=password] {
	background-color: #eee;
	border-radius: 6px;
}
input[type=date] {
	background-color: #eee;
}
input[type=button] {
	border-radius: 6px;
	cursor: pointer;
	border: none;
	padding: 4px 12px;
}
label{
	padding: 2px;
	cursor: pointer;
	border-radius: 6px;
}
select {
	background-color: #eee;
}
span{
	padding: 1px;
	cursor: pointer;
}
table {
	border-radius: 10px;
	background-color: white;
}
textarea{
	height: 150px;
	width: 600px;
	max-width: 90%;
}
#legenda td{
	width: 100px;
	border-radius: 6px;
}
#orbs input[type=number]{
	width: 40px;
}
#ephemeris th {
  background-color: silver;
  color: #fff;
}
.clients_e_tab{
  border-radius: 0;
  padding: 3px 10px 1px 10px;
  border-right: 1px solid white;
}
.clients_e_table{
  background-color: khaki;
  border-radius: 0;
  padding: 10px;
  width: 100%;
}
#ephemeris_chart th, #relocation_chart th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}
#ephemeris_chart tr:hover {
	background-color: lightgray;
}
#relocation_chart tr:hover{
	background-color: #777;
	color: white;
	border-color: white;
}
/* ============================= Classes ==================================================================================
*/
.btn {
  border: none; /* Remove borders */
  border-radius: 6px;
  padding: 5px 15px; /* Some padding */
  font-size: 0.9em; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}
.btnp {
  border: none; /* Remove borders */
  border-radius: 6px;
  padding: 3px 7px; /* Some padding */
  cursor: pointer; /* Mouse pointer on hover */
}
/* ============================= Classes de Cores ==================================================================================
*/
.azul{
  background-color: DodgerBlue; /* Blue background */
  color: white;
  font-weight: bold;
}
.azul:hover{
  background-color: RoyalBlue;
}
.cinza{
  background-color: Gray;
  color: white;
  font-weight: bold;
}
.cinza:hover{
  background-color: #333;
}
.verde{
  background-color: Green;
  color: white;
  font-weight: bold;
}
.vermelho{
  background-color: Red;
  color: white;
  font-weight: bold;
}
.tomato{
  background-color: Tomato;
  color: white;
  font-weight: bold;
}
.tomato:hover{
  background-color: Red;
}
.tomato:focus{
  background-color: Red;
}
.branco{
  background-color: White;
  color: gray;
  font-weight: bold;
}
.branco:hover{
  background-color: DodgerBlue;
  color: white;
}
.yellow{
  background-color: yellow;
  color: black;
  font-weight: bold;
}
.lightgray{
  background-color: lightgray;
  font-weight: bold;
}
.cinza2{ /* No hover */
  background-color: Gray;
  color: white;
  font-weight: bold;
}

/* ======================= Mandala ============================= */
#aaa{
  margin: auto;
  float: none;
}
#aspects2{
  display: none;
}
@media screen and (min-width: 990px) {
}
@media screen and (min-width: 1040px) {
	#aaa{
	  float: left;
	}
	#bbb{
	  margin-top: 30px;
	}
	#aspects1{
	  display: none;
	}	
	#aspects2{
	  display: block;
	}
	.grid-container3{
		grid-template-columns: auto auto auto;
	}
}