@keyframes skeleton-animation {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/*
    export const defaultBaseColor = "#eeeeee";
    export const defaultHighlightColor = "#f5f5f5";

    export const defaultBaseColor = "#c0c0c0";
    export const defaultHighlightColor = "#cccccc";
*/

.skeleton {
    background-color: #cacaca;
    background-image: linear-gradient( 90deg, #cacaca, #d5d5d5, #cacaca);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    border-radius: 4px;
    display: inline-block;
    line-height: 1;
    width: 100%;
    animation: skeleton-animation 2.5s ease-in-out infinite;
}

/* .react-loading-skeleton {
        background-color: ${color};
        background-image: linear-gradient(
          90deg,
          ${color},
          ${highlightColor},
          ${color}
    ); */
h1.page-title {
    margin-bottom: 0.75em;
}

h1.page-title.skeleton {
    color: transparent;
}

@keyframes shine-lines {
    0% {
      background-position: -100px;
    }
    40%, 100% {
      background-position: 140px;
    }
  }
  @keyframes shine-avatar {
    0% {
      background-position: -32px;
    }
    40%, 100% {
      background-position: 208px;
    }
  }

@media screen and (max-width: 767px) {
    h1.page-title {
        margin-bottom: 0.65em;
        font-size: 192%;
    }
}
img.optimized.lazyloaded {
    height: auto !important;
    padding-top: unset !important;
}

img.optimized-external {
    object-fit: contain;
}

span.optimized-wraper {
    width: 100%;
    display: inline-block;
    position: relative;
    margin-right: auto;
    margin-left: auto;
}