.hidden { display: none !important; } .price-updates-wrapper { margin-right: 20px; padding: 12px; position: relative; font-size: 16px; } .price-updates-wrapper input, .price-updates-wrapper label, .price-updates-wrapper button { font-size: 16px; } .price-updates-variations { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; } .price-updates-contents { margin-bottom: 12px; } .price-updates-contents form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .price-updates-contents input { height: 30px; } .price-updates-contents input[type="url"] { width: 600px; } .price-updates-contents button { width: 200px; padding: 12px 16px; text-align: center; border-radius: 20px; border: none; color: #fff; background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569ef0 57.69%); cursor: pointer; transition: filter 0.3s ease; } .price-updates-contents button:hover { filter: brightness(0.9); } .price-updates-caption { display: block; margin-bottom: 12px; font-size: 14px; } .price-updates-count { display: flex; gap: 12px; margin-bottom: 12px; } .price-updates-count-success span { color: #19a917; } .price-updates-count-error span { color: #fa0505; } .price-updates-response { width: 100%; max-height: 800px; overflow-y: auto; margin-bottom: 12px; } .price-updates-response table { width: 100%; } .price-updates-response thead th { position: sticky; top: 0; padding-block: 12px; background-color: #f0f0f1; } .price-updates-response tbody td { text-align: center; padding-block: 12px; } .price-updates-error { width: max-content; padding: 16px 20px; border-radius: 8px; color: #fff; background-color: #fa0505; } .price-updates-loader-wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.25); } .price-updates-loader { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 6rem; margin-top: 3rem; margin-bottom: 3rem; } .price-updates-loader:before, .price-updates-loader:after { content: ""; position: absolute; border-radius: 50%; animation: pulsOut 1.8s ease-in-out infinite; filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75)); } .price-updates-loader:before { width: 100%; padding-bottom: 100%; box-shadow: inset 0 0 0 1rem #fff; animation-name: pulsIn; } .price-updates-loader:after { width: calc(100% - 2rem); padding-bottom: calc(100% - 2rem); box-shadow: 0 0 0 0 #fff; } @keyframes pulsIn { 0% { box-shadow: inset 0 0 0 1rem #fff; opacity: 1; } 50%, 100% { box-shadow: inset 0 0 0 0 #fff; opacity: 0; } } @keyframes pulsOut { 0%, 50% { box-shadow: 0 0 0 0 #fff; opacity: 0; } 100% { box-shadow: 0 0 0 1rem #fff; opacity: 1; } }