/*******************************************************************/
/*verhindert, dass Menü links & body geladen wird bevor icons geladen sind*/
.sideMenu {
    display: none;
}
.fontawesome-i2svg-active .sideMenu {
    display: initial;
}
/*******************************************************************/


@font-face {
    font-family: Din;
    font-weight: normal;
    src: url("URWDIN-Regular.otf") format("opentype");
}

@font-face {
    font-family: Din;
    font-weight: 100;
    src: url("URWDIN-Light.otf") format("opentype");
}
@font-face {
    font-family: Din;
    font-weight: bold;
    src: url("URWDIN-Demi.otf") format("opentype");
}

body {
    font-size: 14px;
    color: #333333;
    /*background-image: linear-gradient(90deg, whitesmoke 0%, rgb(230, 227, 227) 98%);*/
    background: linear-gradient(90deg, rgb(210, 210, 210), transparent),linear-gradient(to top right, transparent, whitesmoke);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    padding-bottom: 0;
    margin: 0;
}

h1, 
.h1 {
    font-weight: lighter;
    font-size: 3em;
}

h2,
.h2 
{
    font-weight: normal;
    font-size: 1.5em;
}

h3,
.h3
 {
    font-size: 1.3em;
}

h4,
.h4 {
    font-size: 1.1em;
    margin-bottom: 5px;
}


/*
 * Style tweaks
 * --------------------------------------------------
 */
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
  padding-top: 0px;
}
footer {
  padding: 30px 0;
}

.btn-text {
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.5px;
    height: 33px;
    padding-left: 15px;
    padding-right: 15px;
}

.btn-sdc {
    color: #ffffff;
    background-color: #003c4c;
    /* Ab hier das gleiche wie in btn-text*/
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.5px;
    height: 33px;
    padding-left: 15px;
    padding-right: 15px;
}

.btn-sdc:hover,
.btn-sdc:focus,
.btn-sdc.active,
.btn-sdc:active,
.open .dropdown-toggle.btn-sdc {
    color: whitesmoke;
    background-color: #00627c;
}

.btn-sdc:hover,
.btn-sdc:focus {
    background-color: #00627c;
}
.btn-sdc:active, 
.btn-sdc.active {
  background-color: #00627c;
  border-color: #2b669a;
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    z-index: 2;
    color: #fff;
    background-color: #003c4c;
    border-color: #003c4c;
}

/*Sorgt dafür, dass eine Tabelle auch dann einen Rand hat, wenn sie ohne Datatables.net aufgebaut ist*/
.panel > .table-responsive > .table-bordered {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(221, 221, 221);
}

.table > tbody > tr > td > div.form-group {
    margin-bottom: 0;
    min-width: 100px;
}

.table > thead > tr > td.warning2,
.table > tbody > tr > td.warning2,
.table > tfoot > tr > td.warning2,
.table > thead > tr > th.warning2,
.table > tbody > tr > th.warning2,
.table > tfoot > tr > th.warning2,
.table > thead > tr.warning2 > td,
.table > tbody > tr.warning2 > td,
.table > tfoot > tr.warning2 > td,
.table > thead > tr.warning2 > th,
.table > tbody > tr.warning2 > th,
.table > tfoot > tr.warning2 > th {
  background-color: #f9e0c9;
}
.table-hover > tbody > tr > td.warning2:hover,
.table-hover > tbody > tr > th.warning2:hover,
.table-hover > tbody > tr.warning2:hover > td,
.table-hover > tbody > tr:hover > .warning2,
.table-hover > tbody > tr.warning2:hover > th {
  background-color: #fcefe3;
}


.list-group-item-warning2 {
  color: #b86a22;
  background-color: #f9e0c9;
}
a.list-group-item-warning2 {
  color: #b86a22;
}
a.list-group-item-warning2 .list-group-item-heading {
  color: inherit;
}
a.list-group-item-warning2:hover,
a.list-group-item-warning2:focus {
  color: #b86a22;
    background-color: #FFE7C2; /*#f9e0c9;*/
}
a.list-group-item-warning2.active,
a.list-group-item-warning2.active:hover,
a.list-group-item-warning2.active:focus {
  color: #fff;
  background-color: #b86a22;
  border-color: #b86a22;
}

.greenValue,
table > thead > tr > td.greenValue,
.table > tbody > tr > td.greenValue,
.table > tfoot > tr > td.greenValue,
.table > thead > tr > th.greenValue,
.table > tbody > tr > th.greenValue,
.table > tfoot > tr > th.greenValue,
.table > thead > tr.greenValue > td,
.table > tbody > tr.greenValue > td,
.table > tfoot > tr.greenValue > td,
.table > thead > tr.greenValue > th,
.table > tbody > tr.greenValue > th,
.table > tfoot > tr.greenValue > th {
  background-color: rgb(197, 224,180);
}
td.greenValue a {
    color: black;
}

.yellowValue,
table > thead > tr > td.yellowValue,
.table > tbody > tr > td.yellowValue,
.table > tfoot > tr > td.yellowValue,
.table > thead > tr > th.yellowValue,
.table > tbody > tr > th.yellowValue,
.table > tfoot > tr > th.yellowValue,
.table > thead > tr.yellowValue > td,
.table > tbody > tr.yellowValue > td,
.table > tfoot > tr.yellowValue > td,
.table > thead > tr.yellowValue > th,
.table > tbody > tr.yellowValue > th,
.table > tfoot > tr.yellowValue > th {
  background-color: rgb(255, 255, 0);
}
td.yellowValue a {
    color: black;
}

.orangeValue,
table > thead > tr > td.orangeValue,
.table > tbody > tr > td.orangeValue,
.table > tfoot > tr > td.orangeValue,
.table > thead > tr > th.orangeValue,
.table > tbody > tr > th.orangeValue,
.table > tfoot > tr > th.orangeValue,
.table > thead > tr.orangeValue > td,
.table > tbody > tr.orangeValue > td,
.table > tfoot > tr.orangeValue > td,
.table > thead > tr.orangeValue > th,
.table > tbody > tr.orangeValue > th,
.table > tfoot > tr.orangeValue > th {
  background-color: rgb(255, 140, 0);
}
td.orangeValue a {
    color: black;
}

.redValue,
table > thead > tr > td.redValue,
.table > tbody > tr > td.redValue,
.table > tfoot > tr > td.redValue,
.table > thead > tr > th.redValue,
.table > tbody > tr > th.redValue,
.table > tfoot > tr > th.redValue,
.table > thead > tr.redValue > td,
.table > tbody > tr.redValue > td,
.table > tfoot > tr.redValue > td,
.table > thead > tr.redValue > th,
.table > tbody > tr.redValue > th,
.table > tfoot > tr.redValue > th {
  background-color: rgb(255, 0, 0);
}

td.redValue a {
    color: black;
}

.bg-warning2 {
  background-color: #FFE7C2 /*#f9e0c9;*/
}
a.bg-warning2:hover {
  background-color: #f7ecb5;
}


.media-object-small {
  display: block;
    width: 40px;
    height: 40px;
}

.panel-group .panel-sdc {

    margin-bottom:50px
}

.panel-sdc {
    -moz-box-shadow: none;
    -webkit-box-shadow: inherit;
    margin-bottom: 50px;
}

.panel-table {
    padding: 15px;
    overflow: visible; /* Damit Dropdowns über den Rand eines Panels hinausragen dürfen */
}

.breadcrumb {
    background-color: white;
}

/*
    Die folgende CSS rule überlagert die allgemeine rule in bootstrap.css Zeile 5722 "border-bottom: 0;",
    welche u.a. festlegt, dass Tabellenkopfzeilen in Panels keinen unteren Rand haben. Bisher wurde diese bootstrap.css rule
    durch eine !important-Deklaration in Zeile 499 f. überschrieben, aber das führte - nach Einführung der Option "scrollX" für datatables -
    zu Problemen in der Kopfzeile der Eventtabelle, wo eine sehr dicke unregelmäßige Linie gezeichnet wurde.
*/
.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #333;
}

.panel-sdc>.panel-group>.panel-heading {
    border-bottom-color: black;
    border-bottom-width: 2px;
}

.panel-sdc>.panel-heading {
    background-color: white;
    padding-left: 0;
    border-bottom-color: black;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}



.panel-group .panel-dashboard {

    margin-bottom:50px
}

.panel-dashboard{
    -moz-box-shadow: none;
    -webkit-box-shadow: inherit;
    background-color: whitesmoke;
    padding:10px;

    
    
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: lightgray;
    -ms-border-radius:0;
    border-radius:0;
}

.panel-dashboard-fixedHeight {
        height:180px;
    }

.panel-dashboard-fixedHeight2 {
        height:230px;
    }


.panel-dashboard-ok {
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    border-top-color: green;
    border-top-width: 3px;
}
.panel-dashboard-danger {
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    border-top-color: red;
    border-top-width: 3px;
}

.panel-dashboard-warning {
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    border-top-color: orange;
    border-top-width: 3px;
}

.dashboard-warning {
    color:orange;
}

.dashboard-danger {
    color:red;
}

.dashboard-ok {
    color:green;
}

.panel-dashboard>.panel-heading {
    color: rgb(123, 122, 122);
    font-weight: 600;
}


/*
Full screen Modal 
*/
.fullscreen-modal .modal-dialog {
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .fullscreen-modal .modal-dialog {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .fullscreen-modal .modal-dialog {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .fullscreen-modal .modal-dialog {
     width: 1170px;
  }
}

.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border-bottom-width: 1px;
    border-bottom-color: #333;
}

.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th {
    border-top-width: 1px;
    border-top-color: #333;
}

/*Ging so mit Font Awesome 5 nicht mehr START*/
/*table.dataTable thead .sorting:after {
    opacity: 0.2;
    content: "\f0dc";
}

table.dataTable thead .sorting_asc:after {
    content: "\f0de";
}

table.dataTable thead .sorting_desc:after {
    content: "\f0dd";
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: block;
    font-family: Font Awesome;
    opacity: 0.4;
}*/
/*Ging so mit Font Awesome 5 nicht mehr ENDE*/

/*Label innerhalb eines buttons*/
.btn-label { 
    text-transform: uppercase;
    font-size: 0.8em;
    color: #505050;
    font-weight: bold;
    letter-spacing: 0.5px
}

.control-label {
    text-transform: uppercase;
    font-size: 0.8em;
    color: #505050;
    font-weight: bold;
}


.table-label {
    text-transform: uppercase;
    font-size: 0.8em;
    vertical-align: bottom !important;
    color: #505050;
    padding-bottom: 1px;
    font-weight: bold;
}

.table-label-infobox {
    width: 180px;
    vertical-align: top !important;
}

.table-label.active {
        color: white !important;
    }


.table-label-no-uppercase {
    /*text-transform: uppercase;*/
font-size:0.9em;

vertical-align: bottom !important;
color: #505050;
padding-bottom: 1px;
}


tr.selected > .table-content {
    color: #ffffff;
}


.table-content {
    font-size: 0.9em;
    color: #505050;
    padding-bottom: 1px;
}

.table-content-uppercase {
    text-transform: uppercase;
    font-size: smaller; /*Schrift bei uppercase etwas kleiner und fett*/
    font-weight: bold;
    color: #505050;
    padding-bottom: 1px;
    letter-spacing: 0.1em
}

.table-content > .text-uppercase {
    font-size: smaller; /*Schrift bei uppercase etwas kleiner und fett*/
    font-weight: bold;
    letter-spacing: 0.1em
}

.table-button tr td:last-child .btn-group {
    white-space:nowrap;
    display:flex;
}

.visualization-panel {
    display: none;
    background-color: whitesmoke;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.visualization-panel.alarm-state {
    border-left-style: solid;
    border-left-width: 3px !important;
    border-radius: 5px !important;
}

.visualization-panel.alarm-state.no-alarm {
    border-left-color: green;
}

.visualization-panel.alarm-state.pre-alarm {
    border-left-color: rgb(255, 200, 0);
}

.visualization-panel.alarm-state.alarm {
    border-left-color: rgb(255, 140, 0);
}

.visualization-panel.alarm-state.main-alarm {
    border-left-color: rgb(217, 11, 11);
}

.visualization-panel.online {
}

.visualization-panel.offline {
    color: grey !important;
    border-left-color: grey !important;
}


table.dataTable td.alarm-state {
    border-left-style: solid;
    border-left-width: 4px !important;
   /* -ms-border-bottom-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
    -ms-border-top-left-radius: 5px !important;
    border-top-left-radius: 5px !important;*/
}

table.dataTable td.alarm-state.unkown {
    /*border-left-color: black;*/
}
table.dataTable td.alarm-state.no-alarm {
     border-left-color: green;
}
table.dataTable td.alarm-state.pre-alarm {
    border-left-color: rgb(255, 200, 0);
}
table.dataTable td.alarm-state.alarm {
    border-left-color: rgb(255, 140, 0);
}
table.dataTable td.alarm-state.main-alarm {
    border-left-color: rgb(217, 11, 11);
}
table.dataTable td.online {
}

table.dataTable td.offline {
    color: grey !important;
    border-left-color: grey !important;
}




.list-group-item.alarm-state {
    border-left-style: solid;  
    border-left-width: 4px!important;
    -ms-border-radius: 5px!important;
    border-radius: 5px!important;
}

.list-group-item.alarm-state.no-alarm { border-left-color: green; }
.list-group-item.alarm-state.pre-alarm { border-left-color: rgb(255, 200, 0); }
.list-group-item.alarm-state.alarm { border-left-color: rgb(255, 140, 0); }
.list-group-item.alarm-state.main-alarm { border-left-color: rgb(217, 11, 11); }

.list-group-item.online {
    
}
.list-group-item.offline {
    color: grey!important;
    border-left-color: grey!important;
}

i.alarm-state.inactive {
    color: grey;
}

i.alarm-state.no-alarm {
    color: green;
}

i.alarm-state.pre-alarm {
    color: rgb(255, 200, 0);
}

i.alarm-state.alarm {
    color: rgb(255, 140, 0);
}

i.alarm-state.main-alarm {
    color: rgb(217, 11, 11);
}


.panel-assignment {
    margin: 0px !important;
}
.panel-assignment > .panel-heading {
    padding: 5px;
    margin-bottom: 0px !important;
}


.panel-default {
    margin-bottom: 60px;
}
.panel-default > .panel-heading {
    background-color: white;
    border-bottom-color: transparent;
    height: 50px;
    margin-bottom: 15px;
}
.panel-default > .panel-footer {
    background-color: white;
    border-top-color: transparent;
    margin-bottom: 15px;
}

.panel-evaluation {
    background-color: rgba(150, 150, 150, 0.05);
    margin-bottom: 20px;
}

.panel-default .panel-evaluation > .panel-heading {
    background-color: transparent;
}
.panel-default .panel-evaluation > div > .panel-footer {
    background-color: transparent;
    border-top: 0px;
}

.panel-danger {
    border-width: 5px;
}

.panel-warning {
    border-width: 5px;
}

.smartfilter {
    position: fixed;
    display: none;
    -webkit-box-shadow: 5px 5px 7px -3px rgba(0,0,0,0.61);
    box-shadow: 5px 5px 7px -3px rgba(0,0,0,0.61);
}

/*small tag ein bisschen dunkler und weiß wenn selektiert in Tabelle*/
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h3 .small
.h5 .small,
.h6 .small {
    color: #5e5e5e;
}

tr.selected td h1 small,
tr.selected td h2 small,
tr.selected td h3 small,
tr.selected td h4 small,
tr.selected td h5 small,
tr.selected td h6 small,
tr.selected td .h1 small,
tr.selected td .h2 small,
tr.selected td .h3 small,
tr.selected td .h4 small,
tr.selected td .h5 small,
tr.selected td .h6 small,
tr.selected td h1 .small,
tr.selected td h2 .small,
tr.selected td h3 .small,
tr.selected td h4 .small,
tr.selected td h5 .small,
tr.selected td h6 .small,
tr.selected td .h1 .small,
tr.selected td .h2 .small,
tr.selected td .h3 .small,
tr.selected td .h3 .small
tr.selected td .h5 .small,
tr.selected td .h6 .small {
    color: whitesmoke;
}


/*Datatables styles*/
/*Farben für Selektion in DataTables.net*/
:root {
    --dt-row-selected: 0, 98, 124;
    --dt-row-selected-text: 255, 255, 255;
    --dt-row-selected-link: 255, 255, 255;
}

.label {
    letter-spacing: 0.6px;
    font-weight: normal;
}

.label-info {
    
    color:black
}


/*Sortier-Icons aus FontAwesome https://datatables.net/blog/2014-06-06*/
table.dataTable thead th {
    position: relative;
    background-image: none !important;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    font-family: "Font Awesome 5 Pro";
}

table.dataTable thead th.sorting:after {
    content: "\f0dc";
    color: #505050;
    font-size: 1.2em;
}

table.dataTable thead th.sorting_asc:after {
    content: "\f0de";
}

table.dataTable thead th.sorting_desc:after {
    content: "\f0dd";
}

table.dataTable tbody tr.selected td div ul li a {
    color: black;
}

/* Weitere Ergänzungen für DataTables - früher in eigener Datei dataTables-sdc.css */

/* DataTables - Loading overlay nach vorne holen. */
div.dataTables_processing {
    z-index: 999;
}

/* DataTables Editor - Pagination, Edit & Search in selbe Zeile. */
.left-col {
    float: left;
    width: 25%;
}

.center-col {
    float: left;
    width: 50%;
}

.right-col {
    float: left;
    margin-left: 25px;
    width: 25%;
}

.right-container {
    float: right;
}

.DTE_Form_Error {
    margin-top: 40px; /* Sorgt dafür dass error-Text unter den Buttons ist*/
    text-align: left; /* Sorgt dafür dass error-Text linksbündig ist*/
}