/* Set a global/generic font */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

* {
  font-family: "Inter", sans-serif;
}

body {
  background: #fffbec;
  background: -moz-linear-gradient(top, #fffbec 0%, #a1bad2 15%);
  background: -webkit-linear-gradient(top, #fffbec 0%, #a1bad2 15%);
  background: linear-gradient(to bottom, #a1bad2 0%, #fffbec 15%);
}

h2 {
  font-weight: 300;
  text-align: center;
}

h3 {
  font-weight: 500;
  margin: 0 0 0 0;
}

p {
  margin: 0 0 0 0;
}

hr {
  border: 1px solid black;
  margin: 4% 0 4% 0;
}

/*Style the header, partly ChatGPT*/
.header {
    display: flex;
    justify-content: center;
    align-items: center; 
}
.header_img {
    width: 200px; 
    height: auto; 
	
}

/* Style the form */
form {
  margin: 100px auto;
  padding: 50px;
  width: 25%;
  min-width: 300px;
}

/* Style the form content */
.form-content {
  overflow: hidden;
  clear: both;
}

/* Style the fieldsets */
fieldset {
  background-color: #d9d9d9;
}

/* Style the input fields */
button,
datalist,
fieldset,
input,
legend,
optgroup,
option,
output,
select,
textarea {
  padding: 10px;
  width: 100%;
  font-size: 1em;
  font-family: "Inter", sans-serif;
  border-radius: 10px;
  background: #d9d9d9;
}

input {
  margin: -15px 0 0 0;
}

/* Style the labels */
label {
  font-size: 1em;
  font-family: "Inter", sans-serif;
}

input[type="radio"] {
  width: 5%;
  margin: 0 5%;
}

.back-button {
  float: left;
  width: 40%;
  margin: 0;
}

.next-button {
  float: right;
  color: #ffffff;
  background-color: #980000;
  border: 1px solid #ffffff;
  width: 40%;
  margin: 0;
}

.button_link {
  display: inline-block;
  color: #ffffff;
  background-color: #980000;
  border: 1px solid #ffffff;
  width: 93%;
  margin: 5% 0 5% 0;
  padding: 10px;
  font-size: 1em;
  font-family: "Inter", sans-serif;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border-radius: 10px;
}

/* Style the error messages */
.error-text {
  color: #f00;
}

/* Style the header */
.header {
  color: #00c;
}

/* Style the footer mihilfe ChatGPT*/
.footer {
  display: flex; 
  justify-content: space-around; 
  background-color: #d9d9d9;
  padding: 20px; 
}

.footer .section {
  flex: 1; 
  padding: 10px; 
  text-align: center; 
}

.textintro img {
  width: 20%;
  place-items: center; /*??*/
}

#measurements {
  color: #980000;
}

.progress-bar {
  display: table;
  width: 100%;
  table-layout: fixed;
  position: relative;

  .step {
    display: table-cell;
    text-align: center;
    vertical-align: top;
    overflow: visible;
    position: relative;
    font-size: 18px;

    p {
      display: block;
      position: relative;
      top: 30px;
      color: #000000;
      font-weight: bold;
      z-index: 1;
    }

    &:not(:last-child):before {
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      top: 30px;
      background-color: #ffffff;
      border: 2px solid #000000;
      height: 20px;
      width: 100%;
    }

    .node {
      display: inline-block;
      border: 2px solid #000000;
      background-color: #d9d9d9;
      border-radius: 100%;
      height: 26px;
      width: 26px;
      position: absolute;
      top: 26px;
      left: 44%;
    }

    &.complete {
      p {
        color: #ffffff;
      }
      &:before {
        background-color: #ffb6b6;
      }
      .node {
        border-color: #000000;
        background-color: #980000;
      }
    }

    &.in-progress {
      p {
        color: #ffffff;
      }
      .node {
        border: 2px solid #000000;
        background-color: #980000;
        height: 32px;
        width: 32px;
        top: 24px;
        left: 50%;
      }
    }
  }
}

/* Style the confirmation */
#input tr td:first-child {
  font-weight: bold;
}

.edit_link {
  color: #980000;
  margin: 1% 0 1% 0;
  text-decoration: none;
}

.right_align {
  text-align: right;
}