@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400&700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap");
@import url("https://apps.wilco.org/utils/wilcostyle/wilcoStyle.css?v=2");

html, body { margin: 0; padding: 0; }
/*body { background-color: var(--wc-tan-60); }*/
header { background-color: #fff; border-bottom: 1px solid var(--wc-tan); margin-bottom: 5px; padding: 10px; }
main { padding: 10px; margin-bottom: 60px; }
footer { background-color: #fff; border-top: 1px solid var(--wc-tan); bottom: 0; padding: 20px; position: fixed; width: 100%; }
table { width: 100%; }

h5 { text-wrap: pretty; }

input { font-family: "Kanit", sans-serif; }

div.centered { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); border-radius: 10px; }

#optionsListBox { width: 50%; height: auto; padding: 8px; border: 1px solid #ccc; border-radius: 4px; background-color: #f8f8f8; font-size: 16px; color: #333; margin-bottom: 10px; }

.loginBox { background-color: var(--wc-tan-60); /*border: 3px solid var(--wc-main-60);*/ padding: 10px; width: 50%; }

.block { display: block; }
.margin-top-10 { margin-top: 10px; }
.container { display: flex; }
.column { flex: 1; }

.table--alternating-colors tbody tr:nth-child(odd) { background-color: var(--wc-light_blue-60); }

	.table--alternating-colors tbody tr:nth-child(odd) > td > a { color: #fff; }

/* Example button styles */
.paginate-button { background-color: #007acc; /* A nice blue color */ color: #ffffff; /* White text */ border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 0.95rem; margin: 0 4px; /* spacing between buttons */ transition: background-color 0.3s ease; }

	.paginate-button:hover { background-color: #005fa3; /* Darken on hover */ }

	.paginate-button:disabled { background-color: #cccccc; /* Disabled color */ cursor: not-allowed; }