* {
       /* font-family: "Roboto Condensed", Impact, sans-serif; */
       font-family: 'Roboto Condensed';
		color: #000;
        font-size: 18px;
        font-weight: normal;
        box-sizing: border-box;
        }	

body {
	background-color: black;
}

/* roboto-condensed-regular - latin 
@font-face {
    font-family: 'Roboto' !important;
    font-style: condensed;
    font-weight: 400;
    src: url('/recources/fonts/roboto-condensed-v25-latin/roboto-condensed-v25-latin-regular.eot'); /* IE9 Compat Modes *//*
    src: local(''),
        url('/recources/fonts/roboto-condensed-v25-latin/roboto-condensed-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 *//*
        url('/recources/fonts/roboto-condensed-v25-latin/roboto-condensed-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers *//*
        url('/recources/fonts/roboto-condensed-v25-latin/roboto-condensed-v25-latin-regular.woff') format('woff'), /* Modern Browsers *//*
        url('/resources/fonts/roboto-condensed-v25-latin/roboto-condensed-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS *//*
        url('/recources/fonts/roboto-condensed-v25-latin/fonts/roboto-condensed-v25-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS *//*
} 
*/
        #watchdog {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            grid-template-rows: auto;
            grid-gap:6px;
        }

        .customer-box {
            border-radius: 6px !important;
            display: flex;
            flex-flow: row wrap;
        }
        /* cb header */	
        .customer-box .cb-head {
            display: flex;
            flex: 0 1 100%;
            padding: 5px 10px 0px 10px; 		
        }
        h5 {
            flex: 0 1 75%;
            line-height: 0.8em;
            font-size: 1.2em;
            margin: 0.2em 0;
        }
        .cb-head .values {
            flex: 0 1 25%;
            color: #000;
            font-size: 13px;
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-end;
        }
        .cb-head .values > span {
            font-size: 13px;
            color: #000;
        }
        /* end cb header */	
            
        /* cb footer */		
        .customer-box .cb-foot {
            flex: 0 1 100%;
            padding: 5px 10px;
            align-self: end;
        }
        /* end cb footer */		
            
        @media screen and (max-width: 660px){
            .customer-box {
                width: 100%;
            }
        }

        .box-good {
            background-color: rgb(140, 224, 140);
        }

        .box-warning {
            background-color: rgb(255, 225, 119);
        }

        .box-trouble {
            background-color: rgb(255, 103, 103);
        }

/* MG Februar 2024 */  
@media screen and (max-width: 478px) {
           .box-trouble {
			   background-color: rgb(255, 103, 103);
			   order: -1 !important;
          	}
			.box-warning {
            	background-color: rgb(255, 225, 119);
				order: -1 !important;
        	}
      }
        
                
        .circle-wrapper {
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
        }

        .circle-wrapper span.state-good{
            border-radius: 50%;
            background-color: #00c600;
            height: 10px;
            width: 10px;
            margin-left: 3px;
            border: solid black 0.5px;
        }

        .circle-wrapper span.state-warning{
            border-radius: 50%;
            background-color: #FF9200;
            height: 10px;
            width: 10px;
            margin-left: 3px;
            border: solid black 0.5px;
        }

        .circle-wrapper span.state-trouble{
            border-radius: 50%;
            background-color: #dd0000;
            height: 10px;
            width: 10px;
            margin-left: 3px;
            border: solid black 0.5px;
        }

        a {
            text-decoration: none;
        }

        i {
            color: grey;
        }

        a:hover {
            text-decoration: underline;
        }

        a, a:hover, a:active, a:focus {
            color: #000;
            font-size: large;
        }

        .number-good {
            background: #00c600;
        }

        .number-warning {
            background: #FF9200;
        }

        .number-trouble {
            background: #E70000;
        }

        .angaben {
            font-size: 12px;
        }

        p {
            margin: 5px;
        }