#concern-header {
    align-items: center;
    border-bottom: solid lightgray 1px;
    display: flex;
    position: relative;
}

#concern-icon {
    padding: 0.8em;
    margin-bottom: 0.5em;
}

#concern-title {
    padding-left: 0;
}

#helpContainer {
  display: inline-block;
  float: right;
  padding: 1em;
}

.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
button, input {
    line-height: normal;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

inputfile-1 + label {
    color: var(--highlight-color);
    background-color: var(--back-color);

}

.inputfile-1 + label span {
  margin-left: 0.5em;
}

.inputfile + label {
  max-width: 80%;
  font-size: 1.25rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  padding: 0.625rem 1.25rem;
}

svg:not(:root) {
    overflow: hidden;
    fill: var(--text-color);;
}

.inputfile-1 + label {
  color: var(--highlight-color);
  background-color:var(--back-color);
}

.button:hover {
  color: black;
}

.button {
  padding: 0.5em 1em;
  color: #444;
  margin: 0.5em;
  cursor: pointer;
}

.concern div {
  margin-bottom: 0.5em;
}

.concern input :not(.button){
  width: 180px;
}

.concern article section {
  border-bottom:1px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.concern .page h1 {
    -webkit-padding-end: 24px;
    color: #333;
    font-size: 120%;
    margin: 0;
    padding: 14px 17px 14px;
    text-shadow: white 0 1px 2px;
    user-select: none;
}

#contactContainer {
    display: -webkit-flex;
    display: flex;
    /* min-width:770px; */
    justify-content:flex-start;
}

.contact {
    display: inline-flex;
    background-color: var(--back-color);
    min-width: 100px;
    max-width: 100px;
    height: 90px;
    display: flex;
    flex-direction: column;
    padding: 5px;
    margin: 0;
    cursor: pointer;
}

.imageContactClicked{
  border: 4px solid var(--selected-color);
}

.contact h2 {
  margin: 0 1em 0 0;
  color: var(--highlight-color);
  text-align: center;
}
.contact div.contact-details {
  margin-left: 0.8em;
  padding-right: 0.4em;
  justify-content: center;
  font-size: x-small;
}

.contact div.contact-details h2 {
  text-overflow: ellipsis;
  overflow:hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
}

.contact div {
  margin: 0;
  color: var(--text-color)
}
.contact img {
  margin: 5px;
  display: flex;
  width: 78px;
}
.contact div {
  display: flex;
  flex-direction: column;
}

textarea:focus, input:focus{
  outline: none;
}

#charCount {
  float: right;
  padding: 0.1rem 0 0 0;
  font-size: 0.875rem;
}