.nx-teesheet.htmx-request .skeleton-container { margin-right: auto; margin-left: auto; padding: 0 5px; max-width: calc(100% - 10px); }

.nx-teesheet.htmx-request .skeleton-message-panel:empty { width: 100%; height: 84px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), radial-gradient(circle 15px, #f2f2f2 99%, transparent 0), linear-gradient(#ddd 10px, transparent 0); background-repeat: no-repeat; background-size: 20% 100%, 30px 30px, 80% 10px; background-position: 0 0, 0 30px, 50px 40px; animation: shine2 1s infinite; }

@media (min-width: 768px) { .nx-teesheet.htmx-request .skeleton-container { width: 750px; } }

@media (max-width: 549px) { .nx-teesheet.htmx-request .skeleton-teetime-boxes:empty { margin: 0 5px 0 0; width: 100%; height: 100vh; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), linear-gradient(#f2f2f2 98px, transparent 0); background-repeat: repeat-y; background-size: 20% 100%, 100% 103px; background-position: 0 0, 0 0; animation: shine3 1s infinite; } .nx-teesheet.htmx-request .skeleton-top-bars:empty { width: 100%; height: 80px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), linear-gradient(#f2f2f2 75px, transparent 0); background-repeat: no-repeat; background-size: 20% 100%, 100% 75px; background-position: 0 0, 0 5px; animation: shine4 1s infinite; } .nx-teesheet.htmx-request .skeleton-golf-club:empty { width: calc(100% + 3px); height: 75px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), linear-gradient(#f2f2f2 70px, transparent 0); background-repeat: no-repeat; background-size: 20% 100%, 99.2% 70px; background-position: 0 0, 0 5px; animation: shine4 1s infinite; } }

@media (min-width: 550px) and (max-width: 991px) { .nx-teesheet.htmx-request .skeleton-teetime-boxes:empty { margin: 0 5px 0 0; width: 100%; height: 100vh; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), linear-gradient(#f2f2f2 75px, transparent 0), linear-gradient(#f2f2f2 75px, transparent 0); background-repeat: repeat-y; background-size: 20% 100%, 49% 80px, 50% 80px; background-position: 0 0, 0 0, 100% 0; animation: shine3 1s infinite; } .nx-teesheet.htmx-request .skeleton-top-bars:empty { width: 100%; height: 80px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), linear-gradient(#f2f2f2 75px, transparent 0); background-repeat: no-repeat; background-size: 20% 100%, 100% 75px; background-position: 0 0, 0 5px; animation: shine4 1s infinite; } .nx-teesheet.htmx-request .skeleton-golf-club:empty { width: calc(100% + 6px); height: 75px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), linear-gradient(#f2f2f2 70px, transparent 0); background-repeat: no-repeat; background-size: 20% 100%, 99.2% 70px; background-position: 0 0, 0 5px; animation: shine4 1s infinite; } }

@media (min-width: 768px) and (max-width: 991px) { .nx-teesheet.htmx-request .skeleton-message-panel:empty { margin-left: -5px; } }

@media (min-width: 992px) { .nx-teesheet.htmx-request { /* CSS from teesheet/styles.message-panel:empty { background-position: 0 10px, /* highlight  -35px 35px, 50px 45px !important; }*/ } .nx-teesheet.htmx-request .skeleton-container { width: 970px; } .nx-teesheet.htmx-request .skeleton-teetime-boxes:empty { margin: 5px; height: 100vh; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), linear-gradient(#f2f2f2 75px, transparent 0), linear-gradient(#f2f2f2 75px, transparent 0), linear-gradient(#f2f2f2 75px, transparent 0); background-repeat: repeat-y; background-size: 20% 100%, 33% 80px, 33% 80px, 33% 80px; background-position: 0 5px, 0 5px, 50% 5px, 100% 5px; animation: shine 1s infinite; } .nx-teesheet.htmx-request .skeleton-top-bars:empty { margin: 0 5px; width: 100%; height: 40px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), linear-gradient(#f2f2f2 35px, transparent 0); background-repeat: no-repeat; background-size: 20% 100%, 99.2% 35px; background-position: 0 0, 0 5px; animation: shine4 1s infinite; } .nx-teesheet.htmx-request .skeleton-golf-club:empty { margin: 0 5px; width: 100%; height: 75px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), linear-gradient(#f2f2f2 70px, transparent 0); background-repeat: no-repeat; background-size: 20% 100%, 99.2% 70px; background-position: 0 0, 0 5px; animation: shine4 1s infinite; } }

@media (min-width: 1200px) { .nx-teesheet.htmx-request .skeleton-container { width: 1170px; padding: 0 !important; } }

@keyframes shine { to { background-position: 120% 5px, 0 5px, 50% 5px, 100% 5px; } }

@keyframes shine2 { to { background-position: 120% 0,  0 30px, 50px 40px; } }

@keyframes shine3 { to { background-position: 120% 0, 0 0, 100% 0; } }

@keyframes shine4 { to { background-position: 120% 0, 0 5px; } }

/*# sourceMappingURL=skeleton.css.map */