/* .pet-detail-info{display: flex;} */
.pet-detail-page {
  padding-top: 35px;
}
.pet-detail-info {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
  grid-gap: 16px;
}
.pet-detail-image-section {
  grid-column-start: span 5;
  grid-row-start: span 12;
}
.pet-action-btns {
  grid-column-start: 10;
  grid-column-end: 13;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pet-info-content {
  grid-column-start: 6;
  grid-column-end: 10;
  grid-row-start: 1;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  grid-template-rows: auto auto auto;
}

/* .pet-info-row{display: flex;} */
/* .pet-detail-image-section{flex: 0 0 35%;}
.pet-info-content{flex:0 0 40%;padding:0 0 0 16px;} 
.pet-actions-btns{flex: 0 0 25%;padding:0 0 0 16px;}  */
.pet-detail-image {
  display: flex;
  flex-direction: column;
  position: relative;
}
.pet-detail-image .pet-image img {
  border-radius: 32px;
  width: 100%;
  object-fit: cover;
}
.pet-detail-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 20px 20px 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  border-radius: 0 0 32px 32px;
  display: flex;
  justify-content: space-between;
}
.pet-detail-name h1 {
  color: #fff;
  margin-bottom: 0;
  font-weight: 700;
  font-family: "GT-Walsheim-Bold", "Poppins", sans-serif;
}
.pet-detail-name .pet-edit-image {
  cursor: pointer;
}
.curved-border {
  border-radius: 16px;
  border: 1px solid #d8dadc;
}
.pet-breed-gender-age {
  padding: 12px;
  grid-column-start: span 3;
}
.pet-breed {
  font-size: 1.25rem;
  color: #333436;
  font-weight: 700;
  font-family: "GT-Walsheim-Bold", "Poppins", sans-serif;
}
.pet-current-weight {
  padding: 12px;
  grid-column-start: span 1;
}
.pet-weight span {
  font-size: 1.25rem;
  color: #333436;
  font-weight: 700;
  font-family: "GT-Walsheim-Bold", "Poppins", sans-serif;
}
.pet-weight em {
  color: #5fa600;
}
.pet-vaccination {
  padding: 12px;
  grid-column-start: span 2;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.pet-vaccination:hover {
  border-color: #929598;
  transition: all 250ms;
}
.pet-vaccination:focus {
  outline: 0;
  box-shadow: 0px 0px 0px 3px #d8dadc;
}
.pet-medications {
  padding: 12px;
  grid-column-start: span 2;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.pet-medications:hover {
  border-color: #929598;
  transition: all 250ms;
}
.pet-medications:focus {
  outline: 0;
  box-shadow: 0px 0px 0px 3px #d8dadc;
}
.pet-parasite {
  padding: 12px;
  grid-column-start: span 2;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.pet-parasite:hover {
  border-color: #929598;
  transition: all 250ms;
}
.pet-parasite:focus {
  outline: 0;
  box-shadow: 0px 0px 0px 3px #d8dadc;
}
.pet-labresult {
  padding: 12px;
  grid-column-start: span 2;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.pet-labresult:hover {
  border-color: #929598;
  transition: all 250ms;
}
.pet-labresult:focus {
  outline: 0;
  box-shadow: 0px 0px 0px 3px #d8dadc;
}
.pet-compexam {
  padding: 12px;
  grid-column-start: span 2;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.pet-compexam:hover {
  border-color: #929598;
  transition: all 250ms;
}
.pet-compexam:focus {
  outline: 0;
  box-shadow: 0px 0px 0px 3px #d8dadc;
}
.pet-dental:hover {
  border-color: #929598;
  transition: all 250ms;
}
.pet-dental:focus {
  outline: 0;
  box-shadow: 0px 0px 0px 3px #d8dadc;
}
.pet-body-weight:hover {
  border-color: #929598;
  transition: all 250ms;
}
.pet-body-weight:focus {
  outline: 0;
  box-shadow: 0px 0px 0px 3px #d8dadc;
}
.pet-records:hover {
  border-color: #929598;
  transition: all 250ms;
}
.pet-records:focus {
  outline: 0;
  box-shadow: 0px 0px 0px 3px #d8dadc;
}
.pet-sec-action-btns {
  grid-column-start: 10;
  grid-column-end: 13;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* .pet-info-row .curved-border{padding:12px; flex: 0 0 calc(50% - 8px); margin-right: 16px;} */
/* .pet-info-content{display: flex; flex-direction: column; gap: 16px;} */
.pet-info-text {
  color: #333436;
  font-weight: 600;
}
.green-color-text {
  color: #377e00;
  font-weight: 500;
}
.green-color-bg-icon {
  color: #5fa600;
}
.red-color-text {
  color: #b90000;
  font-weight: 500;
}
.red-color-text a {
  color: #b90000;
  text-decoration: underline;
}
.red-color-bg-icon {
  color: #ff0000;
}
.orange-color-text {
  color: #bf4200;
  font-weight: 500;
}
.orange-color-bg-icon {
  color: #f26322;
}
.yellow-color-text {
  color: #a27901;
  font-weight: 500;
}
.yellow-color-bg-icon {
  color: #f2c951;
}
.grey-color-text {
  color: #5d6063;
  font-weight: 500;
}
.grey-color-bg-icon {
  color: #929598;
}
.pet-info-status {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* .pet-compexam{flex: 0 0 100% !important;display: flex; align-items: center; justify-content: space-between;} */
.pet-detail-page .layout-content {
  padding: 0px 0px 0px 16px;
}
/* .pet-actions-btns{display: flex; gap: 8px; flex-direction: column;} */
.pet-action-btn {
  display: flex;
  padding: 12px;
  cursor: pointer;
}
.pet-action-btn:hover {
  border-color: #929598;
  transition: all 250ms;
}
.pet-action-btn:focus {
  outline: 0;
  box-shadow: 0px 0px 0px 3px #d8dadc;
}
.pet-action-text {
  color: #333436;
  font-weight: 500;
  padding: 0px 8px 0px 12px;
  flex: 1 0 0;
}
/* .pet-breed-gender-age{flex:0 0 calc(75% - 8px) !important;}
.pet-current-weight{flex:0 0 calc(25% - 8px) !important;} */
.pet-detail-appointment {
  display: flex;
  padding: 8px;
  width: 315px;
  cursor: pointer;
}
.pet-detail-appointment:hover {
  border-color: #929598;
  transition: all 250ms;
}
.pet-detail-appointment:focus {
  outline: 0;
  box-shadow: 0px 0px 0px 3px #d8dadc;
}
.pet-appointment-date {
  flex: 0 0 80px;
  padding: 6px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background-color: #f8d4c0;
  color: #bf4200;
}
.pet-appointment-date > span:first-of-type {
  color: #bf4200;
  font-weight: 700;
  font-size: 1rem;
}
.pet-appointment-date > span:nth-of-type(2) {
  color: #bf4200;
  font-weight: 700;
  font-size: 1.875rem;
}
.pet-appointment-date > span:last-of-type {
  font-weight: 500;
}
.pet-appointment-actions {
  display: flex;
  padding-top: 8px;
  gap: 8px;
  z-index: 3;
  position: relative;
}
.pet-appointment-actions .orange-bg-button {
  padding: 0 8px;
  border-radius: 8px;
  min-height: 32px;
  height: 32px;
}
.pet-appointment-actions .orange-button-outline {
  padding: 0 8px;
  border-radius: 8px;
  min-height: 32px;
  height: 32px;
}
.pet-appointment-type {
  color: #333436;
  font-weight: 700;
  padding-bottom: 8px;
}
.pet-detail-next-appnts {
  padding-top: 16px;
  display: grid;
  gap: 16px;
  grid-auto-flow: column;
  grid-auto-columns: 315px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  scroll-padding-left: 16px;
  scroll-padding-right: 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
  margin-left: -16px;
  margin-right: -49px;
  padding-left: 16px;
  padding-right: 49px;
  position: relative;
}
.pet-detail-next-appnts > * {
  scroll-snap-align: start end !important;
}
.pet-appointment-location,
.pet-appointment-time {
  line-height: 1.5;
  font-weight: 500;
}
.pet-appointment-time {
  color: #bf4200;
  font-weight: 600;
}
.pet-appointment-info {
  padding: 0px 8px;
  flex: 1;
}
.pet-detail-appointment .orange-right-arrow-icon {
  display: flex;
  align-items: center;
}
.pet-detail-appointments {
  padding: 20px 0;
  display: grid;
  position: relative;
}
.pet-detail-appointments:before,
.pet-detail-appointments:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -16px;
  width: 16px;
  height: 100%;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.119749) 11.02%,
    rgba(255, 255, 255, 0.223196) 20.31%,
    rgba(255, 255, 255, 0.312352) 28.12%,
    rgba(255, 255, 255, 0.389229) 34.71%,
    rgba(255, 255, 255, 0.45584) 40.33%,
    rgba(255, 255, 255, 0.514198) 45.25%,
    rgba(255, 255, 255, 0.566313) 49.71%,
    rgba(255, 255, 255, 0.614199) 53.98%,
    rgba(255, 255, 255, 0.659868) 58.31%,
    rgba(255, 255, 255, 0.705332) 62.96%,
    rgba(255, 255, 255, 0.752602) 68.19%,
    rgba(255, 255, 255, 0.803692) 74.25%,
    rgba(255, 255, 255, 0.860614) 81.4%,
    rgba(255, 255, 255, 0.925379) 89.9%,
    #ffffff 100%
  );
  z-index: 3;
}
.pet-detail-appointments:after {
  left: auto;
  /* right: -49px; */
  right: -18px;
  background: linear-gradient(
    -270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.119749) 11.02%,
    rgba(255, 255, 255, 0.223196) 20.31%,
    rgba(255, 255, 255, 0.312352) 28.12%,
    rgba(255, 255, 255, 0.389229) 34.71%,
    rgba(255, 255, 255, 0.45584) 40.33%,
    rgba(255, 255, 255, 0.514198) 45.25%,
    rgba(255, 255, 255, 0.566313) 49.71%,
    rgba(255, 255, 255, 0.614199) 53.98%,
    rgba(255, 255, 255, 0.659868) 58.31%,
    rgba(255, 255, 255, 0.705332) 62.96%,
    rgba(255, 255, 255, 0.752602) 68.19%,
    rgba(255, 255, 255, 0.803692) 74.25%,
    rgba(255, 255, 255, 0.860614) 81.4%,
    rgba(255, 255, 255, 0.925379) 89.9%,
    #ffffff 100%
  );
}
.pet-detail-appointments h5 {
  font-weight: 700;
  color: #333436;
  display: flex;
  align-items: center;
}
.line-separator {
  height: 2px;
  border-radius: 1px;
  background: #dcf0f6;
  margin: 8px 0;
}
.pet-detail-misc {
  display: flex;
  gap: 16px;
  padding: 20px;
}
.pet-detail-misc-title {
  color: #333436;
  font-weight: 600;
}
.pet-misc-row {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d8dadc;
  padding: 8px 16px 8px 8px;
  align-items: center;
  gap: 16px;
}
.pet-misc-label {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pet-misc-text {
  color: #333436;
  font-weight: 600;
}
.pet-misc-content {
  padding-top: 16px;
}
.pet-misc-actions {
  padding: 20px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.misc-action-info {
  padding-bottom: 20px;
}
.pet-detail-misc > div {
  flex: 0 0 calc((100% - 36px) / 3);
}
.pet-allergies .pet-misc-label {
  flex: 0 0 80%;
}
.pet-misc-row .pet-misc-value {
  text-align: right;
}
.pet-misc-icon {
  flex: 0 0 24px;
}
.curved-border .orange-right-arrow-icon {
  display: flex;
  align-items: center;
}
.grey-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #74787b;
  display: flex;
  align-self: center;
  margin-left: 5px;
  margin-right: 5px;
}
.pet-gender-age {
  display: flex;
  font-weight: 500;
}
.pet-weight {
  font-weight: 700;
}
.pet-weight-date {
  font-weight: 500;
}

.pet-detail-info .curved-border:hover:before,
.pet-detail-appointment.curved-border:hover:before {
  border: 2px solid rgba(0, 0, 0, 0.4);
}

/* the height of the pet image should match the height of the elements to the right, it need not be a square aspect ratio */
.pet-detail-image .pet-image {
  height: 100%;
}
.pet-detail-image .pet-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the appointment cards can grow to align with the overall page grid */

.pet-appointment-date {
  flex: 0 0 auto;
  padding: 8px 16px;
}

.pet-appointment-date > span:nth-of-type(2) {
  font-family: "GT-Walsheim-Bold", "Poppins", sans-serif;
}

.pet-detail-next-appnts {
  grid-auto-columns: auto;
  margin-right: -16px;
  padding-right: 16px;
}

@media screen and (min-width: 640px) {
  .pet-detail-appointment {
    width: calc(((100vw - 16px - 16px) - (16px * 2)) / 3);
  }
}

@media screen and (min-width: 1200px) {
  .pet-detail-appointment {
    width: calc(((100vw - 110px - 16px - 16px - 16px) - (16px * 3)) / 4);
  }
}

@media screen and (min-width: 1600px) {
  .pet-detail-appointment {
    width: calc(((1600px - 110px - 16px - 16px - 16px) - (16px * 3)) / 4);
  }
}

/* some changes to the grid to align elements more evenly */

/* change to 16 columns and then move the boxes span */

.pet-detail-info {
  grid-template-columns: repeat(16, 1fr);
}

.pet-detail-image-section {
  grid-column-start: span 6;
  grid-row-start: 1;
  grid-row-end: -1;
}

.pet-action-btns {
  grid-column-start: 13;
  grid-column-end: 17;
}

.pet-info-content {
  grid-column-start: 7;
  grid-column-end: 13;
}

.pet-sec-action-btns {
  grid-column-start: 13;
  grid-column-end: 17;
}

.pet-detail-misc {
  padding: 20px 0;
}

.pet-detail-image .pet-image:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 32px;
  border: 1px solid rgba(0, 0, 0, 0.075);
  transition: 0.15s all;
}

.owp-plan-text {
  color: #333436;
  font-weight: 700;
  font-size: 1.125rem;
}
.owp-plan-info-text {
  color: #74787b;
}
.owp-plan-status.active {
  display: inline-flex;
  height: 20px;
  padding: 0px 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  background: #dfedcc;
  color: #377e00;
}
.pet-detail-promos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px 0;
}
.pet-dental,
.pet-body-weight,
.pet-records {
  padding: 12px;
  grid-column-start: span 2;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.pet-appointment-actions > .btn img {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  width: 16px;
}
.pet-appointment-actions > .btn {
  padding: 0 8px;
  border-radius: 8px;
  min-height: 32px;
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
  position: relative;
  gap: 10px;
}
.pet-appointment-actions .lightgreen-bg-button {
  pointer-events: none;
}
.pet-appointment-actions .lightorange-bg-button {
  pointer-events: none;
}
.pet-appointment-actions .lightred-bg-button {
  pointer-events: none;
}

.archivePetModal .archive-actions {
  margin-top: 20px;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.blue-link {
  color: #006c93;
  font-weight: 700;
  display: flex;
  gap: 8px;
}
.blue-link:hover {
  text-decoration: underline;
  color: #006c93;
}
.archivePetModal .archive-actions a {
  width: 100%;
  justify-content: center;
  display: flex;
  gap: 8px;
}
.archivePetModal .archive-actions .btn {
  height: 48px;
}
.archivePetModal .archive-actions .btn img {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}
.archivePetModal .archive-actions .lightorange-bg-button {
  pointer-events: none;
}
.archivePetModal .archive-actions .lightgreen-bg-button {
  pointer-events: none;
}

.pet-care-info .pet-info-due span {
  color: #333436;
}
.modal-new .upcoming-appointments {
  margin: 20px 0;
}
.modal-new .upcoming-appointments h5 {
  font-weight: 600;
  color: #333436;
  margin-bottom: 16px;
}
.tool-tip-promo {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 16px;
  background: #f8d4c0;
  margin: 20px 0;
}
.tool-tip-promo-text {
  color: #333436;
  font-weight: 600;
  text-wrap: pretty;
  line-height: 1.5;
}
.tool-tip-promo-text p {
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.tool-tip-promo .btn {
  width: 100%;
}
.modal-new .vaccination-history-section {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.modal-new .vaccination-history-section h5 {
  font-weight: 600;
  color: #333436;
  margin-bottom: 16px;
}
.modal-new .vaccination-history-section .vaccination-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-new
  .vaccination-history-section
  .vaccination-history-list
  .vaccination-item {
  padding: 16px;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.vaccination-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* .vaccination-item:hover {border-color: #929598; transition: all 250ms;} */
.vaccination-item:hover:before {
  border: 1px solid rgba(0, 0, 0, 0.175) !important;
}
.vacci-name {
  font-weight: 700;
  color: #333436;
  font-size: 1.125rem;
}
.vacci-name span {
  display: block;
  font-size: 0.9166rem;
  color: #65686b;
  font-weight: 400;
  line-height: 1;
}
.vacci-status {
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 100px;
  font-weight: 500;
}
.vacci-last-date {
  line-height: 1;
  min-width: 100px;
}
.vacci-last-date div:last-of-type {
  color: #333436;
  font-weight: 500;
}
.vacci-next-date {
  line-height: 1;
  min-width: 100px;
}
.vacci-next-date div:last-of-type {
  color: #333436;
  font-weight: 500;
}
.modal-new .curved-border:hover:before {
  border: 2px solid rgba(0, 0, 0, 0.4);
}
.modal-new .prevention-history-section {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.modal-new .prevention-history-section h5 {
  font-weight: 600;
  color: #333436;
  margin-bottom: 16px;
}
.modal-new .prevention-history-section .prevention-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-new
  .prevention-history-section
  .prevention-history-list
  .vaccination-item {
  padding: 16px;
}
.modal-new .cur-body-weight {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;
}
.modal-new .cur-body-score {
  padding: 16px;
  pointer-events: none;
}
.modal-new .body-weight-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-new .body-weight-title {
  color: #333436;
  font-weight: 600;
  line-height: 1.3;
}
.bodyweightModal .modal-body > .body-weight-title {
  width: calc(100% - 175px);
  margin-bottom: 16px;
  float: left;
  position: absolute;
  top: 35px;
  left: 210px;
}
.modal-new .body-weight-text {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  font-family: "GT-Walsheim-Bold";
  letter-spacing: -0.8px;
  color: #333436;
}
.modal-new .body-weight-text span {
  font-size: 1rem;
  color: #74787b;
  font-weight: 600;
}
.modal-new .cur-body-score .ideal {
  display: inline-flex;
  height: 20px;
  padding: 0px 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  background: #dfedcc;
  color: #377e00;
}
.modal-new .cur-body-score .not-ideal {
  display: inline-flex;
  height: 20px;
  padding: 0px 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  background: #ffcccc;
  color: #b90000;
}
.modal-new .cur-body-score .no-value {
  display: inline-flex;
  height: 20px;
  padding: 0px 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  background: #d8dadc;
  color: #5d6063;
  font-size: 13px;
}
/* .modal-new .body-weight-section{display: grid; grid-template-columns: 20% calc(80% - 16px); gap:16px;pointer-events: none;} */
.modal-new .body-weight-section {
  display: flex;
  pointer-events: none;
  width: 155px;
  margin-right: 16px;
  float: left;
}
.score-dial {
  margin-top: 20px;
}
.body-weight-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}
.layout-option.pet-selector-option {
  height: 56px;
  padding: 5px !important;
}
.layout-option.pet-selector-option .pet-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}
.layout-option.pet-selector-option .pet-selector .cur-pet {
  width: 40px;
  height: 40px;
}
.layout-option.pet-selector-option .pet-selector .cur-pet img {
  border-radius: 12px;
  border: 2px solid rgba(0, 0, 0, 0.2);
}
.layout-option.pet-selector-option .pet-selector .cur-pet.archived-pet img {
  /*filter: sepia(100%) contrast(30%) brightness(143%) hue-rotate(164deg) saturate(3%);*/
  filter: saturate(0%);
}
.pet-selector-section .my-pet-item {
  width: 100px;
}
.pet-selector-section .my-pet-item-image {
  width: 100px;
  height: 100px;
}
.pet-selector-section .my-pet-item-add-new {
  width: 100px;
}
.pet-selector-section .archive-stack {
  min-width: 100px;
  height: 100px;
}
.pet-selector-section .my-pet-item-archived {
  width: 100px;
  height: 100px;
}
.pet-selector-section .archive-stack.expand .my-pet-item-archived {
  flex: 0 0 100px;
}
.pet-selector-section .archive-stack.expand .my-pet-archive {
  width: 100px;
}
.pet-selector-section .archive-stack.expand .my-pet-archive a {
  width: 100%;
}
.pet-selector-section .archive-stack > .my-pet-archive .my-pet-item-image {
  width: 100px;
}
.cur-pet-icon {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px !important;
  height: 24px !important;
}
.pet-detail-page .pet-location-address {
  border-bottom: 1px solid #e35205;
  border-radius: 16px;
  margin-top: 0;
}
.archived-tag {
  display: flex;
  height: 20px;
  padding: 0px 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  position: absolute;
  top: 20px;
}
.archived-pet.pet-detail-image img {
  /*filter: sepia(100%) contrast(30%) brightness(143%) hue-rotate(164deg) saturate(3%);*/
  filter: saturate(0%);
}
.pet-info-sec {
  flex: 1;
}
.pet-info-icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pet-info-content .curved-border:not([role="button"]) {
  pointer-events: none;
}
.pet-detail-page .mobile-text {
  display: none;
}
.error-state {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 200px;
  border: 1px solid #ff00001a;
  border-radius: 16px;
  background: #ffcccc1a;
  margin-top: 16px;
  padding: 25px;
  color: #d00;
  font-weight: 600;
  line-height: 125%;
}
.error-state a {
  color: #d00;
  font-weight: 600;
  text-decoration: underline !important;
}
.archive-info-text a {
  text-decoration: underline !important;
}
.prev-dash-location {
  width: 100%;
}
.prev-dash-location .pet-location-address {
  margin-top: 0;
}
.prev-dash-location .orange-button-outline {
  border: 2px solid rgba(242, 99, 34, 0.5);
}
.prev-dash-location .orange-button-outline:hover {
  border-color: #e35205;
}
.prev-dash-location .orange-button-outline:focus {
  outline: 0;
  border: 2px solid #e35205;
  background: #fff;
  color: #bf4200 !important;
  box-shadow: 0px 0px 0px 3px #f8d4c0;
}
.see-history-sec {
  margin: 20px 0;
}
.no-preventive-cards {
  grid-template-rows: max-content;
  grid-gap: 0;
  display: none !important;
}
.bodyweightModal canvas {
  padding: 50px 15px 15px 15px;
  border: 1px solid #d8dadc;
  border-radius: 16px;
  width: calc(100% - 175px) !important;
}
.no-preventive-cards ~ .pet-sec-action-btns {
  grid-column-start: 7;
  grid-column-end: 13;
}
.no-preventive-cards ~ .pet-sec-action-btns .btn {
  width: 100%;
}
.pet-action-btns:has(~ .no-preventive-cards) {
  grid-column-start: 7;
  grid-column-end: 13;
}

.pet-detail-name:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0);
  backdrop-filter: blur(6px);
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.2) 25%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.75) 50%,
    #000000 67%
  );
  mask-mode: alpha;
}
.pet-selector-section {
  height: 0;
  transition: all 0.5s ease-in-out;
  opacity: 0;
  overflow: hidden;
  position: relative;
}
.pet-selector-section.show {
  opacity: 1;
  height: 148px;
  margin-bottom: 20px;
}
.pet-selector-section:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, white);
  z-index: 2;
  transition: all 0.4s ease-in-out;
}
.pet-selector-section.show:after {
  top: 100%;
  height: 0px;
  transition: all 0.55s ease-in-out;
}
.pet-selector .cur-pet .orange-down-arrow-icon {
  width: 12px;
}

.pet-selector .cur-pet .orange-down-arrow-icon {
  transform: scaleX(1.5);
}
.pet-selector-section .my-pet-list {
  gap: 8px;
  padding-top: 8px;
}

.pet-selector-section .my-pet-item-name {
  font-size: 13px;
}

.pet-selector-section .my-pet-item-add-new img,
.pet-selector-section .my-pet-item-archived img {
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
}
.pet-selector-section .my-pet-add-text,
.pet-selector-section .my-pet-archived-text {
  position: absolute;
  bottom: 0;
  padding: 8px;
  font-size: 13px;
  line-height: 1.2;
}

.pet-edit-image {
  background: #33343633;
  padding: 4px;
  border-radius: 16px;
}

.pet-detail-name h1 {
  line-height: 1.33;
}

.pet-detail-name {
  align-items: flex-end;
}

.pet-selector-section .archive-stack.expand {
  gap: 8px;
}

.pet-selector .orange-down-arrow-icon {
  transition: transform 0.3s ease-in-out;
}

.pet-selector.open .orange-down-arrow-icon {
  transform: rotate(-90deg);
}

.pet-selector-section .scroll-nav .go-next,
.pet-selector-section .scroll-nav .go-previous {
  position: relative;
  top: 2px;
  height: 28px;
  width: 28px;
  background-position: center center;
  background-size: 28px 28px;
}

.layout-option.pet-selector-option .pet-selector {
  justify-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 4px;
  cursor: pointer;
}

.layout-option.pet-selector-option .pet-selector .cur-pet {
  position: relative;
  width: 100%;
  max-width: 40px;
}

.layout-option.pet-selector-option .pet-selector .cur-pet:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.layout-option.pet-selector-option .pet-selector .cur-pet img {
  border: none;
  border-radius: 12px !important;
  height: 100%;
  min-height: 40px;
  object-fit: cover;
}

.layout-option.pet-selector-option {
  height: auto;
}
.pet-appointment-type {
  padding-bottom: 0px;
  line-height: 1.25;
}

.pet-dental,
.pet-body-weight,
.pet-records {
  padding: 16px;
}

.pet-info-content .curved-border .orange-right-arrow-icon {
  margin-right: -8px;
}

.pet-info-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pet-info-text {
  line-height: 20px !important;
  font-size: 15px !important;
}

.pet-info-status {
  line-height: 14px !important;
  font-size: 14px !important;
}
.pet-current-weight,
.pet-vaccination,
.pet-medications,
.pet-parasite,
.pet-labresult,
.pet-compexam,
.pet-dental,
.pet-body-weight,
.pet-records {
  padding: 16px;
}

.pet-detail-image-section {
  aspect-ratio: auto !important;
  position: relative;
}

.pet-detail-image {
  height: 100%;
  border-radius: 0;
}

.pet-action-btn.curved-border {
  padding: 16px;
  align-items: center;
}

.owp-plan-text {
  line-height: 1.25;
}

.owp-plan-info-text {
  line-height: 1.25;
}

.pet-action-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.25;
}

.owp-plan-status.active {
  height: auto;
  display: flex;
  width: fit-content;
  padding: 4px 10px;
  margin-top: 4px;
}

.pet-appointment-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.pet-appointment-location {
  line-height: 1.25;
  font-size: 14px;
}

.pet-appointment-time {
  line-height: 1.25;
}

.visit-type {
  font-size: 14px;
}
.pet-action-btn.plan-type .pet-action-icon {
  flex: 0 0 80px;
}

/* pet selector animation change */

.pet-selector-section {
  height: 148px;
  position: absolute;
  width: 100%;
}
.pet-selector-section.show {
}

.pet-selector-section:after {
  content: "";
  display: block;
  position: absolute;
  top: auto;
  left: 0;
  width: 100%;
  height: 40px !important;
  background: linear-gradient(transparent, white);
  z-index: 2;
  bottom: 100%;
  border-bottom: solid 16px white;
  will-change: transform;
  transition: transform 0.2s ease-out 0.1s, opacity 0.1s linear 0s;
}

.pet-selector-section.show:after {
  transform: translateY(156px);
  opacity: 0;
  transition: transform 0.333s ease-in-out 0s, opacity 0.333s linear 0.333s;
  top: auto;
  display: none;
  transition-behavior: allow-discrete;
}

.pet-selector-section .my-pets-section {
  position: absolute;
  top: 0;
  width: calc(100% - 16px);
  transition: opacity 0.2s linear;
  opacity: 0;
  height: 100%;
}

.pet-selector-section.show > .my-pets-section {
  opacity: 1;
  transition: opacity 0.5s ease-in 0s;
}

.pet-detail-content {
  position: relative;
  transition: transform 0.333s ease-in-out 0s, opacity 0.333s linear 0.333s;
  will-change: transform;
  background: white;
}

.pet-selector-section.show + .pet-detail-content {
  transform: translateY(156px);
  margin-bottom: 156px;
}

.layout-content {
  position: relative;
}

.modal-new .therapeutic-diet-section .therapeutic-diet-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-new .therapeutic-diet-section .therapeutic-diet-list .vaccination-item {
  padding: 16px;
}
.modal-new
  .therapeutic-diet-section
  .therapeutic-diet-list
  .vaccination-item
  .orange-bg-button {
  padding: 0px 8px;
  z-index: 3;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
}
.modal-new
  .therapeutic-diet-section
  .therapeutic-diet-list
  .vaccination-item
  .orange-bg-button
  img {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
}
.tool-tip-promo .orange-button-outline {
  border: 4px solid rgba(242, 99, 34, 0.5);
}
.modal-new
  .therapeutic-diet-section
  .therapeutic-diet-list
  .vaccination-item
  .black-bg-button {
  padding: 0px 8px;
  z-index: 3;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
}
.modal-new
  .therapeutic-diet-section
  .therapeutic-diet-list
  .vaccination-item
  .black-bg-button
  img {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
}
.therapeutic-actions a.mobile {
  display: none !important;
} /* just for prototype */
.modal-new .modal-content .modal-body > *:last-child {
  margin-bottom: 0;
}
.therapeutic-diet-list .vacci-last-date {
  display: flex;
  gap: 0.5ch;
}
.therapeutic-diet-list .vacci-last-date span {
  color: #333436;
  font-weight: 500;
}
.therapeutic-actions {
  gap: 8px;
  margin-top: 8px;
}

.pet-archived-inactive-info ~ .pet-location-address {
  border-color: #d8dadc;
}

/* hide plan icons and pet names when archive stack is closed (and also on dashboard selector) */

.archive-stack img.pet-plan-type-icon,
.archive-stack .my-pet-item-name {
  opacity: 0;
  transition: opacity 0.15s linear;
}

.archive-stack.expand img.pet-plan-type-icon {
  opacity: 1;
}
@media (min-width: 640px) {
  .pet-detail-image-section.skeleton {
    /* padding-bottom: 100% */
  }
}
/* pet selector layout fixes at various sizes */

@media (min-width: 992px) and (max-width: 1199px) {
  .pet-detail-page .layout-content {
    padding-top: 40px !important;
  }
}

@media (max-width: 1199px) {
  .pet-selector .orange-down-arrow-icon {
    /* width: 37%; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-grow: 1;
  }
  .pet-selector .orange-down-arrow-icon img {
    width: 12px;
  }
  .pet-selector.open .orange-down-arrow-icon {
    transform: rotate(-180deg);
  }
}

@media (max-width: 1199px) {
  .pet-detail-appointments:after {
    right: -15px;
  }
  .pet-detail-appointments:before {
    left: -18px;
  }
}

@media (max-width: 1100px) {
  .pet-detail-info {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 20px;
    border-top: 2px solid #dcf0f6;
    align-items: flex-start;
  }
  /* .pet-detail-info > div{ flex-grow: 1; } */

  .pet-detail-image-section {
    aspect-ratio: 1/1;
    width: calc(50% - 8px);
    order: 1;
  }

  .pet-action-btns {
    width: 100%;
    order: 3;
    flex-direction: row;
    gap: 16px;
  }
  .pet-action-btns > div {
    flex-grow: 1;
  }
  .pet-sec-action-btns {
    width: 100%;
    order: 4;
  }
  .no-preventive-cards ~ .pet-sec-action-btns {
    width: auto;
  }
  .pet-info-content {
    width: calc(50% - 8px);
    order: 2;
  }
  .pet-detail-misc > div {
    flex: 0 0 calc(50% - 8px);
  }
  .pet-detail-misc {
    flex-wrap: wrap;
    padding-left: 20px;
    padding-right: 20px;
  }
  .pet-detail-promos {
    grid-template-columns: repeat(2, 1fr);
    padding-left: 20px;
    padding-right: 20px;
  }
  .pet-misc-actions {
    grid-template-columns: repeat(2, 1fr);
    padding-left: 20px;
    padding-right: 20px;
  }
  .misc-action-info {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 991px) {
  .pet-detail-page.container {
    padding: 0;
  }
  .pet-detail-page .layout-content {
    padding-left: 0;
  }
  /* .pet-detail-info{flex-wrap: wrap;}
    .pet-detail-image-section{flex:0 0 100%;} */
  .pet-detail-image .pet-image img {
    border-radius: 0px;
  }
  /* .pet-info-content{padding-left: 20px;padding-right: 20px; padding-top: 16px;flex:0 0 100%;} */
  /* .pet-breed-gender-age{flex: 0 0 calc(65% - 8px) !important;}
    .pet-current-weight{flex: 0 0 calc(35% - 8px) !important;} */
  /* .pet-actions-btns{flex:0 0 100%; padding-left: 20px; padding-right: 20px;padding-top: 16px;} */
  .pet-detail-appointments {
    padding: 20px;
  }

  .pet-detail-appointments:after {
    right: 0px;
  }
  .pet-detail-appointments:before {
    left: 0px;
  }
  .pet-detail-content {
    padding-left: 16px;
    padding-right: 16px;
  }
  .pet-selector-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* @media (min-width: 640px) and (max-width: 991px) {
  .pet-detail-page.container {
      padding: 16px;
  }
} */

@media (max-width: 767px) {
  .modal-new .body-weight-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 16px;
  }
  .modal-new .body-weight-info {
    flex-direction: row;
  }
  .modal-new .body-weight-title {
    width: 100%;
  }
  .bodyweightModal canvas {
    width: 100% !important;
  }
  .bodyweightModal .modal-body > .body-weight-title {
    top: 290px;
    left: 35px;
    width: 100%;
  }
}

@media screen and (max-width: 639.5px) {
  .pet-detail-info {
    display: flex;
    flex-direction: column;
  }

  .pet-detail-image-section {
    width: auto;
    height: 100vw;
    order: 1;
  }

  .pet-action-btns {
    width: 100%;
    order: 2;
    padding-left: 20px;
    padding-right: 20px;
  }
  .pet-sec-action-btns {
    width: 100%;
    order: 4;
    padding-left: 20px;
    padding-right: 20px;
  }

  .pet-info-content {
    width: auto;
    order: 2;
    padding-left: 20px;
    padding-right: 20px;
  }
  .pet-detail-misc > div {
    flex: 0 0 100%;
  }
  .pet-detail-misc {
    flex-wrap: wrap;
  }
  .pet-detail-content {
    padding-left: 0px;
    padding-right: 0px;
  }
  .pet-detail-promos {
    grid-template-columns: 1fr;
  }
  .pet-misc-actions {
    grid-template-columns: 1fr;
  }
  .pet-detail-page .desktop-text {
    display: none;
  }
  .pet-detail-page .mobile-text {
    display: block;
  }
  .pet-action-btns a {
    flex: 1;
  }
  .no-preventive-cards .pet-records {
    grid-column-start: span 4;
  }
  .pet-action-btns,
  .pet-info-content,
  .pet-sec-action-btns,
  .pet-detail-appointments {
    padding-top: 20px;
  }
  .therapeutic-actions {
    flex-wrap: wrap;
  }
  .therapeutic-actions a {
    flex: 0 0 100%;
  }
  .therapeutic-actions a.mobile {
    display: flex !important;
  } /* just for prototype */
  .pet-detail-image .pet-birthday-cake {
    bottom: 65px !important;
    position: absolute;
  }
}

/* feedback fixes */

@media (min-width: 640px) and (max-width: 1199px) {
  .layout-options {
    top: calc(67px + 16px);
  }
}

@media (min-width: 640px) and (max-width: 991px) {
  .pet-detail-page.container {
    padding-top: 16px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .pet-detail-page.container {
    padding-top: 40px;
    padding-left: 16px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .pet-detail-page .layout-content {
    padding: 0 !important;
  }
}

@media (min-width: 1200px) {
  .pet-detail-page .layout-content {
    padding: 0px 0px 0px 16px;
  }
}

@media (max-width: 1199px) {
  .layout-option.pet-selector-option {
    padding: 4px !important;
  }
  /* .pet-detail-page .layout-options .layout-option {
		padding: 0 16px;
		height: unset;
		overflow: hidden;
	} */
}

@media (min-width: 424px) and (max-width: 767.5px) {
  .pet-detail-page .layout-options .layout-option {
    width: 100%;
  }

  .pet-detail-page .layout-options .layout-option.pet-selector-option {
    width: calc(40px + 32px);
    flex-shrink: 0;
  }
}

@media (min-width: 767.5px) and (max-width: 992px) {
  .pet-detail-page .layout-options {
    left: 16px;
  }
}

@media (min-width: 640px) and (max-width: 767.5px) {
  .pet-detail-page .layout-options {
    width: calc(100% - 32px);
  }
}
@media (min-width: 767.5px) and (max-width: 1199.5px) {
  .pet-detail-page .layout-options {
    width: calc((100vw - 32px - 16px) / 2);
  }
  .pet-detail-page .layout-options .layout-option {
    width: calc(100% / 4);
  }
}
@media (max-width: 1100px) {
  .pet-detail-info {
    border: none;
    padding-top: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .pet-detail-info {
    padding-top: 16px;
  }
}

@media (max-width: 991px) {
  .pet-detail-image .pet-image img {
    border-radius: 32px;
  }
}
@media screen and (max-width: 639px) {
  .pet-detail-next-appnts {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  .pet-detail-appointments .scroll-nav {
    display: none;
  }

  .pet-detail-appointment {
    width: auto;
  }
}

@media screen and (min-width: 640px) and (max-width: 991px) {
  .pet-detail-appointment {
    width: 275px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .pet-detail-appointment {
    width: calc(((100vw - 16px - 16px) - (16px * 2)) / 3);
  }
}
@media (max-width: 639px) {
  /* html, body, .page-body, .pet-selector-sectiond {
		overflow: visible;
	} */
  body:has(.pet-detail-page) {
    overflow: visible;
  }
  .page-body:has(.pet-detail-page) {
    overflow: visible;
  }
  .layout-left {
    position: fixed;
    width: 100%;
    height: 64px;
    background: linear-gradient(#ffffff, #ffffff00);
    z-index: 2000;
  }

  .pet-detail-image .pet-image img,
  .pet-detail-name {
    border-radius: 0;
  }
  .pet-detail-image .pet-image:after {
    display: none;
  }
  .pet-detail-image-section {
    /* height: calc(100vw - 32px); */
    height: calc(100vw + 46px);
  }
  .pet-detail-image {
    /* position: absolute; */
    overflow: hidden;
    overflow: visible;
    height: calc(200vw + 81px);
    /* top: -81px; */
  }
  .pet-detail-content .account-breadcrumb {
    padding-left: 16px;
    padding-right: 16px;
  }
  .pet-detail-image .pet-image {
    position: sticky;
    top: 67px;
    width: 100vw;
    height: calc(100vw + 81px);
    z-index: -1;
  }
  .pet-detail-image .pet-image img {
    height: 100% !important;
    min-height: unset;
    max-height: unset;
    width: 100%;
  }

  .pet-detail-name {
    position: absolute;
    top: calc(100vw - 99px);
    bottom: auto;
    padding-bottom: 52px;
    padding-top: 80px;
  }
  .archived-tag {
    top: 60px;
  }

  .pet-detail-info {
    gap: 0;
    margin-bottom: 0;
    z-index: -1;
  }

  .pet-action-btns,
  .pet-info-content,
  .pet-sec-action-btns,
  .pet-detail-appointments {
    background: white;
    padding-bottom: 16px;
    z-index: 1;
  }

  .pet-action-btns {
    padding-top: 16px;
    border-radius: 32px 32px 0 0;
  }
  .pet-selector-section.show {
    background-color: #fff;
    z-index: 1;
  }
}

@media (max-width: 639px) {
  .pet-action-btns,
  .pet-info-content,
  .pet-sec-action-btns,
  .pet-detail-appointments {
    background: transparent;
    padding-top: 16px;
    z-index: 1;
  }
  .pet-action-btns {
    padding-bottom: 0;
    border-radius: 0;
    background: transparent;
  }
  .pet-detail-name:after {
    content: "";
    display: block;
    position: absolute;
    background: #ffffff;
    width: 100%;
    height: calc(100vw + 60px);
    border-radius: 32px 32px 0 0;
    bottom: calc(32px - 100vw - 60px);
    left: 0;
  }

  .pet-detail-image .pet-image {
    height: calc(100vw + 60px);
  }
}
@media (min-width: 640px) {
  .modal.fade .modal-dialog,
  .modal,
  .modal-dialog,
  .modal-content {
    transform: none;
    transition: opacity 0.1s ease-in-out;
  }

  .modal-backdrop,
  .modal-backdrop.fade,
  .modal-backdrop.show {
    transition: opacity 0.1s ease-in-out;
  }
}
.pet-edit-image {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCBmaWxsPSIjMzMzNDM2IiBmaWxsLW9wYWNpdHk9Ii4yIiBoZWlnaHQ9IjQ4IiByeD0iMTYiIHdpZHRoPSI0OCIvPjxyZWN0IGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iLjE5IiBoZWlnaHQ9IjQwIiByeD0iMTIiIHdpZHRoPSI0MCIgeD0iNCIgeT0iNCIvPjxyZWN0IGhlaWdodD0iMzkiIHJ4PSIxMS41IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1vcGFjaXR5PSIuMSIgd2lkdGg9IjM5IiB4PSI0LjUiIHk9IjQuNSIvPjxwYXRoIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0ibTMzLjc1NCAxOS43NDYyYy4yOTQ3LjI5NDguNDYwMy42OTQ0LjQ2MDMgMS4xMTEydjEwLjIxNDNjMCAuNDE2Ny0uMTY1Ni44MTY1LS40NjAzIDEuMTExMi0uMjk0Ni4yOTQ2LS42OTQ0LjQ2MDItMS4xMTExLjQ2MDJoLTE3LjI4NThjLS40MTY3IDAtLjgxNjQtLjE2NTYtMS4xMTExLS40NjAyLS4yOTQ3LS4yOTQ3LS40NjAzLS42OTQ1LS40NjAzLTEuMTExMnYtMTAuMjE0M2MwLS40MTY4LjE2NTYtLjgxNjQuNDYwMy0xLjExMTIuMjk0Ny0uMjk0Ni42OTQ0LS40NjAyIDEuMTExMS0uNDYwMmgyLjc1bDIuMzU3Mi0zLjkyODZoNy4wNzE0bDIuMzU3MiAzLjkyODZoMi43NWMuNDE2NyAwIC44MTY1LjE2NTYgMS4xMTExLjQ2MDJ6bS01LjgyNTQgNS40ODE3YzAgMi4xNjk3LTEuNzU4OSAzLjkyODUtMy45Mjg2IDMuOTI4NXMtMy45Mjg2LTEuNzU4OC0zLjkyODYtMy45Mjg1YzAtMi4xNjk2IDEuNzU4OS0zLjkyODUgMy45Mjg2LTMuOTI4NXMzLjkyODYgMS43NTg5IDMuOTI4NiAzLjkyODV6IiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii4xIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48ZyBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjc1Ij48cGF0aCBkPSJtMzQuMjE0MyAyMC44NTc0YzAtLjQxNjgtLjE2NTYtLjgxNjQtLjQ2MDMtMS4xMTEyLS4yOTQ2LS4yOTQ2LS42OTQ0LS40NjAyLTEuMTExMS0uNDYwMmgtMi43NWwtMi4zNTcyLTMuOTI4NmgtNy4wNzE0bC0yLjM1NzIgMy45Mjg2aC0yLjc1Yy0uNDE2NyAwLS44MTY0LjE2NTYtMS4xMTExLjQ2MDItLjI5NDcuMjk0OC0uNDYwMy42OTQ0LS40NjAzIDEuMTExMnYxMC4yMTQzYzAgLjQxNjcuMTY1Ni44MTY1LjQ2MDMgMS4xMTEyLjI5NDcuMjk0Ni42OTQ0LjQ2MDIgMS4xMTExLjQ2MDJoMTcuMjg1OGMuNDE2NyAwIC44MTY1LS4xNjU2IDEuMTExMS0uNDYwMi4yOTQ3LS4yOTQ3LjQ2MDMtLjY5NDUuNDYwMy0xLjExMTJ6Ii8+PHBhdGggZD0ibTI0IDI5LjE1NTljMi4xNjk3IDAgMy45Mjg2LTEuNzU4OCAzLjkyODYtMy45Mjg1cy0xLjc1ODktMy45Mjg2LTMuOTI4Ni0zLjkyODYtMy45Mjg2IDEuNzU4OS0zLjkyODYgMy45Mjg2IDEuNzU4OSAzLjkyODUgMy45Mjg2IDMuOTI4NXoiLz48L2c+PC9zdmc+");
  width: 48px;
  height: 48px;
  background-size: 48px 48px;
  background-repeat: no-repeat;
  /* opacity: .85; */
}
.pet-edit-image:hover {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCBmaWxsPSIjMzMzNDM2IiBmaWxsLW9wYWNpdHk9Ii4yIiBoZWlnaHQ9IjQ4IiByeD0iMTYiIHdpZHRoPSI0OCIvPjxyZWN0IGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iLjMzIiBoZWlnaHQ9IjQwIiByeD0iMTIiIHdpZHRoPSI0MCIgeD0iNCIgeT0iNCIvPjxyZWN0IGhlaWdodD0iMzkiIHJ4PSIxMS41IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1vcGFjaXR5PSIuNSIgd2lkdGg9IjM5IiB4PSI0LjUiIHk9IjQuNSIvPjxwYXRoIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0ibTMzLjc1NCAxOS43NDYyYy4yOTQ3LjI5NDguNDYwMy42OTQ0LjQ2MDMgMS4xMTEydjEwLjIxNDNjMCAuNDE2Ny0uMTY1Ni44MTY1LS40NjAzIDEuMTExMi0uMjk0Ni4yOTQ2LS42OTQ0LjQ2MDItMS4xMTExLjQ2MDJoLTE3LjI4NThjLS40MTY3IDAtLjgxNjQtLjE2NTYtMS4xMTExLS40NjAyLS4yOTQ3LS4yOTQ3LS40NjAzLS42OTQ1LS40NjAzLTEuMTExMnYtMTAuMjE0M2MwLS40MTY4LjE2NTYtLjgxNjQuNDYwMy0xLjExMTIuMjk0Ny0uMjk0Ni42OTQ0LS40NjAyIDEuMTExMS0uNDYwMmgyLjc1bDIuMzU3Mi0zLjkyODZoNy4wNzE0bDIuMzU3MiAzLjkyODZoMi43NWMuNDE2NyAwIC44MTY1LjE2NTYgMS4xMTExLjQ2MDJ6bS01LjgyNTQgNS40ODE3YzAgMi4xNjk3LTEuNzU4OSAzLjkyODUtMy45Mjg2IDMuOTI4NXMtMy45Mjg2LTEuNzU4OC0zLjkyODYtMy45Mjg1YzAtMi4xNjk2IDEuNzU4OS0zLjkyODUgMy45Mjg2LTMuOTI4NXMzLjkyODYgMS43NTg5IDMuOTI4NiAzLjkyODV6IiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii4yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48ZyBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjc1Ij48cGF0aCBkPSJtMzQuMjE0MyAyMC44NTc0YzAtLjQxNjgtLjE2NTYtLjgxNjQtLjQ2MDMtMS4xMTEyLS4yOTQ2LS4yOTQ2LS42OTQ0LS40NjAyLTEuMTExMS0uNDYwMmgtMi43NWwtMi4zNTcyLTMuOTI4NmgtNy4wNzE0bC0yLjM1NzIgMy45Mjg2aC0yLjc1Yy0uNDE2NyAwLS44MTY0LjE2NTYtMS4xMTExLjQ2MDItLjI5NDcuMjk0OC0uNDYwMy42OTQ0LS40NjAzIDEuMTExMnYxMC4yMTQzYzAgLjQxNjcuMTY1Ni44MTY1LjQ2MDMgMS4xMTEyLjI5NDcuMjk0Ni42OTQ0LjQ2MDIgMS4xMTExLjQ2MDJoMTcuMjg1OGMuNDE2NyAwIC44MTY1LS4xNjU2IDEuMTExMS0uNDYwMi4yOTQ3LS4yOTQ3LjQ2MDMtLjY5NDUuNDYwMy0xLjExMTJ6Ii8+PHBhdGggZD0ibTI0IDI5LjE1NTljMi4xNjk3IDAgMy45Mjg2LTEuNzU4OCAzLjkyODYtMy45Mjg1cy0xLjc1ODktMy45Mjg2LTMuOTI4Ni0zLjkyODYtMy45Mjg2IDEuNzU4OS0zLjkyODYgMy45Mjg2IDEuNzU4OSAzLjkyODUgMy45Mjg2IDMuOTI4NXoiLz48L2c+PC9zdmc+");
  /* border-radius: 12px;
    box-shadow: inset 0px 0px 0px 1.5px white;
    opacity: 1; */
}
.pet-edit-image:active,
.pet-edit-image:focus {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCBmaWxsPSIjMzMzNDM2IiBmaWxsLW9wYWNpdHk9Ii4yIiBoZWlnaHQ9IjQ4IiByeD0iMTYiIHdpZHRoPSI0OCIvPjxyZWN0IGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iLjMzIiBoZWlnaHQ9IjM4LjUiIHJ4PSIxMS4yNSIgd2lkdGg9IjM4LjUiIHg9IjQuNzUiIHk9IjQuNzUiLz48cmVjdCBoZWlnaHQ9IjM4LjUiIHJ4PSIxMS4yNSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgd2lkdGg9IjM4LjUiIHg9IjQuNzUiIHk9IjQuNzUiLz48cGF0aCBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Im0zMy43NTQgMTkuNzQ2MmMuMjk0Ny4yOTQ4LjQ2MDMuNjk0NC40NjAzIDEuMTExMnYxMC4yMTQzYzAgLjQxNjctLjE2NTYuODE2NS0uNDYwMyAxLjExMTItLjI5NDYuMjk0Ni0uNjk0NC40NjAyLTEuMTExMS40NjAyaC0xNy4yODU4Yy0uNDE2NyAwLS44MTY0LS4xNjU2LTEuMTExMS0uNDYwMi0uMjk0Ny0uMjk0Ny0uNDYwMy0uNjk0NS0uNDYwMy0xLjExMTJ2LTEwLjIxNDNjMC0uNDE2OC4xNjU2LS44MTY0LjQ2MDMtMS4xMTEyLjI5NDctLjI5NDYuNjk0NC0uNDYwMiAxLjExMTEtLjQ2MDJoMi43NWwyLjM1NzItMy45Mjg2aDcuMDcxNGwyLjM1NzIgMy45Mjg2aDIuNzVjLjQxNjcgMCAuODE2NS4xNjU2IDEuMTExMS40NjAyem0tNS44MjU0IDUuNDgxN2MwIDIuMTY5Ny0xLjc1ODkgMy45Mjg1LTMuOTI4NiAzLjkyODVzLTMuOTI4Ni0xLjc1ODgtMy45Mjg2LTMuOTI4NWMwLTIuMTY5NiAxLjc1ODktMy45Mjg1IDMuOTI4Ni0zLjkyODVzMy45Mjg2IDEuNzU4OSAzLjkyODYgMy45Mjg1eiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIuMiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS43NSI+PHBhdGggZD0ibTM0LjIxNDMgMjAuODU3NGMwLS40MTY4LS4xNjU2LS44MTY0LS40NjAzLTEuMTExMi0uMjk0Ni0uMjk0Ni0uNjk0NC0uNDYwMi0xLjExMTEtLjQ2MDJoLTIuNzVsLTIuMzU3Mi0zLjkyODZoLTcuMDcxNGwtMi4zNTcyIDMuOTI4NmgtMi43NWMtLjQxNjcgMC0uODE2NC4xNjU2LTEuMTExMS40NjAyLS4yOTQ3LjI5NDgtLjQ2MDMuNjk0NC0uNDYwMyAxLjExMTJ2MTAuMjE0M2MwIC40MTY3LjE2NTYuODE2NS40NjAzIDEuMTExMi4yOTQ3LjI5NDYuNjk0NC40NjAyIDEuMTExMS40NjAyaDE3LjI4NThjLjQxNjcgMCAuODE2NS0uMTY1NiAxLjExMTEtLjQ2MDIuMjk0Ny0uMjk0Ny40NjAzLS42OTQ1LjQ2MDMtMS4xMTEyeiIvPjxwYXRoIGQ9Im0yNCAyOS4xNTU5YzIuMTY5NyAwIDMuOTI4Ni0xLjc1ODggMy45Mjg2LTMuOTI4NXMtMS43NTg5LTMuOTI4Ni0zLjkyODYtMy45Mjg2LTMuOTI4NiAxLjc1ODktMy45Mjg2IDMuOTI4NiAxLjc1ODkgMy45Mjg1IDMuOTI4NiAzLjkyODV6Ii8+PC9nPjwvc3ZnPg==");
}
@media (min-width: 640px) {
  .pet-detail-name,
  .pet-detail-image,
  .pet-detail-image .pet-image img {
    border-radius: 0;
    overflow: visible;
  }

  .pet-detail-image {
  }

  .pet-detail-image-section {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
  }

  .pet-detail-name:before {
    border-radius: 0px 0px 32px 32px;
    overflow: visible;
  }
}

.my-pet-archive .arch-item-image,
.archived-pet.pet-detail-image .pet-image img {
  transition: filter 0.6s ease-in;
}

.archive-stack.expand .my-pet-archive a:hover .arch-item-image,
.archived-pet.pet-detail-image:hover img {
  filter: unset;
}
/* pet selector positioning and scroll edits */

.pet-detail-page .my-pets-section:before,
.pet-detail-page .my-pets-section:after {
  content: "";
  display: block;
  position: absolute;
  top: 36px;
  left: -16px;
  width: 16px;
  height: 100px;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.119749) 11.02%,
    rgba(255, 255, 255, 0.223196) 20.31%,
    rgba(255, 255, 255, 0.312352) 28.12%,
    rgba(255, 255, 255, 0.389229) 34.71%,
    rgba(255, 255, 255, 0.45584) 40.33%,
    rgba(255, 255, 255, 0.514198) 45.25%,
    rgba(255, 255, 255, 0.566313) 49.71%,
    rgba(255, 255, 255, 0.614199) 53.98%,
    rgba(255, 255, 255, 0.659868) 58.31%,
    rgba(255, 255, 255, 0.705332) 62.96%,
    rgba(255, 255, 255, 0.752602) 68.19%,
    rgba(255, 255, 255, 0.803692) 74.25%,
    rgba(255, 255, 255, 0.860614) 81.4%,
    rgba(255, 255, 255, 0.925379) 89.9%,
    #ffffff 100%
  );
  z-index: 2;
}

.pet-detail-page .my-pets-section:after {
  left: auto;
  right: -16px;
  background: linear-gradient(
    -270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.119749) 11.02%,
    rgba(255, 255, 255, 0.223196) 20.31%,
    rgba(255, 255, 255, 0.312352) 28.12%,
    rgba(255, 255, 255, 0.389229) 34.71%,
    rgba(255, 255, 255, 0.45584) 40.33%,
    rgba(255, 255, 255, 0.514198) 45.25%,
    rgba(255, 255, 255, 0.566313) 49.71%,
    rgba(255, 255, 255, 0.614199) 53.98%,
    rgba(255, 255, 255, 0.659868) 58.31%,
    rgba(255, 255, 255, 0.705332) 62.96%,
    rgba(255, 255, 255, 0.752602) 68.19%,
    rgba(255, 255, 255, 0.803692) 74.25%,
    rgba(255, 255, 255, 0.860614) 81.4%,
    rgba(255, 255, 255, 0.925379) 89.9%,
    #ffffff 100%
  );
}
@media (min-width: 992px) and (max-width: 1199px) {
  .pet-selector-section {
    overflow: visible;
  }
  .pet-detail-page .my-pets-section:after {
    right: -15px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .pet-detail-page.container {
    padding-top: 73px;
  }
}

.content-top {
  transition: none;
}
@media (min-width: 640px) and (max-width: 991px) {
  .pet-detail-page .layout-content {
    padding-top: 0 !important;
  }
  .pet-detail-page.container {
    padding-top: 73px;
  }
}
@media (min-width: 640px) and(max-width: 1100px) {
  .pet-detail-info {
    border: none;
    padding-top: 16px;
  }
}

@media (max-width: 640px) {
  .pet-detail-info {
    padding-top: 0px;
  }
}
@media (max-width: 640px) {
  .pet-detail-content {
    transition: none;
  }
  .pet-selector-section {
    transition: none;
  }
  .pet-selector-section.show > .my-pets-section {
    transition: nones;
  }
  .pet-selector-section.show:after {
    transition: none;
  }
  .pet-selector-section.show + .pet-detail-content {
    transform: translateY(85px);
    margin-bottom: 85px;
  }
  @media (max-width: 639px) {
    .pet-selector-section.show
      + .pet-detail-content
      .pet-detail-image
      .pet-image {
      top: calc(67px - 85px);
    }
  }
}

.pet-selector-section {
  overflow: visible;
  background: white;
}

.pet-selector-section .my-pets-section {
  width: 100%;
}
.pet-selector-section .my-pet-list {
  padding-right: 16px;
  width: calc(100% + 31px);
  margin-right: -24px;
  scroll-padding-left: 16px;
  scroll-padding-right: 16px;
}
@media (min-width: 1199px) {
  .pet-selector-section .my-pet-list {
    width: calc(100% + 32px);
  }
  .pet-selector-section .my-pets-section {
    width: calc(100% - 17px);
  }
}
@media (max-width: 992px) {
  .pet-selector-section .my-pet-list {
    width: calc(100% + 32px);
  }
  .pet-selector-section .my-pets-section {
    width: calc(100% - 32px);
  }
}
/* dashboard mobile pet selector right gradient on mobile fix */

@media (max-width: 767px) {
  .dashboard-page .my-pets-section:after {
    right: -16px;
  }
}
/* content margins and padding issues */

.line-separator {
  z-index: 1;
  position: relative;
  margin-top: 8px;
  margin-bottom: 8px;
}

.pet-detail-promos {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  z-index: 2;
  position: relative;
}

.pet-detail-appointments {
  z-index: 3;
  position: relative;
  padding-bottom: 0;
}

.pet-sec-action-btns {
}

.pet-detail-misc {
  position: relative;
  z-index: 1;
}
/* modals */
.modal-dialog {
  margin-top: 1.75rem;
}
/* adding margin on tablets */

@media (min-width: 640px) and (max-width: 840px) {
  .modal-dialog {
    width: calc(100% - 40px);
    margin: 0 auto 1.75rem auto;
  }
}

/* weight full width tiles */
.cur-body-weight.curved-border {
  width: 100%;
}

.cur-body-score.curved-border {
  width: 100%;
}
/* photo upload modal */

#editPetModal .dropzone {
  border-radius: 16px;
  border: 2px dashed #159ec5 !important;
  aspect-ratio: 1;
  background-image: url(../images/add-photo-img.svg);
  background-repeat: no-repeat;
  background-position: center;
  /* background-size: contain; */
  background-size: calc(100% - 40px);
}

#editPetModal .modal-dialog {
  max-width: calc(100vh - 180px);
  min-width: 320px;
}

/* #editPetModal .modal-content {
    max-width: 500px;
} */

.dz-default.dz-message {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

/* #editPetModal .modal-body {
    padding-top: 8px;
} */
#editPetModal .text-center {
  position: relative;
}

#editPetModal .dropzone {
  border: none !important;
  margin-bottom: 24px !important;
}

#editPetModal .text-center:before,
#editPetModal .text-center:after,
#editPetModal .dropzone:before,
#editPetModal .dropzone:after {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  border-width: 2px;
  position: absolute;
  border-color: #f26322;
}
#editPetModal .dropzone:after {
  bottom: 0;
  right: 0;
  border-right-style: solid;
  border-bottom-style: solid;
  border-bottom-right-radius: 16px;
}
#editPetModal .dropzone:before {
  bottom: 0;
  left: 0;
  border-left-style: solid;
  border-bottom-style: solid;
  border-bottom-left-radius: 16px;
}
#editPetModal .text-center:after {
  top: 0;
  right: 0;
  border-right-style: solid;
  border-top-style: solid;
  border-top-right-radius: 16px;
}
#editPetModal .text-center:before {
  top: 0;
  left: 0;
  border-left-style: solid;
  border-top-style: solid;
  border-top-left-radius: 16px;
}
.dropzone .dz-message {
  display: flex;
  height: 100%;
  align-items: flex-end;
  justify-content: center;
  /* padding-bottom: 24px; */
  margin: 0;
}

/* this probably doesn't work but the cropper/dropzone config needs to be set to fit this modal */

.croppereditor,
.cropper-container,
.cropper-modal {
  width: 100% !important;
  height: 100% !important;
}
#pet-switcher .pet-birthday-cake {
  height: 25px;
}
.pet-detail-image .pet-birthday-cake {
  height: 130px;
  position: absolute;
  bottom: 33px;
  left: -22px;
}
.pet-confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto !important;
  z-index: 1;
  object-fit: contain !important;
}
.pet-detail-image img.pet-birthday-cake {
  position: absolute;
  bottom: 66px;
}
/* .pet-confetti.hide{display: none;}
.pet-confetti.show{display: block;} */
/* img.pet-confetti {
    transform: perspective(2000px) translate3d(0px, -15%, 198px) scale(1.5) ;
    transition: transform .67s ease-out;
}

img.pet-confetti.show {
    transform: none;
} */

.pet-detail-image .pet-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
}

.pet-detail-image-section {
  aspect-ratio: 1 / 1 !important;
}

@media (max-width: 639px) {
  .pet-detail-image-section {
    aspect-ratio: auto !important;
  }
}
@media (max-width: 640px) {
  .pet-detail-image img.pet-birthday-cake {
    bottom: 96px;
  }
  .vacci-status,
  .vacci-last-date,
  .vacci-next-date {
    min-width: calc((100% - 20px) / 3);
    max-width: calc((100% - 20px) / 3);
  }
}
.pet-detail-misc {
  padding-top: 0;
}
.cur-body-weight .body-weight-title span {
  text-wrap: nowrap;
}

/* @media (min-width:1199px){
	.layout-left {
		padding-right: 10px;
	}
	.layout-options .layout-option {
		text-align: center;
		padding-left: 2px;
		padding-right: 2px;
	}
} */
.vacci-status {
  line-height: 1.2;
  font-size: 14px;
  flex-grow: 2;
}

.vacci-last-date {
  line-height: 1.2;
  min-width: 12ch;
}

.vacci-next-date {
  line-height: 1.2;
  min-width: 11ch;
}

.info-row {
  gap: 16px;
}

@media (max-width: 640px) {
  .vacci-status,
  .vacci-last-date,
  .vacci-next-date {
    max-width: none;
    font-size: 13px;
    line-height: 1.2;
    min-width: 11ch;
  }
  .vacci-next-date {
    min-width: 10ch;
  }
}

@media (max-width: 414px) {
  .info-row {
    gap: 8px;
  }
}
.pet-detail-appointments .promo-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 16px;
}
@media (max-width: 1099px) {
  .pet-detail-appointments .promo-section {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767.5px) {
  .pet-detail-appointments .promo-section {
    grid-template-columns: repeat(1, 1fr);
  }
}