h2 {
color: #333;
}

.message {
color: green;
font-weight: bold;
}

form {
display: flex;
flex-direction: column;
gap: 10px;
}

textarea {
width: 100%;
height: 200px;
}

button {
background: blue;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}



.hidden {
display: none;
}

input, select, button {
display: block;
margin-bottom: 10px;
padding: 8px;
width: 100%;
}

.calcus-container input{
font-size:26px;
}

#arbitrageResults, #stakeResults, #profitResult {
margin-top: 20px;
padding: 10px 5px;
}

.text-green{
color:green;
}
.bookmaker{
padding: 4px;
}
.bookmaker-SportyBet {
background-color: red;
color:white;
display: block;
text-align: center;
font-weight: bolder;


}

.bookmaker-SoccaBet {
background-color: green;
color:yellow;
display: block;
font-style: italic;
text-align: center;
font-weight: bolder;
}

.bookmaker-Msport {
background-color: black;
color:yellow;
display: block;
font-weight: bolder;
text-align: center;
}
.text-red{
color:red;
}

td span.odd{
display: block;
padding: 4px;
color: white;
text-align: center;
background-color: #1abc9c;
}

.calcus-container{
min-width: 60%;
margin:auto;
}
.calcus-container *{
width: 100%;
}

table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 20px 0;
}

th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}

th {
background-color: #2c3d50;
color: white;
font-weight: bold;
border:0;
}

tr:nth-child(even) {
background-color: #f7f7fa;
}

tr:hover {
background-color: #ddd;
}
.scrape-time{
display: block;
margin-top:15px;

}

input[type="date"]:focus {
outline: none;
border: none;
box-shadow: none;
}

a.bookmaker-link.bookie-link{
text-decoration: none;
list-style: none;
display: block;
}
a.bookmaker-link.bookie-link:hover{
text-decoration: underline;
color: white;
}

.app-usage{
border-top:1px solid #ededed;
padding-top: 5px;
}
.app-usage *{
text-align: left;
}

.result-toolbox{
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #1abc9c;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: none;

}
td.row-innder:hover .result-toolbox{
display: block;
cursor: pointer;
}
td.row-innder{
position: relative;

}
.flex{
display: flex;
}
.predictor-tools{
text-align: center;
margin-right: 5px;
display: flex;
}
.predictor-tools span{
font-size: 16px;
}
.predictor-tools input{
width: 34px;
height: 24px;
cursor: pointer;
}
table.event-result-tools{
height: inherit;
margin: 0;
}
table.event-result-tools td{{
width: 33%;
}
input.home_team_goals,input.away_team_goals{
margin-top: 5px;
}
.save-match-result{
font-weight: bolder;
font-size: 16px;
text-align: center;
border-radius: 5px;
padding: 5px;
max-width: 100px;
margin: auto;
background-color: #1abc9c;
}
.prediction-won{
font-size: 34px;
color: green;
}
span.prediction-won{
font-size: 34px !important;color: white !important;background: green !important;border-radius: 50px !important;
}



/* Hide default checkbox */


/* Create a custom checkbox */
.predictor-tools {
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
font-weight: bold;
padding: 1px 11px;
border-radius: 5px;
transition: background 0.3s ease;
}

/* Default background */
.predictor-tools {
background-color: #f3f3f3; /* Light gray */
border: 1px solid #ccc;
margin-top: 10px;
}

/* Change background color when checkbox is checked */
.predict-check:checked + span {
background-color: #28a745; /* Green for "Won" */
color: white;
padding: 5px 10px;
border-radius: 5px;
}

/* Styling for Lost */
.predict-check[value="lost"]:checked + span {
background-color: #dc3545; /* Red for "Lost" */
color: white;
}


.header-line{

padding:2px;
background-color: #1abc9c;
color: white;
}

.sports-header-style{
background-image: url("images/header_bg.png");
background-origin: center;
background-size: cover;
background-repeat: no-repeat;
}


/* Modal Overlay */
.custom-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}

/* Modal Box */
.custom-modal {
background: #fff;
width: 350px;
padding: 20px;
border-radius: 8px;
text-align: center;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
position: relative;
animation: fadeIn 0.3s ease-in-out;
}

/* Modal Title */
.custom-modal h2 {
font-size: 20px;
margin-bottom: 10px;
}

/* Modal Message */
.custom-modal p {
font-size: 16px;
margin-bottom: 15px;
}

/* Close Button */
.custom-modal .close-btn {
background: #ff4d4d;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}

.custom-modal .close-btn:hover {
background: #d63434;
}

/* Close Button (X) */
.custom-modal .close-icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
cursor: pointer;
}

/* Fade In Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}


.swal-custom-btnn{
background-color: #1abc9c !important;
}

.date-picker button:hover{
background: #888;
}

.flex{
    display: flex;
}