/* =============================
   Reset & Base Typography
============================= */
html, body {
    margin: 0;
    padding: 0;
    height: 90vh; /* Limit height of page */
    font-family: "Tahoma", Arial, Verdana, sans-serif;
    font-size: 12px;
    color: black;

    /* Modern scrollbar for Firefox */
    scrollbar-width: thin;
    scrollbar-color: #7D94A2 white;
}

/* Modern WebKit Scrollbar Styling */
body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body::-webkit-scrollbar-track {
    background: white;
}

body::-webkit-scrollbar-thumb {
    background-color: #7D94A2;
    border-radius: 6px;
    border: 2px solid white;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #5b7686;
}

/* =============================
   Text Elements
============================= */
p,
td {
    font-family: "Tahoma", Arial, Verdana, sans-serif;
    font-size: 12px;
    color: black;
    line-height: 1.2;
    text-align: center;
}

hr {
    height: 1px;
    border: none;
    background-color: #737A7F;
}

/* =============================
   Links
============================= */
a:link,
a:visited,
a:active,
a:hover {
    font-family: "Tahoma", Arial, Verdana, sans-serif;
    color: #4a4a4a;
    text-decoration: none;
}

a:hover {
    color: #FF862D;
}

/* =============================
   Form Elements
============================= */
input,
button,
textarea {
    border: 1px solid black;
    background: white;
    color: black;
}

/* =============================
   Layout Structure
============================= */
table {
    height: 100%;
}

table.main-layout {
    width: 80%;
    height: 90vh;
    margin: 0 auto;
    border-collapse: collapse;
}

/* =============================
   Iframe Container
============================= */
.main-container {
    height: 100%;
    padding: 0 5px 5px 0; /* right and bottom space */
    box-sizing: border-box;
    background-color: #EAEAEA;
}

.main-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background-color: white;
}

/* =============================
   DataTables & Table Controls
============================= */
#tableWrapper {
    width: 98%;
    margin: 0 auto;
}

div.dataTables_wrapper {
    width: 100% !important;
    margin: 0 auto;
}

#gamesTable {
    width: 100% !important;           /* Full width inside the wrapper */
    table-layout: auto !important;    /* Let browser size columns naturally */
}

#gamesTable thead th {
    text-align: center;
}

#gamesTable tbody tr {
    cursor: pointer;
}

#gamesTable tbody tr:hover {
    background-color: #f0f0f0;
}

#gamesTable td,
#gamesTable th {
    padding: 6px 4px; /* smaller padding: vertical 6px, horizontal 4px */
}


#usersTableWrapper {
    width: 80%;
    margin: 0 auto;
}

#usersTable {
    width: 100% !important;           /* Full width inside the wrapper */
    table-layout: auto !important;    /* Let browser size columns naturally */
}

#usersTable thead th {
    text-align: center;
}

#usersTable tbody tr {
    cursor: pointer;
}

#usersTable tbody tr:hover {
    background-color: #f0f0f0;
}

#usersTable td,
#usersTable th {
    padding: 6px 4px; /* smaller padding: vertical 6px, horizontal 4px */
}



#predictionsTableWrapper {
    width: 70%;
    margin: 0 auto;
}

#predictionsTable {
    width: 100%;           /* Full width inside the wrapper */
    table-layout: auto;    /* Let browser size columns naturally */
}

#predictionsTable thead th {
    text-align: center;
}

#predictionsTable tbody td.clickable-cell {
    cursor: pointer;
}

#predictionsTable tbody td.clickable-cell:hover {
    background-color: #f0f0f0;
	color: #FF862D;
}

#predictionsTable td,
#predictionsTable th {
    padding: 6px 4px; /* smaller padding: vertical 6px, horizontal 4px */
}