/*
RSE-HELLGRAU eff2f7
RSE-HELLBLAU 1883c9
RSE-BLAU: 00569f
RSE-GRÜN:70a322
RSE-ROT: cd022d
RSE-GELB: ffb031
*/


/* Select 2 Anpassungen */

body {
    color: white;
}

.bootstrap-select .disabled {
    background-color: #eee;
    color: #767679;
}

.bootstrap-select .btn-default {
    border-bottom: 2px solid #28204d;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
}

.bootstrap-select.btn-group.disabled,
.bootstrap-select.btn-group > .disabled {
    cursor: not-allowed;
    border-bottom: 2px solid #df5656 !important;
    /* background-image: repeating-linear-gradient(-45deg, white 0%, white 2%, #ddd 2%, #ddd 4%, white 4%); */
}

.btn-default {
    background-color: darkgrey !important;
}



div, svg, input, select, textarea, span, img, table, label, td, th, p, a, button, ul, code, pre, li { /*Changing of the Lines beneath "Aktionen" to white - - (Ökosolar)*/
    
    border-bottom: 0px solid #fff;
}

.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a, .page-sidebar .page-sidebar-menu > li:hover > a, .page-sidebar .page-sidebar-menu > li.open > a {
    background: #484263;
    color: #5b9bd1;
}

.page-sidebar .page-sidebar-menu .sub-menu, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu {
    list-style: none;
    display: none;
    padding: 0;
    margin: 0px;
}

.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a, .page-sidebar .page-sidebar-menu .sub-menu > li > a {
    color: white;
}

    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a, .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a, .page-sidebar .page-sidebar-menu .sub-menu > li.open > a, .page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
        background: #484263 !important;
    }

span.device_name:hover {
    color: #28204d;
}

.durchsichtig {
    opacity: 0.7;
}

/* dreht - pumpe z.b. */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Mouse Over für clickbare elemente */
.hoverCursor {
    cursor: pointer;
}

.hoverCursorNotAllowed {
    cursor: not-allowed;
}

/* Dashboard kleine hinweise */


.dashboardListCounter {
    display: block;
    float: left;
    width: 15px;
    text-align: center;
    font-size: 9px;
    height: 25px;
    line-height: 20px;
    margin-top: 15px;
    margin-left: 3px;
}

.dashboardTimePeriodIcon {
    color: #f1c865;
}
    div:hover > .dashboardTimePeriodIcon, .dashboardTimePeriodIcon:hover {
        color: #28204d;
    }

.statusNichtaktiv {
    opacity: 0.3;
}

.extraParams  {
    background-color: grey !important;
}
.extraParamActive {
    background-color: #28204d !important;
}



/*     Fehlerfelder hervorheben   */
.form-group.form-md-line-input .form-control.ng-touched.ng-invalid {
    background-color: #fabfab;
    color: red;
}

.compressed-table.table > tbody > tr > td,
.compressed-table.table > tbody > tr > th,
.compressed-table.table > tfoot > tr > td,
.compressed-table.table > tfoot > tr > th,
.compressed-table.table > thead > tr > td,
.compressed-table.table > thead > tr > th {
    font-size: 13px;
    padding-bottom: 4px;
    padding-top: 4px;
}


.btn.blue:not(.btn-outline) {
    background-color: #28204d; /*Changing the color - (Ökosolar)*/
}

/* kompletter bg*/
body {
    background-color: #73859b;
    
    background-attachment: fixed;
    background-size: cover;
     background-image: none; /* url('../img/Login/oekosolar_bg.jpg'); */ /*Changing the background picture - (Ökosolar)*/
}

    /* Doeppelter SCrollbalken Problem
    https://github.com/makeusabrew/bootbox/issues/145
*/

    body.modal-open {
        overflow-y: hidden !important;

    }

.modal-body {
    background-color: #8998ab;
}

    .modal-body input {
        color: black !important;
    }

    .modal-body input.btn-primary {
        color: white !important;
    }

    .page-header.navbar.navbar-static-top {
        background: transparent;
    }



/* Farbe Background */
.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ label:after, .form-group.form-md-line-input .form-control.edited:not([readonly]) ~ .form-control-focus:after, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ label:after, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ .form-control-focus:after {
    background: #28204d; /*Changing the color - (Ökosolar)*/
}
.note.note-info.note-bordered.neues_device
{
    background-color: #28204d /*Changing the color - (Ökosolar)*/
}

.note .btn.green {
    background-color: #28204d /*Changing the color - (Ökosolar)*/
}
.note .btn.green:hover {
    background-color: #28204d /*Changing the color - (Ökosolar)*/
}
.note-first-row {
    border-bottom: 1px solid white;
}

/* Modal header*/

.modal-content {
    border: 0;
}


.modal .modal-header {
    color: #fff;
    background: #28204d;
    background-size: cover;
    padding-top: 25px;
    padding-bottom: 25px;
    border-bottom: 0px;
}

.modal-header h2 {
    font-weight: 300;
    font-size: 30px;
    margin: 0px;
}

.modal-header h3 {
    font-weight: 700;
    font-size: 16px;
    margin: 0px;
}


.modal-close-button {
    position: absolute;
    top: 25px;
    right: 15px;
    display: block;
    background: transparent;
    border: 1px solid white;
    width: 25px;
    height: 25px;
    padding-bottom: 5px;
    padding-top: 2px;
    text-align: center !important;
    background-image: url('../img/Common/close-cross-white.png');
    background-size: contain;
    background-position: center center;
}

    .modal-close-button i {
        margin: auto auto;
        display: none;
    }

.amcharts-export-menu-top-right {
    top: 90px !important;
    right: 14px !important;
}
/* Dropdown abdunkeln*/
.page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu {
    background: #000;

}
    /* Dropdown Spitze oben */
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu:after {
        border-bottom-color: #000;
    }
/*Username nicht fett*/
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle > .username {
    font-weight: 300;
}
/* Dropdown Farbe heller vom Text*/
.page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu.dropdown-menu-default > li a, .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu .dropdown-menu-list > li a {
    color: #fff;
}
    /*Dropdown Link in hover */
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu.dropdown-menu-default > li a:hover, .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu .dropdown-menu-list > li a:hover {
        background: #f8ae00;
    }
    /* Icons */
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu.dropdown-menu-default > li a > i, .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu .dropdown-menu-list > li a > i {
        color: #28204d; /*Changing the color - (Ökosolar)*/
    }


/* Breite limitieren */

.page-header-inner,
.page-container {
    max-width: 1400px;
    margin: auto auto;
}

/* Bündig mit der Navigation machen */
.page-content-wrapper .page-content {
    padding-top: 0px;
    
}


/* Schriftarten ändern*/


body {
    font-family: 'Ubuntu', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
}

a {
    color: #28204d; /*Changing the color - (Ökosolar)*/
}

.btn-rse {
    background-color: #28204d !important; /*Changing the color - (Cobra)*/
    color: #ffffff;
    cursor: pointer;
}

.btn-rse-grey {
    background-color: #eff2f7;
    border: 1px solid #dde3ec;
    color: #28204d;  /*Changing the color - (Ökosolar)*/
}

.btn-rse:hover,
.btn-rse:focus {
    color: #ffffff;
    background-color: #efb52d;
}

.login .content .form-actions .btn.btn-rse-right {
    margin-right: 0px;
}

.font-rse-green,
.font_rse_green {
    color: #70a322;
}

.font-rse-blue,
.font_rse_blue {
    color: #28204d;  /*Changing the color - (Ökosolar)*/
}

.font-rse-red,
.font_rse_red {
    color: #cd022d;
}

.font_rse_yellow {
    color: #ffb031;
}

.font-rse-yellow {
    color: #ffb031;
}

.font_rse_orange {
    color: #ff4d00;
}

.font_rse_violett {
    color: #9A09CF;
}

.fton_rse_black {
    color: #000000;
}

.font_rse_turquoise {
    color: #48d1cc;
}

.panel-heading h4 span.acc-heading {

    color: white !important;  /*Changing the color - (Ökosolar)*/
}
.panel-heading {
    border-bottom:0;
}

/* Portlet */
.portlet.box.rse_green > .portlet-title,
.label-success {
    background-color: #667b96 !important;
}


.portlet.box.rse_yellow > .portlet-title {
    background-color: #ffb031;
}

.portlet.box.rse_yellow {
    border: 1px solid #ffb031;
}



.reportItemHeader {
    color: #fff;
    background-color: #ccc;
}

.portlet.box.rse_green > .portlet-title > .caption > i,
.portlet.box.rse_red > .portlet-title > .caption > i,
.portlet.box.rse_blue > .portlet-title > .caption > i,
td.rse_red,
td.rse_blue,
td.rse_green {
    color: #fff;
}

.portlet.box.rse_green {
    border: 0;
}

.portlet.box.rse_red > .portlet-title,
.reportItemHeader.rse_red,
td.rse_red {
    background-color: #cd022d !important;
}

.portlet.box.rse_red {
    border: 0;
}

.portlet.box.rse_blue > .portlet-title,
.reportItemHeader.rse_blue,
td.rse_blue {
    background-color: #667b96 !important;
}

.portlet.box.rse_blue {
    border: 0 !important;  /*Changing the color - (Ökosolar)*/
}

/* nciht aktive Portlets*/

.portlet.box.portletNichtAktiv.rse_blue > .portlet-title,
.portlet.box.portletNichtAktiv > .portlet-title {
    background-color: #b2b0b0;
}

.portlet.box.portletNichtAktiv {
    border: 1px solid #b2b0b0;
}



.table-hover tr:hover td.rse_red {
    color: #cd022d;
}

.table td.tableTypeHeader {
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.table-hover tr:hover td.rse_blue {
    color: #28204d;  /*Changing the color - (Ökosolar)*/
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 8px;
    line-height: 1.42857;
    vertical-align: top;
    border-top: 0;
}



.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a, .page-sidebar .page-sidebar-menu > li.active > a {
    border-left-color: #d83126 !important; /*Changing the color - (Ökosolar)*/
}

        .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a > i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a > i, .page-sidebar .page-sidebar-menu > li.active > a > i, .page-sidebar .page-sidebar-menu > li.active.open > a > i {
             color: white !important;  /*Changing the color - (Ökosolar)*/

        }


.btn-primary, .btn-primary:hover {
    background-color: #28204d;
}

/* Accordeon */

.panel {
    border: none;
    color: white;
}

.panel-heading {
    padding: 0px;
    height: 50px;
    /*background-color: #667b96 !important;*/
    background-color: #8998ab !important;
}

    .panel-heading h4 span.acc-heading {
        padding-left: 15px;
        display: inline-block;
        padding-top: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
    }
.panel-body {
    background-color: #8998ab;
}

.panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top: 0px solid #ddd;
}


.no-panel-space .panel-group {
    margin: 0px;
}

/* Panel bei den Parametern */

.panel.panelParameter .panel-heading {
    padding: 15px !important;
}

.panel.panelParameter .panel-body {
    padding-top: 15px;
    padding-bottom: 15px;
}


/* Balken - kein abstand innerhalb von tabellen */
td .progress {
    margin-bottom: 0;
}

/* Tabs */

/* Hintergrundfarbe für die Tableiste */
.rse-modal-tabs.tabbable-line > .nav-tabs {
    background-color: #28204d; /*Changing the color - (Ökosolar)*/
    padding-left: 10px;
}

    .rse-modal-tabs.tabbable-line > .nav-tabs > li > a {
        color: #fff;
    }

    .rse-modal-tabs.tabbable-line > .nav-tabs > li {
        margin-left: 5px;
        background-color: #8998ab4d;
        border-left: 1px solid #28204d; /*Changing the color - (Ökosolar)*/
        border-bottom: 0px #f00 solid;
    }

        .rse-modal-tabs.tabbable-line > .nav-tabs > li.active,
        .rse-modal-tabs.tabbable-line > .nav-tabs > li.active:hover {
            border-bottom: 0px !important;
            background-color: #8998ab;
            color: white; /*Changing the color - (Ökosolar)*/
        }

            .rse-modal-tabs.tabbable-line > .nav-tabs > li.open > a,
            .rse-modal-tabs.tabbable-line > .nav-tabs > li.active > a,
            .rse-modal-tabs.tabbable-line > .nav-tabs > li:hover > a {
                color: white; /*Changing the color - (Ökosolar)*/
            }

        .rse-modal-tabs.tabbable-line > .nav-tabs > li:hover {
            background-color: #8998ab;
            border-bottom: 0px !important;
        }

.rse-modal-tabs.tabbable-line > .tab-content {
    padding-top: 0px;
    border-top: 0px;
    background-color: #8998ab;
}

.tabbable-line > .tab-content {
    margin-top: 0;
    border: 0;
    border-top: 1px solid #eef1f5;
    padding: 30px 0 0 0;
}

.wertOben_2, .wertOben_3 {
    color: black !important;
}

/* noramle Tabs in Blau statt türkis*/
.tabbable-line > .nav-tabs > li:hover,
.tabbable-line > .nav-tabs > li.active {
    border-bottom: 4px solid #28204d;  /*Changing the color - (Ökosolar)*/
}

.md-checkbox label > .check {
    border-color: #28204d;  /*Changing the color - (Ökosolar)*/
}
/* eine böse Checkbox */
.md-checkbox.md-checkbox-rotdurchgestrichen .check {
    border-color: red;
    border-bottom: 0;
    left: 0;
}


/* Hauptseite */
/* Hintergrund header Desktop */

.page-header.navbar .page-logo .logo-default.logo_rse_innenseite {
    display: block;
    width: 168px;
    height: auto;
    margin-top: 25px;
}

.page-header.navbar .page-logo {
    height: 104px;
}

/* Header Schrift auf Weiß ändern */
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-language > .dropdown-toggle > .langname,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle > i {
    color: #fff;
}
/* Nav Opacity auf 100% ändern */
.page-header.navbar .menu-toggler {
    opacity: 1.0;
}

/* Header Hover Block */
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover,
.page-header.navbar .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle {
    background: rgba(0, 0, 0, 0.2);
}



/* H1 ganz oben */
.page-head .page-title > h1 {
    font-weight: 700;
    color: #28204d;  /*Changing the color - (Ökosolar)*/
    font-size: 45px;
    min-height: 60px;
}

    .page-head .page-title > h1 span,
    .page-head .page-title > h1 small {
        display: block;
        color: #28204d;  /*Changing the color - (Ökosolar)*/
    }

    .page-head .page-title > h1 > small {
        padding-top: 5px;
    }

    .page-header.navbar .menu-toggler.sidebar-toggler {
        display:none;  /*Minimazing Menu temporary disabled
        */
}

.page-sidebar-menu {
    background-color: #8998ab;
}

    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a, .page-sidebar .page-sidebar-menu > li > a {
        color: white !important;
        margin: 0px;
    }


/* Aktive Menüpunkte */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a, .page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
    background: #28204d !important;
    color: #fff; /*Changing the color - (Ökosolar)*/
}

/*
    Bigger Bootstrap Badges


*/


.alarm-time {
    width: 50%;
    margin-right: 5px;
    text-align: right;
    right: 0px;
}

.notification-alarm {
    /*transform: scale(1.73,1.6);*/
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    float: right;
    margin-top: -12.5px;
    margin-left: -10px;
    margin-right: -10px;
    padding-top: 10px;
    text-align: center;
    font-size: 18px;
}

    .notification-alarm.pulse {
        box-shadow: 0 0 0 rgba(204,169,44, 0.4);
        animation: flash 2s infinite;
    }

.batteryPulse {
    box-shadow: 0 0 0 rgba(204,169,44, 0.4);
    animation: flash 2s infinite;
    border-radius: 5px;
}

@-webkit-keyframes flash {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(241,81,93, 1);
    }

    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(241,81,93, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(241,81,93, 0);
    }
}

@keyframes flash {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(241,81,93, 1);
        box-shadow: 0 0 0 0 rgba(241,81,93, 1);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px rgba(241,81,93, 0);
        box-shadow: 0 0 0 30px rgba(241,81,93, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(241,81,93, 0);
        box-shadow: 0 0 0 0 rgba(241,81,93, 0);
    }
}

.notification-icon {
    margin-right: 20px;
    transform: scale(1.4,1.4);
}

/*
    alarm im header
*/
.alarm-dropdown-button {
    position: absolute;
    right: 10px;
    height: 22px;
    padding-top: 0px;
    margin-top: -2px;
}

.alarm-entry {
    margin-top: 1px;
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: #df5656;
    color: #ffffff;
    font-size: 0.8em;
}

.ack-alarm-entry {
    margin-top: 1px;
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: #cccccc;
    color: #f1515d;
    font-size: 0.8em;
}

.muted-alarm-entry {
    margin-top: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #fff;
    font-size: 0.8em;
}

.alarm-entry-icon {
    margin-top: 10px;
    margin-left: 10px;
}

.alarm-text {
    margin-left: 20px;
}

.alarms-header {
    height: 40px;
    padding-top: 12px;
    padding-left: 10px;
    padding-bottom: 10px;
}

#alarmsDropdown {
}
/*
    RSE ICONS
*/

.rse-icon {
    display: inline-block;
    text-indent: -1000px;
    background-repeat: no-repeat;
    background-size: 35px 35px;
    background-position: center center;
    width: 50px;
    height: 100%;
    min-height: 50px;
    overflow: hidden;
    transition: all 300ms;
    -moz-transition: all 300ms;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    border-left: 1px solid #454545; /*Changing the color - (Ökosolar)*/
    text-align: left;
}

/* Gruppe bearbeiten */
.panel-heading .rse-icon {
    height: 50px;
}

.rse-icon:hover {
    background-size: 43px 43px;
    background-color: rgba(0, 122, 193, 0.1);
}

.rse-nolicense.rse-icon:hover {
    background-size: 70% 70%;
    background-color: #fff;
}

.rse-icon.rse-icon-red:hover {
    background-size: 85% 85%;
    background-color: rgba(255, 0, 0, 0.1);
}

.rse-icon.rse-icon-red {
    border-left: 1px solid #d91e18;
}


.rse-icon-toolbox {
    background-image: url("../img/Icons/toolbox_64x64.png");
}

.sleep.rse-icon-toolbox {
    background-image: url("../img/Icons/toolbox_64x64-sleep.png");
}

.rse-nolicense.rse-icon-toolbox {
    background-image: url("../img/Icons/toolbox-grey_64x64.png");
}

.rse-icon-fernwirken {
    background-image: url("../img/Icons/fernwirken_64x64.png");
}

.rse-nolicense.rse-icon-fernwirken {
    background-image: url("../img/Icons/fernwirken-grey_64x64.png");
}

.rse-icon-analogwerte {
    background-image: url("../img/Icons/analogwerte_64x64.png");
}

.rse-icon-datencenter {
    background-image: url("../img/Icons/datencenter_64x64.png");
}

.rse-icon-settings {
    background-image: url("../img/Icons/einstellungen1_64x64.png");
}

.rse-icon-edit {
    background-image: url('../img/Icons/bearbeiten_64x64.png');
}

    .rse-icon-edit.no-license {
        background-image: url("../img/Icons/bearbeiten-grey_64x64.png");
    }

.rse-icon-message {
    background-image: url("../img/Icons/einstellungen1_64x64.png");
}

.rse-icon-comments {
    
    background-image: url('../img/Icons/kommentare_64x64.png');
}

    .rse-icon-comments.no-license {
        background-image: url("../img/Icons/kommentare-grey_64x64.png");
    }



.rse-icon-grid {
    background-image: url("../img/Icons/grid_64x64.png");
}

    .rse-icon-grid.no-license {
        background-image: url("../img/Icons/grid-grey_64x64.png");
    }


.rse-icon-webmls {
    background-image: url("../img/Icons/web-mls_64x64.png");
}

.rse-nolicense.rse-icon-webmls {
    background-image: url("../img/Icons/web-mls-grey_64x64.png");
}

.rse-icon-messwertanzeige {
    background-image: url("../img/Icons/messwertanzeige_64x64.png");
}

.rse-nolicense.rse-icon-messwertanzeige {
    background-image: url("../img/Icons/messwertanzeige-grey_64x64.png");
}

.rse-icon-information {
    background-image: url('../img/Icons/info_64x64.png');
}

.rse-nolicense.rse-icon-information {
    background-image: url("../img/Icons/info-grey_64x64.png");
}

.rse-icon-jobverwaltung {
    background-image: url("../img/Icons/job_64x64.png");
}

.rse-nolicense.rse-icon-jobverwaltung {
    background-image: url("../img/Icons/job-grey_64x64.png");
}



.rse-icon-history {
    background-image: url("../img/Icons/history_64x64.png");
}

.rse-icon-delete-red {
    background-image: url("../img/Icons/delete_red_64x64.png");
}

/*Eingabefeld automatisch vergrößern bei Klick */
.textarea-expand:focus {
    height: 150px;
}

input.ng-invalid {
    border-color: #e73d4a;
}


/* RSE Farben */
.rse-green-bg,
.listcountok {
    background-color: #79b024;
    color: #fff;
}

.rse-red-bg,
.listcountoffline,
.listcounterror {
    background-color: #cd022d;
    color: #fff;
}

.rse-yellow-bg {
    background-color: #f8ae00;
    color: #fff;
}
/*
.rse-blue-bg {
    background-color: #28204d !important; /*Changing the color - (Ökosolar)*/
    color: #fff;
}
    */

.rse-black-bg {
    background-color: #000000;
    color: #fff;
}

.rse-offline-bg,
.listcountoffline {
    background-color: #870101;
    color: #fff;
}







.table-hover > tbody > tr:hover > td.rse-yellow-bg {
    color: #f8ae00;
}

.table-hover > tbody > tr:hover > td.rse-red-bg {
    color: #cd022d;
}

.table-hover > tbody > tr:hover > td.rse-green-bg {
    color: #79b024;
}

/* 
   History Backgrounds 


*/

/*  ROT
    history Typ 0 - Status 1*/
.rse-history-table.statushistorytyp_0.statushistorystatus_1 {
    background-color: #fbe1e3;
    color: #cd022d;
}
/*  Grün
    history Typ 0 - Status 0*/
.rse-history-table.statushistorytyp_0.statushistorystatus_0 {
    background-color: #d1e5b3;
    color: #79b024;
}
/*  Blau
    history Typ 1 - Status 0*/
.rse-history-table.statushistorytyp_1 {
    background-color: #e0ebf9;
    color: #28204d; /*Changing the color - (Ökosolar)*/
}

.panel-default > .panel-heading {
    border-bottom: 1px solid #73859b;
}


/* RSE Table*/

.row.tcc-table {
    margin-left: 0px;
    margin-right: 0px;
    border-bottom: 1px solid #667b96;
}

.tcc-table > div {
    padding-top: 5px;
    padding-bottom: 5px;
}

.tcc-table-heading {
    font-weight: 300;
}

.tcc-table div.tcc-table-no-padding {
    padding: 0px;
}

.tcc-table-actions {
    text-align: right;
    line-height: 0;
}


.tcc-table-tas-status {
    height: 50px;
}

.table.noTableMargin {
    margin-bottom: 0px;
    background-color: #667b964d;
    color: white;
}


.RSEtableButton {
    background-color: #28204d;  /*Changing the color - (Ökosolar)*/
    transition: all 300ms;
    -moz-transition: all 300ms;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    cursor: pointer;
    border: 0 !important;
}

    .RSEtableButton:hover {
        background-color: #28204d;
    }

.panel-default.more_interfaces_acc h4.panel-title a span {
    color: #28204d !important;
}

.user-table-heading {
    background-color: #73859b;
}

.userRowEven {
    background-color: #73859b;
}

.userRowCurrentUser {
    background-color: gray;
}



/* LED Tabelle */

.table > tbody > tr > td.LEDInfoIsActive,
.table > tbody > tr > td.LEDInfoIsNotActive,
.table > tbody > tr > td.LEDInfoIsActiveError,
.table > tbody > tr > td.LEDInfoIsNotActiveError {
    background-image: url("../img/Icons/leuchte_active_green.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 25px auto;
    padding-left: 30px !important;
}

.table > tbody > tr > td.LEDInfoIsNotActive {
    background-image: url("../img/Icons/leuchte_not_active_green.png");
}

.table > tbody > tr > td.LEDInfoIsActiveError {
    background-image: url("../img/Icons/leuchte_active_red.png");
}

.table > tbody > tr > td.LEDInfoIsNotActiveError {
    background-image: url("../img/Icons/leuchte_not_active_red.png");
}



/* Portlet Boxen Sinnvoll ändern */
.portlet.box > .portlet-title > .tools > a.expand {
    background-image: url(/metronic/assets/global/img/portlet-collapse-icon-white.png);
}

.portlet.box > .portlet-title > .tools > a.collapse {
    background-image: url(/metronic/assets/global/img/portlet-expand-icon-white.png);
}

/* Dropdowns header*/

.page-header.navbar .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu:after {
    border-bottom-color: #28204d !important;  /*Changing the color - (Ökosolar)*/
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu {
    border: none !important;
}

/*Classes for allAlarms*/

.activeAlarm {
    background-color: #f1515d;
    color: white;
}

.inactiveAlarm {
}

.hasLogData {
    color: #ffc1c1;
}

.hasNoLogData {
}

.activeEntry {
    background-color: #df5656;
    color: #ffffff;
}

.inactiveEntry {
    background-color: #ddd;
    color: #000000;
}


/* Accordeon mit weiteren Inhalten wie in den Tabellen bei den EIn und ausgängen */
.panel-default.more_interfaces_acc {
    border: none;
}

/* Mobile actions*/

.dropdown-menu.rse-mobile-actions > li > a.rse_blue,
.dropdown-menu.rse-mobile-actions > li > a.rse_blue > [class^="fa-"], .dropdown-menu > li > a.rse_blue > [class*=" fa-"] {
    color: #28204d; /*Changing the color - (Ökosolar)*/
}


.panel-default.more_interfaces_acc .panel-heading {
    height: auto;
}

    .panel-default.more_interfaces_acc .panel-heading a {
        display: block;
        padding: 10px;
    }

.panel-default.more_interfaces_acc h4.panel-title {
    font-weight: 300;
    font-size: 16px;
    color: #28204d;  /*Changing the color - (Ökosolar)*/
}

.panel-default.more_interfaces_acc .panel-title i {
    font-size: 10px;
}


.downloadinfo {
    color: #fff;
    font-weight: bold;
    margin-top: 20px;
    border-top: 1px solid #fff;
    padding-top: 10px;
}

.mobile-back-button.btn.blue:not(.btn-outline) {
    float: left;
    margin-right: 10px;
    border: none;
    padding-left: 3px;
    padding-right: 3px;
    background-color: transparent;
}

    .mobile-back-button.btn.blue:not(.btn-outline):hover {
        background-color: transparent;
    }


.extraAlarms {
    margin-top: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 1em;
    padding-left: 10px;
    font-weight: bold;
}

    .extraAlarms.blue {
        background-color: #1883c9;
        color: #fff;
    }

    .extraAlarms.red {
        background-color: #df5656;
        color: #ffffff;
    }

.row.tcc-table.preview-row {
    background-color: #313131;
}

.row.tcc-table.preview-row .preview-indent {
    background-color: #8998ab;
}
/*
.graphToolbar .btn.btn-xs:not(.blue) {
    background-color: darkgrey !important;
}
    */

.configuratorGroup > .groupName {
    background-color: #8998ab !important;
}

#configurator .panel {
    background-color: #8998ab;
}

.userFilterText {
    color: black !important;
}

#viewAndEditPermissions, #viewAndEditPermissionElements {
    color: black;
}

    #viewAndEditPermissions .btn.white:not(.btn-outline), #viewAndEditPermissionElements .btn.white:not(.btn-outline) {
        background-color: #8998ab;
    }

    #viewAndEditPermissions .modal-header .row, #viewAndEditPermissionElements .modal-header .row {
        margin-top: 18px !important;
    }

    #viewAndEditPermissions select, #viewAndEditPermissions .permission-table span,
    #viewAndEditPermissionElements select, #viewAndEditPermissionElements .permission-table span {
        color: black !important;
    }

    #viewAndEditPermissions .alert-danger, #viewAndEditPermissions .alert-danger span, #viewAndEditPermissions .alert-danger li {
        color: #cd022e !important;
    }

.permission-header {
    background-color: #73859b !important;
}

@media (max-width: 767px) {
    /* multigraph Texte ausblenden in der Toolbar */
    .graphToolbar button {
        padding-left: 3px;
        padding-right: 3px;
    }

        .graphToolbar button span {
            display: none;
        }
            /* außer bei sachen die wir erst später verstecken wie das wort auto datendichte */
            .graphToolbar button span.hidden-480 {
                display: inline;
            }

        .graphToolbar button i {
            margin-right: 0;
        }

    .notification-alarm.blueWhenSmall {
        background-color: #1883C9 !important;
    }

    #disabledalarmsDropdown {
        margin-right: 0% !important;
    }

        #disabledalarmsDropdown::after {
            margin-right: 0% !important;
        }

        #disabledalarmsDropdown::before {
            margin-right: 0% !important;
        }

    #alarmsDropdown {
        margin-right: 0% !important;
    }

        #alarmsDropdown::before {
            margin-right: 0% !important;
        }

        #alarmsDropdown::after {
            margin-right: 0% !important;
        }

    .note {
        margin-bottom: 5px;
    }

    .table-responsive {
        border: 0;
    }
    .page-footer, .page-boxed .page-footer {
        background-color: #73859b;
    }

    .page-header-inner,
    .page-container {
        background-color: #73859b;
    }

}

@media (max-width: 822px) and (min-width: 768px) {
    .notification-icon {
        display: none !important;
    }
}


@media (max-width: 489px) {
    .notification-icon {
        display: none !important;
    }

    .graphToolbar button span.hidden-480 {
        display: none;
    }

    .notification-alarm {
        margin-left: 0px;
        margin-right: 0px;
    }

    .headerLogo {
        position: absolute;
        
    }

    #HeaderProfilePicture {
        margin-left: -6px;
    }

    #disabledalarmsDropdown {
        margin-right: -100px !important;
    }

        #disabledalarmsDropdown::before {
            margin-right: 110px !important;
        }

        #disabledalarmsDropdown::after {
            margin-right: 110px !important;
        }

    #alarmsDropdown {
        margin-right: -50px !important;
    }

        #alarmsDropdown::before {
            margin-right: 60px !important;
        }

        #alarmsDropdown::after {
            margin-right: 60px !important;
        }
}

@media (max-width: 1100px) {
    .row.tcc-table .rse-icon {
    }

    .rse-icon {
        width: 45px;
    }
}

@media (max-width: 992px) {
    .modal-dialog {
        margin: 0px;
        width: 100%;
    }
        /* Modals volle höhe */
        .modal-dialog .modal-content {
            min-height: 100vh;
        }

    .modal .modal-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .modal-header h2 {
        font-size: 18px;
        line-height: 32px;
    }

    .modal-header h3 {
        font-size: 12px;
    }
}






@media (max-width: 767px) {
    body {
        background-image: none;
        background-color: #73859b;
    }

    .page-content-wrapper .page-content {
        padding-top: 0px !important;
        padding-right: 0px !important;
        padding-bottom: 10px !important;
        padding-left: 0px !important;
    }

        .page-content-wrapper .page-content .page-title {
            margin-bottom: 0px;
        }

    .page-header.navbar {
        border-bottom: 0px;
    }

        .page-header.navbar.navbar-static-top {
            background-color: #28204d;  /*Changing the color - (Ökosolar)*/
        }

        .page-header.navbar .page-top {
            float: right;
        }

        .page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover {
            background-color: #393d4e;
        }

        .page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover {
            background-color: transparent;
        }

    .page-head .page-title {
        padding-top: 0;
        padding-bottom: 0;
    }

        .page-head .page-title > h1 {
            font-size: 25px;
            min-height: initial;
        }

    .portlet {
        margin-bottom: 10px;
    }

        .portlet.light {
            padding-left: 10px;
            padding-right: 10px;
        }

    /* Gruppenüberschrift*/
    .panel-heading h4 span.acc-heading {
        font-size: 15px;
    }
    /* Gruppenübersicht weniger Abstand */
    .panel-group .panel + .panel {
        margin-top: 0;
    }

    .panel {
        border: none;
    }

    .neues_device h3 {
        display: none;
    }

    .downloadinfo {
        margin-left: 15px;
        margin-right: 15px;
        color: #28204d; /*Changing the color - (Ökosolar)*/
        font-weight: normal;
        border-top: 1px solid #28204d; /*Changing the color - (Ökosolar)*/
        font-size: 0.8em;
    }

    .mobile-abstand,
    .mobile-header {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
    }

    .mobile-header {
        padding-top: 10px;
    }

    .hide-mobile-text {
        display: none;
    }

    .btn.mobile-50-left,
    .btn.mobile-50-right {
        width: 49%;
    }

    .btn.mobile-50-right {
        float: right;
        margin-left: 0px;
    }

    .btn.mobile-50-left {
        float: left;
    }
}

@media (max-width: 480px) {
    .col-xxs-12 {
        width: 100%;
    }

    .page-header.navbar .page-logo .logo-default.logo_rse_innenseite {
        width: 130px;
    }
}

.add-new-muted-Alarm {
    float: right;
    margin-top: 85px;
}
/* Ios Zoom Problematik */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select,
    textarea,
    input {
        font-size: 16px;
    }
}

.vert {
    display: block;
    margin: 3px;
}


    .vert:hover {
        margin-right: 10px;
        display: block;
        margin: 3px;
    }

.horiz {
    display: inline-block;
    right: 0px;
    margin-right: 5px !important;
    margin-left: 5px !important;
}

    .horiz:hover {
        display: inline-block;
        margin-right: 5px !important;
        margin-left: 5px !important;
    }

.slimScrollDiv {
    margin-left: -15px;
    margin-right: -15px;
}

.editScheduleButton {
    float: right;
    margin-top: 10px;
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 0px;
    height: 25px;
}

.openScheduleOrSwitchButton {
    float: right;
    margin-top: -2px;
    font-size: 12px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 3px;
    padding-right: 3px;
    margin-right: 5px;
    height: 30px;
    margin-top: 5px;
}

.openSwitchProgressButton {
    float: right;
    margin-top: -2px;
    font-size: 12px;
    
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 4px;
    padding-right: 0px;
    margin-right: 5px;
    height: 30px;
    margin-top: 5px;
}

.dutyScheduleBoxHeader {
    height: 45px;
}

.dsName {
    margin-top: 14px;
}

.schedule-box {
    border: solid;
    border-width: 0 0px 0 0px;
}

.schedule-box-footer {
    border: solid;
    border-width: 0 0px 0px 0px;
}

.activeRecipient {
    margin-top: -5px;
    margin-left: -5px;
    font-weight: bold;
}

.iconRecipientNotificatioType {
}

.recipientSeperator {
}

.dutyScheduleTableCell {
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: lightgray;
    padding-top: 7px;
    padding-bottom: 7px;
}

.dutySchedulePortletTable {
    width: 100%;
}

    .dutySchedulePortletTable td:nth-child(2) {
        text-align: center;
    }

.scrollContent {
}

.portletFooter {
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #e7ecf1;
    padding-left: 8px;
    font-size: 12px;
    height: 50px;
    line-height: 20px;
    width: 100%;
    margin-left: 0px;
}

.dutyScheduleDetailsBody {
    min-height: 300px;
    background-color: white;
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.loadingOverlayDutyScheduleDetails {
    min-height: 300px;
    margin-left: 15px;
    margin-right: 15px;
}

.separator {
    border-width: 1px 0 0 0;
    border-color: lightgray;
    border-style: solid;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.editButtonBig {
}

.btnCol {
    position: absolute;
    right: 41px;
    padding: 0px;
    width: 200px;
    margin-left: -30px;
}

.editButtonSmall {
    float: right;
    margin-top: -5px;
    width: auto;
    height: 26px;
    padding-top: 4px;
    font-size: 12px;
}

.deleteRecipientButton {
    float: right;
    margin-top: -5px;
    width: 10px;
    height: 26px;
    padding-top: 3px;
    font-size: 12px;
    margin-left: 10px;
}

.deleteScheduleButton {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 10px;
}

.deleteRecipientButton > i {
    margin-left: -4px;
}

.recipientEntry {
    margin-left: 0px;
    margin-right: 10px;
    margin-top: 10px;
}

.recipientTitleBar {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.backButtonDetailsSchedule > i {
    padding-right: 10px;
}

.backButtonDetailsSchedule {
    margin-top: 10px;
}

.customTimePicker {
    width: 200px;
    float: right;
}

.timePickerButton:hover {
    background-color: grey;
}

.btnCol {
}

.iconChannelLine {
    margin-left: 10px;
}

    .iconChannelLine > img {
        margin-left: -35px;
    }

@media (max-width:991px) {
    .btnCol {
        position: absolute;
        right: 0px;
        padding: 0px;
        width: 200px;
        margin-left: -30px;
    }

    .iconChannelLine {
        white-space: nowrap;
    }

        .iconChannelLine > img {
            margin-left: -20px !important;
        }

    .editButtonSmall {
        margin-top: -5px;
        width: 110%;
        height: 26px;
        padding-top: 3px;
        font-size: 12px;
        padding-left: 0px;
        padding-right: 0px;
        margin-right: -25px;
    }

    .deleteRecipientButton {
        margin-top: 5px;
        width: 110%;
        height: 26px;
        padding-top: 3px;
        font-size: 12px;
        padding-left: 0px;
        padding-right: 0px;
        margin-right: -25px;
    }

    .page-header.navbar .page-logo {
        width: 130px;
    }
}

@media (max-width: 767px) {
    .customTimePicker {
        width: 100%;
    }

    .timePickerButton:hover {
        background-color: white;
    }

    .editButtonBig {
        width: 250px;
        margin-left: -110px;
        left: 50%;
    }

    .recipientEntry > .separator {
        margin-top: 30px;
        margin-left: 5px;
    }

    .editButtonSmall {
        margin-top: 10px;
        width: 100%;
        float: left;
    }

    .deleteRecipientButton {
        margin-left: 0px;
        width: 100%;
        float: left;
    }

    .recipientEntry {
        margin-bottom: 10px;
    }

    .page-header.navbar.navbar-static-top {
        background-image: url('./layout_header_small.jpg') !important;
        background-repeat: no-repeat !important;
        background-size: auto !important;
        margin-top: 0 !important;
        background-position-x: unset !important;
    }

    .page-header.navbar .page-logo {
        background: none !important;
    }

    .backButtonDetailsSchedule {
        margin-top: -0px;
        padding-left: 4px;
        padding-right: 4px;
    }
    /*
    .clearfix {
        background-color: #28204d;
    }
        */
}


.dot {
    height: 15px;
    width: 15px;
    background-color: #bbb;
    left: 4px;
    top: 2px;
    position: absolute;
    border-radius: 50% !important;
    display: inline-block;
}

.recipientNumberSMXS {
    margin-left: 10px;
}

.faultMessageEntry {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
}

.faultMessageTitleBar {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.timePickerButton {
    background-color: white;
}

.timePicker > tbody > tr > td {
    padding: 3px !important;
}

.RSEtableButton > i {
}

.timePicker {
    position: absolute;
    z-index: 10;
    top: 42px;
    right: 50%;
    margin-left: -100px;
    background-color: lightgray;
    width: 100px;
    border-style: solid;
    border-color: lightslategrey;
}

#datePicker:disabled + label {
    color: lightgray;
}

    #datePicker:disabled + label:after {
        background-color: lightgray;
    }

#datePicker:disabled {
    color: lightgray;
}

.timePickerButton > i {
    text-align: center;
    width: 100%;
}

.txtTimeMiddle {
}

.txtTime {
    width: 100%;
    text-align: center;
    font-size: 20px;
}

.datePickerArrow {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 37px;
    right: 50%;
    border: solid black;
    border-color: lightslategrey;
    background-color: lightslategray;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.label-select {
    color: #909090;
}

.txtNoEntry {
    font-style: italic;
    width: 100%;
    text-align: center;
    font-size: 15px;
}
.form-group.form-md-line-input.form-md-floating-label .form-control ~ label {
    color: white !important;
}


@media (min-width: 992px) {
    .checkDone {
        top: 30px;
    }
    
    .page-sidebar .page-sidebar-menu {
        margin-bottom: 0px;
    }
}

.btnAlarmCol {
    padding-top: 16px !important;
    padding-bottom: 10px !important;
    float: right;
}

.btnAlarmContent {
    float: right;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.btnResign {
    background-color: #b9c1c2 !important;
    border-color: #999999 !important;
    width: 90px;
}

@media (max-width: 991px) {
    .checkDone {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .btnAlarmCol {
        position: absolute;
        right: 0px;
        width: 100px;
        padding-top: 10px;
    }

    .btnAlarmContent {
        width: 40px;
        margin-left: 0px !important;
        margin-top: 5px;
        float: unset;
    }
}


.modal-footer {
    background-color: #8998ab;
    border-top: 0;
}

.md-checkbox{
    color:#28204d;
}
.manualInputItem, .manualInputSelector{
    background-color:#28204d!important;
}

.btn btn-primary green-jungle{
    background-color:#28204d!important;
}

.form-group form-md-line-input form-md-floating-label{
    background-color:#28204d;
}
/*
.btn.green-jungle:not(.btn-outline) {
background-color: #28204d;
}
    */

.label-info {
background-color:#28204d;
}

.btn.green-jungle:not(.btn-outline):active:hover, .btn.green-jungle:not(.btn-outline):active:focus, .btn.green-jungle:not(.btn-outline):active.focus, .btn.green-jungle:not(.btn-outline).active:hover, .btn.green-jungle:not(.btn-outline).active:focus, .btn.green-jungle:not(.btn-outline).active.focus, .open > .btn.green-jungle:not(.btn-outline).dropdown-toggle:hover, .open > .btn.green-jungle:not(.btn-outline).dropdown-toggle:focus, .open > .btn.green-jungle:not(.btn-outline).dropdown-toggle.focus {
background-color:#28204d;
}

.tasDetailsAlarmText:hover {
    text-decoration: underline;
    cursor: pointer;
}

.tasDetailsAlarmText {
    width: 140px;
}

.deviceList {
    padding-left: 0px;
}




form-group form-md-line-input form-md-floating-label has-info ng-scope{
    background-color:#28204d !important;
}

    .deviceList > li {
        list-style: none;
        font-size: 16px;
    }

        .deviceList > li:hover {
            text-decoration: underline;
            cursor: pointer;
        }

.sortArrowAlarms {
    margin-left: 10px;
    color: lightgray;
}

    .sortArrowAlarms:hover {
        margin-left: 10px;
        color: black;
    }

.txtDevice {
    font-size: 20px;
}

.digiDate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.disabledVisualisation {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 20px !important;
    z-index: 1000;
}

    .disabledVisualisation > span {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 50%;
        font-size: 20px;
    }

.switchModalBody {
    margin-left: 20px;
    margin-right: 20px;
}

.switch-separator {
    border-width: 1px 0 0 0;
    border-color: lightgray;
    border-style: solid;
    width: 100%;
}

.availableRecipientsList {
    list-style: none;
    float: left;
    color: white;
    margin-left: 0px;
    padding-left: 0px;
}

.recipientBubble {
    display: block;
    float: left;
    padding: 7px;
    margin: 8px;
    border: none;
}

.clickableRecipient {
    -webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
}

    .clickableRecipient::after {
        opacity: 0;
        transition: all 2s;
    }

    .clickableRecipient:active {
        opacity: 0.5;
    }

        .clickableRecipient:active:after {
        }

.recipientBubble:active {
    cursor: grabbing;
}

.activeRecipientBubble {
    padding: 6px;
    color: white;
}

    .activeRecipientBubble > span {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

    .activeRecipientBubble > i {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

    .activeRecipientBubble > .deleteIcon {
        float: right;
        line-height: 100%;
        padding: 3px;
        opacity: 0.5;
        cursor: pointer;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

        .activeRecipientBubble > .deleteIcon:hover {
            opacity: 1;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }

.activeRecipientLine {
    margin-left: 0px;
    margin-right: 0px;
}

.delaySelect {
    padding-right: 0px;
}

.recipientDropzone {
    position: relative;
    width: 100%;
    height: 30px;
    top: -11px;
    background-color: gainsboro;
}

.dragRecipientHereBubble {
    position: relative;
    text-align: center;
    border: dashed 2px #AAAAAA;
    background-color: #EEEEEE;
    color: #CCCCCC;
    margin-bottom: 40px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 5px;
}

    .dragRecipientHereBubble.centered {
        position: relative;
        text-align: center;
        border: dashed 2px #AAAAAA;
        background-color: #EEEEEE;
        color: #CCCCCC;
        padding: 30px;
        margin-bottom: 40px;
    }

.ghostRecipient {
    opacity: 0.2;
}

.delayVisualisationContainer {
    width: 100%;
    padding: 0px;
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    list-style: none;
    float: left;
    right: 10px !important;
}

.visualDelayLine {
    width: 100%;
    float: left;
}

    .visualDelayLine > ul {
        list-style: none;
        padding: 0px;
    }

        .visualDelayLine > ul > li {
            display: inline-block;
            height: 46px;
            z-index: 1;
        }

        .visualDelayLine > ul > .leftSymbol {
            position: relative;
            margin-top: 23px;
            margin-left: 50px;
            cursor: ew-resize;
        }

.moveOverLay {
    position: absolute;
    width: 100px;
    height: 60px;
    margin-left: -40px;
}



.visualDelayLine > ul > .leftSymbol > .txtDelay {
    position: absolute;
    left: -43px;
    font-size: 12px;
    top: -0px;
    color: gray;
}

.visualDelayLine > ul > .leftSymbol > img {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    width: 20px;
}

.visualDelayLine > ul > .leftSymbol > .icon_Channel {
    position: relative;
    width: 13px;
    height: 13px;
    right: 20px;
    bottom: 3px;
}

.visualDelayLine > ul > .line {
    position: absolute;
    height: 3px;
    border-width: 2px;
    border-color: #aaaaaa;
    left: 14px;
    right: 16px;
    margin-top: 50px;
    background-color: #aaaaaa;
}

.visualDelayLine > ul > .rightSymbol {
    position: absolute;
    right: 24px;
    margin-top: 23px;
}

    .visualDelayLine > ul > .rightSymbol > img {
        width: 20px;
    }

    .visualDelayLine > ul > .rightSymbol > .icon_Channel {
        position: relative;
        width: 13px;
        height: 13px;
        right: 20px;
        bottom: 3px;
    }

    .visualDelayLine > ul > .rightSymbol > i {
        position: relative;
        top: -2px;
        left: -22px;
        color: white;
        transform: scale(0.8);
    }

.redOverLay {
    position: absolute;
    background-color: #FFC3C3;
    color: #FF4444;
    z-index: 0;
    left: 75px;
    right: 60px;
    height: 100%;
    top: 40px;
}

.note.note-info.note-bordered.neues_device {
    background-image: none !important;
}

.neues_device .md-checkbox label {
    color: white;
}



.redOverLay > .begin {
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.redOverLay > .end {
    position: absolute;
    right: 10px;
    bottom: 10px;
}


.pressOnRecipientText {
    width: 100%;
    text-align: center;
    clear: both;
}

@media (max-width: 480px) {
    .delaySelect {
        padding-left: 0px;
    }
}



.autoSwitchPage > .header {
    display: flex;
    justify-content: space-between;
}

    .autoSwitchPage > .header > button {
        height: 30px;
        margin: 0 5px;
        padding: 0 5px;
    }

.autoSwitchBody {
    min-height: 300px;
    background-color: white;
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 5px;
}

.addRecipient {
    margin-top: 13px;
}

.activeRecipientsList {
    margin-left: 0px;
    margin-right: 0px;
}

.redOverLay.automatic {
    top: 20px;
    height: 100%;
}

.noRecipientsAdded {
    text-align: center;
    margin: 10px;
}

.noRecipientsAdded {
    text-align: center;
    margin: 10px;
    margin-bottom: 20px,;
}

    .noRecipientsAdded.big {
        padding-bottom: 20px !important;
    }

.btnSaveTemplate {
    margin-top: 20px;
    width: 100%;
}

.placeSetButton {
    position: relative;
    width: 250px;
    margin-left: -125px;
    left: 50%;
    height: 60px;
    font-size: 25px;
    font-weight: 300;
}

.dutyScheduleButtons > button {
    float: right;
    margin-left: 10px;
    margin-top: 5px;
    padding: 5px 10px 5px 10px;
}

@media (max-width: 480px) {
    .dutyScheduleButtons > button:nth-child(n+1) {
        float: right;
        margin-right: -5px;
        padding: 0 10px 0 10px;
    }

    .dutyScheduleButtons > button:nth-child(2n+1) {
        float: left;
        margin-left: -5px;
        padding: 0 10px 0 10px;
    }
}

.icon_Channel {
    height: 15px;
    width: 15px;
    margin-bottom: 3px;
}

.recipientChannelIcon {
    height: 15px;
    width: 15px;
    margin-bottom: 3px;
    margin-right: 10px;
}

.ChannelButton {
    height: 100%;
    right: 0px;
    height: 40px;
    margin-top: 20px;
    float: right;
    margin-left: 10px;
}

.deleteChannelIcon > i {
    margin-left: 5px;
    transform: scale(1.2);
}

.deleteChannelIcon:hover {
    cursor: pointer;
    opacity: 0.8;
}

.addChannelButton {
    margin-top: 20px;
    width: 100%;
}

.calendar-custom-header {
    font-weight: 400 !important;
}

#calendar > div > div > table > thead {
    background-color: lightgray;
}

th.fc-widget-header {
    border-color: lightgray !important;
}


td.fc-day {
    border-color: lightgray !important;
    border-width: 4px !important;
}

span.fc-day-number {
    font-size: 20px;
    position: relative;
    color: #28204d; /*Changing the color - (Ökosolar)*/
}

td.fc-other-month > span {
    color: #28204d; /*Changing the color - (Ökosolar)*/
}

.recipientBadgesList {
    margin: 0;
    padding: 0;
}

.calendarRecipientEntry {
    display: inline;
    position: relative;
    display: inline-block;
    border-radius: 50% !important;
    border: solid 1px lightgray;
    margin-left: 50%;
    text-align: center;
    margin-top: 10px;
}

}

.calendarRecipientEntry.agenda {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendarMoreRecipientsEntry {
    display: inline;
    background-color: #28204d;  /*Changing the color - (Ökosolar)*/
    padding: 4px;
    margin: 2px;
    top: 10px;
    position: relative;
    white-space: nowrap;
}


.dragableTemplates {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

    .dragableTemplates > li {
        margin: 5px 0 5px 0;
        padding: 10px;
        color: white;
        cursor: grab;
    }

        .dragableTemplates > li > span {
            clear: none;
        }

        .dragableTemplates > li > div {
        }

            .dragableTemplates > li > div > ul {
                list-style: none;
                display: inline-block;
                clear: none;
            }

                .dragableTemplates > li > div > ul > li {
                    float: left;
                    margin: 2px;
                }

                .dragableTemplates > li > div > ul > li {
                    color: white;
                    text-align: center;
                    padding: 0 1px 0 1px;
                }

.timeEvent {
    position: relative;
    width: 100px;
    display: inline-block;
    font-size: 15px;
}

    .timeEvent.agenda {
        width: 100%;
        margin: 4px 0 0 4px;
        padding: 0;
    }

.copyButton {
    float: right;
    position: absolute;
    right: 1px;
    top: 2px;
    font-size: 12px !important;
    padding: 0 !important;
    padding-left: 3px !important;
}


.delButton {
    float: left;
    position: absolute;
    left: 1px;
    top: 2px;
    font-size: 12px !important;
    padding: 0 !important;
    padding-left: 3px !important;
    margin: 0 !important;
    margin-left: 1px !important;
}

.allHidden {
    left: -50px;
    margin-left: 50%;
}

.deleteSettingsRecipientButton {
    margin-left: 10px;
    transform: scale(1.4);
}

.faultTreeContainer {
    max-height: 400px;
    overflow-y: scroll;
}

@media (max-width:1000px) {

    .faultTreeContainer {
        max-height: 80vh;
    }

    .faultsTreeFooter {
        position: absolute;
        top: 90vh;
        width: 100%;
        background-color: white;
    }
}

.tabButtons > button {
    width: 45%;
    display: inline-block;
}

    .tabButtons > button:last-child {
        float: right;
    }

.tabButtons {
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;
}

.inactiveTabButton {
    background-color: gray !important;
}

#listView > ul {
    list-style: none;
    padding: 0;
}

    #listView > ul > li {
        list-style: none;
        height: 80px;
        padding: 10px;
        margin: 4px 0 4px 0;
        color: white;
    }

        #listView > ul > li > .time {
            float: left;
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
        }

        #listView > ul > li > .buttons {
            float: right;
            display: inline-block;
        }

        #listView > ul > li > ul {
            list-style: none;
            float: left;
            clear: both;
            padding: 4px 0 0 0;
        }

        #listView > ul > li > .recipients > li {
            float: right;
        }

#draggableRecipient {
    list-style: none;
    padding: 0px;
    display: inline-block;
    width: 100%;
    cursor: grab;
    position: relative;
}

    #draggableRecipient > li {
        float: left;
        margin: 10px;
        color: white;
        padding: 5px;
        border: solid 0.016px black;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

.cutText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 1px solid #333;
}

.reportTable > tbody > tr > td {
    padding: 5px;
}

.reportTable span {
    color: black !important;
}
.tccAdvancedScrollableTableReportsViewContainer {
    background-color: white;
    color: black;
}

.reportsEditor .editHeaderRow > td, .reportsEditor .editHeaderRow > th {
    border-top: 3px solid #28204d;
}
.reportsEditor .typeDisplay {
    color: #28204d;
}
.reportsEditor .form-group.form-md-line-input > .input-icon > i {
    color: #28204d;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent;
}
.table-hover > tbody > tr:hover, .table-hover > tbody > tr:hover > td {
    background: transparent !important;
}
.reportsEditor .divButton.invertIcon {
    color: #fff !important;
    background-color: #28204d;
    border: 0;
}
.reportsEditor .divButton {
    background-color: #fff;
    color: grey !important;
    border: 0;
}
.calculation-badge {
    background-color: #28204d !important;
}
.formula-row, datapoint-row {
    background-color: transparent;
}
.logDataHeader > .ui-grid-header-cell {
    float: left;
}

.ui-grid-header-cell-label {
    color: black !important;
}

.ui-state-disabled {
    display: none;
}

.ui-state-hover {
}

.recipientEdit > option {
    color: black;
}

.recDropzone {
    border: solid;
    height: 35px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: solid 2px #AAAAAA;
}

    .recDropzone > i {
        color: lightgrey;
        font-size: 25px;
        text-align: center;
        width: 100%;
        margin-top: 9px
    }

.gridRow {
    background-color: #dddddd;
    width: 100%;
    height: 87px;
}

    .gridRow > .line {
        background-color: #aaaaaa;
        height: 4px;
        position: absolute;
        left: 0;
        top: 27px;
        right: 0;
    }

    .gridRow > .symbol > .marker {
        height: 33px;
        width: 24px;
        position: absolute;
    }

    .gridRow > .symbol > .channel {
        height: 15px;
        width: 15px;
        position: absolute;
        left: 4px;
        top: 3px;
    }

    .gridRow > .symbol {
        position: absolute;
        z-index: 1;
        top: -5px;
    }

        .gridRow > .symbol > .vertMinText {
            transform: rotate(90deg);
            position: absolute;
            top: 70px;
            left: -28px;
            width: 80px;
        }

        .gridRow > .symbol:hover {
            cursor: pointer;
            opacity: 0.8;
        }

.gridLine {
    position: absolute;
}

    .gridLine > .line {
        width: 2px;
        position: absolute;
        z-index: 0;
        top: -100px;
        background-color: #aaaaaa;
    }

    .gridLine > .minText {
        position: absolute;
        width: 100px;
        top: -35px;
        margin-left: 3px;
    }

.scheduleSelect option:disabled {
    color: #EEEEEE;
}

.seperator {
    height: 1px;
    position: absolute;
    background-color: lightgray;
    left: 0;
    right: 0;
}

#chartdiv, .iamloading {
    width: 100%;
    height: 500px;
    font-size: 11px;
}

.iamempty {
    background-color: #fafafa;
    font-size: 2em;
    width: 100%;
    height: 500px;
    font-weight: 300;
}

.preventOverflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-bg {
    opacity: 0 !important;
}

.weekendBackground {
    position: absolute;
    background-color: lightgray;
}

.draggableTemplates {
    list-style: none;
    padding: 0;
}

    .draggableTemplates > li {
        display: inline-block;
        height: 40px;
        margin: 10px;
        min-width: 200px;
        padding: 6px;
        margin-top: 0px;
        width: auto !important;
    }

        .draggableTemplates > li > ul {
            list-style: none;
            padding: 0;
            margin-left: 20px;
            margin-right: 20px;
            display: inline;
        }

        .draggableTemplates > li > .templateName {
            color: white;
            font-size: 16px;
        }

        .draggableTemplates > li > .noRecipientsText {
            color: white;
            font-weight: bold;
            font-size: 16px;
            list-style: none;
            padding: 0;
            margin-left: 20px;
            margin-right: 20px;
            display: inline;
            height: 29px;
            padding: 4px !important;
            height: 29px;
            display: inline-block;
        }

        .draggableTemplates > li > div {
            float: right;
        }

            .draggableTemplates > li > div > button {
                padding: 2px;
            }

                .draggableTemplates > li > div > button > i {
                    margin-left: 4px;
                }

        .draggableTemplates > li > ul > li {
            border-radius: 50% !important;
            padding: 4px !important;
            border: solid 1px lightgray;
            height: 29px;
            width: 29px;
            margin: 0px;
            margin-left: 4px;
            display: inline-block;
        }

            .draggableTemplates > li > ul > li > span {
                width: 100%;
                text-align: center;
                display: block;
                color: white;
            }

.weekSeperatorVertLine {
    position: absolute;
    width: 1px;
    background-color: #e7ecf1;
    margin-left: -1px;
}

.addMeasurePointArea {
    height: 185px;
    border: solid 2px lightgrey;
}

    .addMeasurePointArea > i {
        color: lightgrey;
        font-size: 100px;
        text-align: center;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -5px;
    }

        .addMeasurePointArea > i:hover {
            color: grey;
            cursor: pointer;
        }

.portlet > .portlet-title > .actions.measurementCaseStandort {
    float: left;
}

/* Balkenanimation */
.measurementCaseLiveBackground.progress {
    height: 47px;
}

    .measurementCaseLiveBackground.progress .progress-bar {
        text-align: left;
        padding: 15px;
        font-size: 14px
    }

.measurementCaseStartNowContainer {
    padding: 15px
}

.measurePoint {
    height: 185px;
    background-color: #333;
    border: 1px solid #28204d;
    padding-top: 25px;
}

.measurePointValue {
    padding-top: 15px;
    display: block;
}


.measurePointName {
    max-width: 160px;
    font-size: 18px;
    margin-right: 5px;
    margin-top: 35px;
    display: table-cell;
}

.measurePoint > .editBtn {
    padding: 0;
    padding-left: 5px;
    position: absolute;
    right: 20px;
    top: 3px;
    width: 25px;
    height: 25px;
}

.measurePoint > .deleteBtn {
    padding: 0;
    padding-left: 5px;
    position: absolute;
    right: 20px;
    top: 33px;
    width: 25px;
    height: 25px;
}

.opacityHover {
    opacity: 0.7;
}

    .opacityHover:hover {
        opacity: 1;
    }


#previewContainer {
    position: absolute;
    white-space: nowrap;
    color: black;
    font-size: 14px;
    background-color: white;
    padding: 3px 12px 3px 12px;
    border: 1px solid #28204d;  /*Changing the color - (Ökosolar)*/
    z-index: 100000;
    pointer-events: none;
    display: none;
    width: 400px;
}

.recipientLine {
    position: absolute;
    right: 6px;
    pointer-events: none;
}

.recType {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    position: absolute;
    font-weight: bold;  /*Changing the color - (Ökosolar)*/
    color: #28204d;
    margin-left: -4px;
    pointer-events: none;
}

.tooltipSep {
    width: 100%;
    height: 23px;
    border-bottom: solid 1px lightgray;
    margin-bottom: 6px;
}

.recContact {
    display: block;
    float: left;
    width: 160px;
    height: 20px;
    position: absolute;
    left: 80px;
    color: #28204d; /*Changing the color - (Ökosolar)*/
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipientElement {
    display: block;
    float: left;
    width: 15px;
    height: 15px;
    position: relative;
    top: 4px;
    pointer-events: none;
}

    .recipientElement span {
        display: block;
        margin: auto auto;
        background-color: white;
        border-color: #28204d;  /*Changing the color - (Ökosolar)*/
        border-style: solid;
        width: 10px;
        height: 10px;
        border-width: 1px;
        border-radius: 50% !important;
    }

    .recipientElement:last-child span {
        display: block;
        margin: auto auto;
        background-color: aqua;
        border-color: #28204d !important;  /*Changing the color - (Ökosolar)*/
        border-style: solid;
        width: 10px;
        height: 10px;
        border-width: 1px;
        border-radius: 50% !important;
    }

/*
.btn.green:not(.btn-outline) {

    background-color: #28204d;  
    border-color: white; 
}


.btn.green:not(.btn-outline):hover {
    background-color: #28204d;
}
    */

.btn:not(.btn-outline) {

    border: 0;  /*Changing the color - (Ökosolar)*/
}

.neues_device .btn:not(.btn-outline) {
    border: 1px solid #484263; /*Changing the color - (Ökosolar)*/
}

.page-header.navbar .page-logo .logo-default.logo_rse_innenseite {
    content: ""; 
    width: 0px;
    height: 0px;
    display: inline-block;  /*Vanishing the RSE-Logo - (Ökosolar)*/
}


.page-header.navbar .page-logo {
    background-image: url('./cobra_logo.png'); /*Inserting the Ökosolar-Logo - (Ökosolar)*/
    background-size: auto 330px;
    background-repeat:no-repeat;
    background-position-x: center;
    margin-top: -30px;

}

div.recipientElement::after {
    display: block;
    border-bottom: 1px solid #28204d; /*Changing the color - (Ökosolar)*/
    content: "";
    position: absolute;
    top: 5px;
    right: 11px;
    left: -2px;
}



.fc-content {
    pointer-events: none;
}

.fc-bg {
    pointer-events: none;
}

.listviewRecipients {
    list-style: none;
    padding: 0;
    margin-left: 20px;
    margin-right: 20px;
    display: inline;
    margin: 0;
}

    .listviewRecipients > li {
        border-radius: 50% !important;
        padding: 4px !important;
        border: solid 1px lightgray;
        height: 29px;
        width: 29px;
        margin: 0px;
        margin-left: 4px;
        display: inline-block;
    }

        .listviewRecipients > li > span {
            width: 100%;
            text-align: center;
            display: block;
            color: white;
        }

.dropdown-menu {
    z-index: 2000 !important;
}

.directiveChart {
    width: 100%;
}

.chartInterval {
    position: absolute;
    right: 47px;
}

.chartTypes {
    position: absolute;
    right: 47px;
    z-index: 10000;
}

    .chartTypes > button {
        padding-right: 0px;
    }

.chartInterval > i {
    margin-right: 8px;
}

.spin {
    animation: rotation 0.7s infinite linear;
    margin-right: 8px
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.emptyGraph {
    height: 115px;
    background-color: #fafafa; /**/
    margin-left: 50px;
    margin-right: 20px;
    margin-top: 20px;
    padding-top: 30px;
    position: relative;
}

    .emptyGraph > i {
        margin-bottom: 25px;
        font-size: 40px !important;
    }

    .emptyGraph:last-child {
        font-size: 20px !important;
    }

.overlayedChart {
    width: 100%;
    height: 500px;
}

.invertArrow > button > span {
    transform: rotate(180deg);
}

.measurementSeriesIconContainer {
    width: 36px;
    display: inline-block;
    height: 36px;
    border-radius: 100% !important;
    background-color: #999;
    padding-top: 8px;
    color: white;
    text-align: center
}

    .measurementSeriesIconContainer.record {
        background-color: #ff3934;
        padding-top: 9px;
    }

    .measurementSeriesIconContainer.scheduled {
        background-color: #0098db;
        padding-top: 9px;
    }




.measurementSeriesIcon.fa-stop {
}

.measurementSeriesIcon.fa-circle {
    font-size: 17px;
    margin-top: 2px;
}

.measurementSeriesIcon.fa-clock-o {
    font-size: 24px;
    margin-top: 2px;
}

.measurementSeriesSeperator {
    height: 1px;
    background-color: lightgray;
    position: relative;
    top: 1px;
    margin-top: 10px;
    margin-bottom: 12px;
}

.deleteIcon {
    opacity: 0.7;
    cursor: pointer;
}

    .deleteIcon:hover {
        opacity: 1;
        cursor: pointer;
    }

.colorPicker {
    position: absolute;
    /*width: 100%;*/
    height: 300px;
    z-index: 16;
    background-color: #333333;
    border: 0;
}

    .colorPicker > table {
        list-style: none;
        padding: 0;
        width: 100%;
        height: 100%;
    }

        .colorPicker > table > tbody > tr {
            width: 100%;
            height: 11.111%;
        }

            .colorPicker > table > tbody > tr > td > .colorSquare {
                width: 80%;
                height: 80%;
                margin-left: 10%;
                cursor: pointer;
                border: solid 1px;
            }

                .colorPicker > table > tbody > tr > td > .colorSquare:hover {
                    border: solid 2px;
                }


.iconPicker {
    position: absolute;
    width: 100%;
    z-index: 16;
    background-color: white;
    border: solid 1px;
}

    .iconPicker > table {
        list-style: none;
        padding: 0;
        width: 100%;
        height: 100%;
    }

        .iconPicker > table > tbody > tr {
            width: 100%;
            height: 25%;
        }

            .iconPicker > table > tbody > tr > td > i {
                width: 80%;
                height: 80%;
                font-size: 30px;
                cursor: pointer;
                margin-top: 26px;
                margin-left: 18px;
                opacity: 0.8;
            }

                .iconPicker > table > tbody > tr > td > i:hover {
                    opacity: 1;
                }

.rulePanel > .panel-group > div > div > h4 {
    background-color: #28204d; /*Changing the color - (Ökosolar)*/
}

.rulePanel > .panel-group {
    margin-top: 10px;
}






.tooltip-inner {
    width: auto !important
}

.tooltip-arrow {
    width: auto !important
}

.itemheight4lines.chartHasTimeNavigation {
    height: 250px !important
}

div[window-top-class='fullscreenModal'] > div {
    width: 99%;
    max-width: 1600px;
}

.pickr .pcr-button {
    width: 100% !important;
    height: 40px !important;
}

.addPictureArea {
    width: 100%;
    padding-top: 100%;
    border-style: solid;
    border-width: 2px;
    border-color: lightgray;
    position: relative
}

    .addPictureArea > i {
        color: lightgrey;
        font-size: 100px;
        text-align: center;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -5px;
    }

        .addPictureArea > i:hover {
            color: gray;
            cursor: pointer;
        }

.deleteBtnImg {
    padding: 0;
    padding-left: 5px;
    position: absolute;
    right: 10px;
    top: 0px;
    width: 25px;
    height: 25px;
}

.visualisationPicture {
    opacity: 0.7;
}

    .visualisationPicture:hover {
        opacity: 1;
        cursor: pointer;
    }

.rasterNumbers > div {
    padding: 0;
    text-align: center
}

.previewHeaders > div {
    padding-left: 5px;
    padding-right: 5px;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    height: 50px;
}

.noHover:hover {
    background-color: white !important;
    cursor: default;
}

.noHover > a:hover {
    background-color: white !important;
    cursor: default;
}

.fakeModal {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
    background: white;
}

    .fakeModal > .header {
        background-color: #28204d; /*Changing the color - (Ökosolar)*/
        color: white;
        position: fixed;
        padding: 12px;
        padding-top: 1px;
        width: 100%;
        padding-bottom: 0px;
    }

    .fakeModal > .body {
        position: absolute;
        margin-top: 52px;
        width: 100%;
        height: 100%;
    }

.pumpIcons {
    text-align: center;
}

    .pumpIcons > div > img {
        width: 30px;
    }

.deviceColumn {
    min-width: 0px !important;
    max-width: 10000px !important;
}

.checkboxColumn {
    min-width: 0px !important;
    max-width: 10000px !important;
}

.tabHeaderPermissionTree {
    font-size: 25px;
    cursor: pointer;
}

    .tabHeaderPermissionTree.selected {
        font-size: 25px;
        cursor: pointer;
        background-color: green
    }

.customCheckbox > label > .check {
    border-color: white !important;
}

.customCheckbox > label > .box {
    border-color: white !important;
}

.amcharts-amexport-item {
    background-color: #28204d !important;  /*Changing the color - (Ökosolar)*/
    color: #ffffff !important;
    cursor: pointer;
    opacity: 1 !important;
    position: relative !important;
    z-index: 100;
    height: 30px !important;
}

    .amcharts-amexport-item > a {
        color: #ffffff !important;
    }

.amcharts-amexport-top .amcharts-amexport-item > .amcharts-amexport-menu {
    top: -3px !important;
    left: 2px;
}

.amcharts-amexport-item-level-0 {
    width: 90px !important;
}

    .amcharts-amexport-item-level-0 > a {
        padding-top: 5px !important
    }

.amcharts-amexport-item-level-1 {
    margin-top: 3px !important;
}

.amcharts-amexport-item-level-2 {
    margin-top: 3px !important;
}

.noDataOverlay {
    position: absolute;
    background-color: red;
    padding: 50px;
    color: white;
    z-index: 5;
}


.manualInputItem, .manualInputSelector {
    background-color: #1883c9;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
}

    .manualInputItem:hover {
        background-color: #7fc3ef;
        cursor: pointer
    }

/* Regeln nur für den manuellen input für die linien die auswählbar sind */
.manualInputSelector {
    padding-top: 2px;
    padding-bottom: 4px;
    padding-left: 4px;
}

    .manualInputSelector.selected {
        background-color: #28204d  /*Changing the color - (Ökosolar)*/
    }

    .manualInputSelector label {
        padding-left: 22px;
        margin-bottom: 0px;
    }

    .manualInputSelector .md-checkbox label > .box {
        border-color: #fff;
        border-width: 1px;
        width: 15px;
        height: 15px;
        top: 2px;
    }

    .manualInputSelector .md-checkbox label > .check {
        border-color: #fff;
        height: 16px;
        width: 8px;
        top: -2px
    }

.commentCount {
    position: relative;
    top: -23px;
    left: 5px;
    background: red;
    padding: 0px;
    border-radius: 50% !important;
    width: 18px;
    height: 18px;
    text-align: center;
}

h4.text-with-line {
    overflow: hidden;
    font-size: 12px;
    color: #28204d;  /*Changing the color - (Ökosolar)*/
    font-weight: 700;
}

.text-with-line span {
    display: inline-block;
    position: relative;
}

    .text-with-line span:after {
        left: 100%;
        margin-left: 10px;
        content: "";
        position: absolute;
        height: 50%;
        border-bottom: 1px solid #28204d;  /*Changing the color - (Ökosolar)*/
        top: 0;
        width: 1500px;
    }


.positionStaticImportant {
    position: static !important;
}



/* Scrollbare tabelle mit fixierter erster Spalte */

/* wir benötigen hier eine fixe erste spalte und nehmen hierfür 100px - der rest verteilt sich dynamisch 
    nur mit der fixiewrten Breite können wir das offset entsprechend festlegen 
*/

.tccTableScrollableContainer {
    overflow-x: auto;
    padding-left: 100px;
    padding-bottom: 1px;
    position: static;
}

    .tccTableScrollableContainer table {
        border-collapse: collapse;
        border: 0;
        background-color: white;
    }

        .tccTableScrollableContainer table tr td {
            height: 27px;
            border-top-width: 0px;
        }

.editTable.tccTableScrollableContainer table tr td {
    height: 35px;
    border-top-width: 0px;
    border: 1px solid #8998ab !important
}

.tccTableScrollableContainer table tr td.tccTablefixedCol {
    width: 100px;
    min-width: 100px;
    top: auto;
}

.tccTableScrollableContainer table tr td.tccTablefixedCol {
    height: 28px;
}

.editTable.tccTableScrollableContainer table tr td.tccTablefixedCol {
    height: 36px;
    border-top-width: 0px;
    padding-top: 9px;
    border-right: 0;
}

.tccTableScrollableContainer table tr.tccTableScrollableContainerHeight50 td {
    white-space: nowrap;
    height: 50px;
    border: grey;
}


    .tccTableScrollableContainer table tr.tccTableScrollableContainerHeight50 td.tccTablefixedCol {
        border: 0 !important;
        height: 51px;
    }





/* Border collapse klappt hier nicht */
.tccTableScrollableContainer .tccTablefixedCol {
    position: absolute;
    left: 15px;
    width: 100px;
    border-collapse: collapse
}
/* der loading hack dient dazu Änderungen beim Modus des parent elements auszugleichen da es sonst einen versatz gibt und der beriech springt*/
.loadingHack .tccTableScrollableContainer .tccTablefixedCol {
    left: 0;
}


sidebar-menu > li > a {
    color:black !important;  /*Changing the color - (Ökosolar)*/
}

.statusGray {
    background-color: gainsboro;
}

.manualInputBlockDisplay {
    display: block;
}

.table-responsive > .fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: white;
    z-index: 100
}


.form-group.form-md-line-input.has-info .form-control{
    
}
.portlet.box > .portlet-body {
    background-color: #8998ab;
}

.portlet-body{
    background-color:#8998ab;
}
-portlet light{
    background-color:#8998ab !important;
}

.resize-sensor{
    background-color:#8998ab !important;
}

.hidden-480 ng-scope{
    background-color:#8998ab !important;
}



.chartDirective, .chartDirective div.ng-isolate-scope {
    background-color: #8998ab !important;
}

.date-date-range-picker btn btn-primary btn-xs ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty {
    background-color: #8998ab;
}

btn btn-primary btn-xs ng-binding{
    background-color:#8998ab !important;
}

.btn.blue {
    background-color: #28204d !important;
}


.btn.red:not(.btn-outline) {
    background-color: #e7505a !important;
    border-color: #e7505a !important;
}

/*
.div, svg, input, select, textarea, span, img, label, p, a, button:not(.pcr-button), ul, code, pre, li {
    border-color:#73859b !important; 
    color: white !important;
}
    */

.portlet-title-filter input {
    color: black !important;
}

.portletFooter {
    border-top: 1px solid #73859b;
    background-color: #8998ab !important;
    height: 40px !important;
}

.portlet light ng-isolate-scope{
    background-color:#8998ab !important;
}
.portlet.light{
    background-color:#8998ab !important;
}

/*
.modal-header{
    background-color: grey !important;
}
    */
.itemheight1lines .value span, .itemheight2lines .value span, .itemheight3lines .value span, .itemheight4lines .value span {
    color: inherit !important;
}
.labelType1 {
    background-color: inherit !important;
    border: 0 !important;
}
/*
.configuratorGroup > .groupName{
    background-color:#8998ab !important;
}

.col-md-6 itemheight1lines{
    background-color:#8998ab !important;
}


.col-md-12 itemheight4lines itemheight1lines{
    background-color:#8998ab !important;
}

.itemheight1lines{
    background-color:#8998ab !important;
}

.itemheight2lines .labelType0, .itemheight2lines .labelType1, .itemheight2lines .btn.btnWidget, .itemheight2lines .digitalanzeiger, .itemheight2lines .statischerText{
    background-color:#8998ab !important;
}
.itemheight2lines {
    background-color:#8998ab !important;
}
.itemheight4lines .labelType0 > .labelDescription, .itemheight3lines .labelType0 > .labelDescription, .itemheight2lines .labelType0 > .labelDescription, .itemheight4lines .labelType1 > .labelDescription, .itemheight3lines .labelType1 > .labelDescription, .itemheight2lines .labelType1 > .labelDescription{
    color: #28204d !important;
    border-top: 1px solid white !important;
}
*/
/*
.labelType0, .digitalanzeiger{
    border:1px solid white !important;
}

.itemheight2lines .labelType0.fontSizeMedium > .value .valueText, .itemheight2lines .labelType1.fontSizeMedium > .value .valueText {
    border-bottom: 1px solid white !important;
}

*/

.scadaToolContainer{
    background-color:#8998ab !important;
}

.form-group form-md-line-input form-md-floating-label no-hint{
    color:#8998ab !important;
}



.form-group.form-md-line-input .form-control {


}

.form-group.form-md-line-input .form-control {
    background-color: #8998ab !important;
}

.scadaToolContainer .portlet-body{
    background-color:black !important;
}

#scadaToolsBox.scadaToolContainer{
    
}

.scadaToolContainer{

}

.scadaToolContainer .portlet-body{
    background-color:black !important;
}
/*
.editTable.tccTableScrollableContainer table tr td{
    background-color: black;
}
*/

.tccTableScrollableContainer table tr td.tccTablefixedCol{
    background-color: white;
    color: black;
}

.ui-grid-cell-contents{
    color: black !important;
}

.rse-icon-comments{
    
}

/*
.compressed-table.table > tbody > tr > td, .compressed-table.table > tbody > tr > th, .compressed-table.table > tfoot > tr > td, .compressed-table.table > tfoot > tr > th, .compressed-table.table > thead > tr > td, .compressed-table.table > thead > tr > th{
    background-color: black;
}
    */

/*
.div, svg, input, select, textarea, span, img, label, p, a, button:not(.pcr-button), ul, code, pre, li {
    color: white !important;
}
    */

.container-fluid:after, .container-fluid:before, .container:after, .container:before, .row:after, .row:before{
    background-color: blue !important;
}
.recipientBubble{
    background-color:#28204d !important;
}

.activeRecipientBubble{
    background-color:#28204d !important;
}

.h1, h2, h3, h4, h5, h6{
    color:white !important;
}

.month-picker span {
    color: black !important;
}
.month-picker-year-table .ui-button {
    color: black !important;
}
/*
.month-picker{
    background-color:black !important
}

.daterangepicker.dropdown-menu{
    background-color:black !important
}

.daterangepicker .calendar.left .calendar-table{
    background-color:black !important
}
*/
.daterangepicker .calendar th, .daterangepicker .calendar td {
    color: black !important;
}
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    color: #999 !important;
}
.daterangepicker td.active {
    background-color: #28204d;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #28204d;
    color: white !important;
}

/*
.input-group-sm>.input-group-btn>select.btn, .input-group-sm>select.form-control, .input-group-sm>select.input-group-addon, select.input-sm{
    background-color: #333;
}
    */

.hidden-sm-alarmliste, .hidden-sm.stummschalten {
    background: #8998ab !important;
    border: 0 !important;
}

.col-md-3-alarmliste{
    color:black !important;
}

.row hidden-xs hidden-sm-alarmliste{
    background-color: black !important;
}

.row hidden-xs hidden-sm.stummschalten{
    background-color: green !important;
}

.sweet-alert p {
color:black !important;
}
.sweet-alert h2 {
    color: black !important;
}


.dropdown-menu.rse-mobile-actions > li > a.rse_blue, .dropdown-menu.rse-mobile-actions > li > a.rse_blue > [class^="fa-"], .dropdown-menu > li > a.rse_blue > [class*=" fa-"]{
    color:grey !important;
}



.form-group.form-md-line-input.has-info .form-control{
    background-color: #73859b;
    
}

.dropdown-menu > li > a {
color: grey !important
}

.form-group.form-md-line-input .form-control {
    color: white !important
}

.wasauchimmer{
    background-color: black !important;
}

.bg-grey-cararra{
    background-color: black !important;
}

textarea.form-control{
    color:black !important;
}

.form-control{
    /*background-color: grey;*/
}

.bootstrap-select.btn-group .dropdown-menu li a span.text
{
    color: black !important;
}
/*
.table-striped>tbody>tr:nth-of-type(odd){
    background-color: black;
}
*/

.ui-grid-pager-row-count-picker select{
    background-color: grey;
    height: 30px;
}

.ui-grid-pager-control input{
    background-color: grey;
}
.itemheight1lines, .itemheight2lines, .itemheight3lines, .itemheight4lines {
    background-color: none !important;
}


.btn-group-sm>.btn, .btn-sm{
    background-color: grey;
}


.alert-info{
    background-color: #73859b !important;
    border: 0;
}

.[class^="fa-"]:not(.fa-stack), [class^="glyphicon-"], [class^="icon-"], [class*=" fa-"]:not(.fa-stack), [class*=" glyphicon-"], [class*=" icon-"]{
    color: grey !important;
}

.pumpenanzeige-horizontal-container .werte-container .werte-container-icons div{
    color:#28204d
}

.pumpwerksvisualisierung_skala{
    color: white !important;
}

.portlet-body-spezialtools{
    background-color:grey !important;

}



.tool{
    background-color:grey !important;
    border:solid 5px lightgrey !important;
}

.btn-primary.active, .btn-primary:active, .btn-primary:hover, .open > .btn-primary.dropdown-toggle, .btn-primary.focus, .btn-primary:focus {
    background-color: #28204d !important;
}

.bootstrap-select > .dropdown-toggle {
    background-color: white !important;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option,
.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark,
.daterangepicker .input-mini, .daterangepicker_input, .calendar-time select, #dateRange,
input[name='eventListFilter'], input[name='exportLimit'],
.dropdown-menu .dropdown-header span,
.dropdown-menu .no-results {
    color: #333333 !important;
}

#eventList th {
    background-color: #28204d;
}

.eventlist-footer button, .eventlist-footer .page-middle {
    background-color: #28204d !important;
}

.paging-footer-select {
    border: 1px solid #28204d;
}

.paging-footer-overview {
    border: 0;
    background-color: #28204d;
}

.jstree-hovered {
    background-color: #73859b !important;
}

.history-entry .audit-log-detail-view .gray-background {
    background-color: #8998ab;
}