.tcg-project-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: stretch;
	justify-content: space-between;
}
		
.tcg-project-filter .tcg-select-container {
	flex-basis: 100%;
}

.tcg-project-filter .tcg-select-container select {
	margin-bottom: 5px;
}

.tcg-project-box-hidden {
	display: none;
}


/* Tablet */
@media (min-width: 768px) {
	
	.tcg-project-filter .tcg-select-container {
		flex-basis: calc(33.3333% - 20px);
	}

}





/* Basstil för att dölja den faktiska checkboxen och skapa en anpassad visuell representation */
.custom-checkbox input[type="checkbox"] {
  opacity: 0; /* Döljer checkboxen men tillåter interaktion */
  position: absolute;
}

/* Stil för den anpassade checkboxens utseende */
.custom-checkbox .checkmark {
  display: inline-block;
  width: 40px;
  height: 40px;
	background-color: #50C0F0; /* Blå bakgrundsfärg */
  position: relative;
  cursor: pointer;
  border-radius: 8px;
	margin-right: 10px;
}

/* Inre cirkeln för den oikryssade checkboxen */
.custom-checkbox .checkmark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%; /* Gör detta till en cirkel */
  background-color: #50C0F0; /* Vit bakgrundsfärg för inre cirkeln */
  transition: background-color 0.2s; /* Övergång för bakgrundsfärgen */
}

/* Modifierar den inre cirkeln när checkboxen är ikryssad */
.custom-checkbox input[type="checkbox"]:checked + .checkmark::after {
  width: 22px; /* Större cirkel när ikryssad */
  height: 22px; /* Större cirkel när ikryssad */
  background-color: white; /* Blå bakgrundsfärg för den ikryssade cirkeln */
box-shadow: 0px 0px 4px #777;
}

/* Lägger till extra stilar om så önskas för att hantera hover-effekter 
.custom-checkbox:hover .checkmark::after {
  background-color: #e6f2fa; 
}
*/

/* Använder flexbox för att centrera checkboxen och texten vertikalt */
.custom-checkbox {
  display: flex; /* Aktiverar flexbox */
  align-items: center; /* Centrerar vertikalt */
  cursor: pointer;	
	font-size: 16px;
	font-weight: bold;
}

/* Stil för texten bredvid checkboxen */
.custom-checkbox label {
  cursor: pointer;

}



/* Products used in Project box sidebar */
.tcg-project-products-widget .tcg-headline {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.tcg-project-products-widget ul {
	list-style: none;
	padding: 0;
	font-size: 14px;
}
.tcg-project-products-widget a {
  display: inline-flex;
  align-items: center;
}
.tcg-project-products-widget a::after {

  content: "";
  display: block;
  width: 20px;
  height: 20px; 
  margin-left: 5px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/></svg>');
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center;
	
}



/* Project facts box sidebar */
.project_facts {
	width: 100%;
	padding: 0;
	margin: 0;
	border: none;
	font-size: 14px;
}



.project_facts th {
	background-color: transparent !important;
	border: none;
	padding: 3px 10px 0 0;	
	text-align: left;
}

.project_facts td {
	background-color: transparent !important;
	border: none;
	padding: 3px 0 0 0;		
	text-align: left;
}

.project_facts a {
	display: flex;
	align-items: center;
}
.project_facts a::after {

  content: "";
  display: inline-block;
  width: 20px;
  height: 20px; 
  margin-left: 5px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/></svg>');
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center;
	
}


.img-climate-improved-concrete {
	height: 100px !important;
    width: 100px !important;
	margin-bottom: 20px;
}
@media (min-width: 768px) {
	
	.img-climate-improved-concrete {
		margin-bottom: 0px;
	}

}