alertmanager/ui/app/css/main.css

body {
	overflow-y: scroll;
	background: #fcfcfc;
}

header {
	padding: 1em 2em;
	background: #404040;
}

header #logo {
	color: #fff;
	float: left;
	margin-right: 24px;
}

#top-nav a {
	color: #fff;
	text-decoration: none
}

#top-nav .selected a {
	color: #aaa;
}

#top-nav ul {
	float: left;
	list-style: none;
	margin-top: .5em;
}

#top-nav li {
	display: inline-block;
	margin-right: 2.2em;
}

#content {
	padding: 2em;
}

#silence-create {
	background: #fff;
	width: 100%;
	min-width: 400px;
}

.silence-matchers {
	margin-bottom: 5px;
}

.silence-matchers .is-regex {
	font-family: monospace;
}

#silences-query {
	margin-bottom: 24px;
}

.list-item {
	background: #fff;
	min-height: 50px;
	margin-bottom: 1px;
}

.list-item .container-left {
	width: 450px;
	padding: 1em;
	float: left;
	background: #555;
	color: #eee;
}

.lbl {
	text-transform: none !important;
	font-size: 0.7em;
	padding: 6px !important;
	border-radius: 3px !important;
	margin: 2px 0 2px 0 !important;
	font-family: Menlo, Monaco, Consolas, Courier, monospace;
}
.lbl.left {
	display: block;
	margin-right: 5px !important;
}
.lbl.right {
	display: block;
	margin-left: 5px !important;
}
.lbl.small {
	font-size: 0.65em;
	padding: 3px !important;
}

.list-item .container-right {
	border-left: 450px solid #555;
	padding: 1em;
}

.list-item .active-interval {
	font-family: Menlo, Monaco, Consolas, Courier, monospace;
	font-size: .75em;
	color: #fff;
	padding-bottom: 3px;
	margin-bottom: 4px;	
}

.active-interval .time {
	color: #f9f9f9;
}
.active-interval .date {
	color: #c9c9c9;
}

.list-item .silence-created {
	font-size: .9em;
	border-left: none;
	padding: 0;
}

.list-item .silence-comment {

}

.route {
	border-left: 1px dotted #c0c0c0;
	background: #fff;
}
.route .route {
	margin: 0 0 0 1.5em;
}

.route-header {
	border-bottom: 1px solid #fff;
	padding: .5em .6em;
	background: #f0f0f0;
}

.alert-group-header {
	border-bottom: 1px solid #fff;
	background: rgba(47, 119, 209, .4);
	padding: .5em .6em;
}

input.collapse[type=checkbox] {
	-webkit-appearance: none;
    width: 1em;
    height: 1em;
    border: none;
}
input.collapse[type=checkbox]:after {
	content: '▹';
}
input.collapse.open[type=checkbox]:after {
	content: '▿';
}

.label.alertname {
	background: #fff !important;
}
/**/
input[type="datetime-local"]  {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  padding: 0.9rem 1rem;
  line-height: 1;
  height: 40px;
  outline: none;
  background: #ffffff;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-bottom: 0;
  color: rgba(0, 0, 0, 0.85);
}