body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: seagreen;  /* black bgcolor for all pages. */
    margin-top:1px;
    
}
.cell {
    width: 85px;
    height: 85px;
    border: 1px solid black;
    display: inline-block;
    margin: 2px;
    font-size: 25px;
    line-height: 70px;
    text-align: center;
    vertical-align: middle;
    font-size: 65px;
}
#allNumbers {
    font-size: 82px;
    border: 1px solid white;
    justify-content: right;
   
    align-items: center;
    margin: 5px;
    border: palegreen;
    color: hwb(30 91% 6% / 0.281);
    text-align: center;
    
}

#bingoCardIds {
   font-size: 50px;
    
    background-color: beige;
    align-items: center;

    cursor: grab;
}
#user{
    align-items: center;
    font-size: 63px;
    justify-content: left;
    background-color: beige;
    align-items: center;
    margin: 5px;
    cursor: grab;
    margin-left: 420px;
}

#login{
    align-items: center;
    font-size: 40px;
    justify-content: left;
    background-color: beige;
    align-items: center;
    margin: 5px;
    cursor: grab;
    margin-left: 420px;
}

th {
    border-radius: 5px;
    background-color: seagreen;
  
    
}

td{
    background-color: white;
    color:black;
    font-size: 30px;
    border-radius: 5px;
    border: 10px black;
}

tbody{

    border-radius: 20px;
}

table{
   margin-left: 100px;
    background-color:black;
    
}

#summary{

    width: 1300px;
    justify-content: center;
    align-items: center;
    margin: 5px;
    font-size: 35px;
    font-weight: bold;
    color:#e0cb0e;
    background-position: center;
    margin-left: 40px;

}
#detial{

}

/* displaying card id numbers */
.card-id {
    font-size: 56px;
    color: black;
    background-color:#3CB371;
    margin: 5px;
    border-width: 5px;
    
    

}

/* all called numbers display tables */
.called {
    background-color: black;
    color: white;
}
.called1 {
    background-color: red;
    color: white;
}

/* displaying yellow for a winning line */
.winning-line {
    background-color: yellow;
    color: black;
}
#board {
    margin: 20px auto;
    width: fit-content;
    border: 1px solid black;
    padding: 10px;
    background-color: white;
}
#ballsContainer {
    margin-top: 20px;
}
.ball {
    width: 50px;
    height: 50px;
    background-color: #ffcc00;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    font-size: 20px;
    color: #fff;
}
#currentCall {
    width: 170px;
    height: 160px;
    background-color: #ffcc00;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    font-size: 70px;
    font-weight: bold;
    color: red;
    background-image: url('img/logo.JPG');
    background-size: 80%;
    background-position: center;
}
#winnerAmount {
    
    height: fit-content;
    width: 170px;
 
    background-color: yellow;
  
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    font-size: 50px;
    font-weight: bold;
    color: red;
    background-position: center;
}

#amount2{
    height: fit-content;
    width: fit-content;
 
    background-color: yellow;
  
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    font-size: 50px;
    font-weight: bold;
    color: red;
    background-position: center;
}
#lastFiveCalled {
    margin-top: 10px;
}
.last-five-number {
    display: inline-block;
    width: 80px;
    height: 40px;
    background-color: #ffcc00;
    align-items: center;
    margin-right: 5px;
    color: red;
    font-size: 30px;
    justify-content: center;
    font-weight: bold;
}
#btn{
    font-size: 30px;
    font-weight: bold;
    color: black;
    border-color: black;
    border-radius: 5px;
    background-color:cadetblue;
    padding: 10px 20px;
    cursor: pointer;
    margin: 5px;
}

#btnlogin {
    font-size: 30px;
    font-weight: bold;
    color: white;
    border-color: black;
    border-radius: 5px;
    background-color: seagreen;
    padding: 10px 20px;
    cursor: pointer;
    margin: 5px;
}
/* displaying admin pages */
#admin {
    font-size: 30px;
    font-weight: bold;
    color: white;
    border-color: black;
    border-radius: 5px;
    background-color: seagreen;
    padding: 100px 200px;
    cursor: pointer;
    margin: 5px;
 
}

#btnStartGame:hover, #btnDrawBall:hover, #btnResetGame:hover, #btnCheckWinner:hover {
    background-color: white;
    color: blue;
}
#btnResetGame:hover {
    color: red;
}

#btnNextGame:hover{
    color: red;  
}
#ballBirr {
    font-size: 30px;
    font-weight: bold;
    color: seagreen;
    border-color: red;
    border-radius: 5px;
}
#boardButtons {
    margin-top: 10px;
}
#btnCloseBoard, #btnLockBoard {
    font-size: 20px;
    font-weight: bold;
    color: white;
    background-color: seagreen;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
}
#btnCloseBoard:hover {
    background-color: darkgreen;
}
#btnLockBoard:hover {
    background-color: red;
}
#btnClearBoard:hover {
    background-color: red;
}
.blink-blue {
    animation: 100s;
    color: blue !important;
}
.blink-yellow {
    animation: blink-blue-animation 1s;
    color: white !important;
}
@keyframes blink-blue-animation {
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}