/* Controls styling */
#controls select,
#controls button {
  padding: 8px 12px;
  margin:0 2px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
  margin-bottom:10px;
}

#controls select:focus,
#controls button:focus {
  outline: none;
  border-color: #444;
  box-shadow: 0 0 0 2px rgba(100, 100, 255, 0.2);
}

#controls button {
  background-color: #007055;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

#controls button:hover {
  background-color: #00705590;
}

#controls button#clearButton {
  background-color: #595959;
}

#controls button#clearButton:hover {
  background-color: #575757;
}

    #comparedSchoolsContainer {
      margin-bottom:20px;
	  margin-top:20px;
    }
	
	#comparedSchools{
	line-height:40px;
	padding:20px;
	}
    #comparedSchools span {
      background: #e0e0e0;
      padding: 5px 8px;
      margin-right: 5px;
      border-radius: 3px;
    }
    #comparedSchools button {
      background: none;
      border: none;
      cursor: pointer;
      color: #a00;
      font-weight: bold;
      margin-left: 3px;
    }
    /* Cards container: flex layout with wrapping */
    #cardsContainer {
      display: flex;
      gap: 15px;
      width: 100%; 
      margin-top:20px;
      padding-bottom:20px;
      flex-wrap:no-wrap !important;
      overflow-x:scroll;
    }
    /* Card styling: fixed dimensions */
    .card {
      width: 250px;
      min-width:250px;
      height: 500px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #f9f9f9;
      overflow: hidden;
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
    }
	.card-close-button{
	    width: 25px;
    height: 25px;
    align-self: flex-end;
    padding:unset !important;
    margin:unset !important;
    border: none;
    border-radius: 4px;
	}
	
	.card-close-button:hover{
	background-color:#ffcb0b;
	color:black;
	cursor:pointer;
	}
    /* Card image container takes the top third of the card */
    .card-image {
      height: 10%;
      width: 100%;
      overflow: hidden;
      display:flex;
      align-items: center;
      justify-content: flex-start;
    }
    .card-image img{
            height: 150%;
    object-fit: contain;
    margin: -15px auto 0px;
    }
    /* Card data container takes the remaining area */
    .card-data {
      height: 90%;
      display: flex;
      flex-direction: column;
    }
    /* Each data row within the card */
    .card-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 8px;
      font-size: 14px;
      flex: 1;
    }
    /* Alternating background colors for readability */
    .card-data .card-row:nth-child(odd) {
      background-color: #ffffff;
    }
    .card-data .card-row:nth-child(even) {
      background-color: #f2f2f2;
    }
    /* Institution row (in data area) styling */
    .card-data .institution {
      font-weight: bold;
      font-size: 16px;
      text-align: center;
    }
    /* Comparison label styling */
    .comparison-label {
      display: flex;
      align-items: center;
      gap: 4px;
      font-weight: bold;
    }
    .comparison-label.green { color: black; }
    .comparison-label.red   { color: black; }
	
	.card-row.row-hover {
  background-color: #ffeeba !important;
}
@media (min-width: 768px) {
#cardsContainer{
flex-wrap:wrap !important;
overflow-x:hidden;
}
}