:root {
	--input-focus-color: #fcfcfc;
}
.Input {
	border: none;
	outline: none;
	padding: 16px 16px;
	border-bottom: 1px solid var(--border-color);
	margin-right: 16px;
	font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
}
.Comments__container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 780px;
  margin: 0 auto;
}
.Comments__container .Total__count {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 1rem;
	text-transform: uppercase;
	font-size: 1.2rem;
	font-weight: 500;
}
.Total__count-number {
	margin-right: 0.5rem;
}
.Comments__container .Input__group {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	width: 100%;
}
.Input__group .Input__icon {
	font-weight: normal;
	flex-grow: auto;
	width: 18px;
	height: 18px;
	margin-right: 0.5rem;
}
.Comments__container .Input__group .Input {
	flex-grow: 1;
	max-width: 100%;
	font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
	box-shadow: none;
	outline: none;
	border-bottom: 1px solid #eaeaea;
}
.Comments__container .Input__group .Input:focus {
	background: var(--input-focus-color);
}
/* Comments list */
.Comments__container .Comments__list {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.Comments__container .Comments__list .Item {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	margin-top: 1rem;
}
.Comments__container .Comments__list .Item .Message__content {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: start;
  align-items: center;
	margin-top: 0.5rem;
}
.Message__content .Message__icon {
	width: 18px;
	height: 18px;
}
.Message__content .Message__text {
	font-size: 16px;
	flex-grow: 1;
	padding-left: 1rem;
}
.Message__text-message {
	font-size: 1rem;
	font-weight: 400;
	line-height: 2rem;
}
.Message__content-avatar {
		background: #ccc;
    padding: 5px 11px;
    border-radius: 100%;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    /* background: transparent; */
    overflow: hidden;
    background: #e4e5e7;
    color: #8c9196;
    font-size: 16px;
    font-weight: 400;
    line-height: 2rem;
    text-anchor: middle;
    margin-bottom: 0.1rem;
}
.Message__text .Message__text-date {
	font-size: .7rem;
  color: #999;
  line-height: 1.8rem;
  font-weight: 400;
}
.Message__text-user {
	white-space: nowrap;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8rem;
}

.btn-icon .icon {
	width: 2.3rem;
	height: 2.3rem;
	display: inline-block;
	margin-right: 2px;
}
/* .list-item:hover {
	border-color: #5195b7;
} */

.Item .btn-group {
	display: flex;
	flex-direction: row;
	width: 100%;
  justify-content: flex-start;
	padding: 5px;
}

.list-item .message .icon {
	margin-right: 0.5rem;
}
.list-item .btn-group .btn-icon {
	padding: 4px;
}
.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	background: none;
	border: none;
	outline: none;
	box-shadow: none;
	font-weight: normal;
	background: #111;
	color: #fff;
	padding: 5px;
	margin: 0;
}
.btn-icon {
	display: flex;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	background: none;
	border: none;
	outline: none;
	box-shadow: none;
	font-weight: 500;
	font-size: 13px;
	padding: 0;
	margin: 0;
	padding: 4px;
	margin-right: 0.7rem;
}
.btn-icon .icon {
	width: 1.2rem;
	height: 1.2rem;
}
.reply-item {
	width: 100%;
  /* padding-left: 2rem; */
  /* border-top: 1px solid #eaeaea; */
  margin-top: 0px;
  padding: 0px;
  padding-left: 2rem;
  /* background: #f1f1f1; */
  margin-top: 0px!important;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
  border-bottom: none !important;
}
.reply-item .message {
	padding: 1rem;
	margin-bottom: 0px;
}
.customer {
	margin-right: 0.5rem;
	background: #111;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	padding: 3px;
}
.date-label {
	font-size: 10px;
	font-weight: normal;
}
.customer icon {
	margin-right: 0px;
}
.c-red {
	color: red;
}

.Reply__to {
	display: flex;
	font-size: 14px;
	width: 100%;
}

.Reply__to p {
	display: flex;
	justify-content: start;
	width: 100%;
	margin: 0px;
}

.Reply__to p > span {
	display: inline-block;
  font-weight: bold;
  margin-left: 5px;
	width: 20%;
  overflow: hidden;
  text-overflow: ellipsis;
  /* width: 100px; */
  content: azure;
  /* height: 10px; */
  white-space: nowrap;
}

.more-actions {
	width: 100%;
  display: flex;
  justify-content: flex-start;
  padding: 1rem;
	padding-left: 0px;
  font-size: 16px;
}

.more-actions .btn-icon {
	margin-right: 5px !important;
}

.Button {
	display: flex;
	justify-content: center;
	align-items: center;
	background: none;
	border: none;
	outline: none;
	box-shadow: none;
	font-weight: normal;
	padding: .7rem 2rem;
	margin: 0;
}
.Button--primary {
	background: #111;
	color: #fff;
}

@media screen and (max-width: 699px) {
	.Button--primary {
		padding: .2rem 0.7rem !important;
	}
}