/* Variables
================================== */

/* Tables
================================== */

/**
 * table with rounded corners
 */

/* table has shadow */

/*.table-responsive {*/
    /*display: table;*/
/*}*/

table.table-responsive,
table.responsive-table-stacked {
    border-radius:   0;
    margin:          20px auto;
    border-collapse: collapse;
    border-spacing:  0;
    box-shadow:      0 0 0 2px #ccc;
}

/*every cell has a border on bottom & right*/

.table-responsive td,
.responsive-table-stacked td {
    padding: 10px 20px;
    /*/ / color: #444;*/
}

/*cancel the right border on the last column*/

td:last-child {
    border-right: none;
}

/*th has border only on bottom*/
.table-responsive th,
.responsive-table-stacked th {
    border-bottom: 1px solid #cccccc;
    padding:       10px 20px;
    
}

/*rounded corner top left - first th*/

.table-responsive th:first-child,
.responsive-table-stackedth:first-child {
    border-radius: 5px 0 0 0;
}

/*rounded corner top right - last th*/

.table-responsive th:last-child,
.responsive-table-stackedth:last-child {
    border-radius: 0 5px 0 0;
    
}

/*rounder corner bottom left - first cell of last row*/

.table-responsive tr:last-child td:first-child,
.responsive-table-stackedtr:last-child td:first-child {
    border-radius: 0 0 0 5px;
}

/*rounded corner bottom right - last cell of last row*/

.table-responsive tr:last-child td:last-child,
.responsive-table-stackedtr:last-child td:last-child {
    border-radius: 0 0 5px 0;
    
}

/*last row in has no border on the bottom*/

.table-responsive table tr:last-child td,
.responsive-table-stacked table tr:last-child td {
    border-bottom: none;
    
}

/*table header style*/
/*note: the gradient must be on the <th> & <td>,
ff you put it on the <tr> it will stick out of the
rounded corners in Firefox*/

.table-responsive thead tr th,
.responsive-table-stacked thead tr th {
    background-image: linear-gradient(top, #f7f7f7 0%, #d4d4d4 100%);
    
}

/*table row style*/

tr td,
tr th {
    background-image: linear-gradient(top, #ffffff 0%, #e4f0ff 100%);
}

/*table even rows style*/

tr:nth-child(even) td {
    background-image: linear-gradient(top, #ffffff 0%, #eeeeee 100%);
    
}

/*!
 * Materialize v1.0.0-rc.2 (http://materializecss.com)
 * Copyright 2014-2017 Materialize
 * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
 */

table.striped tr {
    border-bottom: none;
}

table.striped > tbody > tr:nth-child(odd) {
    background-color: rgba(242, 242, 242, 0.5);
}

table.striped > tbody > tr > td {
    border-radius: 0;
}

table.highlight > tbody > tr {
    -webkit-transition: background-color .25s ease;
    transition:         background-color .25s ease;
}

table.highlight > tbody > tr:hover {
    background-color: rgba(242, 242, 242, 0.5);
}

table.centered thead tr th, table.centered tbody tr td {
    text-align: center;
}

/*//================================================*/
/*//=90-Degree Content Mobild device 16:9 => 9:16===*/
/*//================================================*/
/*//Add class=".table-responsive.responsive-table-fixed-90" to the table tag for 9:16 table.*/
@media only screen and (max-width: 767px) {
    /*//*/
    table.table-responsive.responsive-table-fixed-90 {
        width:           100%;
        border-collapse: collapse;
        border-spacing:  0;
        display:         block;
        position:        relative;
        /* sort out borders */
    }
    
    table.table-responsive.responsive-table-fixed-90 td:empty:before {
        content: '\00a0';
    }
    
    table.table-responsive.responsive-table-fixed-90 th,
    table.table-responsive.responsive-table-fixed-90 td {
        margin:         0;
        vertical-align: top;
    }
    
    table.table-responsive.responsive-table-fixed-90 th {
        text-align: left;
    }
    
    table.table-responsive.responsive-table-fixed-90 thead {
        display: block;
        float:   left;
    }
    
    table.table-responsive.responsive-table-fixed-90 thead tr {
        display: block;
        padding: 0 10px 0 0;
    }
    
    table.table-responsive.responsive-table-fixed-90 thead tr th::before {
        content: "\00a0";
    }
    
    table.table-responsive.responsive-table-fixed-90 tbody {
        display:     block;
        width:       auto;
        position:    relative;
        overflow-x:  auto;
        white-space: nowrap;
    }
    
    table.table-responsive.responsive-table-fixed-90 tbody tr {
        display:        inline-block;
        vertical-align: top;
    }
    
    table.table-responsive.responsive-table-fixed-90 th {
        display:    block;
        text-align: right;
    }
    
    table.table-responsive.responsive-table-fixed-90 td {
        display:    block;
        min-height: 1.25em;
        text-align: left;
    }
    
    table.table-responsive.responsive-table-fixed-90 tr {
        border-bottom: none;
        /*padding: 0 10px;*/
    }
    
    table.table-responsive.responsive-table-fixed-90 thead {
        border:       0;
        border-right: 1px solid rgba(0, 0, 0, 0.12);
    }
    
    /*//================================================*/
    /*//===  == == = ==horizontal scrollable == = == ===*/
    /*//================================================*/
    /*//Add class=".table-responsive.responsive-table-fixed" to the table tag for horizontal scrollable table with fixed first col.*/
    table.table-responsive.responsive-table-fixed > thead:first-child > tr:first-child > th:first-child {
        position: absolute;
        display:  inline-block;
        /*//background-color: red;*/
        height:   100%;
        
    }
    
    table.table-responsive.responsive-table-fixed > tbody > tr > td:first-child,
    table.table-responsive.responsive-table-fixed > thead > tr > td:first-child {
        position:      absolute;
        display:       inline-block;
        /*//background-color:   #ffffff;*/
        /*//height:             100%;*/
        text-overflow: ellipsis;
        white-space:   nowrap;
        /*//width:              20%;*/
        border-width:  0px;
        
    }
    
    table.table-responsive.responsive-table-fixed.table-striped > tbody > tr:nth-of-type(odd) > td:first-child {
        background-color: #f2f2f2;
    }
    
    table.table-responsive.responsive-table-fixed > thead:first-child > tr:first-child > th:nth-child(2) {
        padding-left: 40px;
    }
    
    table.table-responsive.responsive-table-fixed > tbody > tr > td:nth-child(2), table.table-responsive.responsive-table-fixed > thead > tr > td:nth-child(2) {
        
        padding-left:  95px !important;
        padding-right: 1% !important;
    }
    
    /*//fixed left absolude td height overflow fix*/
    table.table-responsive.responsive-table-fixed:before {
        content:          " ";
        height:           99.7%;
        position:         absolute;
        background-image: linear-gradient(#ffffff, #ffffff);
        white-space:      normal;
        
    }
    
    /*//fixed row seperation from content*/
    table.table-responsive.responsive-table-fixed > tbody > tr > td:first-child,
    table.table-responsive.responsive-table-fixed > thead > tr > td:first-child,
    table.table-responsive.responsive-table-fixed:before {
        width:                      85px;
        padding-left:               5px;
        border-right-width:         2px;
        border-color:               #cccccc;
        border-right-style:         solid;
        
        white-space:                normal;
        /*word-wrap:                  break-word;*/
        
        /*//  fix image & <sup> overlap*/
        
        z-index:                    1;
        
        border-bottom-left-radius:  5px;
        border-bottom-right-radius: 5px;
        border-top-left-radius:     5px;
    }
    
    /*stripes*/
    /*table.table-responsive.responsive-table-fixed > tbody > tr > td:nth-child(odd),*/
    /*table.table-responsive.responsive-table-fixed > thead > tr > td:nth-child(odd){*/
    /*background-color: #000000cc;*/
    /*}*/
    /*//  table.table-responsive.responsive-table-fixed > tbody > tr > td:first-child::after,*/
    /*//  table.table-responsive.responsive-table-fixed > thead > tr > td:first-child::after {*/
    /*//*/
    /*//  content: ":";*/
    /*//}*/
    /*//table.table-responsive.responsive-table-fixed > tbody > tr > td:first-child[rowspan] {*/
    /*//  display: none;*/
    /*//}*/
    /*//fixed test*/
    /*//table.table-responsive.responsive-table-fixed > tbody ,*/
    /*//table.table-responsive.responsive-table-fixed > thead {*/
    /*//*/
    /*//  overflow: hidden;*/
    /*//}*/
    /*//.grand-parent {*/
    /*//  position: relative;*/
    /*//}*/
    /*//*/
    /*//.parent {*/
    /*//  overflow: hidden;*/
    /*//}*/
    /*//  fixierte*/
    /*table.table-responsive.responsive-table-fixed   > tbody > tr > td:nth-child(1),*/
    /*!**!*/
    /*table  .table-responsive.responsive-table-fixed   > thead > tr > td:first-child,*/
    /*!**!*/
    /*!**!*/
    /*.headcol{*/
    /*border-left: solid 1px #DDEFEF;*/
    /*border-right: solid 1px #DDEFEF;*/
    /*left: 0;*/
    /*position: absolute;*/
    /*top: auto;*/
    /*width: 120px;*/
    /*}*/
    /*//*/
    /*//*/
    /*//*/
    /*//*/
    /*//.table-fixed tbody {*/
    /*//  !*height: 200px;*!*/
    /*//  overflow-y: auto;*/
    /*//  !*width: 100%;*!*/
    /*//}*/
    /*//*/
    /*//!*.table-fixed thead,*!*/
    /*//.table-fixed tbody,*/
    /*//  !*.table-fixed tr,*!*/
    /*//  !*.table-fixed td,*!*/
    /*//.table-fixed th {*/
    /*//  display: block;*/
    /*//}*/
    /*//*/
    /*//.table-fixed tr:after {*/
    /*//  content:    "";*/
    /*//  display:    block;*/
    /*//  visibility: hidden;*/
    /*//  clear:      both;*/
    /*//}*/
    /*//*/
    /*//.table-fixed tbody td,*/
    /*//.table-fixed thead > tr > th {*/
    /*//  float: left;*/
    /*//}*/
    /*//}*/
    /*Eigene*/
    /*//@media only screen and (max-width: 768px)*/
    /*//{*/
    /*//*/
    /*//*/
    /*//table {*/
    /*//  border-collapse: separate;*/
    /*//  border-spacing: 0;*/
    /*//  border-top: 1px solid grey;*/
    /*//}*/
    /*//*/
    /*//td, th {*/
    /*//  margin: 0;*/
    /*//  border: 1px solid grey;*/
    /*//  white-space: nowrap;*/
    /*//  border-top-width: 0px;*/
    /*//}*/
    /*//*/
    /*//div {*/
    /*//  width: 500px;*/
    /*//  overflow-x: scroll;*/
    /*//  margin-left: 5em;*/
    /*//  overflow-y: visible;*/
    /*//  padding: 0;*/
    /*//}*/
    /*//#maincontent > div.columns > div > table > tbody > tr > td:nth-child(1) {*/
    /*//  position: absolute;*/
    /*//  width: 5em;*/
    /*//  left: 0;*/
    /*//  top: auto;*/
    /*//  border-top-width: 1px;*/
    /*//  !*only relevant for first row*!*/
    /*//  margin-top: -1px;*/
    /*//  !*compensate for top border*!*/
    /*//}*/
    /*//.long {*/
    /*//  background: yellow;*/
    /*//  letter-spacing: 1em;*/
    /*//}*/
    table.table-responsive.responsive-table-fixed-90 tbody,
    table.table-responsive.responsive-table-fixed-90 tbody tr,
    table.table-responsive.responsive-table-fixed-90 tbody td {
        display: flex;
    }
    
    table.table-responsive.responsive-table-fixed-90 tbody tr {
        flex-direction: column;
    }
    
    table.table-responsive.responsive-table-fixed-90 td {
        flex-grow:   1;
        flex-shrink: 1;
        flex-basis:  0%;
        padding-top: 15px;
    }
    
    table.table-responsive.responsive-table-fixed-90 > tbody > tr > td:nth-child(even) {
        background-color: #0000000d;
    }
    
    /*////  fixierte*/
    /*//table.table-responsive.responsive-table-fixed > tbody > tr > td:first-child,*/
    /*//table .table-responsive.responsive-table-fixed > thead > tr > td:first-child,*/
    /*//.headcol {*/
    /*//  visibility: visible;*/
    /*//}*/
    /*//*/
    
}

/*//================================================*/
/*//===  == == = ==Stapelbare mit info  == = == ===*/
/*//================================================*/
/*//Add class="responsive-table-stacked" to the table tag for stacked 2 row table.*/
/*
Stapelbare mit info links
RESPONSTABLE 2.0 by jordyvanraaij
  Designed mobile first!

If you like this solution, you might also want to check out the 1.0 version:
  https://gist.github.com/jordyvanraaij/9069194

*/
.responsive-table-stacked {
    margin:        1em 0;
    width:         100%;
    overflow:      hidden;
    background:    #ffffff;
    /*//color:         #024457;*/
    border-radius: 5px;
    /*//border:        1px solid #167F92;*/
}

.responsive-table-stacked tr {
    /*//border: 1px solid #D9E4E6;*/
}

.responsive-table-stacked tr:nth-child(odd) {
    /*//background-color: #EAF3F3;*/
}

.responsive-table-stacked th {
    display: none;
    /*//border:           1px solid #FFFFFF;*/
    /*//background-color: #167f92;*/
    color:   #ffffff;
    padding: 1em;
}

.responsive-table-stacked th:first-child {
    display: table-cell;
    /*//text-align: center;*/
}

.responsive-table-stacked th:nth-child(2) {
    display: table-cell;
}

.responsive-table-stacked th:nth-child(2) span {
    display: none;
}

.responsive-table-stacked th:nth-child(2):after {
    content: attr(data-th);
}

@media (min-width: 768px) {
    .responsive-table-stacked th:nth-child(2) span {
        display: block;
    }
    .responsive-table-stacked th:nth-child(2):after {
        display: none;
    }
    .table-responsive {
        display: table;
    }
}

.responsive-table-stacked td {
    display: block;
}

@media only screen and (max-width: 767px) {
    .responsive-table-stacked td, .responsive-table-stacked td > * {
        text-align: inherit !important;
        vertical-align: middle;
    }
    .responsive-table-stacked td:not(:first-child) {
        border-right: none;
    }
    .responsive-table-stacked td:last-child {
        border-bottom: none;
    }
    .responsive-table-stacked tr:not(:last-child) {
        border-bottom: 1px solid #ccc;
    }
    table.responsive-table-stacked > *:first-child > tr:first-child > td:nth-child(2) > *,
    table.responsive-table-stacked > *:first-child > tr:first-child > th:nth-child(2) > * {
        display: none;
    }
}

.responsive-table-stacked td:first-child {
    display: table-cell;
    text-align: center;
}

.responsive-table-stacked th, .responsive-table-stacked td {
    text-align: left;
    margin: .5em 1em;
}

@media (min-width: 768px) {
    .responsive-table-stacked th, .responsive-table-stacked td {
        display: table-cell;
        padding: 1em;
    }
    .responsive-table-stacked > tbody > tr > td::before {
        display: block;
        font-weight: 600;
        white-space: pre-line;
    }
}

table.table-responsive.responsive-table-fixed > *:first-child > tr:first-child,
table.table-responsive.responsive-table-fixed > *:first-child > tr:first-child > td > a,
table.table-responsive.responsive-table-fixed > *:first-child > tr:first-child > th > a,
table.responsive-table-stacked > *:first-child > tr:first-child,
table.responsive-table-stacked > *:first-child > tr:first-child > td > a,
table.responsive-table-stacked > *:first-child > tr:first-child > th > a {
    color: #ffffff;
}

/* -------------------------------------------- IE 10 & 11 (ONLY) --------------------------------------------------- */
/* -------------------------------------------- IE 10 & 11 (ONLY) --------------------------------------------------- */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    table.table-responsive {
        border-collapse:separate;
    }
}

/* -------------------------------------------- IE 10 & 11 [END] ---------------------------------------------------- */
/* -------------------------------------------- IE 10 & 11 [END] ---------------------------------------------------- */

table.table-responsive {
    border-width: 0;
}

table.table-responsive tr td{
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
}

table.table-responsive thead tr td,
table.table-responsive thead tr th {
    border-top-width: 0;
}

table.table-responsive tr td:first-child,
table.table-responsive tr th:first-child {
    border-left-width: 0;
}

table.table-responsive tr td:last-child,
table.table-responsive tr th:last-child {
    border-right-width: 0;
}

table.table-responsive tbody tr:last-child td {
    border-bottom-width: 0;
}