body {
    font-family: sans-serif;
    font-size: 16px;
    color: #333;
    background-color: #ddd;
    margin: 0; /* Remove default margins */
    min-height: 100vh; /* Full viewport height */   
}
td.container {
	padding:20px;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	min-width:500px;
}
td {
	white-space:nowrap
}
h1 {
	color: #600;
	font-size: 24px;
	font-weight:bold;
}

h2 {
	color: #666;    
	font-size: 20px;
	font-weight:bold;
}
.icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 7px; /* Space between icons */
    transition: opacity 0.2s ease; /* Smooth transition for grey effect */
}
.copy-icon {background-image: url("../images/content_copy_24dp.svg");}
.save-icon {
	background-image: url("../images/save_24dp.svg");
	opacity: 0.5; /* Initially greyed */
	pointer-events: none; /* Initially disabled */
}
.info-icon {background-image: url("../images/info_24dp.svg");}
.back-icon {background-image: url("../images/back_24dp.svg");}
.logout-icon {background-image: url("../images/logout_24dp.svg");}
.add-icon {background-image: url("../images/addc_24dp.svg");}
.edit-icon {background-image: url("../images/edit_24dp.svg");}
.reports-icon {background-image: url("../images/reports_24dp.svg");}
.level-icon {background-image: url("../images/level_24dp.svg");opacity: 0.5; }
.delete-icon {background-image: url("../images/delete_24dp.svg");}

textarea {
	w1idth: 100%;
	he1ight: 100%;
	b1ox-sizing: border-box; /* Important: Include padding and border in the element's total width and height */
	white-space: nowrap;
}

tex1tarea:focus {
	border-color: #80bdff; /* Highlight on focus */
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* Subtle focus ring */
}

input[type="text"],  /* Style text inputs */
input[type="email"], /* Style email inputs */
input[type="password"],
select {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    padding: 8px 12px; /* Adjust padding for size */
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Add smooth transitions for hover and focus */
}

select:focus {
    border-color: #80bdff; /* Highlight on focus */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* Subtle focus ring */
}

select:hover {
  border-color: #007bff; /* Change border color on hover */
}

/* Style specific input types if needed */
input[type="submit"] { /* Example for a submit button */
    background-color: #007bff;
    color: white;
    cursor: pointer;
}
/* Style the button */
button {
    font-family: 'Arial', sans-serif; /* Match the font */
    font-size: 16px;
    font-weight: 400;
    color: #333; /* Text color */
    background-color: #f0f0f0; /* Background color */
    padding: 8px 16px; /* Adjust padding */
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer; /* Indicate it's clickable */
    /* Add other styles from the previous page */
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; /* Smooth transitions */
}

button:hover {
    background-color: #e0e0e0; /* Slightly darker on hover */
    border-color: #bbb;
}

button:active {
    background-color: #ddd; /* Even darker when clicked */
}

.divGames {
	width:100%;
	border:1px solid #666;
	b1ox-sizing: border-box;
	border-radius: 8px;
}

.tableGames {
	border-collapse:collapse;
}

.tableGames td {
	font-size: 20px;
}

.trGamesTitle td {
	color: #400;
	font-weight:bold;
	padding: 10px;
	padding-bottom:15px;
	padding-top:15px;
	border-bottom:1px solid #aaa;
}


.game {
	width:100%;
	padding-left:10px;
	cursor:pointer;
}

.trGame td,
.trGameOtherUser td {
	padding: 10px;
}
.trGame {
	cursor:pointer;}

.trGame td:hover {
  background-color: #f5f5f5;
}

.trGameOtherUser td {
	color: #aaa;
}

.trField td {
	color: #666;    
	font-size: 20px;
	padding: 20px 10px;
	text-align:right;
	vertical-align:top;
}
.tdFieldName {
	padding-top:37px;//Didn't work
}
.wide td {
	width:100%;
}



.timelineHeading {
	font-weight:bold;
	font-size:20px;
}

.timelineTime {
	font-size:12px;
	font-weight:normal;
	vertical-align:middle;
	
	padding-right:10px;
	padding-left:10px;
	b1ackground-color:#99A;
	color:#00A;
	b1order-radius: 12px;
}

.timelineHeadingScore {
	p1adding-right:10px;
	p1adding-left:10px;
	padding:10px;
	background-color:#A00;
	color:white;
	border-radius: 22px;
}

.timelineLeft {
	padding-top:4px;
	padding-bottom:4px;
	padding-right:10px;
	text-align:right;
}
.timelineHr {
	
	h1eight: 1px;
	            background-color: blue;
        b1ackground-color:#00A;    
}
.timelineRight {
	padding-top:4px;
	padding-bottom:4px;
	padding-left:10px;
	text-align:left;
}

.timelineScore {
	b11ackground-color:#A00;
	c1olor: white;
	color:#A00;
	text-align:center;
	padding-left:10px;
	padding-right:10px;
	font-weight:bold;
}
.timelineText {
	c1olor:#00A;
	f2ont-weight:bold;
	color:#555;
}
.timelineSquad {
	font-weight:bold;
}
.aOffset {text-decoration:none;padding-right:15px;padding-left:15px;color:#666;}

.form-link {
    color: #600;
    padding-right:15px;padding-left:15px;
    text-decoration: none;
    cursor: pointer; /* Hand cursor on hover */
    font-size:30px;
}
.form-link:hover {
    color: #000;
}
#reportTable {
	margin: 0 auto;
	border: 1px solid #666;
	border-radius: 8px;
	border-collapse:collapse;
}
#reportTable thead th {
	color: #FFF;
	background-color: #600;
	c1ursor: pointer;
	border: 1px solid #600;
	white-space: nowrap;
}
.reportThSortable {
	cursor: pointer;
}
#reportTable thead th, #reportTable tbody td {
	t1ext-align:center;
	padding:5px 6px;
	border: 1px solid #666;
}
.reportHighlight {
	color:#600;
	font-weight:bold;
}
.reportLeft  {
	text-align:left;
}
#keyDiv {
            display: none; /* Hidden by default */
            padding-top: 5px;
            #background-color: #f0f0f0;
            margin-top: 0px;
            white-space:wrap;
}
#keyDiv ul {
	margin-top: 0px;
	margin-bottom: 0px;
}
#keyDiv ul li {
	margin-bottom: 10px;
}
.custom-select {
    padding: 3px 7px;
    border: 1px solid #7b414f;
    border-radius: 5px;
    background-color: #7b414f;
    color: white;
    margin-bottom:15px;
}

.toggle-btn {
    cursor: pointer;   
    background: white;
    color: #7b414f;
    border: 1px solid #7b414f;
    padding: 5px 10px;
    border-radius: 5px;
    margin:10px;
}

.toggle-btn:hover {
	background: #7b414f;
    	color: white;
}