@charset "UTF-8";

.result_list {
    width: 98%;
    margin: auto;
    border-collapse: collapse;
    border: 1px solid;
    border-color: light-dark( var(--wa-color-indigo-50), var(--wa-color-gray-20) );
}

.result_list tr {
	padding: 0.2em;
}

.result_list th {
    color: light-dark( var(--wa-color-blue-50), var(--wa-color-gray-40) );
    background-color: light-dark( var(--wa-color-indigo-90), var(--wa-color-purple-20) );
    font-size: 1em;
    font-weight: 500;
	border-bottom: 1px solid;
    border-color: light-dark( var(--wa-color-indigo-50), var(--wa-color-gray-20) );
}

.result_list td {
	text-indent: 0.75em;
}

.result_list tr:nth-child(even) {
    background-color: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-10) );
}

.result_list caption {
    background-color: light-dark( var(--wa-color-indigo-50), var(--wa-color-purple-50) );
    color: light-dark( var(--wa-color-blue-50), var(--wa-color-tan-50) );
    font-size: 1em;
    font-weight: 500;
    padding: 0.5em 0.85em;
}

.result_list tr.caution {
    background-color: light-dark( var(--wa-color-yellow-70), var(--wa-color-yellow-20) );
}

.result_list tr.warning {
    background-color: light-dark( var(--wa-color-red-70), var(--wa-color-red-20) );
}

.pagination {
	width:100%;
	margin:10px auto;
  	display: inline-block;
	align-content: center;
	text-align: center;
}

a.paginate_button, .paginate_blank {
	margin: 0;
	font-size: 1em;
	color: light-dark( var(--wa-color-blue-50), var(--wa-color-gray-50) );
	background-color: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-10) );
  	padding: 8px 16px;
  	text-decoration: none;
	border: 1px solid;
	border-color: light-dark( var(--wa-color-indigo-50), var(--wa-color-gray-40) );
	display: inline-block;
}

a.active {
	margin: 0;
	background-color:light-dark( var(--wa-color-indigo-90), var(--wa-color-purple-20) );
	display: inline-block;
  	padding: 8px 16px;
  	text-decoration: none;
	border: 1px solid;
	border-color: light-dark( var(--wa-color-indigo-50), var(--wa-color-gray-40) );
}

a.paginate_button:hover:not(.active) { 
	background-color: light-dark( var(--wa-color-gray-40), var(--wa-color-gray-20) );
	color: light-dark( var(--wa-color-blue-50), var(--wa-color-gray-90) ); 
}

button.sort-soft {
    color:light-dark( var(--wa-color-indigo-50), var(--wa-color-purple-60) );
}

button.sort-active {
    color:light-dark( var(--wa-color-blue-50), var(--wa-color-gray-40) );
}

button.sort-active:hover {
    color:light-dark( var(--wa-color-indigo-50), var(--wa-color-purple-60) );
}