@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');



body {
  width: 100%;
  font-family: "Open Sans";
}

.checkbox-container { /* Lägg till detta */
  margin-top: 0.5%;
  margin-bottom: 0.5%;
  font-family: "Open Sans";
}

.checkbox-container h4 {
  margin-bottom: 0.2%;
  font-family: "Open Sans";
}

.checkbox {         /* Lägg till detta */
  display: flex;
  font-family: "Open Sans";
} 

.checkbox label {
   font-family: "Open Sans";
}


label {
  display: block;
  /*font-size: 95%;*/
   font-family: "Open Sans";
}

.number-container {
  margin-left: 0%;
  padding-bottom: 0.5%;
  width: 80%;
  font-family: "Open Sans";
}



.number-container p{
  font-size: 95%;
  margin-top: 0%;
  font-family: "Open Sans";
}

.number-container h4 {
  margin-bottom: 1%;
  padding-bottom: 0%;
  font-family: "Open Sans";
}

.fraction-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
   font-family: "Open Sans";
}

.fraction {
  font-family: "Open Sans";
  width: 25%;
  padding: 0% 0% 0% 0%;

}

.fraction img {
  max-width: 100%;
}

.dropdown-label {
  display: flex;
  justify-content: space-between;
  margin-right: 2.5%
}

.dropdown-container {
	width: 40%;
   height: 10%
   margin: 0% 0% 0% 0%;
   padding: 0% 0% 0% 0%
     
}

.radio-container {
  display: flex;
  flex-direction: column;
}

.radio-container label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Open Sans";
}

.radio-container input {
  margin-right: 5%;
}

.button-container {
  display: flex;
  padding-top: 2.5%;
  padding-bottom: 2.5%;
  font-family: "Open Sans";
}

.button-container-p {
  font-size: 150%;
  font-family: "Open Sans";
}

.button-container #warning {
  font-size: 150%;
  color: red;
  margin-left: 2%;
  margin-top: 0.5%;
  font-family: "Open Sans";
}



#results h2 {
   margin-top: 0.5%;
	font-family: "Open Sans";
}

.result-text-style {
  font-family: "Open Sans";
  width: 80%;
  padding: 0.5% 0% 0% 0%;
}

.fraction-results-container {
  font-family: "Open Sans";
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  flex-direction: row;
  padding: 0% 0% 0% 0%;
  margin: 0% 0% 0% 0%;
  padding-bottom: 2%
}


.result-container {
  width: 25%;
  padding: 0% 0% 0% 0%;
  margin: 0% 0% 0% 0%;
  font-family: "Open Sans";
  
}

#warning {
  color: red;
  margin-top: 2%;
  font-size: 1.5vw; 
}

.recommended-area-container {
  font-family: "Open Sans";
  display: flex;
}

.overall-results {
  margin-top: -0.5%;
  width: 70%;
  font-family: "Open Sans";
}

.overall-results p {
  font-size: 150%;
  font-family: "Open Sans";
}
/* Smartphones */
@media (max-width: 768px) {

   
  .checkbox-container { /* Lägg till detta */
   margin-top: 0.5%;
   margin-bottom: 0.5%;
   font-family: "Open Sans";
  }

 .checkbox-container h4 {
  margin-bottom: 0.2%;
  font-family: "Open Sans";
  }
   
  .checkbox {         /* Lägg till detta */
   display: flex;
   font-family: "Open Sans";
  } 

  .checkbox label {
    font-family: "Open Sans";
  }

  .fraction-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
  
  .fraction {
    
    width: 50%;
    padding: 0.5% 0% 0% 0%;
  
  }

  .fraction img {
    max-width: 90%;
  }

  .result-text-style {
    width: 100%;
  }

  .fraction-results-container,
  .result-container {
    width: 100%;
  }

  .dropdown-label {
    display: flex;
    justify-content: space-between;
    margin-right: 10%;
    
  }
  
   .dropdown-container {
	width: 42%;
   height: 10%
   margin: 0% 0% 0% 0%;
   padding: 0% 0% 0% 0%
     
}
   
  .radio-container {
    display: flex;
    flex-direction: column;
  }
  
  .radio-container label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  }
  
  .radio-container input {
    margin-right: 10%;
  }

  .button-container {
    display: flex;
    margin: 2% 0% 2% 0%;
  
  }
  


  .result-text-style {
    width: 100%;
    padding: 0.5% 0% 0% 0%;
  }
  
  .fraction-results-container {
  	 font-family: "Open Sans";
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    flex-direction: row;
    padding: 0% 0% 0% 0%;
    margin: 0% 0% 0% 0%
  }
  
  
  .result-container {
    width: 50%;
    padding: 0.5% 0% 0% 0%;
    margin: 0% 0% 0% 0%;
    font-family: "Open Sans";
  }

  .result-container img {
    width: 85%;
  }
  .overall-results {
    margin-top: -0.5%;
    font-family: "Open Sans";
    width: 100%;
  }

  .overall-results p {
    font-size: 110%;
    font-family: "Open Sans";
  }
}

/* Tablets */

@media (min-width: 769px) and (max-width: 1024px) {

  body {
    width: 100%;
    height: 100%;
    font-family: "Open Sans";
  }
   
  .checkbox-container { /* Lägg till detta */
   margin-top: 0.5%;
   margin-bottom: 0.5%;
   font-family: "Open Sans";
  }
   
 .checkbox-container h4 {
  margin-bottom: 0.2%;
  font-family: "Open Sans";
 }

  .checkbox {         /* Lägg till detta */
   display: flex;
   font-family: "Open Sans";
  } 

  .checkbox label {
    font-family: "Open Sans";
  }

  .fraction-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    font-family: "Open Sans";
  }
  
  .fraction {
    font-family: "Open Sans";
    width: 50%;
    padding: 0% 0% 0% 0%;
  
  }

  .fraction img {
    max-width: 95%;
  }

  .result-text-style {
    width: 100%;
    font-family: "Open Sans";
  }

  .fraction-results-container,
  .result-container {
    width: 100%;
    font-family: "Open Sans";
  }

  .dropdown-label {
    display: flex;
    justify-content: space-between;
    margin-right: 5%;
    font-family: "Open Sans";
    
  }
   
  .dropdown-container {
	width: 34%;
   height: 10%
   margin: 0% 0% 0% 0%;
   padding: 0% 0% 0% 0% 
	}
  
   

  .radio-container {
    display: flex;
    flex-direction: column;
  }
  
  .radio-container label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Open Sans";
  }
  
  .radio-container input {
    margin-right: 5%;
  }

  .button-container {
    display: flex;
    margin: 2% 0% 2% 0%;
  
  }

  .result-text-style {
    width: 85%;
    padding: 0.5% 0% 0% 0%;
    font-family: "Open Sans";
  }
  
  .fraction-results-container {
    font-family: "Open Sans";
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    flex-direction: row;
    padding: 0% 0% 0% 0%;
    margin: 0% 0% 0% 0%
  }
  
  
  .result-container {
    width: 25%;
    padding: 0.5% 0% 0% 0%;
    margin: 0% 0% 0% 0%;
    font-family: "Open Sans";
    
  }

  .result-container img {
    width: 85%;
  }
  .overall-results {
    margin-top: 0%;
    font-size: 80%;
    width: 100%;
    font-family: "Open Sans";
  }
}