.circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    margin: 5px;
}
.circle-container {
    display: inline-flex;
    align-items: center;
    /*margin: 5px;*/
}
.text {
    margin-left: 10px;
    font-size: 20px;
    color: black;
}
.circle-1 { background-color: #F6F3EB; color: black;    font-weight: 600;}
.circle-2 { background-color: #F6F3EB; color: black;    font-weight: 600;}
.circle-3 { background-color: #F6F3EB; color: black;     font-weight: 600;} /* Yellow background, black text for better contrast */
.circle-4 { background-color: #F6F3EB; color: black;    font-weight: 600;}
.circle-5 { background-color: #F6F3EB; color: black;    font-weight: 600;}
.circle-6 { background-color: #F11735; color: white;    font-weight: 600;}
.circle-6-orange { background-color: #FF9D3C; color: black;    font-weight: 600;}
.circle-6-pink { background-color: #CB3A60; color: white;    font-weight: 600;}
.circle-6-green { background-color: #FFDF00; color: black;    font-weight: 600;}
.circle-7 { background-color:  #006C67; color: white;    font-weight: 600;}

label{margin-left: 20px;}
#datepicker{width:180px;}
#datepicker > span:hover{cursor: pointer;}
body{
  background-color: #FAF9F5;
}
.main-bg-color{
  background-color: #006C67;
}
.tr .th{
  background-color: #006C67;
  color: white;
  padding: 15px;

}
.tr .th-2{
  background-color: #015953;
  color: white;
  padding: 15px;
}
.new-tr-default th{
  background-color: white;
  color: black;
  padding: 15px;

}
.new-tr-light th{
  background-color: #f2f6eb;
  color: black;
  padding: 15px;

}
.new-tr th{
  background-color: white;
  color: black;
  padding: 15px;

}
.circle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5px;
}

.circle-label {
  margin-bottom: 5px;
  font-weight: bold;
  text-align: center;
}

.banner {
  background: #015C55;
  background: #015C55;
  background: #015C55;
}
.next-jackpot{
  background-color: #F6F3EB;
  padding: 15px;
}
.navbar-brand{
  padding:20px !important;
}
#footer{
  background: rgba(0, 254, 236, 1) 100%;
background: rgb(1, 89, 83);
background: linear-gradient(90deg, rgba(1, 89, 83, 1) 0%, rgba(2, 117, 109, 1) 35%, rgba(0, 254, 236, 1) 100%);
}
#header .navbar{
  background: rgba(0, 254, 236, 1) 100%;
background: rgb(1, 89, 83);
background: linear-gradient(90deg, rgba(1, 89, 83, 1) 0%, rgba(2, 117, 109, 1) 35%, rgba(0, 254, 236, 1) 100%);
}
/* Add this to your CSS file */
#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* or adjust as needed */
  background: rgba(255, 255, 255, 0.8); /* optional, for a better overlay effect */
}

.spinner {
  width: 50px;
  height: 50px;
}