@CHARSET "UTF-8";

/* For Smartphones and Tablets */
@media only screen and (max-width: 1080px) {

    #container100w {
        min-width: 100% !important;
    }

    .formular_einfach, .formular_textfeld_dreifach, .formular_textfeld_zweifach {
        width: 100% !important;
    }

}

/* For Tablets */
@media only screen and (min-width: 701px) and (max-width: 1080px) {

    .formular_doppelt .bezeichnung {
        width: 15% !important;
    }

    .formular_doppelt .eingabe {
        width: 85% !important;
        padding-left: 0px !important;
    }

}

/* For Smartphones */
@media only screen and (max-width: 700px) {

    #head {
        height: auto !important;
        flex-direction: column;
    }

    #head a {
        text-align: center;
    }

    body.freezeViewport {
        overflow: hidden;
    }

    .formular_einfach .bezeichnung, .formular_einfach .bezeichnungMultilingual,
    .formular_einfach .bezeichnung_second_language, .formular_einfach .eingabe,
    .formular_textfeld_dreifach .bezeichnung, .formular_textfeld_dreifach .bezeichnungMultilingual,
    .formular_textfeld_dreifach .bezeichnung_second_language, .formular_textfeld_zweifach .bezeichnung,
    .formular_textfeld_zweifach .bezeichnungMultilingual, .formular_textfeld_zweifach .bezeichnung_second_language,
    .formular_textfeld_dreifach .eingabe, .formular_textfeld_zweifach .eingabe {
        width: 100% !important;
        height: auto !important;
    }

    .formular_einfach .eingabe, .formular_textfeld_zweifach .eingabe
    , .formular_textfeld_dreifach .eingabe, .tabsHeaderButtons {
        margin-top: 5px;
    }

    .formular_einfach, .formular_textfeld_dreifach {
        height: auto !important;
    }

    .formular_doppelt .bezeichnung {
        width: 0% !important;
    }

    .formular_doppelt .eingabe {
        width: 100% !important;
        margin-top: 5px;
    }

    .tabsHeaderContainer, .formular_einfach, .formular_textfeld_dreifach, .formular_textfeld_zweifach {
        flex-direction: column;
    }

    .ui-dialog {
        position: fixed;
        top: 0px !important;
        left: 0px !important;
        width: 98% !important;
        height: 90vh !important;
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
    }


    /* DataTables */

    .ui-dialog table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .ui-dialog .ui-dialog-content {
        height: 100% !important;
    }
    
    .ui-dialog .textbausteinDialog, .ui-dialog .plz_table {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    .ui-dialog .textbausteinDialog .dataTables_wrapper {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .ui-dialog .textbausteinDialog .dataTables_wrapper .dataTables_scroll {
        overflow-y: auto;
    }
    
    .ui-dialog .dataTables_scrollBody {
        border: 1px solid #eee;
        height: auto !important;
        width: auto !important;
    }
    
    /* Zebra striping */
    .ui-dialog tr:nth-of-type(odd) {
        background: #eee;
    }
    
    .ui-dialog td {
        padding: 6px;
        border: 1px solid #ccc;
        text-align: left;
    }

    /* Force table to not be like tables anymore */
    .ui-dialog table, .ui-dialog thead, .ui-dialog tbody, .ui-dialog th, .ui-dialog td, .ui-dialog tr { 
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .ui-dialog thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .ui-dialog tr {
        height: auto !important;
    }

    .ui-dialog td { 
        /* Behave  like a "row" */
        border: none;
        border-right: 0px !important;
        position: relative;
        padding-left: 50%;
        line-height: 1.4em;
        white-space: normal !important;
    }

    .ui-dialog td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        /* Label the data */
        content: attr(data-label);
    }

    
    /* Single column Tables */
/*    .ui-dialog table.singleColumn thead tr {
        position: relative;
        top: 0px;
        left: 0px;
    }
    
    .ui-dialog table.singleColumn thead th {
        display: table-cell;
    }*/
    
    .ui-dialog table.singleColumn td { 
        padding-left: 6px;
    }
    
    .ui-dialog table.singleColumn td:before { 
        content: none;
    }
    
    .ui-dialog #ta_text_vorschau, .ui-dialog #ta_text_vorschau_ut, .ui-dialog #ta_text_vorschau_ha {
        width: auto;
        margin-bottom: 5px;
    }

}