.content {
  background-color: #e5e5e5;
}

.conversation__container {
  padding: 22px 22px 200px;
  position: relative;
}
.conversation__container .question,
.conversation__container .answer {
  border-radius: 6px;
  padding: 15px 18px 10px;
  width: 94%;
  display: flex;
  flex-flow: column;
  margin-bottom: 30px;
  background-color: #fff;
}
@media only screen and (min-width: 600px) {
  .conversation__container .question,
  .conversation__container .answer {
    width: 80%;
  }
}
.conversation__container .question h4,
.conversation__container .answer h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #262b30;
  margin-bottom: 10px;
}
.conversation__container .question p,
.conversation__container .answer p {
  font-size: 16px;
  line-height: 1.4;
  color: #4c5560;
  margin-bottom: 10px;
}
.conversation__container .question .date,
.conversation__container .answer .date {
  font-size: 12px;
  line-height: 1.4;
  color: #818d9c;
  align-self: flex-end;
}
.conversation__container .question .attachment-box,
.conversation__container .answer .attachment-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 32px;
  margin-top: 20px;
  background-color: #fff;
  box-shadow: inset 0px -1px 0px #f3f4f7;
  border-radius: 4px;
}
.conversation__container .question .attachment-box p,
.conversation__container .answer .attachment-box p {
  margin: 0 !important;
  display: flex;
  align-items: center;
}
.conversation__container .question .attachment-box p.iconpdf::before,
.conversation__container .answer .attachment-box p.iconpdf::before {
  content: url("../img/ico-pdf.png");
  margin-right: 0.4rem;
}
.conversation__container .question .attachment-box a,
.conversation__container .answer .attachment-box a {
  font-size: 16px;
  color: #007ef6;
  display: flex;
  align-items: center;
}
.conversation__container .question .attachment-box a.icondownload::after,
.conversation__container .answer .attachment-box a.icondownload::after {
  content: url(../img/ico-download.png);
  margin-left: 0.6rem;
  position: relative;
  top: 0.1rem;
}
.conversation__container .question .attachment-box a.icondownload::before,
.conversation__container .answer .attachment-box a.icondownload::before {
  content: "";
  display: none;
}
.conversation__container .question {
  background: #f3f4f7;
  position: relative;
}
.conversation__container .question::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 0 0 24px;
  border-color: transparent transparent transparent #f3f4f7;
  position: absolute;
  right: -16px;
  bottom: 0;
}
.conversation__container .answer {
  background: #d6e5f7;
  align-self: flex-end;
  position: relative;
}
.conversation__container .answer::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 24px 24px;
  border-color: transparent transparent #d6e5f7 transparent;
  position: absolute;
  left: -16px;
  bottom: 0;
}
.conversation__container__fe .question {
  background: #d6e5f7;
  align-self: flex-end;
}
.conversation__container__fe .question::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 24px 24px;
  border-color: transparent transparent #d6e5f7 transparent;
  position: absolute;
  left: -16px;
  bottom: 0;
  right: auto;
}
.conversation__container__fe .answer {
  background: #f3f4f7;
  align-self: flex-start;
}
.conversation__container__fe .answer::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 0 0 24px;
  border-color: transparent transparent transparent #f3f4f7;
  position: absolute;
  right: -16px;
  bottom: 0;
  left: auto;
}
.conversation__container__fe .conversation__reply form fieldset {
  flex-flow: column;
}
.conversation__container__fe .conversation__reply form fieldset textarea {
  flex: 0 1 100%;
  min-height: 130px;
  margin-bottom: 20px;
}
.conversation__container__fe .conversation__reply__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.conversation__container__fe .cont-attach {
  display: flex;
  flex-flow: column;
  margin-bottom: 30px;
}
.conversation__container__fe .cont-attach .cont-attach-title {
  margin-bottom: 16px;
}
.conversation__container__fe .cont-attach .cont-attach-title p {
  font-weight: 600;
  font-size: 16px;
  line-height: 140%;
  color: #0057a7;
}
.conversation__container__fe .cont-attach .cont-attach-title p span {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
}
.conversation__container__fe .cont-attach .choose-file-button {
  background-color: white;
  padding: 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
  box-shadow: 0px -1px 8px 4px #eaeaea;
}
.conversation__container__fe .cont-attach .choose-file-button p {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: #0057a7;
  margin-bottom: 0;
}
.conversation__container__fe .cont-attach .choose-file-button p::after {
  content: url("../img/ico-attach.png");
  margin-left: 8px;
  top: 3px;
  position: relative;
}
.conversation__container__fe .cont-attach .choose-file-text {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #0057a7;
  width: 100%;
  text-align: center;
}
.conversation__dwl {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #007ef6;
}
.conversation__dwl a {
  font-size: 16px;
  color: #007ef6;
  display: flex;
  align-items: center;
}
.conversation__dwl a.icondownload::before {
  content: url(../img/ico-download.png);
  margin-right: 0.6rem;
  position: relative;
  top: 0.1rem;
}
.conversation__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.conversation__title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #262b30;
}
.conversation__detail {
  background: #d6e5f7;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 20px 30px;
  margin-bottom: 20px;
}
.conversation__detail h3 {
  font-weight: bold;
  font-size: 16px;
  line-height: 1.4;
  color: #262b30;
  margin-bottom: 10px;
}
.conversation__detail ul {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
}
@media only screen and (min-width: 980px) {
  .conversation__detail ul {
    flex-flow: row;
  }
}
.conversation__detail ul li {
  display: flex;
  flex-flow: column;
}
.conversation__detail ul li h4 {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  color: #4c5560;
  margin-bottom: 3px;
}
.conversation__detail ul li p {
  font-size: 14px;
  line-height: 1.4;
  color: #4c5560;
}
.conversation__wall {
  display: flex;
  flex-flow: column;
}
.conversation__reply {
  padding: 22px 22px 38px;
  background-color: #fff;
  display: flex;
  flex-flow: column;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
}
.conversation__reply form {
  display: flex;
  margin-bottom: 16px;
}
.conversation__reply form fieldset {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-flow: column;
}
@media only screen and (min-width: 600px) {
  .conversation__reply form fieldset {
    flex-flow: row;
  }
}
.conversation__reply form fieldset textarea {
  flex: 0 1 calc(100% - 216px);
  height: 58px;
  padding: 16px;
  font-size: 16px;
  line-height: 1.4;
  transition: height 0.15s ease-out;
  border-radius: 4px;
}
.conversation__reply form fieldset textarea:focus {
  height: 100px;
  transition: height 0.15s ease-in;
}
.conversation__reply form fieldset button {
  width: 100%;
  height: 56px;
  background: #0057a7;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  border: none;
  font-size: 16px;
  margin-bottom: 10px;
}
@media only screen and (min-width: 600px) {
  .conversation__reply form fieldset button {
    width: 200px;
    align-self: flex-end;
    margin-bottom: 0;
  }
}
.conversation__reply form fieldset legend {
  display: none;
}
.conversation__reply .info__reply {
  font-size: 14px;
  line-height: 1.4;
  color: #818d9c;
}

.conversation__thanks {
  margin-top: 6%;
  padding: 100px 20px 20px;
  background-image: url(../img/ico-thanks.svg);
  background-repeat: no-repeat;
  background-position: top center;
}
.conversation__thanks h4 {
  font-weight: 600;
  font-size: 24px;
  line-height: 46px;
  text-align: center;
  color: #002d57;
  margin-bottom: 30px;
}
.conversation__thanks p {
  font-size: 16px;
  line-height: 2.4;
  text-align: center;
  color: #002d57;
}

.icon-yellow {
  color: yellow;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: orange;
}

.conversation-status {
  background: rgba(0, 126, 246, 0.2);
  border: 1px solid #0057a7;
  box-sizing: border-box;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #0057a7;
  padding: 2px 0px;
  display: block;
  text-align: center;
  width: 120px;
}
.conversation-status.conversation-status-new {
  background: rgba(0, 126, 246, 0.2);
  border: 1px solid #0057a7;
  color: #0057a7;
}
.conversation-status.conversation-status-replied {
  background: rgba(65, 170, 52, 0.2);
  border: 1px solid #00870d;
  color: #00870d;
}
.conversation-status.conversation-status-forwarded {
  background: rgba(3, 139, 170, 0.2);
  border: 1px solid #038baa;
  color: #038baa;
}
.conversation-status.conversation-status-solved {
  background: #f3f4f7;
  border: 1px solid #818d9c;
  color: #818d9c;
}