html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}

h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}

/* html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}   */         /* bisher verwendet */
/*html,body{font-family:Tahoma,sans-serif;font-size:15px;line-height:1.5}  */          /* neu */
html,body{font-family:Tahoma,sans-serif;font-size:15px;line-height:1.5; color: #666666;}            /* neu color: #666666; */

html{overflow-x:hidden}
.link_color {font-size: 15px; color: #000000}


/* unvisited link #ffffff */
a:link {color: #ffffff; text-decoration: none;}
/* visited link #095484 */
a:visited {color: #ffffff;}
/* mouse over link */
a:hover {color: #000000; text-decoration: none;}
/* selected link #800000*/
a:active {color: #ffffff;}

/* Ausgabe der Kundenliste und anderen Listen */
/* unvisited link #ffffff */
#k_liste a:link {color: #666666; text-decoration: underline;}
/* visited link #095484 */
#k_liste a:visited {color: #666666;}
/* mouse over link */
#k_liste a:hover {color: #000000; text-decoration: underline;}
/* selected link #800000*/
#k_liste a:active {color: #666666;}

.w3-container {padding:0.01em 16px}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}

.w3-green {color:#fff; background-color:#4CAF50}
.w3-red {color:#fff; background-color:#f44336}
/* .w3-pantone563 {color:#fff; background-color:#6bbbae}   */
.w3-pantone563 {height: 100px; background-color:#e9f7f6;}       /*  background-color: rgba(107,187,174,0.5); */

.w3-col {float:left;width:100%}

/* .w3-third {float:left;width:90%;border: 1px solid grey;border-radius: 18px;margin:1%;}  */
.w3-third {float:left;width:100%;}
.w3-quarter {float:left;width:100%;}
.w3-half {float:left;width:100%}
.w3-one {float:left;width:100%}


.w3-third {width:33.33333%}
/*.w3-third {width:30%} */
.w3-quarter {width:24.99999%}
.w3-half {width:49.99999%}
.w3-one {width:99.99999%}

/*Login*/
.input_login {width: 332px; height: 32px; border: 1px solid #afb4b9; background-color: #ffffff; color: #666666; font-size:15px;line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}
.input_button_send_login {width: 172px; height: 32px; background: #6bbbae; font-size:15px;line-height:1.5; color: #ffffff; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 4px;}

.login table {
    /* width: 900px;  */
     width: 60%;
}

.login td {
    height: 20px;
    /* width: 150px; */
    vertical-align: bottom;
    padding: 0px 5px 0px 20px;     /* top right bottom left    */
    text-align: left;
    border: 0px solid #000000;
}


input:focus { outline: none; }

/*Suche*/
.input_suche_tag {width: 332px; height: 32px; border: 1px solid #afb4b9; background-color: #ffffff; color: #000000; font-size:15px;line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}
.input_button_send_suche {width: 172px; height: 32px; background: #4CAF50; font-size:15px;line-height:1.5; color: #ffffff; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 4px;}

/* input:focus { outline: none; } */


/**************************************************************************************/
div.wrapper {
    padding: 20px;
    display: block;
    overflow: auto;
    border: 2px solid #eee;
    border-radius: 10px
}
div.wrapper_popup {
    padding: 20px;
    display: block;
    overflow: auto;
    border: 2px solid #999999;
    border-radius: 10px
}

table.scroll {
    width: 100%;
    background-color: #fff;
}
table.scroll thead {
    width: 100%;
    background: #cdcdcd;    /*#999999;*/
}
table.scroll thead tr:after {
    content: '';
    overflow-y: scroll;
    visibility: hidden;
}
table.scroll thead th {
    flex: 1 auto;
    display: block;
    color: #fff;
}
table.scroll tbody {
    display: block;
    width: 100%;
    overflow-y: auto;
    height: auto;
    max-height: 189px;
}
table.scroll thead tr,
table.scroll tbody tr {
    display: flex;
}
table.scroll tbody tr td {
    flex: 1 auto;
    word-wrap: break;
}
table.scroll thead tr th,
table.scroll tbody tr td {
    width: 25%;
    padding: 5px;
    text-align: left;
    /* border-bottom: 1px solid #eee;   */
    /* border-left: 1px solid #eee;  */
}

/*CSS Menue */
.parent {
    display: block;
    position: relative;
    float: left;
    line-height: 30px;
    background-color: #6bbbae;
    border-right: #CCC 1px solid;
}

.parent a {
    margin: 10px;
    color: #FFFFFF;
    text-decoration: none;
}

.parent:hover>ul {
    display: block;
    position: absolute;
}

.child {
    display: none;
}

.child li {
    background-color: #e9f7f6;
    line-height: 30px;
    border-bottom: #CCC 1px solid;
    border-right: #CCC 1px solid;
    width: 100%;
}

.child li a {
    color: #000000;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0px;
    min-width: 10em;
}

ul ul ul {
    left: 100%;
    top: 0;
    margin-left: 1px;
}

li:hover {
    background-color: #3b863e;
}

.parent li:hover {
    background-color: #ebf6ec;
}

.expand {
    font-size: 12px;
    float: right;
    margin-right: 5px;
}

/* Kunden Administration Dropdown Menü */
    .k_admin_box {
    width: 180px;
    height: 30px;
    border: 1px solid #999;
    font-size: 15px;
    color: #666666; /*#4CAF50;*/
    background-color: #e9f7f6;
    border-radius: 5px;
    box-shadow: 1px 1px #ccc;
    }

    .k_name_admin_box {
    width: 250px;
    height: 30px;
    border: 1px solid #999;
    font-size: 15px;
    color: #666666; /*#4CAF50;*/
    background-color: #e9f7f6; /* #eee;  */
    border-radius: 5px;
    box-shadow: 1px 1px #ccc;
    }

    .k_dt_admin_box {
    width: 332px;
    height: 30px;
    border: 1px solid #999;
    font-size: 15px;
    color: #666666; /*#4CAF50;*/
    background-color: #e9f7f6;
    border-radius: 5px;
    box-shadow: 1px 1px #ccc;
    }

/* Anlagenfelder, Konfiguration*/
.input_anlage {width: 332px; height: 31px; border: 1px solid #afb4b9; background-color: #ffffff; color: #666666; font-size:15px;line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}
.input_button_send_kunde {width: 172px; height: 32px; background: #6bbbae; font-size:15px;line-height:1.5; color: #ffffff; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 4px;}
.input_button_konfig {width: 170px; height: 32px; background: #6bbbae; font-size:15px;line-height:1.5; color: #ffffff; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 4px;}
.input_button_konfig_del {width: 80px; height: 32px; background: red; font-size:15px;line-height:1.5; color: #ffffff; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 4px;}
.input_button_del_kunde {width: 170px; height: 32px; background: red; font-size:15px;line-height:1.5; color: #ffffff; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 4px;}
.input_button_new_user {width: 170px; height: 32px; background: #6bbbae; font-size:15px;line-height:1.5; color: #ffffff; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 4px;}

.input_anlage_sensor {width: 250px; height: 31px; border: 1px solid #afb4b9; background-color: #ffffff; color: #666666; font-size:15px;line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}
.input_anlage_para {width: 150px; height: 31px; border: 1px solid #afb4b9; background-color: #ffffff; color: #666666; font-size:15px;line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}
.input_anlage_einheit {width: 100px; height: 31px; border: 1px solid #afb4b9; background-color: #ffffff; color: #666666; font-size:15px;line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}

.feld_info {width: 120px; height: 31px; border: 1px solid #afb4b9; background-color: #e9f7f6; color: #666666; font-size:15px;line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}

.input_faktor {width: 100px; height: 31px; border: 1px solid #afb4b9; background-color: #ffffff; color: #666666; font-size:15px;line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}

/* Skalierung für die Diagramme */
.bez_para {width: 120px; height: 20px; border: 1px solid #afb4b9; background-color: #ffffff; color: #666666; font-size:12px;line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}
.ska_wert {width: 100px; height: 20px; border: 1px solid #afb4b9; background-color: #ffffff; color: #666666; font-size:12px;line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}
.ska_button {width: 120px; height: 20px; background: #999; font-size:12px; font-weight:bold; line-height:1; color: #ffffff; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 5px; box-shadow: 1px 1px #ccc;}
.ska_button_popup {width: 100px; height: 32px; background: #ffffcc; font-size:15px;line-height:1.5; color: #666666; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 5px;}

.para_button_popup {width: 100px; height: 32px; background: #6bbbae; font-size:15px;line-height:1.5; color: #ffffff; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 5px;}
.dashboard_button_popup {width: 170px; height: 32px; background: #ffffcc; font-size:15px;line-height:1.5; color: #666666; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 5px;}

.diagramm {width:70%; height: 300px;}
/*Zeitbereichauswahl*/
.k_day_time_box {
width: 50px;
height: 30px;
border: 1px solid #999;
font-size: 15px;
color: #ffffff; /*#4CAF50;*/
background-color: #6bbbae;
border-radius: 5px;
box-shadow: 1px 1px #ccc;
}

.k_month_box {
width: 100px;
height: 30px;
border: 1px solid #999;
font-size: 15px;
color: #ffffff; /*#4CAF50;*/
background-color: #6bbbae;
border-radius: 5px;
box-shadow: 1px 1px #ccc;
}

.k_year_box {
width: 60px;
height: 30px;
border: 1px solid #999;
font-size: 15px;
color: #ffffff; /*#4CAF50;*/
background-color: #6bbbae;
border-radius: 5px;
box-shadow: 1px 1px #ccc;
}

.input_button_send_abfrage {width: 373px; height: 32px; background: #999; font-size:15px;line-height:1.5; color: #ffffff; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 5px; box-shadow: 2px 2px #ccc;}
.input_button_save_checkbox {width: 100px; height: 32px; background: #ccc; font-size:15px;line-height:1.5; color: #ffffff; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 5px;}

.input_button_abfrage {width: 369px; height: 32px; background: #e9f7f6; font-size:15px;line-height:1.5; color: #666666; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 5px;}

.input_button_send_zeitlinie {width: 49px; height: 22px; background: #f5f3f3; font-size:12px; font-weight:bold; line-height:1; color: #2d06aa; margin: 20px 0px 0px 0px; padding: 0px; border-radius: 5px; box-shadow: 1px 1px #ccc;}

.status_connect {width: 50px; height: 22px; border: 1px solid #afb4b9; background-color: #4CAF50; color: #ffffff; font-size:12px;line-height:1.5; text-align: center; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 0px; border-radius: 5px; box-shadow: 1px 1px #ccc;}
.status_disconnect {width: 50px; height: 22px; border: 1px solid #afb4b9; background-color: #afb4b9; color: #ffffff; font-size:12px;line-height:1.5; text-align: center; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 0px; border-radius: 5px; box-shadow: 1px 1px #ccc;}
.status_freigabe_y {width: 50px; height: 22px; border: 1px solid #afb4b9; background-color: #4CAF50; color: #ffffff; font-size:12px;line-height:1.5; text-align: center; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 0px; border-radius: 5px; box-shadow: 1px 1px #ccc;}
.status_freigabe_n {width: 50px; height: 22px; border: 1px solid #afb4b9; background-color: #afb4b9; color: #ffffff; font-size:12px;line-height:1.5; text-align: center; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 0px; border-radius: 5px; box-shadow: 1px 1px #ccc;}

/* Analog-Out */
.title_bez_ao {width: 120px; height: 20px; border: 0px solid #afb4b9; background-color: #ffffcc; color: #666666; font-size:12px; font-weight:bold; line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px;}
.title_wert_ao1 {width: 130px; height: 20px; border: 0px solid #afb4b9; background-color: #ffffcc; color: #666666; font-size:12px; font-weight:bold; line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px;}
.title_wert_ao2 {width: 40px; height: 20px; border: 0px solid #afb4b9; background-color: #ffffcc; color: #666666; font-size:12px; font-weight:bold; line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px;}

.bez_ao {width: 120px; height: 20px; border: 1px solid #afb4b9; background-color: #ffffff; color: #666666; font-size:12px;line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}
.ao_wert {width: 40px; height: 20px; border: 1px solid #afb4b9; background-color: #ffffff; color: #666666; font-size:12px;line-height:1.5; text-align: left; margin: 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}

.input_button_start_stop {width: 127px; height: 22px; background: #afb4b9; font-size:12px; font-weight:bold; line-height:1; color: #ffffff; margin: 0px 0px 10px 0px; padding: 0px; border-radius: 5px; box-shadow: 1px 1px #ccc;}
.input_button_start {width: 127px; height: 22px; background: #4CAF50; font-size:12px; font-weight:bold; line-height:1; color: #ffffff; margin: 0px 0px 10px 0px; padding: 0px; border-radius: 5px; box-shadow: 1px 1px #ccc;}
.input_bez {width: 125px; height: 20px; border: 0px solid #afb4b9; background-color: #ffffff; color: #666666; font-size:14px; text-align: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.input_bez_wert {width: 50px; height: 20px; border: 0px solid #afb4b9; background-color: #ffffff; color: #666666; font-size:14px; text-align: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.input_bez_einheit {width: 50px; height: 20px; border: 0px solid #afb4b9; background-color: #ffffff; color: #666666; font-size:14px; text-align: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.status_on {width: 22px; height: 22px; border: 1px solid #afb4b9; background-color: green; color: #000000; font-size:12px;line-height:1.5; text-align: left; margin: 10px 0px 10px 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}
.status_off {width: 22px; height: 22px; border: 1px solid #afb4b9; background-color: grey; color: #000000; font-size:12px;line-height:1.5; text-align: left; margin: 10px 0px 10px 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}
.input_bez_l {width: 127px; height: 22px; border: 1px solid #afb4b9; background-color: #ffffff; color: #000000; font-size:12px;line-height:1.5; text-align: left; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 5px; border-radius: 4px;}
.input_button_save_ao {width: 233px; height: 22px; background: #f5f3f3; font-size:12px; font-weight:bold; line-height:1; color: #000000; margin: 10px 0px 0px 0px; padding: 0px; border-radius: 5px; box-shadow: 1px 1px #ccc;}
.timer_button_popup {width: 237px; height: 22px; background: #6bbbae; font-size:12px;line-height:1; color: #ffffff; margin: 10px 0px 0px 0px; padding: 0px; border-radius: 5px;}

/* di und dv */
.status_di_dv_leer {width: 40px; height: 12px; border: 1px solid #afb4b9; background-color: grey; text-align: left; border-radius: 2px;}
.status_di_dv_on {width: 40px; height: 12px; border: 1px solid #afb4b9; background-color: red; text-align: left; border-radius: 2px;}
.status_di_dv_off {width: 40px; height: 12px; border: 1px solid #afb4b9; background-color: green; text-align: left;  border-radius: 2px;}
/* .input_bez_di {width: 120px; height: 22px; border: 1px solid #afb4b9; background-color: #ffffff; color: #000000; font-size:9px;line-height:1.5; text-align: left; margin-right: 0px; padding: 0px 0px 0px 0px; border-radius: 4px;} */


/* nur mal so zum Test eine anderen Tabellengestaltung */
            .tableFixHead {
                overflow-y: auto; /* make the table scrollable if height is more than 200 px  */
                height: 380px; /* gives an initial height of 200px to the table */
            }
            .tableFixHead thead th {
                position: sticky; /* make the table heads sticky */
                top: 0px; /* table head will be placed from the top of the table and sticks to it */
            }

            table {
                border-collapse: collapse; /* make the table borders collapse to each other */
                width: 100%;
            }
            th,
            td {
                padding: 8px 16px;
                border: 1px solid #ccc;
            }
            th {
                background: #eee;
            }

/*
.flex-center {
    width: 80%;
    margin: 1em auto;
    display:flex;
    align-items:left;
    justify-content:left;
    font-size:12px;
    background: #6bbbae;
    color: black;
}
*/

.imprint {
    /* height: 20px; */
    vertical-align: bottom;
    padding: 0px 5px 0px 20px;     /* top right bottom left    */
    text-align: left;
    font-size:15px;
    color: #666666;       /*  #666666; */
    border: 0px solid #000000;
}

.imprint a:link {color: #666666; text-decoration: underline;}       /*  #666666; */
.imprint a:visited {color: #666666;}                                /*  #666666; */
.imprint a:hover {color: black; text-decoration: underline;}
.imprint a:active {color: #666666;}                                 /*  #666666; */

.imprint ul {
    list-style-type: square;
    background: white;
    padding-left: 30px;
}
.imprint ul li {
    background: white;
    color: #666666;      /*  #666666; */
    /* margin: 5px;  */
}


.header {
    padding-left:25px;
    padding-top:25px;
    text-align: left;
    font-size:15px;
    color: #666666;
}

.header a:link {color: #666666; text-decoration: underline;}
.header a:visited {color: #666666;}
.header a:hover {color: black; text-decoration: underline;}
.header a:active {color: #666666;}


.footer {
    background: #e9f7f6;
    font-size:15px;               /* bisher 14 */
    margin-top: 20px;
    /* padding-bottom: 20px;  */
    padding-top: 20px";
}

.footer table {
    /* width: 900px;  */
     width: 100%;
}
/*        top right bottom left      */
.footer td {
    /* height: 20px;  */
    /* vertical-align: bottom;   */
    padding: 5px 0px 0px 48px;
    /* font-color:#666666;   */
    color: #666666;
    text-align: left;
    border: 0px solid #000000;
    /* padding-left: 48px; */
}


.footer a:link {color: #666666; text-decoration: underline;}
.footer a:visited {color: #666666;}
.footer a:hover {color: black; text-decoration: underline;}
.footer a:active {color: #666666;}

.seperator {
    margin: 20px;
    padding: 20px;
    height: 400px;
    border-bottom-width: 20px;
    border-bottom: #000000;
    /* border-width: 20px; */
    border-style: solid;
    display: flex; 
    width: 100%; 
}

.chart-container {
    width: 80%; 
}

.chart-container canvas {
    width: 100% !important; 
    height: auto !important; 
}

.tooltipValuebox {
    width: 20%; 
    padding-left: 10px; 
}
.chart{
    position: relative;
    width: 600px;
    height: 400px;
}

/* .w3-third1 {width:90%}  */

/*
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}


.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}

.w3-green {color:#fff; background-color:#4CAF50}
.w3-red {color:#fff; background-color:#f44336}
*/