@charset "utf-8";

html {
	-webkit-tap-highlight-color: rgba(0%, 0%, 0%, 0.5);
}

/* Space out content a bit */
body {
	padding-top: 20px;
	padding-bottom: 0px;
	font-size: 9.4pt;
}

body.dark {
	background: hsl(0, 0%, 20%);
	color: #FFF;
}

body.dark .modal-content {
	background-color: hsl(0, 0%, 40%);
}

body.dark .modal-content .btn-default {
	border-color: transparent;
}

body.dark .modal-content .modal-footer, body.dark .modal-content .modal-header {
	border-color: hsl(0, 0%, 50%)
}

body.dark a:hover, body.dark a:focus {
	color: inherit;
}

.modal.modal-stretch .modal-dialog {
  height: calc(100vh - 20px);
}

.modal.modal-stretch .modal-dialog > .modal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.modal.modal-stretch .modal-dialog > .modal-content > .modal-body {
  flex: 1
}

body > .msg.msg-notification {
	position: fixed;
	top: 20%;
	left: 0;
	width: 80%;
	overflow: hidden;
	white-space: pre-line;
	margin: auto 10%;
	background: hsl(200, 65%, 90%);
	color: hsl(199, 48%, 37%);
	padding: 1cm;
	text-align: center;
	opacity: 1.0;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	z-index: 2000;
	box-shadow: 0 5px 19px hsla(190, 35%, 24%, 0.5);

	user-select: none;
}

body > .msg.ng-hide {
	display: block !important;
	opacity: 0.0;
	height: 0;
	padding-top: 0;
	padding-bottom: 0;
	pointer-events: none;
}

body > .msg[data-next]:after {
	content: attr(data-next);
	display: block;
	opacity: 0.2;
	height: 0;
}

body > .msg[data-length]:before {
	content: attr(data-length);
	display: block;
	float: left;
}

body > .msg .close {
	position: absolute;
	top: 5px;
	right: 10px;
	color: #ffffff;
	text-shadow: none;
	opacity: 1;
	font-size: 30px;
}

.navbar-fixed-top .navbar-brand {
	white-space: nowrap;
	max-width: -webkit-calc(100vw - 50px);
	max-width: calc(100vw - 50px);
	overflow: hidden;
	text-overflow: ellipsis;

	padding-top: 10px;
	padding-bottom: 10px;
}

.navbar-brand .glyphicon {
	vertical-align: top;
}

.navbar-fixed-top .navbar-text {
	margin-top: 14px;
	margin-bottom: 10px;
}

.navbar > .container .navbar-brand + .navbar-brand {
	padding-left: 0px;
  margin-left: 0;
}

.navbar-fixed-top + .navbar-fixed-top-space {
	height: 45px;
}

@media (max-width: 668px) {
	.navbar-fixed-top + .navbar-fixed-top-space {
		height: 35px;
	}
}

.navbar-fixed-top + .navbar-fixed-top-space.double {
	height: 70px;
}

.navbar-fixed-bottom + .navbar-fixed-bottom-space {
	height: 40px;
}

@media (max-width: 668px) {
	.nav > li > a {
		position: relative;
		display: block;
		padding: 10px 12px;
	}
}

@media (max-width: 360px) {
	.navbar-nav > li > a {
		padding-left: 10px;
		padding-right: 10px;
	}
}

.loader {
	z-index: 9999999;
	position: fixed;
	top: 30%;
	left: 50%;
	border: 0;
	background: #000 url(../images/ajax-loader.gif);
	background-size: 46px 46px;
	margin-left: -18px;
	margin-top: -18px;
	display: block;
	width: 46px;
	height: 46px;
	padding: 1px;
	-webkit-border-radius: 36px;
	border-radius: 36px;

	visibility: visible;
	opacity: .18;
	transition: opacity 1s linear;
	pointer-events: none;
}

.loader.ng-hide {
	display: block !important;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 1s, opacity 1s linear;
}

input.ng-invalid.ng-dirty {
	color: hsl(1, 44%, 46%);
}

input.ng-invalid.ng-invalid-min, input.ng-invalid.ng-invalid-max {
	background-color: hsl(0, 43%, 91%);
	color: hsl(1, 44%, 46%);
}

/* Android <= 4.3 CSS bug */
input[type=number]::-webkit-outer-spin-button {
	margin: 0;
}

input[type="radio"],
input[type="checkbox"] {
	margin-top: 1px;
}

select.form-control {
	display: block;
	width: 100%;
	height: 34px;
	font-size: 14px;
	line-height: 1.428571429;
	vertical-align: middle;

	background-position: right 50%;
	background-repeat: no-repeat;
	background-size: 0;
	-webkit-background-size: auto 38%;
	background-origin: content-box;
	/*background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNTMxLjc0IiBoZWlnaHQ9IjQ2MC41IiB2aWV3Qm94PSIwIDAgNTMxLjc0IDQ2MC41IiBvdmVyZmxvdz0idmlzaWJsZSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTMxLjc0IDQ2MC41IiB4bWw6c3BhY2U9InByZXNlcnZlIiBpZD0ic3ZnMiIgaW5rc2NhcGU6dmVyc2lvbj0iMC40OC40IHI5OTM5IiBzb2RpcG9kaTpkb2NuYW1lPSJlLnN2ZyI+PG1ldGFkYXRhIGlkPSJtZXRhZGF0YTEwIj48cmRmOlJERj48Y2M6V29yayByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGRlZnMgaWQ9ImRlZnM4IiAvPjxzb2RpcG9kaTpuYW1lZHZpZXcgcGFnZWNvbG9yPSIjZmZmZmZmIiBib3JkZXJjb2xvcj0iIzY2NjY2NiIgYm9yZGVyb3BhY2l0eT0iMSIgb2JqZWN0dG9sZXJhbmNlPSIxMCIgZ3JpZHRvbGVyYW5jZT0iMTAiIGd1aWRldG9sZXJhbmNlPSIxMCIgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiIGlua3NjYXBlOndpbmRvdy13aWR0aD0iNjQwIiBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI0ODAiIGlkPSJuYW1lZHZpZXc2IiBzaG93Z3JpZD0iZmFsc2UiIGlua3NjYXBlOnpvb209IjAuNTEyNDg2NDMiIGlua3NjYXBlOmN4PSIyNjUuODciIGlua3NjYXBlOmN5PSIyMzAuMjUiIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzIiIC8+PHBvbHlnb24gc3Ryb2tlPSIjRkZGRkZGIiBwb2ludHM9IjUzMC44NzQsMC41IDI2NS44Nyw0NTkuNSAwLjg2NiwwLjUgIiBpZD0icG9seWdvbjQiIHN0eWxlPSJzdHJva2U6bm9uZTtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjEiIC8+PC9zdmc+");*/
}

.navbar-inverse select.form-control {
	-webkit-appearance: listbox;
	background-position: right 50%;
	background-repeat: no-repeat;
	background-size: 0;
	-webkit-background-size: auto 38%;
	background-origin: content-box;
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNTMxLjc0IiBoZWlnaHQ9IjQ2MC41IiB2aWV3Qm94PSIwIDAgNTMxLjc0IDQ2MC41IiBvdmVyZmxvdz0idmlzaWJsZSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTMxLjc0IDQ2MC41IiB4bWw6c3BhY2U9InByZXNlcnZlIiBpZD0ic3ZnMiIgaW5rc2NhcGU6dmVyc2lvbj0iMC40OC40IHI5OTM5IiBzb2RpcG9kaTpkb2NuYW1lPSJlLnN2ZyI+PG1ldGFkYXRhIGlkPSJtZXRhZGF0YTEwIj48cmRmOlJERj48Y2M6V29yayByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGRlZnMgaWQ9ImRlZnM4IiAvPjxzb2RpcG9kaTpuYW1lZHZpZXcgcGFnZWNvbG9yPSIjZmZmZmZmIiBib3JkZXJjb2xvcj0iIzY2NjY2NiIgYm9yZGVyb3BhY2l0eT0iMSIgb2JqZWN0dG9sZXJhbmNlPSIxMCIgZ3JpZHRvbGVyYW5jZT0iMTAiIGd1aWRldG9sZXJhbmNlPSIxMCIgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiIGlua3NjYXBlOndpbmRvdy13aWR0aD0iNjQwIiBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI0ODAiIGlkPSJuYW1lZHZpZXc2IiBzaG93Z3JpZD0iZmFsc2UiIGlua3NjYXBlOnpvb209IjAuNTEyNDg2NDMiIGlua3NjYXBlOmN4PSIyNjUuODciIGlua3NjYXBlOmN5PSIyMzAuMjUiIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzIiIC8+PHBvbHlnb24gc3Ryb2tlPSIjRkZGRkZGIiBwb2ludHM9IjUzMC44NzQsMC41IDI2NS44Nyw0NTkuNSAwLjg2NiwwLjUgIiBpZD0icG9seWdvbjQiIHN0eWxlPSJzdHJva2U6bm9uZTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjEiIC8+PC9zdmc+");
}

.form-group:last-child,
.well p:last-child,
.panel p:last-child, .panel h3:last-child,
.alert p:last-child,
.modal-content p:last-child,
.modal-footer p:last-child,
.nav p:last-child {
  margin-bottom: 0px;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
	padding-left: 15px;
	padding-right: 15px;
}

/* Custom page header */
.header {
	border-bottom: 1px solid #e5e5e5;
}

/* Make the masthead heading the same height as the navigation */
.header h3 {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 40px;
	padding-bottom: 19px;
}

/* Custom page footer */
.footer {
	padding-top: 19px;
	color: #777;
	border-top: 1px solid #e5e5e5;
}

/* Customize container */
@media (min-width: 768px) {
	.container {
		max-width: 730px;
	}
}
.container-narrow > hr {
	margin: 30px 0;
}

.nav-pills > li > a {
  font-size: 18px;
  line-height: 1.33;
  padding: 10px 16px;
  border-radius: 0px;
}

.nav-pills > li > a .badge {
  float: right;
}

.nav-pills > li.active.disabled {
  opacity: 0.25;
}

.nav-stacked > li.active + li.active {
  margin-top: 10px;
}

.panel .panel-body > :first-child {
	margin-top: 0;
}

.nav-pills .badge {
	min-width: 1.6em;
	font-size: inherit;
	padding: 0.15em 0.6em;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
	/* Remove the padding we set earlier */
	.header,
	.marketing,
	.footer {
		padding-left: 0;
		padding-right: 0;
	}

	/* Space out the masthead */
	.header {
		margin-bottom: 30px;
	}

	/* Remove the bottom border on the jumbotron for visual effect */
	.jumbotron {
		border-bottom: 0;
	}
}

.list-group-item > label:last-child {
	margin-bottom: 0;
}

.list-group > .doc {
	min-height: 60px;
}

.list-group > .doc.confirmed {
	background-color: hsl(49, 0%, 95%);
}

.list-group > .doc.premium {
	background-color: hsl(49, 0%, 95%);
}

.list-group .list-group-item > .btn_main {
	display: block;
	margin: -10px -15px;
	padding: 10px 15px;
}

.list-group .list-group-item > .btn_main.ng-click-active {
	background-color: rgba(0, 0, 0, 0.1);
}

.list-group > .doc.DOCTOR + .doc:not(.DOCTOR),
.list-group > .doc:not(.DOCTOR) + .doc.DOCTOR,
.list-group > .doc.MANUAL + .doc:not(.MANUAL),
.list-group > .doc:not(.MANUAL) + .doc.MANUAL {
	margin-top: 10px;
}

.list_my_doctors.list-group {
	margin: -15px -15px 20px;
}

.list_my_doctors.list-group > .list-group-item:first-child {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}

a.btn_main:hover {
	color: inherit;
	text-decoration: inherit;
}

/* willkommensseite titel */
@media (max-width: 500px) {
  #title {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

#title > .badge {
  border-radius: 0;
  transition: 1s;
}

#title > .badge > .glyphicon {
  vertical-align: -11%;
}

#title > .badge > .number {
  transition: 1s;
  display: inline-block;
  max-width: 2em;
  margin-left: 0.2em;
}

#title > .badge > .number:empty {
  max-width: 0em;
  margin-left: 0em;
}

#title > .badge.unread {
  background: hsl(350, 90%, 30%);
}

#page_doc .categories > .category:after {
	content: '·';
}

#page_doc .categories > .category:last-child::after {
	content: ''
}

#box_praise .glyphicon-star, #box_praise .glyphicon-star-empty {
	transition: 0.5s;
	color: hsl(42, 74%, 49%);
	text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.20);
}

#box_praise .glyphicon-star-empty {
	color: hsl(42, 44%, 79%);
	text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.05);
}

#box_praise .ng-click-active .glyphicon-star-empty, #box_praise .ng-click-active .glyphicon-star {
	-webkit-transform: scale(2.9);
	transform: scale(2.9);
}

.glow {
	text-shadow: 0px 0px 10px hsla(28, 83%, 100%, 1), 0px 0px 5px hsla(28, 83%, 100%, 1), 0px 0px 4px hsla(28, 83%, 100%, 1);
}

#vitalwerte .vitalwert:not(.btn-warning)[data-type="pH-Wert Urintest"] {
	background-color: hsla(45, 60%, 70%, 0.2);
}

#vitalwerte .vitalwert:not(.btn-warning)[data-type="pH-Wert Hauttest"] {
	background-color: hsla(28, 53%, 83%, 0.2);
}

#vitalwerte .vitalwert:not(.btn-warning)[data-type="pH-Wert Bluttest"] {
	background-color: hsla(355, 98%, 22%, 0.2)
}

.well > h4:first-child, .well > h5:first-child, .well > .pull-right:first-child + h4, .well > .pull-right:first-child + h5 {
	margin-top: 0;
}

.well > :last-child {
	margin-bottom: 0;
}

.btn-block {
	white-space: normal;
}

.btn-brand {
  color: #ffffff;
  background-color:  hsl(333, 99%, 27%);
  border-color: hsl(333, 99%, 27%);
  background-color: var(--primary, hsl(333, 99%, 27%));
  border-color:var(--primary, hsl(333, 99%, 27%));
}

.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active,
.btn-brand.active,
.open .dropdown-toggle.btn-brand {
  color: #ffffff;
  background-color: hsl(333, 99%, 20%);
  border-color: hsl(333, 99%, 20%)
}

.btn-brand:active,
.btn-brand.active,
.open .dropdown-toggle.btn-brand {
  background-image: none;
}

.btn-brand.disabled,
.btn-brand[disabled],
fieldset[disabled] .btn-brand,
.btn-brand.disabled:hover,
.btn-brand[disabled]:hover,
fieldset[disabled] .btn-brand:hover,
.btn-brand.disabled:focus,
.btn-brand[disabled]:focus,
fieldset[disabled] .btn-brand:focus,
.btn-brand.disabled:active,
.btn-brand[disabled]:active,
fieldset[disabled] .btn-brand:active,
.btn-brand.disabled.active,
.btn-brand[disabled].active,
fieldset[disabled] .btn-brand.active {
  background-color: hsl(333, 19%, 27%);
  border-color: hsl(333, 19%, 27%);
}

.btn-brand .badge {
  color: hsl(333, 99%, 37%);
  background-color: #fff;
}



a#btn_new_item, a.btn_new_item, span#btn_new_item, span.btn_new_item {
	line-height: 43px;
}

#btn_new_item, .btn_new_item {
	height: 46px;
	z-index: 1;
	width: 46px;
	border-radius: 50%;
	box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.14), 0 4px 6px hsla(0, 0%, 0%, 0.1);
	outline: none;
	transition: 0.5s;
}

#btn_new_item:hover, .btn_new_item:hover {
	box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.14), 0 4px 12px hsla(0, 0%, 0%, 0.38);
}

#navbar_time .btn {
	padding-left: 7px;
	padding-right: 7px;
}

.btn > .thumbnail {
	float: left;
	margin: 0 5px 0 5px;
	padding: 0;
	width: 72px;
	max-width: 30%;
}

img.fullscreen {
	position: fixed;
	z-index: 2000;
	top: 10%;
	left: 5%;
	width: auto;
	max-width: 90%;
	height: auto;
	max-height: 88%;
	box-shadow: 0 1ex 7ex rgba(0, 0, 0, 1);
}

/* flex navbar */

.nav.navbar-flex {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.nav.navbar-flex:before {
	display: none;
}

.nav.navbar-flex > li {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 0 1 auto;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	-webkit-align-self: stretch;
	-ms-flex-item-align: stretch;
	align-self: stretch;
}

/* horizontal dl's */
@media (min-width: 320px) {
	.dl-horizontal dt {
		width: 30%;
		float: left;
		overflow: hidden;
		clear: left;
		text-align: right;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.dl-horizontal dd {
		margin-left: 35%;
		margin-left: -webkit-calc(30% + 20px);
		margin-left: calc(30% + 20px);
	}
}

@media (min-width: 421px) {
	/*.hidden-xxs {
		display: block;
	  }*/
	.visible-xxs {
		display: none !important;
	}
}

@media (max-width: 420px) {
	.hidden-xxs {
		display: none !important;
	}

	/*.visible-xxs {
		display: block;
	  }*/
}

.listview {
	list-style: none;
	margin: 0;
	padding: 0;
}

.listview .lv-item {
	margin: 0 0 -1px 0;
	padding: 10px 15px;
}

.listview .lv-item:nth-child(even) {
	background-color: hsla(0, 0%, 50%, 0.05);
}

.listview .lv-item.ng-leave {
	display: none;
}

.listview .lv-item.active {
	color: hsl(0, 100%, 100%);
	background-color: hsl(195, 52%, 66%);
	border-color: hsl(195, 52%, 61%);
}

.listview .lv-item.active .lv-small, .listview .lv-item.active a {
	color: inherit;
}

.listview .lv-item.unread {
	font-weight: bold;
	/*border-left: 4px solid hsl(0, 98%, 34%);*/
}
.listview .lv-item.unread .list-group-item-heading {
	font-weight: 600;
}
.listview .lv-item.unread .list-group-item-heading:before {
	content: '● ';
	color: hsl(0, 98%, 34%);
	vertical-align: text-top;
}

.listview .lv-item.new-appointment .thread-symbol:after {
	content: '★';
	vertical-align: sub;
	font-size: 50%;
	display: inline-block;
	margin-right: -0.9em;
}

.listview .lv-item.message-type-OUT,
.listview .lv-item.message-type-IN,
.listview .lv-item.message-type-SYSTEM{
  position: relative;
  margin: 10px;
  padding: 5px 10px;
  text-align: left;
  background-color: hsl(0, 0%, 90%);
  background-clip: padding-box;
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  width: 80%;
}
.listview .lv-item.message-type-SYSTEM{
  background-color: hsl(0, 50%, 90%);
  width: 90%;
  margin: 10px auto;
}
.listview .lv-item.message-type-IN {
  margin-left: auto;
  /*text-align: right;*/
  background-color: hsl(95, 50%, 90%);
  border: 1px solid hsl(95, 50%, 90%);
}
.listview .lv-item.message-type-OUT {
  margin-right: auto;
  /*text-align: left;*/
  background-color: hsl(0, 0%, 90%);
  border: 1px solid hsla(0, 0%, 0%, 0.1);
}

.listview .lv-item.message-type-OUT:after,
.listview .lv-item.message-type-IN:after {
  content: ' ';
  border-bottom-color: rgba(0, 0, 0, 0);
  border-bottom-style: solid;
  border-bottom-width: 11px;
  border-left-color: hsl(95, 50%, 90%);
  border-left-style: solid;
  border-left-width: 11px;
  border-right-color: rgba(0, 0, 0, 0);
  border-right-style: solid;
  border-right-width: 0px;
  border-top-color: rgba(0, 0, 0, 0);
  border-top-style: solid;
  border-top-width: 11px;
  box-sizing: border-box;
  display: block;
  height: 22px;
  right: -11px;
  margin-top: -11px;
  position: absolute;
  top: 16px;
  white-space: normal;
  width: 11px;
}
.listview .lv-item.message-type-OUT:after {
  border-bottom-color: rgba(0, 0, 0, 0);
  border-bottom-style: solid;
  border-bottom-width: 11px;
  border-left-color: rgba(0, 0, 0, 0);
  border-left-style: solid;
  border-left-width: 0px;
  border-right-color: hsl(0, 0%, 90%);
  border-right-style: solid;
  border-right-width: 11px;

  border-top-color: rgba(0, 0, 0, 0);
  border-top-style: solid;
  border-top-width: 11px;
  right: auto;
  left: -11px;
}

.listview .lv-item .lv-title {
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.listview .lv-item .lv-small {
	font-size: 12px;
	color: hsl(0, 0%, 36%);
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	width: 100%;
}

.listview .lv-item .content-preview {
	display: table;
	text-decoration: none;
}

.listview .lv-item .content-preview .date {
	font-weight: normal;
}

/* media classes from bs 3.3*/

.media {
	margin-top: 10px;
}

.media:first-child {
	margin-top: 0;
}

.media,
.media-body {
	overflow: hidden;
	zoom: 1;
}

.media-body {
	width: 10000px;
}

.media-object {
	display: block;
}

.media-object.img-thumbnail {
	max-width: none;
}

.media-right,
.media > .pull-right {
	padding-left: 10px;
}

.media-left,
.media > .pull-left {
	padding-right: 10px;
}

.media-left,
.media-right,
.media-body {
	display: table-cell;
	vertical-align: top;
}

.media-middle {
	vertical-align: middle;
}

.media-bottom {
	vertical-align: bottom;
}

.media-heading {
	margin-top: 0;
	margin-bottom: 5px;
}

.media-list {
	padding-left: 0;
	list-style: none;
}