@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/************************************************/
/*************** GENERAL SETTINGS ***************/
/************************************************/

*,
:before,
:after {
  box-sizing: border-box;
}
 
body {
  background-color: #ffffff;
  color: #007daa;
  font: 16px/1.25 'Roboto', sans-serif;
  margin:0;
}

main,
footer {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /*max-width: 64em;*/
  width: 100%;
}

/* Headings */
h1,
h2,
h4,
h5,
h6 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  margin: 0.25em 0;
  text-align: center;
}

h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  margin: 0.25em 0;
  text-align: left;
  padding: 10px;
  border: 2px solid #007DAA;
}

#accordion h3 {
  margin-bottom: 15px;
}

.tablesorter .filtered {
    display: none;
}

/* Tooltipp */

.tooltipp {
  position: absolute;
  z-index: 100;
  opacity: 1!important;
}

.image-link.tooltipp:hover {
  z-index: 999;
}

.tooltipp span {
  visibility: hidden;
  position: absolute;
  left: -5em;
  top: 2em;
  background: #007daa;
  color: #ffffff;
  width: 220px;
  border: 1px solid #007daa;
  font-size: 0.8em;
  padding: 5px 8px 4px 8px;
  border-radius: 5px;
  cursor: default;
  line-height: 1.4;
  z-index: 100;
}

a.tooltipp:hover span {
  visibility: visible !important;
}


/* Search Field */
.search.selectable {
  font: 400 1em/1 'Roboto', sans-serif;
  border: 2px solid;
  border-radius: 5px;
  height: 38px;
  padding: 15px 15px 15px 5px;
  color: #007daa;
  line-height: 1.3;
  margin-bottom: 15px;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

/* Links */
a {
  color: #6798AB;
  border-bottom: 1px solid;
  text-decoration: unset;
}

a:hover {
  border-bottom: 1px solid;
  opacity: 0.9;
}

.image-link {border: none!important;position: relative;}

.sorter-false:before, .sorter-false:after {
  display:none;
}

th:hover.sorter-false {
  color:#007daa;
}


/************************************************/
/********************* TABLE ********************/
/************************************************/

table {
  border-collapse: collapse;
  border-spacing: 0;
  max-width: 100%;
  width: 100%;
}



/*** HEADER ***/

.tablesorter-headerRow {
 background-color: #bedde8 !important;
}

.tablesorter-header.tablesorter-headerAsc {
  background-color: rgba(0,125,170,0.15);
}

.tablesorter-header.tablesorter-headerDesc {
  background-color: rgba(0,125,170,0.15);
}

table thead {
  border-bottom: 1px solid #007daa;
} 

table th,
table td {
  padding: 1em 0.5em;
  position: relative;
  vertical-align: top;
}

table td table td {
  padding: 0 0.25em 0.5em 0;
}

table th {
  font: 400 1.1em/1 'Roboto', sans-serif;
  color:#007daa;
  letter-spacing: 0.025em;
  outline: none;
  padding-right: 2em;
  text-align: left;
  /* text-transform: uppercase; */
  transition: color 0.2s ease-in-out;
}

table th:hover,
table th:focus {
  color: #3a95b6;
}

/* Arrows */
table th:after,
table th:before {
  border: 0.35em solid transparent;
  content: '';
  height: 0; 
  position: absolute;
  right: 0.65em;
  top: 50%;
  transform: translateY(-50%);
  transition: border-color 0.2s ease-in-out;
  width: 0; 
}

table th:before {
  border-bottom-color: rgba(255, 255, 255, 0.50);
  border-top: 0;
  margin-top: -0.35em;
}

table th:after {
  border-bottom: 0;
  border-top-color: rgba(255, 255, 255, 0.50);
  margin-top: 0.35em;
}

table th:hover:before,
table th:focus:before {
  border-bottom-color: rgba(255, 255, 255, 0.75);
}

table th:hover:after,
table th:focus:after {
  border-top-color: rgba(255, 255, 255, 0.75);
}

table th[aria-sort="ascending"],
table th[aria-sort="descending"] {
  color: #007daa;
}

table th[aria-sort="ascending"]:before {
  border-bottom-color: #007daa;
}

table th[aria-sort="ascending"]:after {
  border-top-color: rgba(255, 255, 255, 0.75);
}

table th[aria-sort="descending"]:before {
  border-bottom-color: rgba(255, 255, 255, 0.75);
}

table th[aria-sort="descending"]:after {
  border-top-color: #007daa;
}

/*** Table inside Table Kataloge ***/
td table thead tr.tablesorter-headerRow {
  background-color: #c4dce6!important;
}

td table thead tr.tablesorter-headerRow th:nth-child(1) {width: 25px;}
td table thead tr.tablesorter-headerRow th:nth-child(2) {width: 66px;}
td table thead tr.tablesorter-headerRow th:nth-child(3) {width: 64px;}
td table thead tr.tablesorter-headerRow th:nth-child(5) {width: 80px;}

td table thead {
  border-bottom: 0!important;
}

td table tbody tr td {
  border-bottom: 1px solid #c4dce6;
  padding-top: 2px!important;
  padding-bottom: 0;
}

td table tbody tr td:nth-child(2) {padding-left: 2px;}
td table tbody tr td:nth-child(3) {padding-left: 2px;}
td table tbody tr td:nth-child(4) {padding-left: 2px;}
td table tbody tr td:nth-child(5) {padding-left: 2px;}

td table thead tr th {
  padding: 3px;
  font: 400 0.9em/1 'Roboto', sans-serif;
}

@media (max-width: 50em) {
td table thead tr.tablesorter-headerRow {display: none;}
table tbody tr td {text-align: left!important;}
table.customtable.tablesorter.tablesorter-default tbody tr td span {padding-left: 90px;}
table.customtable.tablesorter.tablesorter-default tbody tr td:before {top: 0!important;left: 1px!important;}
table.customtable.tablesorter.tablesorter-default tbody tr {padding-bottom:10px!important;}
}


/*** BODY ***/
table tbody > tr {
  border-bottom: 1px solid #007daa;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.customtable tbody tr {
  border-bottom: none;
}

table tbody > tr:hover {
  background-color: rgba(222,238,244,0.5);
  border-color: #007daa;
  color: #007daa;
}

/* Primary Color */
table tbody > tr:nth-of-type(6n+1) {
  border-color: #007daa;
}

table tbody > tr:nth-of-type(6n+1):hover {
  background-color: rgba(222,238,244,0.5);
  border-color: #007daa;
  color: #007daa;
}

.erstevierergruppe:hover {
  background-color: #eef6f9!important;
}

.erstevierergruppe td {
  border-bottom:none!important;
}

.zweitevierergruppe:hover {
  background-color: #eef6f9!important;
}

.zweitevierergruppe td {
  border-bottom:none!important;
}

/* Secondary Color */
table tbody > tr:nth-of-type(6n+2) {
  border-color: #007daa;
}

table tbody > tr:nth-of-type(6n+2):hover {
  background-color: rgba(222,238,244,0.5);
  border-color: #007daa;
  color: #007daa;
}

/* Tertiary Color */
table tbody > tr:nth-of-type(6n+3) {
  border-color: #007daa
}

table tbody > tr:nth-of-type(6n+3):hover {
  background-color: rgba(222,238,244,0.5);
  border-color: #007daa;
  color: #007daa;
}

/* Quaternary Color */
table tbody > tr:nth-of-type(6n+4) {
  border-color: #007daa;
}

table tbody > tr:nth-of-type(6n+4):hover {
  background-color: rgba(222,238,244,0.5);
  border-color: #007daa;
  color: #007daa;
}

/* Quinary Color */
table tbody > tr:nth-of-type(6n+5) {
  border-color: #007daa;
}

table tbody > tr:nth-of-type(6n+5):hover {
  background-color: rgba(222,238,244,0.5);
  border-color: #007daa;
  color: #007daa;
}

/* Name Cell */
table td[data-label="Name"] {
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Animal Cells */
table td[data-label="Chickens"],
table td[data-label="Pigs"],
table td[data-label="Snakes"] {
  text-align: center;
}

/* Check and Cross Marks */
table tr span.yes,
table tr span.no {
  transition: all 0.2s ease-in-out;
}

table tr:hover span.yes,
table tr:hover span.no {
  color: #fff;
}

table span.yes {
  color: #a2ed56;
  font-size: 1.25em;
}

table span.no {
  color: #fd6470;
  font-size: 0.875em;
}

td span {
  display: block;
  font-size: 0.9em;
  padding-bottom: 2px;
}


/************************************************/
/***************** MEDIA QUERIES ****************/
/************************************************/
@media (max-width: 50em) {

  /*** TABLE ***/
  table tr,
  table td {
    display: block;
  }

  table tr {
    padding: 0.75em 0;
  }

  table.customtable tr {
    padding: 0 0;
  }

  /* Header */
  table thead tr {
    text-align: center;
  }

  .tablesorter-headerRow {
    padding:0!important;
  }

  table thead {
  border-bottom: 0!important;
} 

  table th {
    display: block;
    padding: 10px 0.5em;
    border-bottom: 1px solid #ffffff;
  }

  /* Body */
  table td {
    /* Mobile Breite Legende Links, letzer Wert */
    padding: 0.25em 0.5em 0.25em 11.5em;
  }

table td::before {
  content: attr(data-label);
  font: 400 0.9em/1.45 'Roboto', sans-serif;
  left: 0.5em;
  position: absolute;
  top: 0.25em;
  width: 100%;
  /* text-transform: uppercase;*/
  color: #0000009c;
}

  /* Check and Cross Marks */
  table span.yes {
    line-height: 0.875;
  }
}