@font-face { font-family: 'DIN-Regular';
                src: url('/db_waermebruecken/js/font/DIN-Regular.ttf') format('truetype'); }
            
            @font-face { font-family: 'Arial-Narrow';
                src: url('/db_waermebruecken/js/font/ARIALN.TTF') format('truetype'); }
    

            /* ----------------------------- */
            /* Abschnitt Tabelle Detailwerte */
            /* ----------------------------- */

            #wbkergebnisse {
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                border-collapse: collapse;
                width: 100%;
                }

            #wbkergebnisse td {
                border: 1px solid #ddd;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                }

            #wbkergebnisse tr:nth-child(even){
                background-color: #f2f2f2;
            }

            #wbkergebnisse tr:hover {
                background-color: rgba(106, 188, 255, 0.3);
            }
              
            /*rgba(252, 183, 46, 0.3);*/

            .hoverwbk {
                background: rgba(106, 188, 255, 0.5);
            }

            #wbkergebnisse th {
                height: 15px;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                border-color: #f2f2f2;
                border-width: 1px;
                border-style: solid;
                background: #fcb72e;
                font: 15px Arial,'Helvetica',sans-serif;
                color: #000000;
                }
    
            #wbkergebnisse .Ytong th {
                height: 15px;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                border-color: #d4d4d4;
                border-width: 1px;
                border-style: solid;
                background: #FFF9EA;
                font: 15px Arial,'Helvetica',sans-serif;
                color: #000000;
                }

            #wbkergebnisse .Ytong070 th {
                height: 15px;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                border-color: #f2f2f2;
                border-width: 1px;
                border-style: solid;
                background: #fcb72e;
                font: 15px Arial,'Helvetica',sans-serif;
                color: #000000;
                }

            #wbkergebnisse .Ytong080 th {
                height: 15px;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                border-color: #f2f2f2;
                border-width: 1px;
                border-style: solid;
                background: #FDCB64;
                font: 15px Arial,'Helvetica',sans-serif;
                color: #000000;
                }

            #wbkergebnisse .Ytong090 th {
                height: 15px;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                border-color: #f2f2f2;
                border-width: 1px;
                border-style: solid;
                background: #FEDC94;
                font: 15px Arial,'Helvetica',sans-serif;
                color: #000000;
                }

            #wbkergebnisse .Ytong100 th {
                height: 15px;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                border-color: #d4d4d4;
                border-width: 1px;
                border-style: solid;
                background: #FFECC4;
                font: 15px Arial,'Helvetica',sans-serif;
                color: #000000;
                }

            #wbkergebnisse .KS700 th {
                height: 15px;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                border-color: #f2f2f2;
                border-width: 1px;
                border-style: solid;
                background: rgb(106, 188, 255);
                font: 15px Arial,'Helvetica',sans-serif;
                color: #000000;
                }
    
            #wbkergebnisse .KS1100 th {
                height: 15px;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                border-color: #f2f2f2;
                border-width: 1px;
                border-style: solid;
                background: rgb(162, 212, 253);
                font: 15px Arial,'Helvetica',sans-serif;
                color: #000000;
                }                

            #wbkergebnisse .Stahlbeton th {
                height: 15px;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                border-color: #f2f2f2;
                border-width: 1px;
                border-style: solid;
                background: #ddd;
                font: 15px Arial,'Helvetica',sans-serif;
                color: #000000;
                }
                
            #wbkergebnisse .Daemmung th {
                height: 15px;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                border-color: #d4d4d4;
                border-width: 1px;
                border-style: solid;
                background: rgb(211, 248, 239);
                font: 15px Arial,'Helvetica',sans-serif;
                color: #000000;
                }
                
            #wbkergebnisse .Variable_2 th {
                height: 15px;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                border-color: rgb(175, 175, 175);
                border-width: 1px;
                border-style: solid;
                background: #FEDC94;
                font: 15px Arial,'Helvetica',sans-serif;
                color: #000000;
                }

            /* rgb(162, 247, 226); */

            #wbkergebnisse .Variable_3 th {
                height: 15px;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                border-color: rgb(175, 175, 175);
                border-width: 1px;
                border-style: solid;
                background: #FFECC4;
                font: 15px Arial,'Helvetica',sans-serif;
                color: #000000;
                }

            /* rgb(211, 248, 239); */

            /* --------------------------- */
            /* Abschnitt Tabelle Übersicht */
            /* --------------------------- */
            @media (min-width: 800px) {
                #tabelleuebersicht thead{
                    height: 70px; 
                    display: block;
                    background: #c3c3c3; 
                    color: #000000;
                    }
                
                #tabelleuebersicht tbody{
                    /* height: 620px;  
                    overflow: scroll;  */
                    display: block;  
                }
             }

            #tabelleuebersicht {
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                border-collapse: collapse;
                width: 100%;
                }

            #tabelleuebersicht td {
                vertical-align: middle;
                text-align: center;
                border-bottom: 1px solid #ddd;
                padding-top: 5px;
                padding-bottom: 9px;
                padding-left: 5px;
                padding-right: 9px;
                }

            #tabelleuebersicht a img {
                border: 2px solid #c3c3c3;
                border-radius: 10%;
                display: block;
                box-shadow: 5px 5px 5px rgba(0, 0, 0, .5);
                }
    
            #tabelleuebersicht tr:nth-child(even){
                background-color: #f2f2f2;
            }
    
            #tabelleuebersicht tr:hover {
                background-color: #ddd;
            }
    
            #tabelleuebersicht th {
                vertical-align: top;
                height: 15px;
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                border-bottom: 1px solid #ddd;
                background: #c3c3c3;
                font: 15px Arial,'Helvetica',sans-serif;
                color: #000000;
                }
                
            /* --------------------------- */
            /* Abschnitt Button            */
            /* --------------------------- */

                button {
                    padding: .4em .8em;
                    background: #c3c3c3 linear-gradient(hsla(0, 0%, 100%, .2), transparent);
                    border: 1px solid rgba(0, 0, 0, .1);
                    border-radius: 0.4em 0.4em 0.4em 0.4em;
                    box-shadow: 0 .2em 0.4em rgba(0, 0, 0, .5);
                    color: black;
                    text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);
                    font-size: 115%;
                    line-height: 1.15;
                }
                
                button.cancel {
                    background-color: #c32e04;
                }
                
                button.ok {
                    background-color: #c3c3c3;
                }