.monitoring-health { max-width: 65em; > section:not(:last-child) { margin-bottom: 4em; } .vertical-key-value .value { display: inline-block; margin-bottom: .25em; } .check-summary { padding: .5em 0; .col { padding: 0 1em .5em 1em; } .col:not(:last-child) { border-right: 1px solid @gray-light; } } .check-summary, .instance-features { .rounded-corners(); border: 1px solid; border-color: @gray-light; display: flex; width: 100%; } .check-summary, .col-content, .icinga-info { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-around; } .icinga-info { margin-bottom: -2em; .vertical-key-value { margin-bottom: 2em; } } .col { flex: 1 1 auto; text-align: center; > h3 { margin: 0 0 1em; } } .icinga-health { .rounded-corners(); margin-bottom: 2em; padding: 1em; text-align: center; width: 100%; font-weight: bold; &.up { border: 1px solid; border-color: @color-up; color: @color-up; } &.down { background-color: @color-down; color: @body-bg-color; } } .instance-features { .control-group { flex: 1 1 auto; margin: .5em 0; padding: .5em; width: 0; display: flex; align-items: center; flex-direction: column-reverse; justify-content: flex-end; &:not(:last-of-type) { border-right: 1px solid @gray-light; } .control-label-group { font-size: 10/12em; margin-right: 0; margin-top: 1em; padding: 0; text-align: center; width: auto; label { text-align: center; } } .toggle-switch { margin: 0; } } } } #layout.minimal-layout { .icinga-info { .vertical-key-value { width: 100%; } } .instance-features { flex-wrap: wrap; .control-group { width: 33%; &:nth-child(3n) { border-right: none; } } } }