* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f9f9f9;
  display: grid;
  place-items: center;
  /* min-height: 100vh; */
  /* margin: 0; */
}

h2 {
  text-align: center;
  color: #01b8a5;
}

.main-container {
  background-color: white;
  padding: 35px;
  border-radius: 10px;
  box-shadow: 5px 5px 20px #aaaaaa;
  max-width: 800px;
  width: 100%;
}

form {
  display: grid;
  gap: 20px;
}

legend {
  color: #01b8a5;
  font-weight: bold;
  padding: 0 5px;
  font-size: large;
}

.fieldset-1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 25px 15px;
  border: solid 2px #d8d8d8;
  border-radius: 10px;
  gap: 20px;
}

.input-group {
  display: grid;
}

.full-width-group {
  display: grid;
  grid-column: 1/3;
}

/*SLIDER*/
.slider {
  width: 100%;
}

.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}
/*____________*/

.fieldset-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 25px 15px;
  border: solid 2px #d8d8d8;
  border-radius: 10px;
}

.country-input{
   padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  width: 100%;
}

.slider-val {
  text-align: center;
  color: #01b8a5;
  font-weight: bold;
}

.time {
  grid-column: 1 / 3;
  display: grid;
  justify-items: center; /* Centrerar innehållet i grid-cellen */
}

.time input[type="time"] {
  width: 50%; /* Gör den mindre enligt kravspecifikationen */
}

.half-width {
  grid-column: 1 / 3; /* Låt containern ta hela bredden... */
  display: grid;
  justify-items: start; /* ...men tvinga innehållet att börja från vänster */
}

.half-width input {
  width: 50%; /* Gör själva input-fältet till 50% av raden */
}

textarea {
  padding: 10px 0px 50px 10px;
  height: 80px;
  width: 100%;
  resize: vertical;
  font-size: 1em;
  border-radius: 5px;
}

.fieldset-3 {
  display: grid;
  grid-template-columns: 1fr;
  padding: 25px 15px;
  border: solid 2px #d8d8d8;
  border-radius: 10px;
}

button {
  background-color: #01b8a5;
  color: white;
  border-radius: 5px;
  padding: 10px;
  width: 170px;
  font-size: large;
  margin: auto;
  border: none;
}

[type="text"],
[type="email"],
[type="password"],
[type="date"] {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  width: 100%;
}

[type="time"] {
  padding: 7px;
  border: 2px solid #ccc;
  border-radius: 5px;
  width: 100%;
}

:placeholder-shown {
  font-size: 1em;
}

[type="checkbox"] {
  margin-top: 20px;
}

.fieldset-1,
.fieldset-2,
.fieldset-3 {
  background-color: #f9f9f9;
}

.radio {
  display: grid;
  gap: 10px;
}

label[for="favourite"] {
  display: block; /* Gör att margin-bottom fungerar */
  margin-bottom: 8px; /* Justera detta värde för önskat avstånd */
}