@keyframes animation-skeleton-loader {
  from {
    /* background-position: -100% 0; */
    background-color: hsl(211, 25%, 80%);
  }

  to {
    /* background-position: 100% 0; */
    background-color: hsl(211, 25%, 95%);
  }
}
@keyframes animation-fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes animation-fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.faded-out {
  opacity: 0;
}
.faded-in {
  opacity: 1;
}
.page-fade-out {
  animation: animation-fadeOut 1s normal forwards ease-in-out;
}
.page-fade-in {
  animation: 2s ease animation-fadeIn;
}

.skeleton-anime {
  animation: animation-skeleton-loader 1s linear infinite alternate;
}

.phpp-skeleton-page {
  display: grid;
  grid-template-columns: minmax(0, 512px) 1fr;
  grid-gap: 2rem;
  background-color: #fff;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

.phpp-skeleton-sidebar {
  display: flex;
  gap: 2rem;
  flex-direction: column;
}
.phpp-skeleton-body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.skeleton-box {
  border-radius: 0.5rem;
  background-color: #cbd5e0;
  display: block;
}
.skeleton-loader-strip {
  width: 100%;
  height: 25px;
}

.skeleton-loader-sm,
.skeleton-loader-md,
.skeleton-loader-lg {
  width: 100%;
}

.skeleton-loader-sm {
  max-height: 150px;
}

.skeleton-image {
  max-width: 512px;
  width: 100%;
  height: 512px;
}

.phpp-skeleton-page__header {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}

.phpp-skeleton-page__header > div:nth-child(1) {
  grid-column: 1/-1;
  margin-bottom: 0.5rem;
}

.phpp-skeleton-page__header > div:last-child {
  width: 410px;
}
.phpp-skeleton-page__trips-section {
  display: grid;
  grid-template-columns: 75% 1fr;
  grid-template-rows: 240px 25px 25px;
  gap: 0.5rem;
}
.phpp-skeleton-page__trips-section > .--full {
  grid-column: span 2;
}

.phpp-skeleton-page__upcoming-trips {
  display: flex;
  flex-direction: column;
}
.phpp-skeleton-page__upcoming-trips > .phpp-skeleton-page__trips-section {
  grid-template-columns: minmax(25%,220px) 1fr;
  gap: 1rem;
  grid-template-rows: 180px;
  margin-bottom: 2rem;
}
.phpp-skeleton-page__upcoming-trips
> .phpp-skeleton-page__trips-section
.--content {
  display: grid;
  width: 100%;
  gap: 1rem;
  grid-template-columns: 75% 1fr;
  grid-template-rows: 20px 20px;
}

.phpp-skeleton-page__past-trips {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

[data-phpp-page-content="false"] {
  display: none;
}
[data-phpp-page-content="true"] {
  display: block;
}
@media (max-width: 850px) {
  .phpp-skeleton-page {
    min-height: 100vh;
    max-width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .phpp-skeleton-page > .ttp-skeleton-page__header {
    grid-template-rows: repeat(3, auto);
    grid-template-columns: 200px auto;
    gap: 0.25rem;
  }
  .phpp-skeleton-page
  > .ttp-skeleton-page__header
  > .skeleton-box:last-child {
    width: 100%;
  }
  .phpp-skeleton-page > .ttp-skeleton-page__banner {
    grid-template-columns: 100%;
  }
  .skeleton-image {
    width: 100%;
    height: 400px;
    max-width: inherit;
  }
  .phpp-skeleton-page__past-trips {
    grid-template-columns: 100%;
    grid-template-rows: 1fr;
  }
}

@supports (height: -webkit-fill-available) {
    .chakra-portal .chakra-modal__content-container {
        height: 100%;
    }
}

/*BEGIN custom PHPP Layout */
@media only screen and (height >= 600px) {
 
  [data-trova-survey-frame="true"][data-trova-survey-frame-step="2"],
  [data-trova-survey-frame="true"][data-trova-survey-frame-step="1"]{
    overflow-y: auto;
    min-height: calc(650px + 3rem);
  }
}

/*tablet portrait and mobile*/
@media only screen and (max-width: 600px) {
  .page-wrapper {
    padding-left: var(--tc-space-1);
    padding-right: var(--tc-space-1);
  }
  [data-phpp-card-section="reviews"] {
    margin-top: var(--tc-space-4);
    margin-bottom: var(--tc-space-4);
  }
}
@media screen and (min-width:772px) {
  /*create higher specificity to avoid micro apps taking precedent*/  
  :is(div[data-testid="trova-uicomp-base-box"]):has(hr) {
      padding-top: 0;
      padding-bottom: 0;
  }
  :is([data-phpp-card-section="past-trips"]),
  :is([data-phpp-card-section="upcoming-trips"]),
  :is([data-phpp-card-section="reviews"]),
   .inner-email-collection-section.inner-email-collection-section {
       margin-bottom: 0;
    }
}

body .page-wrapper,
:fullscreen {
  background:#f9fafb;
}
body .page-wrapper > div.container-fluid {
  margin-top: var(--tc-space-4); /*1rem*/
}
[data-phpp-page-content] hr {
  display:none; height:0px;
}

[data-phpp-card-section="profile-summary"] [data-phpp-card-section="about"] {
  display: flex;
  gap: var(--tc-space-3);
  margin-top: var(--tc-space-0);
  padding-top: var(--tc-space-0);
}

[data-phpp-card-section="profile-summary"] hr {
  display: block;
  height: 1px;
}

[data-phpp-card-section="about"] > div {
  padding-top: var(--tc-space-0) !important;
}

[data-phpp-card-section]:not([data-phpp-card-section="about"], [data-phpp-card-section="profile-image"]) {
    --tc-inset-shadow: 0 0 #0000;
    --tc-inset-ring-shadow: 0 0 #0000;
    --tc-ring-offset-shadow: 0 0 #0000;
    --tc-ring-shadow: 0 0 #0000;
    --tc-shadow: 0 10px 15px -3px var(--tc-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tc-shadow-color, rgb(0 0 0 / 0.1));
    --radius-xl: .75rem;
    box-shadow: var(--tc-inset-shadow), var(--tc-inset-ring-shadow), var(--tc-ring-offset-shadow), var(--tc-ring-shadow), var(--tc-shadow);
    border-radius: var(--radius-xl);
    background-color: white;
}

:is([data-phpp-card-section="past-trips"]),
:is([data-phpp-card-section="upcoming-trips"]),
:is([data-phpp-card-section="reviews"]),
/*css trick to make it higher specificity instead of using !important*/
.inner-email-collection-section.inner-email-collection-section {
  margin-bottom: var(--tc-space-8);
}
.phpp-sidebar-container [data-phpp-card-section="profile-image"] {
  text-align: center;
  padding-block-start: var(--tc-space-6);
  padding-block-end: var(--tc-space-6);
}
.phpp-sidebar-container [data-phpp-card-section="profile-image"] > img {
    --tc-shadow: 0 4px 6px -1px var(--tc-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tc-shadow-color, rgb(0 0 0 / 0.1));
    --tc-inset-shadow: 0 0 #0000;
    --tc-inset-ring-shadow: 0 0 #0000;
    --tc-ring-offset-shadow: 0 0 #0000;
    --tc-ring-shadow: 0 0 #0000;
    --tc-image-radii-multiplier: 50;
    border-color: white;
    border-width: 4px;
    border-radius: calc(infinity *1px);  
    box-shadow: var(--tc-inset-shadow), var(--tc-inset-ring-shadow), var(--tc-ring-offset-shadow), var(--tc-ring-shadow), var(--tc-shadow);
    width: calc(.25rem *  var(--tc-image-radii-multiplier));
    height: calc(.25rem * var(--tc-image-radii-multiplier));
    border-style: solid;
}