/* styling for the /pets page */

body.page-pets h1.page-header {
  display: none;
}
body.page-pets h2 {
  font-size: 30px;
}
body.page-pets .glyphicon {
  font-size: 26px;
}

/* sort by */
div.view-pets-home div.form-type-bef-link {
  display: inline-block;
  margin-right: 20px;
}

p.sub-level-title {
  font-size: 25px;
  font-weight: 500;
}
span.basic-sub-emoji {
  color: red;
  margin-left: 10px;
}

/* "Go to Dashboard" button */
div.view-pets-home .pet-dashboard {
  margin: 0 0 30px 0;
}

/* color panel banner based on subscription level */
div.pet-home-level-plus .panel-heading.mypet-tile-heading {
  background: var(--ph-color-orange-light);
}
div.pet-home-level-basic .panel-heading.mypet-tile-heading {
  background: var(--ph-color-blue-shade01);
}
div.pet-pic img.img-responsive {
  border-radius: 5px;
}
.sub-level {
  display: none;
}
div.pet-description,
div.pet-behavioral {
  margin-top: 15px;
}
div.pet-pic img.img-responsive {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
div.ph-pets-grid-full-height .pet-pic img {
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  border-color: var(--ph-color-gray-light);
}

/********** /Pets View - page showing user's pets **********/
/* get columns to have same height (see post: https://www.codeply.com/p/pdiSNSEfzD ) */
body.page-pets .row-flex {
  display: flex;
  flex-wrap: wrap;
}
.ph-pets-grid-full-height {
  height: 100%;
  /* padding: 20px 20px 10px */
  padding-bottom: 25px;
}
body.page-pets [class*="ph-pets-grid-full-height"] {
  /* margin-bottom: 30px; */
}
.ph-pets-grid-full-height.panel.panel-default {
  padding: 0;
}


/*
body.page-pets div.view-content [class*="col-"] {
  margin-bottom: 30px;
}
*/


/********** Media Modifications for Viewport Size **********/

/*** Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* Premium diagonal banner */
  div.pet-pic img {
    position: relative;
  }
  .sub-level {
    display: block;
    position: absolute;
    top: 1px;
  }
  img#petcard-premium {
    border-style: unset;
    border-radius: unset;
    border-width: unset;
    border-color: unset;
    width: 85px;
    position: relative;
    left: 1px;
  }

  div.pet-pic img.img-responsive {
    margin: 0;
  }
  body.page-pets .glyphicon {
    font-size: unset;
  }
}

/*** Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/*** Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}