/* Main headline */
#pp_wrapper{width:100%}

.pp_photodiv {overflow:hidden ; float:left; margin-right:10px;}
.pp_photo {width:100%;  }

.pp_listitem {float:left; text-align:center;}
.pp_heroimage { overflow:hidden;
    border-radius:10px;
    object-fit: cover;
    margin-left:1px;
}

.pp_imageframe {position:relative; margin:10px 10px 0 10px;}
.pp_imageframe img.pp_Male {border: 0.3rem outset var(--pp_male);}
.pp_imageframe img.pp_Female {border: 0.3rem outset var(--pp_female);}
.pp_imageframe img.pp_Unknown {border: 0.3rem outset var(--pp_unknownsex);}

.pp_imageframe .pp_heroimage {
    transition: filter 0.3s ease, transform 0.3s ease;
  }
  
  .pp_imageframe:hover .pp_heroimage,
  .pp_imageframe .pp_tile_name:hover ~ .pp_heroimage {
    filter: brightness(1.2) saturate(1.2);
    transform: scale(1.05);
  }

.noaccentcolor {border:none !important}

.pp_listitem h3 {padding-bottom:0;margin-bottom:0}
#pp_sortlink {padding-bottom:30px; text-align:center; font-weight:bold}

.pp_stickie1-img { position: absolute;
    top: 00%;
    left: 0;
    right: 0;
    width:80px;}
.pp_stickie2-img {position: absolute;
    top: 0;
    left: calc(100% - 100px);
    right: 000px;
    width:80px;}    
.pp_stickie3-img {position: absolute;
    top:50px;
    left: calc(100% - 100px);
    width:80px;}
.pp_inlinename {
font-size:1.6em; 
}
.pp_inlinecontent{
    position: absolute;
    text-align:center;
    bottom: 12px;
    width:100%;
color:#fff;
font-weight:bold;
text-shadow: 2px 2px #333;
line-height:1em;
}

#pp_jumpto {width:100%; text-align:center;padding-bottom:20px; padding-top:10px}
#pp_jumpto select {font-size:1em; }

.pp_ytvideo 
{
    padding-top:56.25%;
    position:relative;
}
.pp_ytvideo iframe
{
    position:absolute;top:0;left:0;
    width:100%;
    height:100%;
}

.pp_adoption_pending_note {font-weight:bold}

.pp_video_icon { padding-left:10px; padding-top:1px; font-size:1em}

.pp_fieldset {border: 2px groove; padding:20px; margin:20px 0;   width: 100%;}
.pp_fieldset legend {font-weight:bold; padding: 0 20px}

.pp_poweredby_disabled {display:none}

#pp_animalcount {text-align:right}

.pp_heroimage { aspect-ratio: 1 / 1; width:100%;}

div.pp_listitem {  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height:1.3em; }

.pp_found_item {clear:both; background-color:#f5f5f5; margin-bottom:20px; 
    display:flex; align-items:center; }
.pp_found_pic {float:left; padding-right:20px; width:200px}
.pp_found_datax {clear:both}

.pp_photodiv {
  width: 100%;         /* Container takes full width of its parent */
  aspect-ratio: 1;     /* Maintains a square shape */
  overflow: hidden;    /* Hides overflow from images */
  position: relative;  /* Allows positioning of child elements */
}

.pp_lightbox-trigger {
  width: 100%;         /* Image width is set to fill the container */
  height: 100%;        /* Image height fills the container as well */
  object-fit: cover;   /* Ensures the image covers the container without distortion */
  display: block;
}

/* Extra small devices (phones, 600px and down) show one tile per row */
@media only screen and (max-width: 600px) {
    .pp_listitem {width:100%; font-size:1.5em}

    .pp_stickie1-img, .pp_stickie2-img, .pp_stickie3-img {width:120px}
    .pp_stickie2-img, .pp_stickie3-img {left: calc(100% - 120px);}
}

/* Small devices (portrait tablets and large phones, 600px and up) 2 tiles per row */
@media only screen and (min-width: 600px) {
    .pp_listitem {width:50%; font-size:1.4em}
    .pp_stickie1-img, .pp_stickie2-img, .pp_stickie3-img {width:80px}
    .pp_stickie2-img, .pp_stickie3-img {left: calc(100% - 80px);}
	.pp_photodiv { width: 31%;  }
}

/* Medium devices (landscape tablets, 768px and up) 3 tiles / row */
@media only screen and (min-width: 800px) {
   	.pp_listitem {width:33%; font-size:1.1em}
	.pp_photodiv { width: 31%;  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1100px) {
    .pp_listitem {width:25%;  font-size:1em}
    .pp_stickie1-img, .pp_stickie2-img, .pp_stickie3-img {width:90px}
	.pp_stickie2-img, .pp_stickie3-img {left: calc(100% - 90px);}

	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1300px) {
    .pp_listitem {width:20%; font-size:0.9em}
    .pp_heroimage {max-width:200px; max-height:200px }
    .pp_video_icon {padding-top:0px; font-size:0.8em; display:none}
    .pp_stickie1-img, .pp_stickie2-img, .pp_stickie3-img {width:70px}
    .pp_stickie2-img, .pp_stickie3-img {left: calc(100% - 70px);}
}


#pp_loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

.pp_paginationlinkset .curpage { opacity:0.5}
.pp_paginationlinkset a { text-decoration:none; font-weight:bold; }
.pp_paginationlinkset { text-align:center; clear:both; padding-bottom:20px}

#pp_sortmessage {text-align:center}

#pp_lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
	z-index: 3;
}

#pp_lightbox img {
    max-width: 80%;
    max-height: 80%;
    display: block;
    margin: auto;
    margin-top: 20%;
	z-index: 4;
}

#pp_lightboxCloseBtn, #pp_lightboxPrevBtn, #pp_lightboxNextBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding:2em;
}

#pp_lightboxCloseBtn {
    top:10px;
    right: 10px;
}

#pp_lightboxPrevBtn {
    left: 10px;
}

#pp_lightboxNextBtn {
    right: 10px;
}


#pp_petpointlink_div {
    background-color: rgb(237, 106, 0);
    display: inline-block; /* Ensures the div only takes as much space as its content */
    border-radius: 4px; /* Rounded corners */
    padding: 5px 10px; /* Adjust padding for spacing */
}

#pp_petpointlink {
    color: white;
    text-decoration: none; /* Remove default underline */
}