/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 11.11.2014, 15:58:56
    Author     : david
*/
@charset "UTF-8";
body {
    font-family: 'Roboto', sans-serif;
    padding: 0;
    margin: 0;
    height: 100%;
    font-size: 1.0em;
}

#easd_icon {
    display: inline-block;
    position: relative;
    right: 4px;
    top: 6px;
    float: right;
}

/*fieldset {*/
/*    display: inline;*/
/*}*/

fieldset.nolegend {
    margin-top: 9px;
    padding-bottom: .5em !important;
}

#easd_icon img {
    max-width: 50px;
    height: auto;

}

.kachel_wrapper select.grayLight, .kachel_wrapper input[type="text"].grayLight, .kachel_wrapper button.grayLight, .kachel_wrapper button {
    border: none;
}

.kachel_wrapper select.grayLight, .kachel_wrapper button.grayLight, .kachel_wrapper button {
    padding: 5px;
}

.kachel_wrapper button:hover {
    cursor: pointer;
}

.kachel_wrapper input[type="submit"]:hover {
    cursor: pointer;
}

.kachel_wrapper button.grayLight, .kachel_wrapper button {
    font-size: 1.0em;
}

.kachel_wrapper .kachel button.grayLight {
    padding: 3px;
}

.kachel_wrapper select.grayLight:hover, .kachel_wrapper button.grayLight:hover, .kachel_wrapper select.grayLight:focus, .kachel_wrapper input.grayLight:hover {
    background-color: #999999 !important;

}

.kachel_wrapper .kachel_login {
    height: 100vh;
    width: 100vw;
}

.kachel_wrapper h1, .kachel_wrapper h2, .kachel_wrapper h3, .kachel_wrapper h4, .kachel_wrapper h5, .kachel_wrapper h6 {
    line-height: 1.0em;
}

.kachel_wrapper a {
    text-decoration: none;
    font-size: 1.0em;
}

.kachel_wrapper a.linkbtn {
    font-size: 0.8em;
}

.kachel_wrapper .header_content a {
    text-decoration: underline;
}

.kachel_wrapper #content_main_div a {
    text-decoration: underline;
}

.kachel_wrapper #content_main_div a.ui-tabs-anchor, .kachel_wrapper #content_main_div a.linkbtn {
    text-decoration: none;
}

li.ui-state-default a:after {
    content: " +";
}

li.ui-state-active a:after {
    content: " -";
}

.kachel_wrapper #dp_menu, .kachel_wrapper #menu {
    height: 81vh;
}

.kachel_wrapper #menu {
    overflow-x: auto;
}

.kachel_wrapper ul.heading li:before {
    content: "";
    border: 5px solid #444;
    font-size: 0;
    line-height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    position: relative;
    bottom: 6px;
}

.kachel_wrapper a.text_shadow_white:hover {
    text-shadow: 0px 0px 5px #FFF;
}

.kachel_wrapper a.text_shadow_gray:hover {
    text-shadow: 0px 0px 5px #555;
}

.kachel_wrapper a.text_shadow_black:hover {
    text-shadow: 0px 0px 5px #000;
}

.kachel_wrapper a.underline:hover {
    text-decoration: underline;
}

.kachel_wrapper, .kachel_body {
    height: 100%;
    width: 100%;

    display: block;
}

.kachel_wrapper a:visited {
    text-decoration: underline;
}

.kachel_wrapper .content_main a:visited {
    text-decoration: underline;
}

.kachel_wrapper a:active {
}

.kachel_wrapper .kachel_wrapper li {

}

.kachel_wrapper .kachel_body {
    display: inline-block;

}

.main_menu_image {
    width: 2em;
    height: 2em;
}

.kachel_wrapper .header {
    display: block;
    padding: 3px 0px 0px 3px;
    overflow: hidden;
    z-index: 2;
    background-color: white;
}

a.headerMenu:hover {
    background-color: #eee;
    font-weight: bold;
}

a.headerMenu {
    color: black;
    padding: 0.3em;
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center;

}

a.headerMenu_small {
    width: 30px;
    height: 30px;
}

.previewimage {
    height: 5em;
}

.header_icon img {
    width: 200px;
}

.kachel_wrapper img {
    max-width: 100%;
}

.kachel_wrapper .header_content, .kachel_wrapper .header .header_icon, .kachel_wrapper .header_subcontent {
    display: inline-block;
    margin: 0px 5px;
    /*vertical-align: middle;*/
    height: 100%;
}

/*.kachel_wrapper .header_content a {*/
/*text-decoration: underline;}*/

.kachel_wrapper .full-length {
    width: 100%;
}

.kachel_wrapper .fullsize {
    width: 100%;
    height: 100%;
}

.kachel_wrapper iframe.cockpit {
    border: 0;
    overflow: hidden;
    width: 100%;
    height: 1080px;
    position: relative;
}

img.mainmenu_icon {
    max-width: 40px;
    height: auto;
    margin-bottom: -8px;
    margin-top: 6px;
}

.kachel_wrapper img.img-fullscreen {
    width: 100%;
    height: auto;
}

img.small_icon {
    width: 20px;
}

form img.small_icon {
    vertical-align: sub;
}

.kachel_wrapper .header_subcontent {
    /*vertical-align: sub;*/
    margin-left: 20px;

}

.kachel_wrapper .header_info {
    display: inline-block;
    float: right;
}

.kachel_wrapper .header_help {
    display: inline-block;
    margin-left: 10px;
}

.kachel_wrapper .content_nav {
    display: block;
    width: auto;
    float: left;
    margin-left: 0px;
    background-color: white;
    position: fixed;
    top: 0;
    height: 100%;
    margin-right: 1em;
    z-index: 2;
    max-width: 800px;
}

/*#dp_menu,#menu{padding-top: 57px;}*/

#menu {
    border-top: 1px solid grey;
}

#menu span {
    display: table;
    margin-left: 30px;
    margin-bottom: 0.2em;
}

#menu .header_allgemeines span {
    display: inline-block;
    font-size: 1.1em;
}

.kachel_wrapper .content_nav a {
    padding: 2px;
}

.kachel_wrapper .inner_content {
    margin-left: 15px;
    margin-top: 15px;
}

.kachel_wrapper .content_main {
    height: 100%;
    min-width: 300px;
    /*max-width: 1500px;*/
    vertical-align: top;
    margin-left: 29em;
    /*margin-top: 10px;*/
    z-index: 1;
    margin-bottom: 50px;
    margin-right: 10px;
}

.kachel_wrapper .kachel_area {
    margin-top: 10px;
    position: relative;
    padding: 5px;

}

.kachel_wrapper .kachel_group > .label {
    margin: 4px;
}

.kachel_wrapper .kachel_group > .label a {
    line-height: 0.8em;

}

.kachel_wrapper .kachel_group > .label a:first-child {
    margin-left: 25px;

}

.kachel_wrapper .kachel_group > .label a .kachel {
    margin: 0;
    font-size: 0.8em;
}

.kachel_wrapper .kachel_area > .label {
    font-size: 1.4em;
}

.kachel_wrapper .kachel_group {
    display: inline-block;
    position: relative;
    vertical-align: top;
    padding: 5px;
    margin: 5px;
    background-color: #eeeeee !important;

}

.kachel_wrapper .kachel_group_table {
    display: table !important;
}

.kachel_wrapper .kachel {
    display: inline-block;
    padding: 5px;
    margin: 5px;
    position: relative;
    /*min-width: 110px;*/
    vertical-align: top;
}

.kachel_wrapper .label {
    top: 0;
    left: 0;
    font-size: 1.2em;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    line-height: 1.4em;
}

.kachel_wrapper .label .right, .kachel_wrapper .status .right, .kachel_wrapper .right_circle {
    display: inline-block;
    right: 0px;
    padding: 0px 5px 5px 5px;
    float: right;
}

.kachel_wrapper .status .right {
    height: 100%;
}

.kachel_wrapper .content {
    width: 100%;
    line-height: 1.2em;
    z-index: 1;
    position: relative;
}

.kachel_wrapper .max_width300 {
    max-width: 300px;
}

.kachel_wrapper .max_width250 {
    max-width: 250px;
}

.kachel_wrapper .status {
    position: absolute;

    bottom: 0;
    width: 100%;
    padding-top: 2px;
}

/*position sachen*/
.kachel_wrapper .pos_rel {
    position: relative;
}

.kachel_wrapper .margin_auto {
    margin: 0px auto;
}

.kachel_wrapper .margin_no {
    margin: 0px !important;
}

.kachel_wrapper .margin5 {
    margin: 5px;
}

.kachel_wrapper .margin10 {
    margin: 10px;
}

.kachel_wrapper .margin15 {
    margin: 15px;
}

.kachel_wrapper .margin20 {
    margin: 20px;
}

.kachel_wrapper .padding_no {
    padding: 0px !important;
}

.kachel_wrapper .padding5 {
    padding: 5px;
}

.kachel_wrapper .padding10 {
    padding: 10px;
}

.kachel_wrapper .padding15 {
    padding: 15px;
}

.kachel_wrapper .padding20 {
    padding: 20px;
}

.kachel_wrapper .p {
    line-height: 1.2em;

}

.kachel_wrapper .button {

}

/*
.kachel_wrapper ul{
    margin:0;
    padding:0;
}*/
.kachel_wrapper .ul_vertical {
    margin-left: 15px;
}

.kachel_wrapper .ul_vertical ul {
    margin-left: 5px;
}

.kachel_wrapper .no_list-style li {
    list-style: none;
}

.kachel_wrapper .ul_vertical li {
    margin: 15px 20px;
}

.kachel_wrapper ul.ul_horizontal li {
    display: inline-block;
    margin: 0 5px;
}

.kachel_wrapper ul.heading > li {
    font-size: 1.5em;
    font-weight: bold;

}

.kachel_wrapper form label {
    width: 7em;
    /*float:left;*/
}

.kachel_wrapper form label.normal {
    width: auto;
    float: none;
    vertical-align: middle;
    display: block;
    text-align: left;
}

.kachel_wrapper form div {
    margin: 5px 0 5px 0;
}

.kachel_wrapper form div div {
    margin: 0;
    display: inline-block;
}

.kachel_wrapper form p.help-text {
    display: inline-block;
    margin-left: 0.5em;
}


.footer {
    clear: both;
}

.kachel_wrapper .breadcrumbs {
    width: auto;

    position: relative;
    display: inline-block;
}

.kachel_wrapper .breadcrumbs a {
    height: 100%;
    padding: 5px 25px 5px 0;
    position: relative;
}

.kachel_wrapper .breadcrumbs a:last-child {
    padding-right: 0px;
}

/*Animationen*/
/* Chrome, Safari, Opera */
.shadow_animation {
    box-shadow: 0 0 5px;
    transition: box-shadow 0.3s;
}

.shadow_animation:hover {
    box-shadow: 0 0 10px;
}

.kachel_wrapper .transparent {
    background-color: transparent;
    border: none;
}

/*
.kachel_wrapper table.color_rotate tr:nth-child(even) {
    background-color: #7ad61d !important;
}

.kachel_wrapper table.color_rotate tbody tr:nth-child(odd) {
    background-color: #00ccff !important;
}
*/

.kachel_wrapper table.color_rotate-gray tbody tr:nth-child(even), .kachel_wrapper table.color_rotate-gray tbody tr:nth-child(even) input[type="text"].grayLight,
.kachel_wrapper table.color_rotate-gray tr:nth-child(odd) button.grayLight,
.kachel_wrapper div.table.color_rotate-gray .tr:nth-child(odd) {
    background-color: #eee !important;
    font-size: 0.9em;
}

.kachel_wrapper table.color_rotate-gray tbody tr:nth-child(odd), .kachel_wrapper table.color_rotate-gray tbody tr:nth-child(odd) input[type="text"].grayLight,
.kachel_wrapper table.color_rotate-gray tr:nth-child(even) button.grayLight,
.kachel_wrapper div.table.color_rotate-gray .tr:nth-child(even) {
    background-color: #ddd !important;
    font-size: 0.9em;
}

.kachel_wrapper table.color_rotate-gray tbody tr:nth-child(odd):hover input[type="text"].grayLight,
.kachel_wrapper table.color_rotate-gray tbody tr:nth-child(even):hover input[type="text"].grayLight,
.kachel_wrapper table.color_rotate-gray tbody tr:nth-child(odd) input[type="text"].grayLight:focus,
.kachel_wrapper table.color_rotate-gray tbody tr:nth-child(even) input[type="text"].grayLight:focus {
    background-color: #fff !important;
}

.kachel_wrapper table.color_rotate-gray tr:nth-child(odd) button.grayLight:hover, .kachel_wrapper table.color_rotate-gray tr:nth-child(even) button.grayLight:hover {
    background-color: #999 !important;
}

.kachel_wrapper table.dotted {
    border: 1px dotted;
    border-collapse: collapse;
}

.kachel_wrapper div.dashed {
    border: 1px dashed;
}

.kachel_wrapper table.dotted td, .kachel_wrapper table.dotted th {
    border-right: 1px dotted;
    padding: 5px;

}

.kachel_wrapper table.bordered {
    border: 1px solid #aaa;
    border-collapse: collapse;
}

.kachel_wrapper table.bordered_black {
    border: 1px solid black;
    border-collapse: collapse;
}

.kachel_wrapper .content.bordered {
    border: 1px solid;
    margin: 5px 0;
    padding: 2px;
}

.kachel_wrapper .content.bordered {
    border: 1px solid;
    margin: 5px 0;
    padding: 2px;
}

.kachel_wrapper table.bordered td, .kachel_wrapper table.bordered th {
    border-right: 1px solid #aaa;
    padding: 2px;
    font-size: 1.0em;
}

.kachel_wrapper table.bordered_black td, .kachel_wrapper table.bordered_black th {
    border-right: 1px dotted;
    padding: 2px;
    font-size: 0.9em;
}

/*.kachel_wrapper #searchblock #searchtext {*/
/*vertical-align: super;*/
/*}*/

/*.kachel_wrapper #searchblock {*/
/*margin: 3px 0;*/

/*}*/

.kachel_wrapper table.bordered thead {
    border-bottom: 1px solid #000;
}

.kachel_wrapper table.bordered_black thead {
    border-bottom: 1px solid;
}

.kachel_wrapper table.bordered tfoot {
    border-top: 1px solid #000;
}

.kachel_wrapper .inline {
    display: inline-block;
}

.kachel_wrapper .shadowLight {
    box-shadow: 0px 0px 5px;
}


.kachel_wrapper .header.shadowLight {
    box-shadow: 0px 4px 3px -1px #919191;
}

.kachel_wrapper .content_nav.lightBorder {
    border-right: 1px solid lightgrey;
    padding-right: 1px;
}

/*.kachel_wrapper .header.lightBorder{*/
/*border-bottom: 1px solid lightgrey;*/
/*}*/
/*.kachel_wrapper .lightBorderBottom{*/
/*border-bottom: 1px solid grey;*/
/*}*/
.lightBorderTop {
    border-top: 1px solid grey;
}


.kachel_wrapper .shadowWhite {
    box-shadow: 0px 0px 5px #AAAAAA;
}

.kachel_wrapper .label .right_circle {
    border-radius: 50%;
    height: 26px;
    width: 23px;
    margin: 3px !important;
    text-align: center;
    padding-right: 5px;
    display: block;
}

/*Login*/
.kachel_wrapper .kachel_center {
    /*wenn breite geaendert bitte die mediaqueries überprüfen und anpassen!*/
    margin: 0 auto;
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    margin-left: -200px;
    top: 50%;
    margin-top: -200px;
}

.kachel_wrapper .fg-center {
    text-align: center;
}

.kachel_wrapper .radius5 {
    border-radius: 5px;
}

.kachel_wrapper .radius10 {
    border-radius: 10px;
}

.kachel_wrapper .radius15 {
    border-radius: 15px;
}

.kachel_wrapper .radius20 {
    border-radius: 20px;
}

.kachel_wrapper .radius5_right {
    border-bottom-right-radius: 5px;
}

.kachel_wrapper .radius10_right {
    border-bottom-right-radius: 10px;
}

.kachel_wrapper .radius15_right {
    border-bottom-right-radius: 15px;
}

.kachel_wrapper .radius20_right {
    border-bottom-right-radius: 20px;
}

/*Farben*/

.kachel_wrapper .kachel_group.status_deactivated {
    border-radius: 5px;
    background-color: #dadada !important;
}

.kachel_wrapper .kachel_group.status_ok {
    border-radius: 5px;
    background-color: #c1e9ad !important;
}

.kachel_wrapper .kachel_group.status_warning {
    border-radius: 5px;
    background-color: #FFF81A !important;
}

.kachel_wrapper .kachel_group.status_error {
    border-radius: 5px;
    background-color: #FF8E2A !important;
}

.kachel_wrapper .kachel_group.status_critical {
    border-radius: 5px;
    background-color: #FF4C04 !important;
}

.kachel_wrapper .kachel_group.status_fatal {
    border-radius: 5px;
    background-color: #f00 !important;
}

.kachel_wrapper table tr.status_deactivated {
    border-bottom: 1px dotted;
    background-color: #dadada !important;
}

.kachel_wrapper table tr.status_ok {
    border-bottom: 1px dotted;
    background-color: #74e140 !important;
}

.kachel_wrapper table tr.status_warning {
    border-bottom: 1px dotted;
    background-color: #e4dd00 !important;
}

.kachel_wrapper table tr.status_error {
    border-bottom: 1px dotted;
    background-color: #d86a12 !important;
}

.kachel_wrapper table tr.status_critical {
    border-bottom: 1px dotted;
    background-color: #b84111 !important;
}

.kachel_wrapper table tr.status_fatal {
    border-bottom: 1px dotted;
    background-color: #b11 !important;
}

.kachel.status_deactivated {
    background-color: #dadada !important;
}

.kachel.status_ok {
    background-color: #74e140 !important;
}

.kachel.status_warning {
    background-color: #e4dd00 !important;
}

.kachel.status_error {
    background-color: #d86a12 !important;
}

.kachel.status_critical {
    background-color: #b84111 !important;
}

.kachel.status_fatal {
    background-color: #b11 !important;
}


/*#tabs{
    display:inline-block;
}*/
/*
#tabs .content_main{
    margin:0;
}*/

/*.tabs {*/
/*    display: inline-block;*/
/*}*/

/*.tabs .content_main {*/
/*    margin: 0;*/
/*}*/

/*table{font-size: 1.1em;}*/
table tr, table tr td {
    vertical-align: baseline;
}

/*#dp_menu > ul > li:first-child {*/
/*    margin-bottom: 20px;*/
/*}*/

/*#content_main_div h4 {*/
/*    margin: 5px 0 5px 0;*/
/*}*/

p.dp_information {
    margin: 2px 0px 2px 12px;
}

span.dp_inf_name {
    font-size: 1.1em;
    margin-right: 0.5em;
}

.ALARM {
    background-color: #ffe0b3;
}

.THREAT {
    background-color: #ffe0b3;
}

.WARNING {
    background-color: #ffe0b3;
}

.DEACTIVATED {
    background-color: white;
    color: #999
}

.EXCEPTION_IN_DIAG {
    background-color: red;
}

.ERROR {
    background-color: darkorange;
}

/* button*/
.linkbtn, button.linkbtn, button[type=submit], input[type=file], button[type=reset], input[type="submit"] {
    /*-moz-border-radius: 2px;*/
    /*-webkit-border-radius: 2px;*/
    /*border-radius: 2px;*/
    /*border: 1px solid silver;*/
    /*display: inline-block;*/
    /*cursor: pointer;*/
    /*padding: 2px 3px;*/
    /*text-decoration: none;*/
    /*!*background-color: #f6f6f6;*!*/
    /*!*color: black;*!*/
    /*font-size: 0.8em;*/
}

.linkbtn.disabled {
    color: silver;
}

.linkbtn:hover, button.linkbtn:hover, button[type="submit"]:hover, input[type="file"]:hover, button[type="reset"]:hover, input[type="submit"]:hover {
    /*background-color: #eee;*/

}

/*.linkbtn:active, button.linkbtn:active, button[type="submit"]:active, input[type="file"]:active, button[type="reset"]:active,*/
/*input[type="submit"]:active {*/
/*position: relative;*/
/*top: 1px;*/
/*}*/

.linkbtn.touchable {
    padding: 4px;
    margin-right: 5px;
}

/**
*********************************
***********Tabview css***********
*********************************
*/

#tabs {
    display: block;
    margin-left: -15px;
}

.dp-field {
    margin-left: 15px;
}

#tabs .dp-field {
    padding: 0;
}

.ui-tabs-collapsible.ui-widget-content, .ui-tabs-collapsible.ui-widget-header {
    background: transparent;
    border: 0;
}

/*a:active, a:visited {*/
/*    color: black;*/
/*}*/

/*a:visited{text-decoration: underline;}*/

.header_content {
    text-align: right;
    vertical-align: top;
}

.header_content a {
    color: black;

}

table#diagnoseTable {
    word-wrap: initial;
}

table#diagnoseTable tr.tabledays td {
    min-width: 20px;
    text-align: center;
}

table#diagnoseTable td.status_ok {
    background-color: green;
}

table#diagnoseTable td.status_failure {
    background-color: red;
}

table#diagnoseTable td.status_unknown, table#diagnoseTable td.status_deactivated {
    background-color: #74e140 !important;
}

table#diagnoseTable th.init {
    min-width: 150px;
}

/* kleiner workaround weil tr nicht in forms erlaubt ist*/
div.table {
    display: table;
    border-collapse: collapse;
    border: 1px solid #aaa;
}

div.table.no-border {
    border: 0;
}

div.tr, .kachel_wrapper div.table div.tr, form.tr {
    display: table-row;
    /*border: 1px dotted black;*/
}

div.thead {
    display: table-row;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid black;
}

div.thead .td {
    cursor: pointer;
    /*background-color:#CCC;*/
}

.kachel_wrapper div.table div.td {
    display: table-cell;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
    padding: 0.3em;
}
div.table div.td{
    display: table-cell;
}
div.table .tr.border-bottom {
    border-bottom: 1px solid #AAAAAA;
}

div.table .tr.border-top {
    border-top: 1px solid #AAAAAA;
}

.kachel_wrapper div.table div.td.no-border-left, fieldset.info_wrapper > span.no-border-left {
    border-left: 0;
}

.kachel_wrapper div.table div.td.no-border-right, fieldset.info_wrapper > span.no-border-right, fieldset.info_wrapper table span.no-border-right {
    border-right: 0;
}


.downloadExcel {
    display: block;
    position: absolute;
    width: auto;
    padding: 3px;
    border: 1px solid #333;
    background-color: white !important;

}

form.in_row {
    display: inline-block;
}

div#menu span.adminmenu a {
    color: black;
}

.kachel_wrapper div#menu div#adminmenu {
    margin-top: 0.5em;
}

.kachel_wrapper div#menu div#adminmenu, .kachel_wrapper .header_allgemeines a {
    font-size: 1.1em;
}

.kachel_wrapper .header_allgemeines a {
    font-size: 0.8em;
}

.kachel_wrapper .header_allgemeines span {
    /*border-right: 1px solid lightgray;*/
    /*padding-top: 0px;*/
    display: inline-block;
    text-align: center;
    margin-right: -5px;
    margin-top: -1px;
}

.kachel_wrapper .header_allgemeines span:last-of-type {
    /*border-right: 0px solid black;*/
    /*padding-right: 0;*/
    padding-left: 2px;
    /*margin:-5px;*/
}

.kachel_wrapper .header_allgemeines {
    padding-bottom: 5px;
}

div#menu span.adminmenu.active a, div#menu span.adminmenu a:hover, div#menu span.adminmenu a:active {
    font-weight: bold;
}


div#menu span.adminmenu.active {
    box-shadow: 5px 5px 5px grey;
}

div#menu span.adminmenu.active a:active:before, div#menu span.adminmenu.active a:before {
}

.description {
    margin: 0.5em 0 0.5em 1em;
}

span.button_description {
    font-weight: bold;
}

span.diagnose {
    display: inline-block;
    padding: 0 3px;
    margin-bottom: 5px;
}

.justify-self-start div.list {
    display: block;
}

.kachel_wrapper div.list {
    margin: 5px 0 0 0;
}

.kachel_wrapper div.list div.list {
    padding: 0 10px;
}

.kachel_wrapper div.list:last-child {
    margin-bottom: 5px;
}

.deviceHighlight_l1 {
    margin-top: 1rem;
    font-weight: bold;
    font-size: 1.3em;
    line-height: 1.5em;
}

.deviceHighlight_lx {
    font-weight: bold;
}

/*to override jquery tab css*/
.ui-widget-header {
    background: #ccc;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: #e6e6e6;
}

.ui-widget-content {
    border: none;
}

.ui-corner-all, .ui-corner-top {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.ui-state-default.ui-state-active {
    background: #fff;
}

.ui-resizable-e {
    width: 10px;
}

.ui-tabs {
    padding: 0;
}

.dp-field fieldset, #editDp td {
    vertical-align: top;
}

.dp-field fieldset.no-border {
    border: 0;
    margin: 0;
    padding: 0;
}

/*.dp-field form{display:inline-block;}*/
/*.dp-field{vertical-align:top;}*/
fieldset[name="fieldset-datapoint-details"] {
    box-shadow: 0 4px 6px #ffffff0a;
    border-radius: 0.25em;
    position: sticky;
    top: 0;
    z-index: 1001;
    /*background-color: white;*/
}

fieldset[name="fieldset-datapoint-details"] > * {
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

fieldset[name="fieldset-datapoint-details"] > *:last-child {
    border-right: none;
}

#systemFlag {
    font-size: 0.8em;
    color: gray;
    margin-left: 20px;
    position: relative;
    top: -6px;
}

.kachel_wrapper .diag_device {
    margin-bottom: 5px;
    border: 1px solid gray;
    /*margin-left: 10px;*/
}

/*MEDIA QUERIES*/

@media (max-width: 450px) {

    .kachel_wrapper .kachel_center {
        margin-left: 15px;
        left: 0;
    }

}

@media (max-height: 830px) {

    .kachel_wrapper #dp_menu, .kachel_wrapper #menu {
        height: 79vh;
    }

    .kachel_wrapper #menu {
        height: 78vh;
    }
}

@media (max-height: 740px) {

    .kachel_wrapper #dp_menu {
        height: 78vh;
    }

    .kachel_wrapper #menu {
        height: 76vh;
    }

}

@media (max-height: 610px) {

    .kachel_wrapper #dp_menu {
        height: 77vh;
    }

    .kachel_wrapper #menu {
        height: 74vh;
    }

}

@media (max-height: 550px) {

    .kachel_wrapper #dp_menu {
        height: 75vh;
    }

    .kachel_wrapper #menu {
        height: 64vh;
    }

}

.warningtext {
    color: red;
}

a.headerMenu:hover, div#menu span.adminmenu.active a, div#menu span.adminmenu a:hover, div#menu span.adminmenu a:active, .ui-widget-header .ui-state-hover, .ui-widget-header .ui-state-hover a, .ui-widget-header .ui-state-active a {
    background-color: transparent;
    font-weight: normal;
    /*color:#dd052b;*/
}

#cockpit_content svg {
    max-width: 100%;
    height: auto;
}

#cockpit_content {
    /*padding-top: 20px;*/
}

.kachel_wrapper .interaction {
    position: fixed;
    /*background-color: rgba(255, 255, 255, 0.9);*/
    top: 5px;
    right: 5px;
    color: lightgrey;
    z-index: 1000;

}

svg text[onclick], svg image[onclick], span[onclick], img[onclick] {
    cursor: pointer;
}

.ui-widget-header, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 0;
}

.ui-widget-header, .ui-widget-header, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background-color: transparent !important;
}

.ui-datepicker-header.ui-widget-header {
    background-color: #eee !important;
}

table.ui-datepicker-calendar a.ui-state-active {
    background-color: #DEDEDE !important;
}

.ui-state-default.ui-slider-handle {
    background-color: #666 !important;
}

.ui-slider {
    border: 1px solid #666;
}

#ui-datepicker-div {
    border: 1px solid #aaa;
}

.ui-widget-header .ui-state-active a, div#menu span.adminmenu.active a {
    font-weight: bold;
}

.helpdescription {
    font-style: italic;
}

.deviceDatapoint {
    margin-left: 5px;
}

fieldset.info_wrapper {
    display: table;
    border: 1px solid #ababab;
}

fieldset.info_wrapper > span {
    display: table-cell;

}

fieldset.info_wrapper > span, fieldset.info_wrapper table span {
    vertical-align: top;
    padding: 0 10px;
    border-right: 1px solid #ababab;
}


fieldset.info_wrapper > span#chart_dyn_div {
    border-right: 0;
}

fieldset.info_wrapper > span > span.cell {
    display: table-cell;
    vertical-align: top;
    padding-left: 10px;
    text-align: center;
}

fieldset.info_wrapper > span.no-cell {
    display: inline;
    vertical-align: middle;
    padding-left: 0;
    text-align: left;
    border-right: 0;
}


fieldset.info_wrapper > span > span.cell:first-child {
    padding-left: 0;
}


fieldset.info_wrapper > span:last-child {
    margin-right: 0px;
    border-right: none;
    padding-right: 0;
}

fieldset.info_wrapper table th {
    text-align: right;
}

#siteInformationBox {
    background-color: rgba(230, 10, 10, 0.9);
    /*padding: 10px;*/
    text-align: center;
}

#siteInformationBox.activeError {
    padding: 5px;
    font-weight: bold;
}

table span.tableinfo {
    /*text-align:center;*/
    display: block;
    padding-top: 5px;
}

.headerLine {
    width: 100%;
}

.headerLine > span {
    width: 50px;
    padding: 3px 5px;
}

.information-low {
    font-size: 0.7em;
    color: #6f6f6f;
}

.information-low a {
    color: #6f6f6f;
}

#modellica_urns > span {
    vertical-align: top;
    display: inline-block;
}

.remove-borders {
    padding: 0;
    margin: 0;
}

.dot {
    height: 10px;
    width: 10px;
    background-color: #000;
    border-radius: 50%;
    display: inline-block;
}

.dont-break-out {

    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;

}

span.list {
    display: block;
    margin-left: 30px;
}

/*ui widget fixes*/
.ui-widget {
    font-size: 1em;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-size: 0.8em;
}

table#datapoint_export_table th {
    border-right: 10px solid transparent;
}

.mm_bg {
    background-size: 36px 36px;
    background-repeat: no-repeat;
    height: 36px;
    width: 36px;
    display: inline-block;
}

.mm_text {
    margin-top: 0.5em;
}

.bg_small {
    background-size: 30px 30px;
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
    display: inline-block;
}

/*.contrast_filter {*/
/*    filter: brightness(0) contrast(3);*/
/*}*/

.tab-menu {
    height: 6em;
}

.tab-menu a {

}

#mainMenu_cockpit {
    background-image: url("../images/mainmenu/cockpit.png");
}

#mainMenu_admin {
    background-image: url("../images/mainmenu/admin.png");
}

#mainMenu_dashboard {
    background-image: url("../images/mainmenu/dashboard.png");
}

#mainMenu_help {
    background-image: url("../images/hilfe.png");
}

#mainMenu_logout {
    background-image: url("../images/mainmenu/logout.png");
}

#mainMenu_data {
    background-image: url("../images/mainmenu/data.png");
}

#mainMenu_grafana {
    background-image: url("../images/mainmenu/grafana.png");
}

[data-theme="dark"] {
    #mainMenu_grafana {
        filter: invert(1);
    }
}

#mainMenu_plot {
    background-image: url("../images/mainmenu/gnuplot_white.png");
}

#mainMenu_modelica {
    background-image: url("../images/mainmenu/modellica.png");
}

#mainMenu_template {
    background-image: url("../images/mainmenu/template.png");
}

#mainMenu_files {
    background-image: url("../images/mainmenu/files.png");
}

#mainMenu_search {
    background-image: url("../images/search_white.png");
}

/*#mainMenu_logout{*/
/*    background-image: url("../images/mainmenu/logout.png");*/
/*}*/
#mainMenu_public {
    background-image: url("../images/mainmenu/dashboard.png");
}

a.noPicture, a.noPicture span.mm_bg {
    width: auto;
    display: inline-block;
    height: auto;
    text-align: center;
}

.mo_diff_info {
    color: #afafaf;
    font-size: 1.2vh;
    line-height: 1.1vh;
    margin-bottom: 1vh;
    font-weight: bold;
}

.mo_values {
    color: #afafaf;
    font-weight: bold;
    font-size: 1.9vh;
    line-height: 2.2vh;
}

.login_information {
    text-align: center;
}


.kachel_wrapper .footer_collab_icon {
    max-width: 80px;
    width: 100%;
    height: auto;
    left: 63px;
    top: -12px;
    position: relative;
}

#userCockpit_east {
    position: fixed;
    padding-right: 1vw;
    margin-right: -31.5vw;
    width: 31vw;
    z-index: 300;
    height: 99vh;
    top: 0;
    right: 0;
    transition: margin 200ms;
    /* background-color: blue; */
    /*
    display: block;
    padding-right: 1vw;
    padding-top: 2vh;
    border-top: 1px solid white;
    background-color: #595959;

     */
}


#userCockpit_east.cockpit_menu_effekt {
    margin-right: -1vw !important;
    transition: margin 200ms;
}

.line {
    width: 3vw;
    height: 1vh;
    background-color: white;
    margin-bottom: 0.5vh;
}

#userCockpit_east:hover a {
    pointer-events: auto;
    cursor: pointer;
}

#userCockpit_east .previewimage {
    width: 5vh;
    height: 5vh;
    max-width: 5vh;
}

#userCockpit_east a {
    pointer-events: none;
    /*cursor: default;*/
}

#userCockpit_footer a {
    pointer-events: none;
    /*cursor: default;*/
}

#userCockpit_footer {
    position: fixed;
    padding-left: 1vw;
    display: block;
    /*overflow: hidden;*/
    /* -webkit-box-shadow: 0px -5px 25px -4px rgba(0,0,0,0.75); */
    /* -moz-box-shadow: 0px -5px 25px -4px rgba(0,0,0,0.75); */
    /* box-shadow: 0px -5px 25px -4px rgba(0, 0, 0, 0.75); */
    z-index: 300;
    bottom: 3vh;
    width: 98vw;
    height: 20vh;
    margin-bottom: -18.5vh;
    transition: margin 200ms;
    min-height: 20vh;
    /* background-color: blue; */
    /*
    padding-right: 1vw;
    padding-top: 2vh;
    border-top: 1px solid white;
    background-color: #595959;

     */
}

#userCockpit_footer.cockpit_menu_effekt {
    margin-bottom: -6vh;
    transition: margin 200ms;
}

#userCockpit_footer:hover a {
    pointer-events: auto;
    cursor: pointer;
}

.userCockpit_toucharea {
    position: relative;
    /*display: table-cell; */
    margin-top: 0.5vh;
    text-align: left;
    vertical-align: middle;
    background-color: #595959;
    border-radius: 0.2vh;
    padding: .3vh;
    width: 16vw;
    font-size: 2vh;
}

#userCockpit_footer a {
    background-color: #595959;
}

.userCockpit_toucharea_east {
    position: relative;
    /*display: table-cell; */
    margin-top: 0.5vh;
    text-align: left;
    vertical-align: middle;
    background-color: #ececec;
    border-radius: 0.2vh;
    padding: .3vh;
    width: 28vw;
    font-size: 2.5vh;
    margin-right: 3vw;
}

#userCockpit_footer .userCockpitlogout {
    /* clear: both;
    float: right;
    top: -8.4vh;
    right: 1.5vh;
    clear: both;
*/
    position: absolute;
    right: 2vh;
}

#userCockpit_footer .previewimage {
    width: 6vmin;
    height: 6vmin;
    max-width: 6vmin;
}

/*.legendTable > span{*/
/*    display:flex;*/
/*    flex-direction:column;*/
/*}*/
.legendTable > span {
    display: block;
}

/*.legendTable input{margin-bottom: 0;}*/
.legendTable td {
    padding: 0;
    vertical-align: top;
    font-size: 11px;
    line-height: normal;
}

.legendTable td > input {
    margin: 0;
    vertical-align: middle;
    /* top: -9px; */
    /* position: absolute; */
    margin-top: 1px;
}

.dygraphLegendLabel {
    display: inline-block;
    /*width: 150px;*/
    vertical-align: middle;
    font-weight: bold;
    border: none !important;
}


#dygraph_wrapper {
    position: relative;
}

.dygraph_legend_inside {
    position: absolute;
    top: 0px;
    left: 5em;
    font-size: smaller;
    background-color: #212121CC;
    z-index: 999;
}

.dygraph_legend_below {
    position: inherit;
    font-size: smaller;
    background-color: inherit;
    margin-left: 3rem;
}


.dygraph_init {
    height: 100%;
    width: 100%;
    position: relative;
}

.dygraph_legend_table {
    height: 100%;
}

table.dygraph_legend_table tr td:last-child {
    min-width: 25px;
}

table.dygraph_legend_table {
    border-spacing: 0;
}

table.dygraph_legend_table td {
    padding: 0;
}

table.nowrap td, .nowrap {
    white-space: nowrap;
}

.hide, .hide-legendTabel table {
    display: none;
}

form .label label.normal {
    display: inline-block !important;
}

.legend_hidebox {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

/*
@media(orientation: portrait){
    #userCockpit_footer{height: 7.5vh;}
}

@media (min-height: 1300px){
    #userCockpit_footer {
        margin-bottom: -170px;
    }
    #userCockpit_footer:hover {
        margin-bottom: -30px;
    }
}
@media (min-height: 1700px) {
    #userCockpit_footer {
        margin-bottom: -190px;
    }
}
@media (min-height: 1900px) {
    #userCockpit_footer {
        margin-bottom: -220px;
    }
}
@media (min-height: 2100px) {
    #userCockpit_footer {
        margin-bottom: -250px;
    }
}
@media (min-height: 2400px){
    #userCockpit_footer {margin-bottom:-290px;}
}
*/

.dygraph_loading_screen {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(127, 127, 127, 0.8);
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#device_info_div .dygraph_loading_screen span,
.dygraph_loading_screen span {
    width: auto;
    display: inline;
}

#device_info_div .dygraph_loading_screen .loading-text, .dygraph_loading_screen .loading-text {
    margin: 0 auto;
    position: relative;
    display: table;
    top: 47%;
    font-size: 2em;
    color: rgb(36, 36, 36);
}

#device_info_div .dygraph_loading_screen .dot, .dygraph_loading_screen .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 3px;
    background: #303131;
    animation: wave 1.3s linear infinite;
}


.dot:nth-child(2) {
    animation-delay: -1.1s;
}

.dot:nth-child(3) {
    animation-delay: -0.9s;
}

@keyframes wave {
    0%, 60%, 100% {
        transform: initial;
    }

    30% {
        transform: translateY(-15px);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.full-size-wrapper-fixed {
    height: 92vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
}

.slideshow {
    opacity: 0;
}

.slideshow.no-js {
    opacity: 1.0;
}


.fade-in {
    animation: fadeIn ease 3s;
    -webkit-animation: fadeIn ease 3s;
    -moz-animation: fadeIn ease 3s;
    -o-animation: fadeIn ease 3s;
    -ms-animation: fadeIn ease 3s;
}


.slideshow.fade-in {
    opacity: 1;
    animation: fadeIn ease 3s;
    -webkit-animation: fadeIn ease 3s;
    -moz-animation: fadeIn ease 3s;
    -o-animation: fadeIn ease 3s;
    -ms-animation: fadeIn ease 3s;
}

.slideshow.fade-in .matchup_block {
    animation: moveLeftToRight ease 2s;
}

.slideshow.fade-out {
    opacity: 1;
    animation: fadeOut ease 2s;
    -webkit-animation: fadeOut ease 2s;
    -moz-animation: fadeOut ease 2s;
    -o-animation: fadeOut ease 2s;
    -ms-animation: fadeOut ease 2s;
}


@keyframes moveLeftToRightIn {
    from {
        transform: translate(-100px, 0);
    }
    to {
        transform: translate(0, 0)
    }
}

@keyframes moveLeftToRightOut {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(100px, 0)
    }
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-out {
    animation: fadeOut ease 2s;
    -webkit-animation: fadeOut ease 2s;
    -moz-animation: fadeOut ease 2s;
    -o-animation: fadeOut ease 2s;
    -ms-animation: fadeOut ease 2s;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.dygraph_wrapper_init {
    width: 98%;
    height: 98%;
    position: relative;
}

.legendTable {
    position: absolute;
    top: 0.5em;
    left: 4.4em;
    font-size: smaller;
    background-color: rgba(220, 220, 220, 0.1);
    /* width: 24em; */
}

.dygraph_button_position {
    position: absolute;
    top: 0;
    right: 0;
}

.dygraph_button_position button[disabled] {
    /*color: #e8e6e3;*/
    border-radius: 5px;
    border: 1px solid #e8e6e3;
    background-color: transparent;
}

.dygraph_button_position button {
    color: #545c5f;
}

.legendTable_bottom {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

html.fadeSiteIn {
}

html.fadeSiteOut {
    animation: fadeSiteOut 0.5s ease forwards; /* [2] */
}


@keyframes fadeSiteIn { /* [1] */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeSiteOut { /* [2] */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.icon svg {
    max-width: 100%;
    max-height: 100%;
}

.is-hidden {
    display: none !important;
}

.chartjs_custom_tooltip {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, .7);
    color: white;
    padding: 3px;
    border-radius: 3px;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    pointer-events: none;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: 1;
}

.sortable thead th, .sortable thead tr:first-child td {
    cursor: pointer
}

.modal, .new_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 0;
    /*display: none;*/
    opacity: 0;
    overflow: hidden;
    -webkit-transition: opacity 500ms ease-out;
    -moz-transition: opacity 500ms ease-out;
    -o-transition: opacity 500ms ease-out;
    transition: opacity 500ms ease-out;
}

.new_modal {
    z-index: 10000;
}

.modal .modal-background, .new_modal .modal-background {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: rgba(10, 10, 10, 0.6);
    cursor: pointer;
}

.modal .modal-content, .new_modal .modal-content-wrapper {
    position: absolute;
    width: 30vw;
    max-height: calc(100vh - 30px);
    background-color: rgb(246, 246, 246);
    top: 15px;
    left: calc(50% - 15vw - 7.5px);
    padding: 0 15px;
    box-shadow: rgba(0, 0, 0, 1) 0 5px 15px;
}

/*reset normal padding*/
.new_modal .modal-content-wrapper {
    padding: 0.5em;
    border-radius: 1em;
    top: 2em;
    display: flex;
    flex-direction: column;
    /*color: black;*/
    width: auto;
    min-width: 32vw;
    max-width: 90vw;
}

.new_modal .modal-content-wrapper .modal-header span {
    color: black;
}

.new_modal .modal-header, .new_modal .modal-content {
    padding: 0.5em;
}

.new_modal .modal-header {
    border-bottom: 1px solid gray;
}

.new_modal .modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

.modal.is-active, .new_modal.is-active {
    opacity: 1;
    height: 100vh;
}

button.is-active {
    border: 1px solid black;
    background-color: white;
}

.modal .modal-close, .new_modal .modal-close {
    background-color: #dadada;
    border-radius: 1000px;
    width: 20px;
    position: absolute;
    right: -4px;
    top: -2px;
    text-align: center;
    cursor: pointer;
}

.center_childs {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-evenly;
}

form .d-block {
    display: block;
}

form .invalid-feedback {
    font-weight: normal;
    color: red;
    margin: 0.5em 0;
}

form .is-invalid {
    border-color: red;
}

form .badge {
    padding: 0.25em;
    background-color: #e3e4e8;
    border-radius: 0.5em;
    margin: 0.3em;
}

.text-uppercase {
    text-transform: uppercase !important;
}

/*input:valid {*/
/*    background-color: inherit;*/
/*}*/

input:invalid {
    background-color: lightpink;
}

.is-visibility-collapse {
    visibility: collapse;
}

.tab_interaction_wrapper {
    display: flex;
    flex-direction: row;
    align-items: strech;
    padding: 0.5em;
    gap: 1em;
    margin-top: 1em;
}

.tab_interaction_wrapper [data-tab] {
    padding: 0.25em;
    border-bottom: 1px solid gray;
    cursor: pointer;
    /*margin: 0.5em;*/
}

.tabcontent {
    position: relative;
    overflow: auto;
}

.tab_interaction_wrapper .is-active[data-tab] {
    font-weight: bold;
    border-bottom: 0.25em solid gray;
    margin: -4px;
    padding: 5px;
}

.loading_new {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    overflow: hidden;
    height: 16px;
}

.loading_new .loading_new_circle_outer {
    width: 16px;
    height: 16px;
    position: relative;
    background-color: black;
    animation: spin 4s infinite linear;
    border-radius: 100%;
}

.loading_new .loading_new_circle_inner {
    width: 17px;
    height: 17px;
    top: 2px;
    background-color: white;
    position: absolute;
    border-radius: 100%;
}

.icon::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;

    background-color: currentColor;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.icon.icon-folder::before {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"/></svg>');
}

.icon.icon-dp::before {
    mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>');
}