body {
    font-size: 14px;
	overflow-y: scroll;
}
.clear {
	clear: both;
}
.hidden {
    display: none !important;
}

p {
    color: #333;
    font-size: 14px;
}
a {
    color: #4369a0;
    font-weight: 600;
    font-size: 14px;
}
a:hover {
    color: #878787;
}
.hide {
    display: none !important;
}

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

#content ul {
    padding-left: 18px;
}

/* Card */
    .card .card-body ul {
        padding-left: 40px;
    }
    #content .card ul.list-group {
        padding-left: 0px;
    }
    #content .card ul.list-group > li {
        padding-left: 0px;
        padding-right: 0px;
    }
    .card .card-body h2 {
        margin-bottom: 20px;
    }
    .card .card-body h4 {
        margin-bottom: 5px;
    }
    .card-img-top {
        border-radius: 0;
    }
    #content .nav-tabs {
        padding-left: 0;
    }

/* Topmenu */
    #topbar {
        margin: 4px 0;
    }
    #topbar .nav.navbar-nav.menu {
        flex-direction: row;
    }
    #topbar .nav.menu li {
        margin-left: 20px;
    }
    /* .header-left {
		nur nötig, wenn Menu-Toggler angezeigt wird.
        padding-left: 50px;
		
    }*/
	
	
/* Event Alerts - Glocke mit Meldungen */
    .header-left .dropdown .dropdown-toggle {
        color: #212528 !important;
        margin-right: 0px;
        padding: 3px;
    }
    .header-left .dropdown .dropdown-toggle .count {
        right: -7px;            
        height: 20px;
        width: 20px;
        line-height: 20px;
        top: -4px;
    }
    .header-left .dropdown .dropdown-toggle:hover,
    .header-left .dropdown .dropdown-toggle:active,
    .header-left .dropdown .dropdown-toggle:focus {
        color: #212528 !important;
        background-color: transparent !important;

    }
    .header-left .dropdown {
        display: inline-block !important;
    }
    .header-left .dropdown.for-notification .dropdown-menu {
        box-shadow: 0px 5px 14px 4px #00000061;
        min-width: 800px;
        padding: 0;
        left: -16px!important;
        
    }
    /* schriftgröße für die Notification angepasst PM NT */
    .header-left .dropdown.for-notification .dropdown-menu,
    .header-left .dropdown.for-notification .dropdown-menu h4{
        font-size: 14px;
    }
    .header-left .dropdown.for-notification .dropdown-menu .card {
        margin-bottom: 0;
    }
    .header-left .dropdown.for-notification .dropdown-menu .card-header {
        padding: .75rem;
    }
    .header-left .dropdown.for-notification .dropdown-menu .card-body {
        padding: 0;
    }		

/* Connection Status */
    .connection_status i {
        color: #a4a4a4;
		display: none;
		line-height: 21px;
    }
    .connection_status i.not_connected,
    .connection_status i.red {
        color: #f86c6b;
    }
    .connection_status i.connected,
    .connection_status i.green {
        color: #4dbd74;
    }
    .connection_status i.no_status,
    .connection_status i.grey {
        color: #a4a4a4;
    }
	
	/* Show the Icon based on the parents class */
		/* OKAY = Grün */
			.connection_status.okay i.connected {
				display: block;
			}

		/* warning = Orange*/
			.connection_status.warning i.no_status {
				display: block;
			}

		/* ERROR = rot */
			.connection_status.error i.not_connected  {
				display: block;
			}


/* Toggler */
    .menutoggle {
        margin: -4px 20px 0 -35px;
        border-radius: 0px;
        background-color: transparent;
        height: 59px;
        line-height: 61px;
        margin: 0;
        position: absolute;
        z-index: 9;
        left: 0;
        top: 0;
    }
    .menutoggle {
        color: #122c3e !important;
        width: 52px;
    }
    .menutoggle .fa-tasks:before {
        content: "\f00d";
    }
    .open .menutoggle i:before {
        content: "\f0c9";
    }

/* Mainmenu */
    .navbar .navbar-nav li.menu-item-has-children .sub-menu.show {
        max-height: 1000px;
        opacity: 1;
        position: static !important;
    }
    .navbar .navbar-nav li.menu-item-has-children > a {
        display: inline-block;
        width: 90%;
    }
    .navbar .navbar-nav li.menu-item-has-children > a:before {
        display: none;
    }
    .navbar .navbar-nav li.menu-item-has-children > .mainmenutoggler {
        display: inline-block;
        color: #fff;
        width: 10%;
        text-align: center;
        transition: all .3s ease-in-out;
    }
    .navbar .navbar-nav li.menu-item-has-children > .mainmenutoggler:hover {
        cursor: pointer;
    }
    .navbar .navbar-nav li.menu-item-has-children > .mainmenutoggler.open {
        transform: rotate(90deg);
    }
    .navbar .navbar-nav li a.fa:before {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 10px;
    }

/* Form */
    .form-group select {
        width: 100%;
    }
    #imageForm input,
    input,
    select,
    textarea {
        display: block;
        width: 100%;
        height: calc(2.25rem + 2px);
        padding: .375rem .75rem;
        font-size: 14px;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0 !important;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;        
    }
    input[type=checkbox] {
        display: inline-block;
        width: auto;
        height: auto;
    }
    select {
        cursor: pointer;
    }
    textarea {
        height: auto;
    }
    label {
        display: inline-block !important;
        color: #495057;
        font-weight: 600;
    }
    
    text-area:read-only,
    select:read-only,
    input:read-only {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    #editForm .card .card-body .form-group .row-fluid div{
        padding:0;
    }

    /*select-field arrow down icon added*/
    ul.chzn-choices::after {
        font-family: "fontAwesome";
        content: "\f107";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
    }

    /*jce editor*/
    #tinymce{
        background-color: #fff;
    } 

	/* Siehe zB: /mioty-devices/edit?id=1 -> tab "IOT-Daten" */
	.type_spacer  {
		margin-top: 40px;
	}
	.type_spacer .control-label  {
		background-color: #122c3e;
		color: white;
	}
	.type_spacer .control-label label {
		padding: 10px;
		margin-bottom: 0;
		color: white;
	}
	
	.type_spacer .description {
		font-style: italic;
		padding: 10px;
	}

	/* Spacer-Elements inside Subforms with the name 'emptyspacer1' or 'emptyspacer2' */
		.pm_fieldgroup.type_spacer[class*="field_subspacer"] {
			margin-left: 0px;
		}
		.pm_fieldgroup.type_spacer[class*="field_subspacer"] .control-label label {
			padding: 1px;
			height: 2px;
			margin: auto;
		}
	
	
	
	.minicolors-theme-bootstrap .minicolors-input {
		padding: 13px 6px;
		min-width: 165px;
		padding-left: 29px;
	}
	
    .fielddescription {
        display: none;
    }
    .control-group {
        margin-bottom: 1rem;
    }
    .btn-group.dropdownTogglContainer {
        display: block !important;
        margin-top: -2px;
    }
    .btn-group.dropdownTogglContainer .dropdown-toggle {
        padding: 0;
        border: 0px;
        background-color: transparent;
        color: inherit !important;
    }
    .btn-group.dropdownTogglContainer .dropdown-toggle:hover {
        color: #4369a0;
        opacity: 0.8;
    }
    .btn-group.dropdownTogglContainer .dropdown-menu {
        padding: .5rem;
    }
    .toolbar.pull-right .btn,
    .btn-group.pull-right .btn {
        margin-right: 0;
        margin-left: 10px;
    }
    .dataTables_length .custom-select {
        top: -2px;
        position: relative;
        margin-right: 5px;
    }
    div.dataTables_wrapper div.dataTables_length select {
        width: 50% !important;
        height: calc(2.25rem + 2px);
        padding: .375rem .75rem;
        font-size: 14px;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    table.dataTable thead>tr>th.sorting_asc,
    table.dataTable thead>tr>th.sorting_desc,
    table.dataTable thead>tr>th.sorting,
    table.dataTable thead>tr>td.sorting_asc,
    table.dataTable thead>tr>td.sorting_desc,
    table.dataTable thead>tr>td.sorting {
        color: #717171;
        background-color: #f6f9fc;
        font-weight: 600;
        border-top: 0px;
    }
    .form-control {
        font-size: 14px;
    }
    /* Braucht man nicht sonst funktioniert Table Ansicht für Responsive nicht. PM NT */
    /* table.table-bordered.dataTable tbody td.main_image {
        width: 20%;
    } */

    /* Chosen Multiselect */
        .chzn-container {
            width: 100% !important;
        }
        .chzn-container-multi .chzn-choices li.search-choice span {
            line-height: normal;
        }
        .chzn-container-multi .chzn-choices {
            display: block;
            width: 100%;
            min-height: calc(2.25rem + 2px);
            padding: .2rem .75rem !important;
            font-size: 14px;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            background-image: none;
            box-shadow: none;
        }
        .chzn-container .chzn-results {
            padding: .375rem .75rem !important;
        }
        .chzn-container .chzn-results li.highlighted {
            background-color: rgba(0,0,0,.05);
            background-image: none;
            color: #212529;
        }
        .chzn-container-multi .chzn-choices li.search-field input[type="text"] {
            color: #767676;
            margin: 3px 0 0;
            font-size: 14px;
        }
        .chzn-container .chzn-results li {
            padding: .375rem .75rem !important;
            font-size: 14px;
            line-height: normal;
        }
        .chzn-container-multi .chzn-choices li.search-choice {
            position: relative;
            margin: 3px 5px 3px 0;
            padding: 8px 30px 7px 10px;
            background-image: none;
            box-shadow: none;
            line-height: 13px;
            cursor: default;
        }        
        .chzn-container-multi .chzn-choices li.search-choice .search-choice-close {
            background-repeat: no-repeat;
            top: 13px;
            right: 7px;
        }
        .chzn-container-multi .chzn-choices li.search-choice .search-choice-close:hover {
            background-repeat: no-repeat;
            top: 13px;
            right: 7px;
        }

    /* Chosen Single Select */
        .chzn-container.chzn-container-single .chzn-single {
            display: block;
            width: 100%;
            min-height: calc(2.25rem + 2px);
            padding: .2rem .75rem !important;
            font-size: 14px;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            background-image: none;
            box-shadow: none;
        }
        .chzn-container-single .chzn-single span {
            margin-top: 5px;
            font-weight: 400;
        }
        .chzn-container-single .chzn-single div b {
            background-position: 0px 10px;
        }
        .chzn-container-active.chzn-with-drop .chzn-single div b {
            background-position: -18px 10px;
        }

/* Tables */
    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(169, 169, 169, 0.04);
    }
    .pmdatatable th a {
        display: block !important;
    }
    .pmdatatable tbody td a {
        display: inline-block !important;
    }
    /* Bildergrößen für die Tabellen begrenzen PM NT  */
    .tableCellInner img{
        max-height: 180px;
        max-width: 60%;
    }

/* Tabs */
    .tab-content {
        padding: 1.25rem!important;
        border: 1px solid #dee2e6;
        border-top: 0px;
        background-color: #fff;
    }
    .card .card-body .nav-tabs {
        padding-left: 0;
    }
    .card.pm_tile .card-body {
        display: flex;
        align-items: center;
        min-height: 85px;
    }
    .card.pm_tile .card-body .icon {
        font-size: 30px;
        margin-right: 15px;
    }
    .nav-tabs li a,
    .nav-tabs li a.active {
        color: #fff;
        background-color: #122c3e;
        border-color: #122c3e #122c3e #fff;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        display: block !important;
        padding: .5rem 1rem;
        margin-right: 1px;
        border: 1px solid transparent;
    }
    .nav-tabs li.active a.show,
    .nav-tabs li a.active {
        border: 1px solid #ddd;
        color: #122c3e;
        background-color: #fff;
        border-color: #dee2e6 #dee2e6 #fff;
        margin-bottom: -1px;
        position: relative;
    }
    .nav-tabs li a:hover {
        color: #122c3e;
        background-color: #fff;
        border-color: #dee2e6 #dee2e6 #fff;
    }
    .nav-tabs li a.active:after {
        content: "";
        display: block;
        position: absolute;
        bottom: -3px;
        left: 0;
        height: 6px;
        width: 100%;
        background-color: #fff;
    }
    .modal.btn {
        position: static;
    }
    .type_media img {
        margin-bottom: 1rem;
    }
    .type_media input,
    .field-media-input {
        margin-bottom: 1rem;
    }
    .type_media .btn {
        margin-right: 10px;
    }
    .icon-plus,
    .icon-minus,
    .icon-move,
    .icon-remove,
    .icon-calendar,
    .icon-user {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .icon-remove:before {
        content: "\f00d";
    }
    .icon-plus:before {
        content: "\f067";
    }
    .icon-minus:before {
        content: "\f014";
    }
    .icon-move:before {
        content: "\f047";
    }
    .icon-calendar:before {
        content: "\f073";
    }
    .icon-user:before {
        content: "\f007";
    }
    /* War vorher 0. Ausrichtung Name Status Felder zB /kipplaster/edit?id=1   PM NT */
    .pm_fieldgroup.type_text.field_name .controls{
        margin-top: 8px;
    }

/* Subform */
    .subform-repeatable-group {
        /* background-color: #f1f2f7; */
        background-color: #dbeaf5; /* lässt sich besser erkenenn im IOT-DATEN Tab und damit abgrenzen von den nächsten Subforms. */ 
        border: 1px solid #ced4da;
        padding: 1.25rem;
        margin-bottom: 4rem;
        position: relative;
    }
    .subform-repeatable .btn-toolbar {
        float: none !important;
    }
    .subform-repeatable > .btn-toolbar {
        margin-bottom: 1rem;
    }
    .subform-repeatable-group .btn-toolbar {
        position: absolute;
        right: 0px;
        top: 0px;
    }
    .subform-repeatable-group .btn-toolbar .btn {
        color: #fff;
        background-color: #4369a0;
        border-color: #4369a0;
        padding: .25rem .5rem;
        font-size: .875rem;
        line-height: 1.5;
        margin-left: 1px;
        margin-right: 0px;
        border-radius: 0px;
    }
    .subform-repeatable-group .btn-toolbar .btn:hover {
        border-color: #385b8e !important;
        background-color: #385b8e !important;
        color: #fff !important;
    }
    .subform-repeatable .group-add {
        color: #fff !important;
    }

/* Calendar */
    #metadata .input-append {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 100%;
    }
    #metadata .input-append input {
        position: relative;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 1%;
        margin-bottom: 0;
    }
    .calendar-container table {
        max-width: 330px;
    }
    .js-calendar .buttons-wrapper .btn {
        margin-right: 4px;
    }

/* System messages */
    .alert {
        border-radius: 0px;
        padding: .75rem 20px;
    }
    #system-message-container {
        background-color: #fff;
    }
    #system-message .alert .close {
        position: absolute;
        right: 10px;
        top: 5px;
    }
    #system-message .alert .close:hover {
        color: #000;
        text-decoration: none;
        opacity: .75;
    }
    #system-message .alert.alert-error a,
    #system-message .alert.alert-error {
        color: rgba(114, 28, 36, 0.75) !important;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }
    #system-message .alert.alert-error .close {
        color: #721c24;
    }
    #system-message .alert.alert-message .close {
        color: #155724;
    }
    #system-message .alert.alert-message,
    #system-message .alert.alert-success {
        color: rgba(21, 87, 36, 0.75);
        background-color: #d4edda;
        border-color: #c3e6cb;
    }
    #system-message .alert.alert-warning a,
    #system-message .alert.alert-warning {
        color: rgb(133, 100, 4, .75) !important;
        background-color: #fff3cd;
        border-color: #ffeeba;
    }
    #system-message .alert.alert-warning .close {
        color: #856404;
    }
    #system-message .alert.alert-notice a,
    #system-message .alert.alert-notice,
    #system-message .alert.alert-info a,
    #system-message .alert.alert-info,
    .alert.alert-info {
		color: rgb(0, 64, 133, .75) !important;
        background-color: #cce5ff;
        border-color: #b8daff;
    }
    #system-message .alert.alert-notice .close,
    #system-message .alert.alert-info .close {
        color: #004085;
    }
    #system-message .alert a:hover {
        opacity: 0.8;
    }
    .view_login #system-message-container {
        background-color: transparent;
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        z-index: 99;
        max-width: 600px;
        width: 100%;
    }
    #particles-js {
        width: 100%;
        height: 100%;
    }
    .alert i {
        margin-right: 5px;
    }
    
/* Tiles */
    .pm_tile {
        transition: all .15s ease-in-out;
    }
    .pm_tile.bg-flat-color-1:hover {
        background-color: #1693bf;
    }
    .pm_tile.bg-flat-color-2 {
        background-color: #00A7BF;
        border-color: #00A7BF;
    }
    .pm_tile.bg-flat-color-2:hover {
        background-color: #008599;
        border-color: #008599;
    }
    .pm_tile.bg-flat-color-3 {
        background-color: #f39c11;
        border-color: #f39c11;
    }
    .pm_tile.bg-flat-color-3:hover {
        background-color: #f59701;
        border-color: #f59701;
    }
    .pm_tile.bg-flat-color-4 {
        background-color: #f66955;
        border-color: #f66955;
    }
    .pm_tile.bg-flat-color-4:hover {
        background-color: #e2523d;
        border-color: #e2523d;
    }
    .pm_tile.bg-flat-color-5 {
        background-color: #122c3e;
        border-color: #122c3e;
    }
    .pm_tile.bg-flat-color-5:hover {
        background-color: #031c2e;
        border-color: #031c2e;
    }
    .pm_tile.bg-flat-color-5:hover a {
        color: #fff !important;
    }
    .pm_tile.bg-flat-color-6 {
        background-color: #fff;
        border-color: #122c3e;
    }
    .pm_tile.bg-flat-color-6 a {
        color: #122c3e !important;
    }
    .pm_tile.bg-flat-color-6:hover {
        background-color: #122c3e;
        color: #fff !important;
        border-color: #122c3e;
    }
    .pm_tile.bg-flat-color-6:hover a {
        color: #fff !important;
    }
    .bg-flat-color-7 {
        background: #00a65a;
        border-color: #00a65a;
    }
    .bg-flat-color-7:hover {
        background: #14af68;
        border-color: #14af68;
    }
	
/***************** IOT-Dashboard *******************/

/* Kacheln */
    .bg-standorte {
        background: #21a8d8;
    }
    .border-standorte {
        border-color: #21a8d8;
        color: #21a8d8;
    }

    .bg-rooms {
        background: #64c2de;
    }
    .border-rooms {
        border-color: #64c2de;
        color: #64c2de;
    }

    .bg-devices {
        background: #0cc0de;
    }
    .border-devices {
        border-color: #0cc0de;
        color: #0cc0de;
    }

    .bg-sensoren {
        background: #16d8c7;
    }

    .bg-daily-messages {
        background: #4ebd75;
    }

    .bg-datavolume {
        background: #ffc108;
    }

    .bg-sum-alerts {
        background: #f86d6c;
    }
    .iotdashboard_charts {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;	
        width: 100%;
    }

    .iotdashboard_charts .index_online_stats {
        flex: 1;
    }
    .iotdashboard_charts .index_iot_messages_chart {
        flex: 1;
    }
    .iotdashboard_charts .index_online_stats .card,
    .iotdashboard_charts .index_iot_messages_chart .card {
        height: calc(100% - 1.5rem);
    }
    
    .iotdashboard_charts .index_online_stats .card-body,
    .iotdashboard_charts .index_online_stats .card-body .row,
    .iotdashboard_charts .index_online_stats .card-body .row canvas,
    
    .iotdashboard_charts .index_iot_messages_chart .card-body,
    .iotdashboard_charts .index_iot_messages_chart .card-body .row,
    .iotdashboard_charts .index_iot_messages_chart .card-body .row canvas {
        height: 100%;
    }
	
	
    /* https://trello.com/c/pqbJ3oqq/#comment-5d133f2c7508a55d858043ce */
		.iotdashboard_charts .index_iot_messages_chart .card-body,
		.iot_messages_chart .card-body{
			max-height: 500px; 
		}
		
		

/* Login */
    .register-link a {
        color: #4369a0;
        font-weight: 600;
    }
    .register-link a:hover {
        color: #878787;
    }
    .view_login {
        background-color: #fff;
    }
    .view_login .content {
        float: none;
        padding: 0px;
        width: 100%;
        margin: 0 !important;
    }
    .view_login .right-panel {
        position: static;
        width: 100%;
    }
    .login_wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .login_inner_wrapper {
        padding: 0 8rem;
    }
    .login_logo {
        margin-bottom: 50px;
        text-align: center;
    }
    .login_logo img {
        max-width: 400px;
    }
    .login_bg {
        background-size: cover;
    }

/* Buttons */
    .btn {
        margin-right: 10px;
        font-size: 14px;
        display: inline-block !important;
    }
    .type_media .btn,
    .btn-secondary {
        border: 1px solid #4369a0;
        background-color: #4369a0;
        color: #fff !important;
        margin-right: 10px;
        background-image: none;
        text-shadow: none;
        font-size: 14px;
        display: inline-block !important;
    }
    .btn i {
        margin-right: 5px;
    }
    .btn.pull-right {
        margin-right: 0px;
    }
    .pull-right{
        float: right;
    } 
    body.iframe{
        padding-top: 10px;
    }
    .type_media .btn:hover,
    .type_media .btn:active,
    .type_media .btn:focus,
    .btn-secondary:active,
    .btn-secondary:focus,
    .btn-secondary:hover {
        border-color: #385b8e !important;
        background-color: #385b8e !important;
        color: #fff !important;
    }	
	.btn-small {
		margin-top: 0;
		margin-bottom: 0;
		font-size: 11px;
		padding: 6px 6px;
	}
	.card-header .control-group,
	.iotportal_map .card-header .btn {
		margin-bottom: 0;
	}

/* Overlay */
    #sbox-window{
        background-color: #f1f2f7;
    }
    .sbox-content-iframe#sbox-content {
        overflow: hidden;
    }
    .sbox-content-iframe#sbox-content iframe{
        width:100%;
    }
    iframe#imageframe{
        margin-top: 15px;
    }
    #uploadForm .well,
    #imageForm .well {
        background-color: transparent;
        border: 0px;
        box-shadow: none;
    }
    .icon-upload {
        display: none;
    }
    #imageForm .row {
        display: block;
        margin-right: -20px;
        margin-left: -20px;
    }
    .thumbnails.thumbnails-media {
        margin-left: 0;
        background: #fff;
        margin: 15px 5px;
        padding: 12px 20px;
        min-height: 140px;
    }
    #uploadform input[type="file"] {
        font-size: 14px;
        padding: 5px;
        padding-left:0;
        height: auto;
        border: 0px;
        background-color: transparent;
    }
    #imageForm .row {
        width: 100%;
        display: block;
        margin: 0;
    }
    #imageForm .row-fluid > .control-group,
    #imageForm .row > .control-group {
        margin-left: 0;
        width: 100%;
    }
    #imageForm .row .pull-right button {
        margin-right: 0;
        margin-left: 10px;
    }
    #imageForm .chzn-container {
        margin-bottom: 10px;
    }
    .icon-folder-2 {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        height: auto;
        background-image: none;
        height: 75px;
    }
    .icon-folder-2:before {
        content: "\f07b";
        font-family: "Font Awesome 5 Free";
    }
    .thumbnails-media .imgDetails {
        width: 100%;
        border-radius: 0;
        border: 1px solid rgba(0,0,0,0.1);
    }

/* Pagination */
    .dataTables_paginate .pagination li a {
        color: #4369a0;
    }
    .dataTables_paginate .pagination li.active a,
    .dataTables_paginate .pagination li:hover a {
        background: #4369a0;
        border-color: #4369a0;
        color: #fff;
    }
    .dataTables_paginate .pagination li.disabled a {
        color: #6c757d;
        pointer-events: none;
        cursor: auto;
        background-color: #fff;
        border-color: #dee2e6;
    }

/* Menusidebar */
    aside.left-panel {
        background-color: #122c3e;
        padding: 0;
        position: fixed;
        overflow-y: auto;
    }

    .navbar .navbar-nav li.menu-item-has-children .sub-menu {
        padding: 0;
    }
    aside.left-panel .navbar .navbar-nav li a {
        padding: 15px 25px 0;
    }
    .navbar .navbar-nav li.menu-item-has-children .sub-menu a {
        padding: 10px 25px 10px 40px;
    }
    .navbar {
        background: transparent;
    }    
	.nav.navbar-nav li.active.parent > a {
		border-bottom: 1px solid #c8c9ce;
		padding-left: 0;
		margin-left: 25px;
		width: 80%;
    }    
    aside .nav.navbar-nav li.current.active > a {
        color: #fff !important;
        font-weight: 600;
    }  
    aside .nav.navbar-nav li > .nav-header  {
        margin: 0px 25px;
        border-bottom: 1px solid #d6d6d6;
        color: #d6d6d6;
        display: block;
        font-weight: 600;
        line-height: 50px;
        padding: 0;
        text-transform: uppercase;
        margin-top: 10px;
    }

    .navbar .navbar-brand {
        /* Anpassung der Hintergrundfarbe des Logos an das Menu PM NT*/
        /* background-color: rgba(0,0,0,0.1) !important; */
        border-bottom: 0px;
        min-height: 59px;
    }
    .right-panel{
        left: 280px;
        position: relative;
        width: calc(100% - 280px);
        display: block;
    }
    .right-panel header.header {
        position: relative;
        padding: 15px 5px 18px;
    }
    .right-panel .page-header {
        padding: 0px;
    }
    body .navbar .navbar-nav li a:before {
        right: 10px;
        width: 20px;
    }
	
/* Unterpunkte im Sidebar-Hauptmenu */
    body .navbar .navbar-nav li.menu-item-has-children .sub-menu,
    .left-panel .dropdown-menu {
        background-color: transparent;
    }
	
 
/* Breadcrumb */
    .right-panel .page-header .breadcrumb > li + li:before {
        display: none;
    }
    .right-panel .page-header .breadcrumb > li .divider {
        margin-right: 5px;
        color: #ccc;
    }

/* Card for Tabs */
    .card.tabs {
        border: 0px;
        background-color: transparent;
    }

/* Bottom Toolbar */
    .bottom_toolbar .control-group {
        margin-bottom: 0;
    }

/* IOT Portal Karte */
	.info_boxen_neben_map .infobox {
        min-height: 200px;
    }	
	.iotportal_map {
		margin-bottom: 0;
	}    
    .iotportal_map.entity_icon {
        width:30px;
        height:30px;
    }    
    .iotportal_map.sensor_value.badge {
        margin-left: 2px;
    }    
    .iotportal_map #mapContainer {
        min-height: 400px;
        height: calc(100vh - 187px);
    }
    body .leaflet-touch .leaflet-bar a {
        width: 30px;
        height: 30px;
        line-height: 20px;
        text-align: center;
        padding: 5px;
    }

/* Popup Wrapper */
    .leaflet-popup-content-wrapper{
        border-radius: 0px!important; 
        padding: 0px 0px 0px 0px!important; 
    }

/* Popup Content */
    .leaflet-popup-content-wrapper .leaflet-popup-content{
        width: 200px;
        height: auto;
         /* siehe: https://trello.com/c/pqbJ3oqq/#comment-5d13417860f5db363635aa63 */
        padding: 7px;
        margin: 0px;
    }

/* Popup Link im Container*/
    .leaflet-container a{
         /* siehe: https://trello.com/c/pqbJ3oqq/#comment-5d13417860f5db363635aa63 */
        /* padding: 10px; */
        color: #4369a0!important; 
    }

/* Popup Image transition */
    .leaflet-container a img {
        -webkit-transition: all 0.25s ease;
        transition: all 0.25s ease;
    }

/* Popup Image hover */
    .leaflet-container a:hover img,
    .leaflet-container a:focus img {
        opacity: 0.85;
    }

/* Popup Image */
    .leaflet-popup-content-wrapper .leaflet-popup-content a img {
        /* siehe: https://trello.com/c/pqbJ3oqq/#comment-5d13417860f5db363635aa63 */
        /* padding: 5px 0px 15px 0px; */
    }

/* Popup Close button */
    .leaflet-container a.leaflet-popup-close-button {
        padding: 7px 20px 0px 0px!important;
        color: #4369a0!important;
    }

/* Popup Close Button hover */
    .leaflet-container a.leaflet-popup-close-button:hover,
    .leaflet-container a.leaflet-popup-close-button:focus {
        color: #878787!important; 
    }
	
/* Standort-Seite */
    .standort_adresse_box .entity_icon {
        width:30px;
        height:30px;
    }
    
    .standort_adresse_box .sensor_value.badge {
        margin-left: 2px;
    }
    
    .standort_adresse_box #mapContainer {
        width: 100%;
        height: 320px;
    }

/* Hotspot Map */
    .hotspot_map {
        position: relative;
    }
    .hotspot_map .hotspot {
        position: absolute;
        z-index: 999;
    }	
    .hotspot_map .hotspot img.hotspot_loading_icon {
        opacity: 0.7;        
    }
    .hotspot_map .hotspot .hotspot_marker i {
        color: var(--info);
        border-color: var(--info);
        font-size: 30px;
        vertical-align: middle;
        width: 66px;
        text-align: center;
    }
    .hotspot_map .hotspot .hotspot_marker .title {
        font-weight: bold;
        background: white;
        border: 1px solid var(--info);        
        text-align: center;        
        margin-top: 0px;
        margin-left: -65px;        
        width: 130px;
        position: absolute;
        left: 50%;
        bottom: -28px;
    }
    .hotspot_map .alert {
        background: none!important;
        text-shadow: none!important;
    }
		
	/* marker in red or green */
		.hotspot_map .hotspot .hotspot_marker.alert {
			padding: 0;
			margin: 0;
		}
		.hotspot_map .hotspot .hotspot_marker.alert .title,
		.hotspot_map .hotspot .hotspot_marker.alert i {
			border-color: var(--danger);
			color: var(--danger);
			background: none;
			text-shadow: none;
		}
			
		.hotspot_map .hotspot .hotspot_marker.success  .title,
		.hotspot_map .hotspot .hotspot_marker.success i {
			border-color: var(--success);
			color: var(--success);
		}
		
	/* Details */	
		.hotspot_map .hotspot .hotspot_details {
			display: none;
			padding: 0px;			
			border: 1px solid black;
			position: absolute;			
			width: 10px;
			height: 10px;
			position: absolute;
			border: 1px solid black;
			bottom: calc(50% - 3px);
			left: calc(50% - 14px);
		}
		.hotspot_map .hotspot.active .hotspot_details,
		.hotspot_map .hotspot:hover .hotspot_details {
			display: block;
		}		
		.hotspot_map .hotspot .sensor_value_wrapper {
			transform: rotate(0deg) translate(0em) rotate(0eg);
			transition: 0.3s ease-in-out;			
			width: 64px;
			height: 64px;			
			display: inline-block;			
			margin: 0;
			padding: 0;			
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;			
		}
		.hotspot_map .hotspot .sensor_value_wrapper .sensor_value {
			position: absolute;
			top: 50%;
			left: 50%;
			background: #ffffffc7;
			transform: translate(-50%, 0);
			display: block;
			padding: 2px 5px;
		}		
		
    /* Value is ok */
        .hotspot_map .hotspot.success i {
            color: var(--success);
        }

        .hotspot_map .hotspot.success:hover {
            background-color: var(--success);
        }
        .hotspot_map .hotspot.success:hover * {
            color: white;
        }

    /* Farbe der Hotspots, wenn sie eine Klasse haben (zB ein Sensor oder eine Entity in einem Raum) */
        .hotspot_map .hotspot.alert i {
            color: var(--danger);
        }
        .hotspot_map .hotspot.alert:hover {
            background-color: var(--danger);
        }
        .hotspot_map .hotspot.alert:hover * {
            color: white;
        }
		
	/* Farbe der Sensor-Kacheln im Tooltip bei Mouseover in einem Entity-Hotspot */
		.hotspot_map .hotspot .sensor_value_wrapper:hover {
			opacity: 0.8;
		}	
        .hotspot_map .hotspot .sensor_value_wrapper.alert *,
        .hotspot_map .hotspot .sensor_value_wrapper.alert .stat-icon i {
            border-color: var(--danger);
            color: var(--danger);
		}
        .hotspot_map .hotspot .sensor_value_wrapper.success *,
        .hotspot_map .hotspot .sensor_value_wrapper.success .stat-icon i {
            border-color: var(--success);
            color: var(--success);
        }		
        .hotspot_map .hotspot .sensor_value_wrapper a {
			display: block;
		}
		
/* Device Ansicht */
	.device_messwerte .sensoren_box .sensor_box  {
		margin-bottom: 30px;
	}
	.device_messwerte .sensoren_box .sensor_box .sensor_value_wrapper  {
		height: 100%;
	}
    .deviceMessungenInfosRight {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;	
    }

    .deviceMessungenInfosRight .device_messwerte_box {
        flex: 1;
    }
    .deviceMessungenInfosRight .device_messages_box {
        flex: 1;
    }
    .deviceMessungenInfosRight .device_messages_box .card {
        height: calc(100% - 1.5rem);
    }
    .deviceMessungenInfosRight .device_messages_box .card-body,
    .deviceMessungenInfosRight .device_messages_box .card-body .row,
    .deviceMessungenInfosRight .device_messages_box .card-body .row canvas {
        height: 100%;
    }
	.devicesensor_verlauf .card p {
        margin-bottom:5px;
    }
	.devicesensor_verlauf .card p .key {
        display: inline-block;
        width: 60%;
        margin-right: 1%;
    }
	
/* Sensor Ansicht */
    .badge {
        padding: .7em .7em;
        margin-right: 0.5em;
        margin-bottom: 0.8em;
        text-align: left;
        white-space: unset;
    }
	.sensor_value_wrapper .stat-icon.border-white i {
		width: 50px;
        height: 50px;
        line-height: 18px;
        font-size: 22px;
        padding: 13px 7px;
        text-align: center;
		border-color: white;
    }
    .stat-widget-one .stat-content {
        margin-left: 15px;
        margin-top: 7px;
    }	
	.sensorbox .sensormeta_key i {
        width: 19px;
        text-align: center;
        margin-right: 10px;
    }
    .deviceMessungenInfosRight,
    .device_events_box {
        padding: 0;
    }
    .toolbar .btn .fa {
        margin-right: 5px;
    }

/* iot DashboardKacheln */
    .iotDashboardKacheln .stat-icon i {
        font-size: 30px;
    }

/* Editor in Bearbeitungsmodus */
    .wf-editor-container .nav-tabs {
        display: block;
    }
	
	
	
/**
 * Sidebar links: Logos
 * Software made in germany Logo, https://trello.com/c/R0jW4vA5
 */
    
	
    /* Oben: Portal-Logo. */
		.navbar .navbar-brand img {
			max-width: 230px; /* Selbe Breite wie Menüpunkte  */
		}
	
	/* Unten */	
		aside.left-panel .bottom {
            position: fixed;
            bottom:0;
			width: 100%;
			padding: 0px;
			text-align: center;
            left: 25px;
            /* war vorher 230 -> Anpassung der Größen an das Menu PM NT */
			max-width: 200px;
		}

		.navbar-brand.bottom img {
			vertical-align: middle;
		}
		.connectIOTLogoModule p {
			margin-bottom: 0;
		}
		.connectIOTLogoModule .softwareMadeInGermanyLogo {
			background: white;
			padding: 5px;
			width: 20%;
		}
		.connectIOTLogoModule .connectIOTLogo {
			width: 80%;
		}
	
	/* im Inhaltsbereich, auf der Loginseite anders als im Rest */
		body.option_com_users.view_login #component_wrapper { 
			padding-bottom: 0px;
		}
		#component_wrapper .navbar-brand.loginpage {
			background-color: #122c3e;
			position: absolute;
			bottom: 0px;
			right: 0px;
			width: 400px;
			margin-right: 0;
			padding: 10px;
		}
 
		
    /**
     * Add new css by gaurav for responsive langswitcher Module
     * Updated by gaurav sharma | 2019-08-01
     * @link : https://trello.com/c/X3OsIJXv/
    **/
    div.mod-languages{
        float: right;
    }
    div.mod-languages ul.lang-inline{
        padding-left: 20px;
    }
    div.mod-languages ul.lang-inline li{
        margin: 0 0 0 25px;
    }
     


/**
 * add css to alignment for text in right side 
 * Updated by gaurav sharma | 2019-08-01
 * @link | https://trello.com/c/yobWfRzr
**/        
body.view_iotportal_construction span.value,
body.view_iotportal_buildings span.value{
    float: right;
}

/**
 * add css to make the dobule colan from css  
 * we wanted to remove the : from PHP, because in some responsive views, this didn’t look good. so now we can style every viewport-width
 * Updated by gaurav sharma | 2019-08-02
 * @link | https://trello.com/c/yobWfRzr
**/  
body.view_iotportal_construction strong.key,
body.view_iotportal_construction span.field_text,
body.view_iotportal_buildings strong.key,
body.view_iotportal_buildings span.field_text{
    position: relative;
    padding-right: 8px;
}

body.view_iotportal_construction span.field_text:after,
body.view_iotportal_buildings span.field_text:after {
    content: ":";
    position: absolute;
    right: 0;
}

/**
 * Hide the bold Text label for "Zusatzausrüstung" Box only 
 * updated by gaurav sharma | 2019-08-02
 * @Link | https://trello.com/c/yobWfRzr
 * See Trello Image : https://trello-attachments.s3.amazonaws.com/5ad8b75bfac880c6fb5b1548/5c98eb99c328665d671028d3/25eeba2580317279b3444321f98bc74e/hideLabel.png;
**/
body.view_iotportal_construction span.field_text,
body.view_iotportal_buildings span.field_text{
    font-weight: bold;
}
body.view_iotportal_buildings  p.Subform.label,
body.view_iotportal_construction  p.Subform.label{
    display: none;
}