/*
Adaption von David Bushell's Responsive Table Beispiel
http://dbushell.com/2016/03/04/css-only-responsive-tables/
*/

.rtable {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;  
  overflow-x: auto;
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 0;
}

/*
.rtable th {
  text-align: center;
}*/
.rtable th,
.rtable td {
  padding: 6px 12px;
  border: 1px solid #ccc;
  text-align: center;
}

.rtable thead > tr > th{
	background-color:#eee;
}
.rtable--flip thead > tr > th {
	background-color:#fff;	
	font-weight: normal;
}
.rtable--flip thead > tr > th:nth-child(1) {
	background-color:#eee;
}

.rtable--flip {
  display: flex;
  overflow: hidden;
  background: none;  
}

.rtable--flip thead {
  display: flex;
  flex-shrink: 0;
  min-width: min-content;
}

.rtable--flip tbody {
  display: flex;
  position: relative;
  overflow-x: auto;
  /*overflow-y: hidden;*/
}

.rtable--flip tr {
  display: flex;
  flex-direction: column;
  min-width: min-content;
  flex-shrink: 0;
}

.rtable--flip td,
.rtable--flip th {
  display: block;
  text-align: left;
}

.rtable--flip td {
  background-image: none !important;
  // border-collapse is no longer active
  border-left: 0;
}

// border-collapse is no longer active
.rtable--flip th:not(:last-child),
.rtable--flip td:not(:last-child) {
  border-bottom: 0;
}

.rtable--flip td:first-child {        
		background-color:#eee;
        font-weight:bold;
}

.rtable--flip td {
	text-align:center;
}

.rtable--flip td.no-result {
  background-color: #cccccc;
}

/*Umbruch für zu lange theaders*/
@media only screen and (max-width: 599px) {
	.rtable--flip thead {
		max-width: 300px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

@media only screen and (max-width: 419px) {
	.rtable--flip thead {
		max-width: 200px;	
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}
/*
@media only print
{
	.rtable {
		border: 2px solid #ccc;
	}
}
*/

footer {
  font-size: 0.7em;
  position: relative;
  padding-top: 2em;
}

.plusminus:before {
    cursor: pointer;
    /*user-select: none;*/
    content: "\f3a9";
	font-family: "Ionicons";
	
	padding-right: 8px;
}
.plusminus.collapse:before {
	content: "\f359";
	font-family: "Ionicons";
}

.matches {
	padding: 1em 0em;
}