.cnc-tile {
	border-radius: .25em;
	box-shadow: .05em .05em .15em .05em rgba(0,0,0, 0.2);
	background-color: white;
	font-size: .92em;
	color: #333;
}

.cnc-tile-header {
	padding: .625em 1.25em;
	border-bottom: .1em solid rgba(0,0,0, 0.1);
}

.cnc-tile-body {
	font-size: .9em;
	padding: 1.25em;
}

.cnc-tile-body a {
	color: #009ee0;
	text-decoration: none;
}

.cnc-tile-body a:hover {
	/*color: #007db1;*/
	text-decoration: underline;
}

.cnc-msgbox {
	font-size: .9em;
	padding: 1em;
	margin: 0 0 1em 0;
	border-left: .5em solid #AAA;
}

.cnc-msgbox-critical {
	border-left-color: #ea670c;
}

.cnc-msgbox-information {
	border-left-color: #57ab27;
}

.cnc-msgbox-question {
	border-left-color: #009ee0;
}

.cnc-msgbox-warning {
	border-left-color: #fffc00;
}

.cnc-input-hint {
	margin-bottom: 0.8em;
	font-size: 0.9em;
	color: #777;
}

#cnc-login-trouble-link {
	margin: 1.5em 0;
}

#cnc-login-username,
#cnc-login-password {
	margin-bottom: .7em;
}

#cnc-login-username,
#cnc-login-password,
#cnc-login-button {
	width: 100%;
}

/*
 * cnc-table
 */
.cnc-table {
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
}

.cnc-table-bordered {
	border: .1em solid rgba(0,0,0, .1);
}

.cnc-table td,
.cnc-table th {
	padding: .4em 1em;
	margin: 0;
}

.cnc-table-vertical td,
.cnc-table-vertical th {
	border-left: .1em solid rgba(0,0,0, .1);
}

.cnc-table-vertical td:first-child,
.cnc-table-vertical th:first-child {
	border-left-width: 0;
}

.cnc-table-horizontal td,
.cnc-table-horizontal th {
	border-bottom: .1em solid rgba(0,0,0, .1);
}

.cnc-table-horizontal tbody > tr:last-child td {
	border-bottom-width: 0;
}

/*
 * cnc-tag
 */
.cnc-tag {
	color: #444;
	/*border: .1em solid #AAA;*/
	border: none;
	border-radius: .8em;
	background-color: #DDD;
	padding: .15em .7em;
	margin: .25em .1em;
	box-shadow: 0 .07em .1em 0 rgba(0,0,0, .4);
	white-space: nowrap;
}

button.cnc-tag:hover {
	cursor: pointer;
	background-color: #EEE;
}

.cnc-tag.cnc-selected {
	background-color: #555;
	color: white;
	/*border-color: #444;*/
}

.cnc-tag.cnc-selected:hover {
	background-color: #777;
}

.cnc-heading {
	font-weight: normal;
	color: rgb(100,100,100);
	color: rgba(0,0,0, 0.6);
}

/*
 * cnc-form
 * cnc-button
 */
.cnc-form fieldset {
	margin: 0;
	padding: 1em 0;
	border: 0;
}

.cnc-form legend {
	border-bottom: .1em solid rgba(0,0,0, 0.1);
	display: block;
	width: 100%;
	font-size: 1.25em;
	padding: .4em 0;
	margin: 0;
}

/*
 * We intentionally use specifictity hack here, so that this rule
 * doesn't get overriden by e.g.: .cnc-tile a { ... }
 * This is preferred over !important
 */
.cnc-button.cnc-button,
.cnc-form input[type="text"],
.cnc-form input[type="password"],
.cnc-form input[type="number"],
.cnc-form input[type="email"],
.cnc-form textarea,
.cnc-form select {
	padding: .4em .5em;
	border: .07em solid rgba(0,0,0, .2);
	border-radius: .3em;
	font-size: 1em;
	box-sizing: border-box;
}

.cnc-form input[type="text"],
.cnc-form input[type="password"],
.cnc-form input[type="number"],
.cnc-form input[type="email"],
.cnc-form textarea,
.cnc-form select {
	background-color: white;
}

.cnc-form.cnc-form-spaced input[type="text"],
.cnc-form.cnc-form-spaced input[type="password"],
.cnc-form.cnc-form-spaced input[type="number"],
.cnc-form.cnc-form-spaced input[type="email"],
.cnc-form.cnc-form-spaced select {
	margin-top: .3em;
	margin-bottom: .7em;
}

.cnc-form.cnc-form-spaced label {
	vertical-align: middle;
}

.cnc-button.cnc-button {
	background-color: #E7E7E7;
	box-shadow: 0 -0.1em 0 0 rgba(0,0,0, .25) inset;
	padding-left: .7em;
	padding-right: .7em;
	color: #333;
}

.cnc-button.cnc-button:hover {
	background-color: #EFEFEF;
	border-color: rgba(0,0,0, .35);
	cursor: pointer;
}

.cnc-button.cnc-button:active,
.cnc-button.cnc-button:focus,
.cnc-form input[type="text"]:focus,
.cnc-form input[type="password"]:focus,
.cnc-form input[type="number"]:focus,
.cnc-form input[type="email"]:focus,
.cnc-form textarea:focus,
.cnc-form select:focus {
	border-color: #009ee0;
}

a.cnc-button.cnc-button {
	display: inline-block;
}

a.cnc-button.cnc-button,
a.cnc-button.cnc-button:hover {
	text-decoration: none;
}

.cnc-button.cnc-button-primary {
	background-color: #009ee0;
	color: white;
}

.cnc-button.cnc-button-primary:hover {
	background-color: #22ACE6;
}

.cnc-button.cnc-button-primary:focus,
.cnc-button.cnc-button-primary:active {
	border-color: rgba(0,0,0, .75);
}

.cnc-button-rich {
	display: inline-block;
	margin: 1em .5em;
	padding: .6em 1.2em;
	border: .07em solid rgba(0,0,0, .15);
	border-radius: .5em;
	box-shadow: 0 -0.1em 0 0 rgba(0,0,0, .25) inset;
}

.cnc-button-rich:hover {
	border-color: rgba(0,0,0, .35);
}

a.cnc-button-rich,
a.cnc-button-rich:hover {
	text-decoration: none;
}

.cnc-button-rich:active,
.cnc-button-rich:focus {
	border-color: #009ee0;
}

.cnc-button-text {
	font-size: 1.2em;
}

.cnc-button-desc {
	color: rgba(0,0,0, .5);
}

/* TODO: move to portal */
.tile-body .cnc-heading {
	color: rgba(0,0,0, 0.85);
}

/* Pagination */
.cnc-pagination {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
}

.cnc-pagination > li {
}

.cnc-pagination > li > a {
	padding: .4em .5em;
	border: .07em solid rgba(0,0,0, .2);
	font-size: 1em;
	box-sizing: border-box;
}

.cnc-pagination > li > a:hover {
	text-decoration: none;
	background-color: #EFEFEF;
}

.cnc-pagination > li.cnc-selected > a {
	background-color: #009ee0;
	color: white;
}

.cnc-pagination > li.cnc-selected > a:hover {
	background-color: #22ACE6;
}

.cnc-pagination > li + li > a {
	border-left: none;
}

.cnc-pagination > li:first-child > a {
	border-top-left-radius: .3em;
	border-bottom-left-radius: .3em;
}

.cnc-pagination > li:last-child > a {
	border-top-right-radius: .3em;
	border-bottom-right-radius: .3em;
}