.lead { font-size: 1.5rem; font-weight: 300; }
select {
      -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0;
    padding-top: 0.5rem;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.breadcrumb .active {
/*	background-color: red;*/
}


.password-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
font-size:14px;
font-weight:600;
  color: rgba(0,0,0, .75);
  right:20px;
cursor:pointer;
}

.password-btn > span:nth-child(2) {
	display:none;
}

[data-password-shown] .password-btn > span:nth-child(2) {

  display:block;

}

[data-password-shown] .password-btn > span:nth-child(1) {

  display:none;

}

.card .img-thumbnail {
	width: 100% !important;
	height: 250px !important;
	object-fit: cover !important;
}

/**
Salon Pantti
**/

html, body {
  height: 100%;
  margin: 0;
}

/* Flexbox layout */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: rgb(255,255,255);
}

.container {
  margin-top: 60px !important;
}

/*
Navigaatio
*/
.nav_border_bottom {
  border-bottom: 1px #808080 solid;;
}

.navbar {
  margin-bottom: 10px;
}

.help-link-container {
  display: flex;
  justify-content: flex-end; /* Siirrä oikealle */
  padding-right: 20px; /* Pieni marginaali oikealle */
}


.help-link {
  text-decoration: none; /* Poista alleviivaus */
  font-size: 16px;
  color: #007bff; /* Vaihda väri haluamaksesi */
}

.help-link:hover {
  text-decoration: underline; /* Alleviivaus hoverin aikana */
}

.bg-login-footer {
  background-color: rgb(0,81,94);
}

.list-auction {
  margin-bottom: 20px;
}
/**
Painikkeiden pyöristys
**/
.sp_btn_round {
  border-radius: 10px;
}



/* Painikkeet */
.sp_btn_log_in {
  background-color: rgb(0,81,94);
  color: rgb(255,255,255);
}

.sp-btn-normal {
  background-color: rgb(128,128,128) !important;
}

.sp-btn-light {
  background-color: rgb(242,242,242) !important;
}

.sp_btn_log_in:hover {
  color: rgb(255,255,255);
  background-color: rgba(0, 81, 94, 0.8);

}

.sp_btn_register, .sp_btn_make_bid {
  background-color: rgb(128, 128, 128);
  color: rgb(255,255,255);
}

.sp_btn_register:hover, .sp_btn_make_bid:hover, .sp-btn-normal:hover {
  background-color: rgb(128, 128, 128, 0.8);
  color: rgb(255,255,255);
}

.sp-badge {
  background-color: #808080 !important;
}

/**
Tekstien väritykset

**/

.sp-leading-bid {
  color: rgb(0,115,94);

}

/**
 Card CSS
*/

.sp-card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: unset !important;
    border-bottom: unset !important;
}


.sp-card-header-bg {
  background-color: rgb(153,153,153);
  color: rgb(255,255,255);

}

.sp-card-bg, .sp-card-header-bg2 {
  background-color: rgb(242,242,242) !important;
}

.content {
  flex: 1;
}

footer {
  padding: 20px 0;
}


.footer-list {
  display: flex; /* Elementit vierekkäin */
  justify-content: center; /* Keskittää sisällön vaakasuunnassa */
  align-items: center; /* Kohdistaa elementit pystysuunnassa */
  padding: 0;
  margin: 0;
  list-style: none; /* Poistaa oletusluettelomerkinnät */
}


.footer-list li {
  position: relative;
  margin-left: 20px; /* Välit elementtien välillä */
}

.footer-list li::before {
  content: "•"; /* Luettelomerkki (pallo) */
  color: black; /* Pallon väri */
  font-size: 1.2em; /* Pallon koko */
  position: absolute;
  left: -15px; /* Asettaa pallon tekstin eteen */
  top: -3px;
}
.footer-list li:first-child::before {
	content: "" !important;
	list-style-type:none !important;
}

@media (max-width: 768px) {

.footer-list li::before {
  /*content: "•";*/ /* Luettelomerkki (pallo) */
  color: black; /* Pallon väri */
  font-size: 1.2em; /* Pallon koko */
  position: absolute;
  left: -15px; /* Asettaa pallon tekstin eteen */
  top: -5px;
}
	
  .footer-list {
      flex-direction: column; /* Muuttaa elementit pystysuoraan mobiilissa */
      align-items: flex-start; /* Kohdistaa elementit vasemmalle mobiilissa */
  }

  .footer-list li {
      margin-left: 0; /* Poistaa vasemman marginaalin mobiilissa */
  }

  .footer-list li::before {
      left: -20px; /* Asettaa luettelomerkin mobiilinäkymässä hieman vasemmalle */
  }
.footer-list li:first-child {
	list-style-type:none !important;
}

}

.auction-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auction-item {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 5px;
}

.auction-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.auction-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Väli nappien välillä */
}

.auction-buttons a {
  flex: 1 1 calc(50% - 10px); /* Joka nappi vie 50% leveydestä mobiilissa */
  text-align: center; /* Keskitetään nappien teksti */
  margin-bottom: 10px; /* Jättää tilaa riveille mobiilissa */
}

/* Pienemmille näytöille (mobiili) */
@media (max-width: 768px) {
  .auction-buttons {
      flex-wrap: wrap;
  }

  .auction-buttons a {
      flex: 1 1 calc(50% - 10px); /* Joka nappi vie 50% leveydestä */
  }
}

/* Isommille näytöille */
@media (min-width: 769px) {
  .auction-buttons a {
      flex: 1 1 23%; /* Jokainen nappi vie 25% leveydestä suuremmilla näytöillä */
  }
}

/* Desktop (leveys > 768px) */
.search-group {
  display: flex;
  align-items: center;
}

.search-input {
  flex-grow: 1; /* Tekee hakukentästä joustavan desktopissa */
}

.search-btn, .clear-btn {
  white-space: nowrap; /* Estää nappien tekstin katkeamisen */
}

/* Mobiili (max-width: 768px) */
@media (max-width: 768px) {
  .search-group {
      flex-direction: column; /* Järjestetään elementit pystysuunnassa mobiilissa */
  }

  .search-input {
      width: 100%; /* Hakukenttä täysleveäksi mobiilissa */
      margin-bottom: 10px; /* Lisää väliä nappien ja hakukentän väliin */
  }

  .search-btn, .clear-btn {
      width: 100%; /* Nappulat täysleveiksi mobiilissa */
      margin-bottom: 10px; /* Lisää väliä nappien väliin mobiilissa */
  }
}


/**
 Kohdelistauksen sivutukset
**/

.paging a {

color: #000000;

}

 

.paging a:hover {

color: #000000;

}

.paging .current {

background: rgb(0, 81, 94);

color: #ffffff;

border-color: rgb(0, 81, 94);

}

.paging > span {

/* border-left: 0; */     !!! POIS

margin-left: 5px;

}

.paging .next  {

border-radius: 0px;

margin-right: 5px;

}

 

.paging .prev {

border-radius: 0px;

margin-left: 10px;

}

.pl-2 {

padding-top: .3rem;

}

.thumbnail-img {

object-fit: contain;

}