/** Studiengaenge A-Z
    cross-table
 */

.cross-table {
    border-top: 5px solid #f2f2f2;
}

.cross-table th, .cross-table td {
    line-height: 1.7em;
    padding: 1px;
}
.cross-table thead tr th {
    background-color: #f2f2f2;
    border-bottom: 1px solid #aaa;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    vertical-align: bottom;
}
.cross-table thead tr:first-child th {
    font-size: 1em;
    vertical-align: top;
}

.cross-table tbody td {
    background-color: #f3f5f8;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

.cross-table tbody tr:nth-child(2n) {
    background-color: #e8e8e8;
}


.cross-table .degree-g,
.cross-table .degree-gh,
.cross-table .degree-gym,
.cross-table .degree-wipaed,
.cross-table .degree-g:hover,
.cross-table .degree-gh:hover,
.cross-table .degree-gym:hover,
.cross-table .degree-wipaed:hover {
    background-color: rgb(0 64 107 / 13%);
}
.cross-table .degree-fm,
.cross-table .degree-real,
.cross-table .degree-hr,
.cross-table .degree-sopaed,
.cross-table .degree-stex,
.cross-table .degree-fm:hover,
.cross-table .degree-real:hover,
.cross-table .degree-hr:hover,
.cross-table .degree-sopaed:hover,
.cross-table .degree-stex:hover {
    background-color: rgb(0 64 107 / 13%);
}

.cross-table tbody td {
    background: #f2f2f2;
    border-bottom-color: #fff;
    padding: 0;
}
.cross-table tbody a {
    padding: 2px 1px;
}
.cross-table .degr a:hover {
    background-color: #fff;
}

.cross-table .degree-prom,
.cross-table .degree-prom:hover {
    background-color: rgb(149 149 149 / 22%);
}

.cross-table .degree-1fb,
.cross-table .degree-1fb:hover {
    background-color: #e1efd3;
    background-color: rgb(149 193 31 / 22%);
}
.cross-table .degree-2fb,
.cross-table .degree-2fb:hover {
    background-color: rgb(179 215 145 / 60%);
    background-color: rgb(149 193 31 / 22%);
}
.cross-table .degree-stex,
.cross-table .degree-stex:hover {
    background-color: rgb(0 64 107 / 20%);
}

.cross-table tbody tr:nth-child(2n) td:first-child {
    background-color: transparent;
}
.cross-table tbody td:first-child {
    background-image: url("/typo3conf/ext/zsb/Resources/Public/Icons/pf.png");
    background-position: 4px 8px;
    background-repeat: no-repeat;
    padding-left: 13px;
    text-align: left;
}

.cross-table tbody a {
    display: block;
}


/** --- for small screens --- */
/** important !!! usw same media query in cross-table.js */
@media screen and (max-width:767px) {
    .cross-table {
        word-wrap:break-word;
        border: none;
    }
    .cross-table thead {
        display:none
    }
    .cross-table tbody td {
        display:block;
        float:left;
        width:100%;
        clear:both;
        background:#f2f2f2;
        border: none;
    }

    .cross-table tbody td:first-child {
        background-image: none;
        padding: 0 0 5px;
        background-color: transparent !important;
        font-weight: 400;
        line-height: 1.2;
    }

    .cross-table tbody a {
        padding: 2px 1px;
    }

    .cross-table tbody td.degree {
        padding: 0;
        margin: 2px 0px;
    }

    .cross-table tbody, .cross-table tr {
        display:block
    }
    .cross-table td:before {
        content:attr(data-th);
        display:block;
        font-weight:bold;
        margin:0 0 2px;
        color:#000;
    }
    .cross-table tbody tr {
        float:left;
        width:100%;
        padding: 10px;
        margin-bottom:20px;
        border: none;
    }
    .cross-table tbody tr,
    .cross-table tbody tr:nth-child(2n)
    {
        background-color: #f2f2f2;
    }

    /**
     * Dark mode
     * @todo 2024-01-16 Es wird jetzt data-colormode genutzt, nicht mehr color-mode, kann entfernt werden
    */
    html[color-mode$="dark"] .cross-table tbody tr,
    html[color-mode$="dark"] .cross-table tbody tr:nth-child(2n),
    html[data-colormode$="dark"] .cross-table tbody tr,
    html[data-colormode$="dark"] .cross-table tbody tr:nth-child(2n)
    {
        background-color: var(--main-bg-color2) !important;
    }

    /** remove column dividers */
    .cross-table td.table-column-divider-end,
    .cross-table th.table-column-divider-end
    {
        border-right: none;
    }

    .cross-table tbody tr {
        background-color: #e8e8e8;
    }

}