/* Styling for adoption and found pages*/
#profile_page .sbWrapper {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
	grid-gap: 10px;
}
#found_Profile_page .sbWrapper{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
	grid-gap: 10px;
}
 .profileWrapper h2{
	 font-size: 30px;
 }
 .profileWrapper, .foundProfileWrapper{
	 padding: 20px;
	 border: solid 1px #0085ca;
 }
 .bold{font-weight:bold;}
button.my_profile,button.return_to_adoptions,button.my_found_profile,button.sbopen,button.sbclose,button.loc_coldstream,button.loc_bairnsdale,button.loc_sale,button.loc_all  {
	background-color: transparent;
    color: #0085ca;
    border: solid 1px;
    border-radius: 3px;
    padding: 5px;
 }
 button.loc_coldstream,button.loc_bairnsdale,button.loc_sale,button.loc_all {
	width:100px; 
	margin-right:30px;
	margin-bottom:30px;}
	
 /*styling for single profile page*/
 @media all and (min-width:320px) {
	 .profileContainer{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
	grid-gap: 10px;
	}
	.mainImage, .profileDetails, .profileStats, .myHealth{
	grid-column:1;
 }
 }
 
 @media all and (min-width: 1024px) {
 
 .profileContainer{
	display:grid;
	grid-template-columns:repeat(3,minmax(100px,max-content));
	grid-template-rows: repeat(3,minmax(100px,max-content));
	grid-gap: 10px;
 }
 
 .mainImage{
	grid-column:1/3;
	grid-row:1/3;
 }
 .profileDetails, .foundProfileDetails{
	grid-column:1/3;
	grid-row:3/4
 }
 .profileStats{
	background-color: #f5f5f5;
	grid-column:3/4;
	grid-row:1/2;
	padding:10px;
	line-height:3em;
 }
  
 /* List styling */
.myHealth, .myHealth ul {
	background-color: #f5f5f5;
	grid-column:3/4;
	grid-row:2/3;
	padding:10px; 
	list-style-type: none !important;
	
}
.myHealth li{  line-height:2em;}
.myHealth li:before {
  position: absolute;
  margin-left: -1.3em;
  font-weight: bold;

}
.myHealth li:before {
  content: "\2713";
  color: #0085ca;
}
 }
 
.popup-overlay {
visibility:hidden;
}

.popup-content {
visibility:hidden;
}
.popup-overlay.active{
visibility:visible;

}

.popup-content.active {
visibility:visible;
position: absolute;
margin-top:-60%;
/*margin-left:-65%;*/
width:80%;
height:auto;
padding:50px;
background-color:#ffffff;
color:#333333;
-webkit-box-shadow: 3px 4px 6px 1px rgba(51,51,51,0.3);
-moz-box-shadow: 3px 4px 6px 1px rgba(51,51,51,0.3);
box-shadow: 3px 4px 6px 1px rgba(51,51,51,0.3);
}
 @media all and (max-width: 600px) {
	 
	.popup-content.active {
	visibility:visible;
	position: absolute;
	margin-top:-80%;
	/*margin-left:-65%;*/
	width:100%;
	height:auto;
	padding:50px;
	background-color:#ffffff;
	color:#333333;
	-webkit-box-shadow: 3px 4px 6px 1px rgba(51,51,51,0.3);
	-moz-box-shadow: 3px 4px 6px 1px rgba(51,51,51,0.3);
	box-shadow: 3px 4px 6px 1px rgba(51,51,51,0.3);
 }