body {
  background-color: f3f3f3;
}
.main-jobadd {
  margin-top: 150px;
}

.row-jobadd {
  margin: 0 auto;
  /* display: flex;
  justify-content: center;
  align-items: flex-start; */
  display: grid;
  grid-template-columns: 25% 75%;
  grid-template-rows: repeat(5, auto);
  grid-template-areas:
    "sidebar small-grid"
    "sidebar add-info"
    "sidebar documentation"
    "sidebar paragraph"
    "sidebar button";
  width: 70%;
  grid-row-gap: 30px;
  grid-column-gap: 30px;
  margin-bottom: 150px;
}

/* SIDEBAR */
.column-sidebar {
  grid-area: sidebar;
  /* flex: 25%; */
  /* margin: 0px auto; */
  margin-right: 30px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  padding: 0 30px;
  width: 90%;
  height: 33%;
}

.sticky-bar {
  position: -webkit-sticky;
  position: sticky;
  top: 150px !important;
  z-index: 1;
  left: 0px;
  /* width: 90%;
  height: 60vh; */
  background-color: #fff;
  -webkit-box-shadow: 0px 4px 12px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 4px 10px 5px rgba(146, 161, 176, 0.15);
  /* box-shadow: 0 8px 4px rgba(146, 161, 176, 0.15); */
  /* margin-top: 150px; */
}

.column-sidebar h3 {
  text-align: center;
  padding: 20px 0;
  color: #233771;
}

.description {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  margin-left: 30px;
}
.description i,
h4 {
  color: #233771;
}

.description p {
  font-size: 14px;
  margin-left: 25px;
}

.icon-title {
  display: flex;
  /* flex-direction: column; */
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: 10px;
}

.icon-title h5,
i {
  color: #233771;
}

.description p {
  color: gray;
}

/* MAIN */
.column-input {
  grid-area: small-grid;
}

.contact__input {
  border: 1px solid #233771;
}

.info-title {
  padding: 15px 0;
  color: #233771;
}

::placeholder {
  font-weight: 300;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "first last"
    "email confirm"
    "tel country"
    "address address"
    "post city";
  grid-gap: 15px;
}

.input-firstname {
  grid-area: first;
}
.input-lastname {
  grid-area: last;
}
.input-email {
  grid-area: email;
}
.input-conf-email {
  grid-area: confirm;
}
.input-tel {
  grid-area: tel;
}
.input-country {
  grid-area: country;
}
.input-address {
  grid-area: address;
}
.input-postcode {
  grid-area: post;
}
.input-city {
  grid-area: city;
}
.row-jobadd-info {
  grid-area: add-info;
}

.row-jobadd-documentation {
  grid-area: documentation;
}

.paragraph {
  grid-area: paragraph;
}
.paragraph h3 {
  color: #233771;
}

.column-information {
  display: flex;
  flex-direction: column;
}

/* .information-grid {
  display: flex;
} */

.input-firstnam {
  padding-right: 15px;
}

.documentation-grid {
  display: grid !important;
  grid-template-columns: 60% 40%;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "text upload"
    "text upload"
    "text upload";
  grid-gap: 15px;
}

.docu-text {
  grid-area: text;
  display: flex;
  align-items: center;
}

.docu-upload {
  grid-area: upload;
  display: flex;
  flex-direction: column;
}

input[type="file"]::file-selector-button {
  margin-top: 15px;
  padding: 15px;
  line-height: 10px;
  border: 1px solid #233771;
  height: 40px;
  width: auto;
  border-radius: 30px;
  background-color: #fff;
  color: #233771;
}

input[type="file"]::file-selector-button:hover {
  background-color: #233771;
  color: #fff;
}

input[type="submit"] {
  margin-top: 15px;
  padding: 15px;
  line-height: 10px;
  border: 1px solid #233771;
  height: 40px;
  width: auto;
  border-radius: 30px;
  background-color: #233771;
  color: #fff;
}

input[type="submit"]:hover {
  background-color: #fff;
  color: #233771;
}

.apply-now-button {
  grid-area: button;
  margin-top: 15px;
  padding: 15px;
  line-height: 10px;
  width: 160px;
  height: 40px;
  border: 1px solid #233771;
  background: #233771;
  color: #fff;
  border-radius: 30px;
  transition: all 200ms ease;
  box-shadow: rgba(37, 39, 89, 0.08) 0px 8px 8px 0;
  cursor: pointer;
  -webkit-box-shadow: 0px 8px 10px -2px rgba(0, 0, 0, 0.26);
  box-shadow: 0px 8px 10px -2px rgba(0, 0, 0, 0.26);
  object-fit: cover;
}

.apply-now-button:hover {
  background: #fff;
  color: #233771;
  border: 1px solid #fff;
}

.sticky-bar hr {
  width: 100%;
  height: 1px;
  color: gray;
  visibility: visible;
}

@media only screen and (max-width: 800px) {
  .main-jobadd {
    margin: 100px auto;
  }

  .row-jobadd {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
    grid-template-areas:
      "side"
      "small-grid"
      "add-info"
      "documentation"
      "paragraph"
      "button";
    width: 80%;
    grid-row-gap: 30px;
    margin-bottom: 150px;
  }

  .column-sidebar {
    grid-area: side;
    margin-right: 0;
    margin: 0;
    border-radius: 0;
    /* margin-bottom: 30px; */
    height: auto;
  }

  .list {
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-gap: 30px;
    align-self: center;
  }

  .details {
    padding-bottom: 20px;
  }

  .details hr {
    width: 100%;
  }

  .description {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    margin: 0 auto;
  }

  .description > p {
    margin-left: 0;
  }

  .description i {
    display: none;
  }

  .sticky-bar {
    position: static;
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 0 rgba(146, 161, 176, 0.15);
  }

  .info-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, 1fr);
    grid-template-areas:
      "first"
      "last"
      "email"
      "confirm"
      "tel"
      "country"
      "address"
      "post"
      "city";
    grid-gap: 15px;
  }

  .documentation-grid {
    display: flex !important;
    flex-direction: column;
    height: fit-content;
    row-gap: 30px;
  }
  .row-jobadd-documentation {
    overflow-x: auto;
  }
}