/* Full page background */
/* Smaller containers like divboxes */
.jobHeader, .jobHeader > .nameAndPropertiesCell > h1 > a {
  color: #344b56;
}

.jobHeader {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #CBDAE1;
}

.jobHeader > .imageCell, .jobHeader > .searchCell, .jobHeader > .detailsCell {
  flex: 0 1 auto;
}

.jobHeader > .imageCell {
  align-self: center;
  box-shadow: 0px 0px 1px 0px rgba(20, 48, 79, 0.4);
  margin-right: 10px;
}

.jobHeader > .imageCell > img {
  display: block;
  border-radius: 2px;
  padding: 2px;
  background-color: white;
  width: 40px;
}

.jobHeader > .nameAndPropertiesCell {
  flex: 1 1 auto;
  padding-right: 10px;
  align-self: center;
}

.jobHeader > .nameAndPropertiesCell > h1 {
  line-height: 20px;
  max-height: 40px;
  padding-bottom: 2px;
  /*https://stackoverflow.com/a/34559614/1325179*/
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.jobHeader > .nameAndPropertiesCell > h1 {
  font-size: 18px;
  font-weight: 450;
}

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

ul.jobProperties > li, ul.jobProperties > li > div {
  display: inline-block;
}

ul.jobProperties > li > span {
  color: #657F8B;
  font-weight: 400;
  padding-right: 4px;
  display: inline-block;
}

.jobHeader > .nameAndPropertiesCell > ul.jobProperties > li:not(:last-child) {
  border-right: 1px solid rgba(52, 75, 86, 0.1019607843);
  margin-right: 5px;
}

.jobHeader > .nameAndPropertiesCell > ul.jobProperties > li > span {
  text-transform: uppercase;
}

ul.jobProperties > li > div {
  color: #344b56;
  font-weight: 450;
}

ul.jobProperties > li:not(:last-child) {
  padding-right: 10px;
}

.dialogContent ul.jobProperties {
  display: table;
  width: 100%;
}

.dialogContent ul.jobProperties > li {
  display: table-row;
}

.dialogContent ul.jobProperties > li > span, .dialogContent ul.jobProperties > li > div {
  display: table-cell;
  padding: 5px;
  border-bottom: 1px solid #E1EBEF;
}

.jobHeader > .searchCell, .jobHeader > .detailsCell {
  align-self: center;
  padding-right: 10px;
}

.jobHeader > .searchCell > .searchInputOuter > .icon {
  position: absolute;
  display: block;
  padding: 9px 0px 0px 12px;
  color: #657F8B;
  font-size: 13px;
}

.jobHeader > .searchCell > .searchInputOuter > input[type=search] {
  padding-left: 32px !important;
  padding-right: 29px !important;
  width: 136px;
  height: 32px;
  background-color: white !important;
}

.jobHeader > .searchCell > .searchInputOuter > button {
  position: absolute;
  margin-left: -30px;
  height: 28px;
  width: 28px;
  margin-top: 2px;
  padding: 0;
  color: white;
  background-color: #2a76f4;
}

.jobHeader > .searchCell > .searchOpener {
  display: none;
}

#jobInformation {
  margin-right: 0;
  margin-top: 0;
  height: 100%;
  max-height: 100%;
  animation: showDialogFromRight 0.3s ease normal;
}

@keyframes showDialogFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
@media (max-width: 920px) {
  .jobHeader > .imageCell, .jobHeader > .nameAndPropertiesCell > ul.jobProperties {
    display: none;
  }
  .jobHeader > .detailsCell > button > .text {
    display: none;
  }
  .jobHeader > .searchCell > .searchInputOuter {
    display: none;
    position: absolute;
  }
  .jobHeader > .searchCell > .searchOpener {
    display: block;
  }
}
@media (max-width: 600px) {
  .dialogContent ul.jobProperties, .dialogContent ul.jobProperties > li, .dialogContent ul.jobProperties > li > span, .dialogContent ul.jobProperties > li > div {
    display: block;
  }
  .dialogContent ul.jobProperties > li > span {
    border-bottom-width: 0;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .dialogContent ul.jobProperties > li > div {
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
}