@charset "UTF-8";
/* CSS Document */
body, html {
  margin: 0;
	margin-left: 70px;
	margin-right: 50px;
	margin-top: 10px;
  height: 100%;
  overflow: hidden;

}

body {
  display: flex;
  flex-direction: column;
 font-family: 'Outfit', sans-serif;
	background-color: #dfdedf;
	
	
}

/* Tekst */
/* Overskift */
h2 {
	 margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: 27px;
}

/* Brødtekst */
h1 {
  margin: 0;
	padding: 1rem;
	font-size: 11px;
	font-family: 'Outfit', sans-serif;
}
/* Mellem Overskift */
h3 {
  margin: 0;
	font-size: 16px;
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
}

p{
	font-family: 'Outfit', sans-serif,;
	font-size: 14px;
	font-weight: 300;
	padding: 0px;

}

ul{
	font-family: 'Outfit', sans-serif,;
	font-weight: lighter;
	font-size: 11px;
}
.low-high p {
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	margin: 0px;
	padding-top: 5px;
	padding-left: 8px;
	padding-right: 8px;
	font-weight: 300;
}

#procentageleft{
	font-size: 16px;
	font-weight: 300;
	padding-left: 8px;
}

.score-row_1 h3{
	padding-left: 8px;
}

.score-row_2 h3{
	padding-left: 8px;
}
.titel{
	padding-top: 50px; 
	padding-bottom: 25px;
}
.overskift {
	 font-family: 'Outfit', sans-serif;  /* Primær font til knapper */
  font-size: 18px;
	padding-bottom: 20px;
	padding-left: 5px;
	font-weight: 400px;
}
.Overskift2 {
	font-size: 18px;
	padding-bottom: 0px;
	margin-bottom: 15px;
	margin-top: 15px;
	padding-left: 8px;
	font-weight: 400;
}

.location p{
	padding-left: 8px;
}
.location h3{
	padding-bottom: 5px;
}

.OverskiftInfo{
	font-family: 'Outfit', sans-serif;  /* Primær font til knapper */
  font-size: 16px;
	padding-left: 8px;
	font-weight: 400px;
	padding-top: 10px;
	padding-bottom: 0px;
	margin: 0px;
}
.BeskrivInfo {
	font-size: 11px;
	font-weight: 300;
	padding-left: 8px;
	margin-top: 3px;
}

.tekst{
	font-size: 13px;
	font-weight: 300;
	margin-left: 8px;
	margin-top: 3px;
}
.punkter {
	font-size: 13px;
	font-weight: 300;
	 list-style-type:circle;
	padding-left: 20px;
}



/* box */
.recycle, .count, .volume,.spin,.location,.procentage,.blends{
	background-color:#dbdad6;       
  padding: 20px;
	padding-left: 25px;
  max-width: 600px;
	margin-bottom: 20px;
		border-radius: 35px;
}
/* KNAPPER */
.response.active{
	background-color: #FFFFFF;
}

button.selected {
  color: #000;
}

#OwnTextile,
#NewRetex,#RingSpun,#Openend {
    width: 290px;
}
#btn5050,#btn6040{
	width: 225px;
}

#count30, #count24, #count16, #count8{
	width: 135px;
}

#small, #medium, #large{
	width: 185px;
}

#SpinE, #SpinT, #SpinI, #ManuE, #ManuT, #ManuI, #Recycle{
	width:185px;
}
#c_p {
	display: flex;
	margin-top: 10px;
  width: 580px;
  height: 20px;
  -webkit-appearance: none;
	background: #000000;
  border-radius: 20px;
  outline: none;
		border: thick solid #000000;
}

#c_p::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
	margin-right: -6px;
	
}

#c_p::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background:#FFFFFF;
  border-radius: 50%;
  cursor: default;
}

/* Deaktiveret version */
#c_p:disabled {
  background: #dfdedf;                  /* Ensartet grå base */
  border: thick solid #dfdedf;          /* Bevar tydelig ramme */
  border-radius: 20px;
	cursor: default;
}

/* Track i deaktiveret tilstand */
#c_p:disabled::-webkit-slider-runnable-track {
  background: #dfdedf;                  /* Matcher baggrund */
  border-radius: 20px;
	cursor: default;
}

#c_p:disabled::-moz-range-track {
  background: #dfdedf;
	border-radius: 20px;
cursor: default;
	
}
/* Sliders i blends */
#virginPolyester,
#rpet,
#preConsumerCotton,
#organicCotton,
#virginCotton {
  display: flex;
  width: 400px;
  height: 20px;
  -webkit-appearance: none;
  background: #000000;
  border-radius: 20px;
  outline: none;
  border: thick solid #000000;
	padding-right: 50px;
}

#virginPolyester::-webkit-slider-thumb,
#rpet::-webkit-slider-thumb,
#preConsumerCotton::-webkit-slider-thumb,
#organicCotton::-webkit-slider-thumb,
#virginCotton::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  margin-right: -5px;
}


/* Deaktiveret version – bemærk :disabled efter hvert ID */
#virginPolyester:disabled,
#rpet:disabled,
#preConsumerCotton:disabled,
#organicCotton:disabled,
#virginCotton:disabled {
  background: #dfdedf;          /* Lys grå baggrund */
  border: thick solid #dfdedf;  /* En lidt mørkere grå kant */
  border-radius: 20px;
}


button.createYarn {

  font-family: 'Outfit', sans-serif;  /* Primær font til knapper */
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;          /* Glidende hover-effekt */
	border-radius: 20pt;
	background-color:#000000;
	color: #FFFFFF;
	min-width: 240px;
}
button.createYarn:hover {
  background-color:#FFFFFF;          
	color:#000000;
	border:solid,medium;
}

button.newRetexYarn {
    font-family: 'Outfit', sans-serif;  /* Primær font til knapper */
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;          /* Glidende hover-effekt */
	border-radius: 20pt;
	background-color:#b7d1ed;
	color: #000000;
	min-width: 240px;

}

button.newRetexYarn:hover {
  background-color: #8da1b7 ;       /* Mørkere pink ved hover */
	  border:solid,medium;
}

button.faqButton{
	  font-family: 'Outfit', sans-serif;  /* Primær font til knapper */
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;          /* Glidende hover-effekt */
	border-radius: 20pt;
	background-color:#000000;
	color: #FFFFFF;
	width: 120px;
}
button.faqButton:hover{
	 background-color:#FFFFFF;          
	color:#000000;
	border:solid,medium;
}

button{
	  font-family: 'Outfit', sans-serif;  /* Primær font til knapper */
  font-size: 14px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;          /* Glidende hover-effekt */
	border-radius: 20pt;
	background-color:#000000;
	color: #FFFFFF;
	height: 35px;
	display: flex;
	justify-content: center;
    align-items: center;
}
	
button:hover {
  background-color: #FFFFFF;
	color: #000000;
	  border:solid,medium;
}

button.disabled:hover {
  background-color: #FFFFFF;
	color: #000000;
	  border:solid,medium;
}
.yes-no-buttons {
  display: flex;
  gap: 0.5rem;
	margin-left: 50px;
}

/* Base style for both Yes/No buttons */
.yes-no-buttons button {
  background-color: #dbdad6;      /* white base */
  border: 2px solid #000000;   /* black border */
	color: #000000;
  border-radius: 50px;
  padding: 5px 15px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
	width: 80px;
	height: 40px;
}
.yes-no-buttons button:hover {
  background-color: #000000;
  color: #FFFFFF;

}

/* Active (selected) button */
.yes-no-buttons button.active {
  background-color: #000000;
  color: #ffffff;
}

.yes-no-buttons button:disabled {
  background-color: #dbdad6; /* grå baggrund */
  color: #dfdedf;             /* lysere tekst for "inaktiv" */
  cursor: default;        /* viser, at knappen ikke kan klikkes */
border: solid, 2px,#dfdedf;
 
}
/* KNAPPER SLUT*/

.bar-container {
  height: 20px;
  background-color: #FFFFFF;
  border-radius: 30px;
  overflow: hidden;
  margin-top: 4px;
	border: solid,thick,#FFFFFF;
}

.bar-fill {
  height: 100%;
  width: 0;
  background-color:#000000 ;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.score-row_1{
  display: flex;
  gap: 20px; /* afstand mellem boksene */
  margin-bottom: 5px;
  flex-wrap: wrap; /* sikrer responsivitet */
	padding-top: 30px;
}

.score-row_2{
  display: flex;
  gap: 20px; /* afstand mellem boksene */
  margin-bottom: 5px;
  flex-wrap: wrap; /* sikrer responsivitet */
	padding-top: 5px;
	padding-bottom: 20px;
}


.score-box {
  flex: 1;
  min-width: 200px; /* så de ikke bliver for små */
}
/* blends og yes/no layout*/
.fiber-group-horizontal {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Sørger for at label står til venstre og resten til højre */
  gap: 1px; /* Lidt luft mellem elementerne */
  margin-bottom: 5px;

}
/* Labelen (teksten til venstre) */
.fiber-group-horizontal label {
  width: 80px; /* Fast bredde – justér efter behov */
  text-align: left;
  font-weight: 500;
padding-left: 8px;
}
/* Sliders og procenttal */
.fiber-group-horizontal input[type="range"] {
  flex: 1; /* Fylder resten af pladsen mellem label og knapper */
  margin: 0 10px;
	padding: 0px;
	
}


#staticComp{
	  width: 500px; /* Eller hvad der passer til dit layout */
  box-sizing: border-box;
  overflow: hidden; /* Ingen scroll */
  flex-shrink: 0; /* Forhindrer at den skrumper */

}
/* Sørg for at wrapper fylder viewport og bruger flex */
.wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;     /* vigtigt: fast ramme til børnene */
  box-sizing: border-box;
  overflow: hidden;  /* undgå dobbelte scrollbars på wrapper */
}

/* DynamicComp: optag den resterende plads i wrapper */
.dynamicComp {
  display: none;       /* behold initial skjult hvis du ønsker det */
  flex: 1 1 auto;      /* vokser og fylder tilgængelig højde */
  min-height: 0;       /* MEGET vigtigt i flex-børn for at overflow virker */
	padding-left: 70px;
  box-sizing: border-box;
  overflow-y: scroll;  /* scrollbar skal altid være synlig (hvor browser tillader det) */
  overflow-x: hidden;
}


#information{
	background:#dbdad6;  
	height: 250px;
  padding: 1em; /* valgfrit for luft indeni */
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 35px;
}
/* Gør der er luft nederes ved dynamicComp */
.location{
	margin-bottom: 150px;
}

button.volume-button:disabled,
button.spin-button:disabled,
button.location-button:disabled,
button.percentage-button:disabled,
button.recycle-button:disabled,
button.disabled{
  background: #dfdedf;       /* Grå baggrund */
  color: #FFFFFF;            /* Lysere tekst for "inaktiv" */
   cursor: default;
}

/* Ingen hover-effekt på disabled */
button.volume-button:disabled:hover,
button.spin-button:disabled:hover,
button.location-button:disabled:hover,
button.percentage-button:disabled:hover,
button.recycle-button:disabled:hover,
button.disabled:hover {
  background: #dfdedf;
  border: none;
 
}
.low-high{
	display: flex;
	justify-content: space-between;

}

.chose{
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.BtnWrapper{
	display: flex;
	justify-content: space-between;
}

#blends label{
	font-size: 14px;
	font-weight: 200;
}

#PolyDyeWrapper{
	display: flex;
	justify-content: space-between;
	padding-right: 135px;
}
#FAQinside {
    height: 540px;      /* eller den højde du vil have */
    overflow: auto;     /* scroll vises kun når nødvendigt */
    margin-bottom: 20px;
	overflow-y: scroll;   /* scrollbar er altid synlig */
    overflow-x: hidden;
}

#FAQinside::-webkit-scrollbar {
    width: 12px;
}

#FAQinside::-webkit-scrollbar-track {
    background: #fff;
	border-radius: 6px;
}

#FAQinside::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 6px;
}

/* Container (centrerer og giver lidt margin) */
.table-wrap {
  max-width: 1000px;
  margin: 24px auto;
  padding: 4px;
  box-sizing: border-box;
}

/* Selve tabellen */
.process-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;          /* ydre sort ramme som i dit billede */
  font-size: 12px;
font-weight: 300;
}

/* Celler */
.process-table td {
  border: 1.5px solid #000;
  padding: 2px;
  vertical-align: middle;
  text-align: center;
}

/* Særligt layout for kolonnebredder (tilnærmet) */
.process-table tbody td:first-child {
  width: 32%;
}
.process-table tbody td:nth-child(2) {
  width: 24%;
}
.process-table tbody td:nth-child(3) {
  width: 44%;
}

/* Ensartet højde og lidt ekstra rum */
.process-table tbody tr {
  height: 40px;
}

/* Responsivt: på small screens gør vi teksten mindre og tabellen scrollbar */
@media (max-width: 700px) {
  .table-wrap { padding: 6px; }
  .process-table { font-size: 14px; display: block; overflow-x: auto; white-space: nowrap; }
  .process-table tbody tr { height: auto; }
}