1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[146],{78352:function(n,r,a){a.d(r,{Z:function(){return c}});var i=a(11527),t=a(41098),o=a(69964),e=a(82187),s=a.n(e);function c(n){let{status:r,className:a,...e}=n,c=s()("mb-0",a);return(0,i.jsx)(t.Z,{className:c,...e,children:(0,i.jsxs)(t.Z.Body,{children:[(0,i.jsx)(o.Z,{aspectRatio:"1x1",children:(0,i.jsx)("div",{className:"d-flex align-items-center justify-content-center overflow-hidden",children:e.children})}),r&&"new"===r&&(0,i.jsx)("span",{className:"badge bg-success position-absolute top-0 start-100 translate-middle ms-n3",children:"New!"})]})})}},30558:function(n,r,a){var i=a(11527),t=a(82187),o=a.n(t),e=a(40507),s=a.n(e),c=a(50959),l=a(80803),m=a(11725);let d=c.forwardRef((n,r)=>{let{as:a="div",className:t,...e}=n,s=o()("header",t);return(0,i.jsx)(a,{className:s,ref:r,...e})});d.propTypes={as:s().oneOfType([s().element,s().string])},d.AvatarTop=c.forwardRef((n,r)=>{let{className:a,...t}=n,e=o()("header-avatar-top",a);return(0,i.jsx)(m.Avatar,{className:e,ref:r,...t})}),d.Body=c.forwardRef((n,r)=>{let{as:a="div",className:t,...e}=n,s=o()("header-body",t);return(0,i.jsx)(a,{className:s,ref:r,...e})}),d.Body.propTypes={as:s().oneOfType([s().element,s().string])},d.Footer=c.forwardRef((n,r)=>{let{as:a="div",className:t,...e}=n,s=o()("header-footer",t);return(0,i.jsx)(a,{className:s,ref:r,...e})}),d.Footer.propTypes={as:s().oneOfType([s().element,s().string])},d.ImageTop=c.forwardRef((n,r)=>{let{as:a="img",className:t,...e}=n,s=o()("header-img-top",t);return(0,i.jsx)(a,{className:s,ref:r,...e})}),d.ImageTop.propTypes={as:s().oneOfType([s().element,s().string])},d.Pretitle=c.forwardRef((n,r)=>{let{as:a="h6",className:t,...e}=n,s=o()("header-pretitle",t);return(0,i.jsx)(a,{className:s,ref:r,...e})}),d.Pretitle.propTypes={as:s().oneOfType([s().element,s().string])},d.Subtitle=c.forwardRef((n,r)=>{let{as:a="p",className:t,...e}=n,s=o()("header-subtitle",t);return(0,i.jsx)(a,{className:s,ref:r,...e})}),d.Subtitle.propTypes={as:s().oneOfType([s().element,s().string])},d.Tabs=c.forwardRef((n,r)=>{let{className:a,...t}=n,e=o()("header-tabs",a);return(0,i.jsx)(l.Z,{variant:"tabs",className:e,ref:r,...t})}),d.Title=c.forwardRef((n,r)=>{let{as:a="h1",className:t,...e}=n,s=o()("header-title",t);return(0,i.jsx)(a,{className:s,ref:r,...e})}),d.Title.propTypes={as:s().oneOfType([s().element,s().string])},r.Z=d},11725:function(n,r,a){a(30558);var i=a(11527),t=a(82187),o=a.n(t),e=a(40507),s=a.n(e),c=a(50959);let l=c.forwardRef((n,r)=>{let{as:a="div",active:t,className:e,...s}=n,c=o()("icon",t&&"active",e);return(0,i.jsx)(a,{className:c,ref:r,...s})});l.propTypes={as:s().oneOfType([s().element,s().string])}},38873:function(n,r){r.Z=[{id:"circle-spin-1",title:"Spinning circle loader #1",category:"circle",css:".circle-spin-1 {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n width: var(--size);\n height: var(--size);\n border-width: var(--stroke-width);\n border-style: solid;\n border-color: var(--color) var(--color) var(--color) transparent;\n border-radius: 50%;\n transform: rotate(0deg);\n animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-1-animation;\n}\n\n@keyframes circle-spin-1-animation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"},{id:"circle-spin-2",title:"Spinning circle loader #2",category:"circle",css:".circle-spin-2 {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --accent-opacity: .25;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n position: relative;\n width: var(--size);\n height: var(--size);\n}\n\n.circle-spin-2::before,\n.circle-spin-2::after {\n content: '';\n position: absolute;\n inset: 0;\n border-width: var(--stroke-width);\n border-style: solid;\n border-radius: 50%;\n transform: rotate(0deg);\n animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-2-animation;\n}\n\n.circle-spin-2::before {\n border-color: var(--color) var(--color) var(--color) transparent;\n opacity: var(--accent-opacity);\n}\n\n.circle-spin-2::after {\n border-color: transparent transparent transparent var(--color);\n}\n\n@keyframes circle-spin-2-animation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"},{id:"circle-spin-3",title:"Spinning circle loader #3",category:"circle",css:".circle-spin-3 {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n width: var(--size);\n height: var(--size);\n border-width: var(--stroke-width);\n border-style: solid;\n border-color: var(--color) transparent var(--color) transparent;\n border-radius: 50%;\n transform: rotate(0deg);\n animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-3-animation;\n}\n\n@keyframes circle-spin-3-animation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"},{id:"circle-spin-4",title:"Spinning circle loader #4",category:"circle",css:".circle-spin-4 {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --color: currentColor;\n --animation-duration: 1s;\n position: relative;\n width: var(--size);\n height: var(--size);\n}
1\n\n.circle-spin-4::before,\n.circle-spin-4::after {\n content: '';\n position: absolute;\n inset: 0;\n border-width: var(--stroke-width);\n border-style: solid;\n border-color: var(--color) var(--color) transparent transparent;\n border-radius: 50%;\n transform: rotate(0deg);\n animation: var(--animation-duration) infinite circle-spin-4-animation;\n}\n\n.circle-spin-4::before {\n animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);\n}\n\n.circle-spin-4::before {\n animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n@keyframes circle-spin-4-animation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"},{id:"circle-spin-5",title:"Spinning circle loader #5",category:"circle",css:".circle-spin-5 {\n --size: 24px;\n --stroke-width: calc(var(--size) / 2);\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n width: var(--size);\n height: var(--size);\n border-width: var(--stroke-width);\n border-style: solid;\n border-color: var(--color) transparent var(--color) transparent;\n border-radius: 50%;\n transform: rotate(0deg);\n animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-5-animation;\n}\n\n@keyframes circle-spin-5-animation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"},{id:"circle-spin-6",title:"Spinning circle loader #6",category:"circle",css:".circle-spin-6 {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --accent-opacity: .25;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n position: relative;\n width: var(--size);\n height: var(--size);\n animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-6-animation;\n}\n\n.circle-spin-6::before,\n.circle-spin-6::after {\n content: '';\n position: absolute;\n background-color: var(--color);\n border-radius: 50%;\n}\n\n.circle-spin-6::before {\n inset: 0;\n opacity: var(--accent-opacity);\n}\n\n.circle-spin-6::after {\n top: var(--stroke-width);\n left: 50%;\n width: var(--stroke-width);\n height: var(--stroke-width);\n transform: translateX(-50%);\n}\n\n@keyframes circle-spin-6-animation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"},{id:"circle-spin-7",title:"Spinning circle loader #7",category:"circle",css:".circle-spin-7 {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n width: var(--size);\n height: var(--size);\n mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--size) / 4), black calc(var(--size) / 4));\n background-image: conic-gradient(from 0deg, var(--color) 0deg, var(--color) 10deg, transparent 10deg, transparent 30deg, var(--color) 30deg, var(--color) 50deg, transparent 50deg, transparent 70deg, var(--color) 70deg, var(--color) 90deg, transparent 90deg, transparent 110deg, var(--color) 110deg, var(--color) 130deg, transparent 130deg, transparent 150deg, var(--color) 150deg, var(--color) 170deg, transparent 170deg, transparent 190deg, var(--color) 190deg, var(--color) 210deg, transparent 210deg, transparent 230deg, var(--color) 230deg, var(--color) 250deg, transparent 250deg, transparent 270deg, var(--color) 270deg, var(--color) 290deg, transparent 290deg, transparent 310deg, var(--color) 310deg, var(--color) 330deg, transparent 330deg, transparent 350deg, var(--color) 350deg, var(--color) 360deg);\n border-radius: 50%;\n transform: rotate(0deg);\n animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-7-animation;\n}\n\n@keyframes circle-spin-7-animation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"},{id:"circle-spin-8",title:"Spinning circle loader #8",category:"circle",status:"new",css:".circle-spin-8 {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n width: var(--size);\n height: var(--size);\n mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--size) / 3), black calc(var(--size) / 3));\n background-image: conic-gradient(transparent, transparent 135deg, currentColor);\n border-radius: 50%;\n animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-8-animation;\n}\n\n@keyframes circle-spin-8-animation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"},{id:"circle-grow-1",title:"Growing circle loader #1",category:"circle",css:".circle-grow-1 {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n width: var(--size);\n height: var(--size);\n border-radius: 50%;\n background-color: var(--color);\n opacity: 0;\n transform: scale(0);\n animation: var(--animation-timing-function) var(--animation-duration) infinite circle-grow-1-animation;\n}\n\n@keyframes circle-grow-1-animation {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n\n 80% {\n opacity: 1;\n transform: scale(1);\n }\n\n 100% {\n opacity: 0;\n transform: scale(1);\n }\n}"},{id:"circle-pulse-1",title:"Pulsing circle loader #1",category:"circle",css:".circle-pulse-1 {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n position: relative;\n width: var(--size);\n height: var(--size);\n}
1\n\n.circle-pulse-1::before,\n.circle-pulse-1::after {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--color);\n border-radius: 50%;\n opacity: 1;\n transform: scale(0);\n animation: var(--animation-timing-function) var(--animation-duration) infinite circle-pulse-1-animation;\n}\n\n.circle-pulse-1::after {\n animation-delay: calc(var(--animation-duration) / 2);\n}\n\n@keyframes circle-pulse-1-animation {\n 0% {\n opacity: 1;\n transform: scale(0);\n }\n\n 100% {\n opacity: 0;\n transform: scale(1);\n }\n}"},{id:"circle-rotate-1-horizontal",title:"Horizontally rotating circle loader #1",category:"circle",css:".circle-rotate-1-horizontal {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n width: var(--size);\n height: var(--size);\n background-color: var(--color);\n border-radius: 50%;\n transform: rotateY(0deg);\n animation: var(--animation-timing-function) var(--animation-duration) infinite circle-rotate-1-horizontal-animation;\n}\n\n@keyframes circle-rotate-1-horizontal-animation {\n from {\n transform: rotateY(0deg);\n }\n\n to {\n transform: rotateY(180deg);\n }\n}"},{id:"circle-rotate-1-vertical",title:"Vertically rotating circle loader #1",category:"circle",css:".circle-rotate-1-vertical {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n width: var(--size);\n height: var(--size);\n background-color: var(--color);\n border-radius: 50%;\n transform: rotateX(0deg);\n animation: var(--animation-timing-function) var(--animation-duration) infinite circle-rotate-1-vertical-animation;\n}\n\n@keyframes circle-rotate-1-vertical-animation {\n from {\n transform: rotateX(0deg);\n }\n\n to {\n transform: rotateX(180deg);\n }\n}"},{id:"circle-packman-1",title:"Packman loader #1",category:"circle",css:".circle-packman-1 {\n --size: 24px;\n --stroke-width: calc(var(--size) / 2);\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n position: relative;\n width: var(--size);\n height: var(--size);\n}\n\n.circle-packman-1::before,\n.circle-packman-1::after {\n content: '';\n position: absolute;\n inset: 0;\n border-width: var(--stroke-width);\n border-style: solid;\n border-radius: 50%;\n}\n\n.circle-packman-1::before {\n border-color: var(--color) transparent transparent var(--color);\n animation: var(--animation-timing-function) var(--animation-duration) infinite circle-packman-1-animation-before;\n}\n\n.circle-packman-1::after {\n border-color: transparent transparent var(--color) var(--color);\n animation: var(--animation-timing-function) var(--animation-duration) infinite circle-packman-1-animation-after;\n}\n\n@keyframes circle-packman-1-animation-before {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(45deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes circle-packman-1-animation-after {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(-45deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}"},{id:"square-spin-1",title:"Spinning square loader #1",category:"square",css:".square-spin-1 {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n width: var(--size);\n height: var(--size);\n background-color: var(--color);\n transform: rotate(0deg);\n animation: var(--animation-timing-function) var(--animation-duration) infinite square-spin-1-animation;\n}\n\n@keyframes square-spin-1-animation {\n 0% {\n transform: scale(1) rotate(0deg);\n }\n\n 25% {\n transform: scale(.5) rotate(90deg);\n }\n\n 50% {\n transform: scale(1) rotate(180deg);\n }\n\n 75% {\n transform: scale(.5) rotate(270deg);\n }\n\n 100% {\n transform: scale(1) rotate(360deg);\n }\n}"},{id:"square-spin-2",title:"Spinning square loader #2",category:"square",css:".square-spin-2 {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n width: var(--size);\n height: var(--size);\n background-image:\n radial-gradient(circle at var(--stroke-width) var(--stroke-width), var(--color) 0%, var(--color) var(--stroke-width), transparent var(--stroke-width), transparent 100%),\n radial-gradient(circle at calc(100% - var(--stroke-width)) var(--stroke-width), var(--color) 0%, var(--color) var(--stroke-width), transparent var(--stroke-width), transparent 100%),\n radial-gradient(circle at calc(100% - var(--stroke-width)) calc(100% - var(--stroke-width)), var(--color) 0%, var(--color) var(--stroke-width), transparent var(--stroke-width), transparent 100%),\n radial-gradient(circle at var(--stroke-width) calc(100% - var(--stroke-width)), var(--color) 0%, var(--color) var(--stroke-width), transparent var(--stroke-width), transparent 100%);\n animation: var(--animation-timing-function) var(--animation-duration) infinite square-spin-2-animation;\n}\n\n@keyframes square-spin-2-animation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"},{id:"square-spin-3",title:"Spinning square loader #3",category:"square",status:"new",css:".square-spin-3 {\n --size: 24px;\n --border-radius: calc(var(--size) / 1.5);\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n position: relative;\n width: var(--size);\n height: var(--size);\n transform: translateY(-25%);\n animation: var(--animation-timing-function) calc(var(--animation-duration) / 4) infinite square-spin-3-animation;\n}\n\n.square-spin-3::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--color);\n transform: rotate(0deg);\n animation: var(--animation-timing-function) var(--animation-duration) infinite square-spin-3-animation-before;\n}\n\n@keyframes square-spin-3-animation {\n 0% {\n transform: translateY(-25%);\n }\n\n 50% {\n transform: translateY(0%);\n }\n\n 100% {\n transform: translateY(-25%);\n }\n}\n\n@keyframes square-spin-3-animation-before {\n 0% {\n border-radius: 0;\n transform: rotate(0deg);\n }\n\n 12.5% {\n border-radius: 0 0 var(--border-radius) 0;\n }\n\n 25% {\n border-radius: 0;\n transform: rotate(90deg);\n }\n\n 37.5% {\n border-radius: 0 var(--border-radius) 0 0;\n }\n\n 50% {\n border-radius: 0;\n transform: rotate(180deg);\n }\n\n 62.5% {\n border-radius: var(--border-radius) 0 0 0;\n }\n\n 75% {\n border-radius: 0;\n transform: rotate(270deg);\n }\n\n 87.5% {\n border-radius: 0 0 0 var(--border-radius);\n }\n\n 100% {\n border-radius: 0;\n transform: rotate(360deg);\n }\n}"},{id:"square-rotate-1-horizontal",title:"Horizontally rotating square loader #1",category:"square",css:".square-rotate-1-horizontal {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n width: var(--size);\n height: var(--size);\n background-color: var(--color);\n transform: rotateY(0deg);\n animation: var(--animation-timing-function) var(--animation-duration) infinite square-rotate-1-horizontal-animation;\n}\n\n@keyframes square-rotate-1-horizontal-animation {\n from {\n transform: rotateY(0deg);\n }\n\n to {\n transform: rotateY(180deg);\n }\n}"},{id:"square-rotate-1-vertical",title:"Vertically rotating square loader #1",category:"square",css:".square-rotate-1-vertical {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n width: var(--size);\n height: var(--size);\n background-color: var(--color);\n transform: rotateX(0deg);\n animation: var(--animation-timing-function) var(--animation-duration) infinite square-rotate-1-vertical-animation;\n}\n\n@keyframes square-rotate-1-vertical-animation {\n from {\n transform: rotateX(0deg);\n }\n\n to {\n transform: rotateX(180deg);\n }\n}"},{id:"square-rotate-2",title:"Rotating square loader #3",category:"square",css:".square-rotate-2 {\n --size: 24px;\n --accent-opacity: .25;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n position: relative;\n width: var(--size);\n height: var(--size);\n}
1\n\n.square-rotate-2::before,\n.square-rotate-2::after {\n content: '';\n position: absolute;\n transform: rotate(0deg);\n animation: var(--animation-timing-function) var(--animation-duration) infinite square-rotate-2-animation;\n}\n\n.square-rotate-2::before {\n inset: 0;\n background-color: var(--color);\n opacity: var(--accent-opacity);\n}\n\n.square-rotate-2::after {\n top: 12.5%;\n left: 12.5%;\n width: 75%;\n height: 75%;\n background-color: var(--color);\n animation-direction: reverse;\n}\n\n@keyframes square-rotate-2-animation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"},{id:"square-move-1",title:"Moving square loader #1",category:"square",css:".square-move-1 {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n position: relative;\n width: var(--size);\n height: var(--size);\n}\n\n.square-move-1::before {\n content: '';\n position: absolute;\n top: 0;\n right: 50%;\n bottom: 50%;\n left: 0;\n background-color: var(--color);\n transform: translate(0%, 0%);\n animation: var(--animation-timing-function) var(--animation-duration) infinite square-move-1-animation;\n}\n\n@keyframes square-move-1-animation {\n 0% {\n transform: translate(0%, 0%);\n }\n\n 25% {\n transform: translate(100%, 0%);\n }\n\n 50% {\n transform: translate(100%, 100%);\n }\n\n 75% {\n transform: translate(0%, 100%);\n }\n\n 100% {\n transform: translate(0%, 0%);\n }\n}"},{id:"square-move-2",title:"Moving square loader #2",category:"square",css:".square-move-2 {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n position: relative;\n width: var(--size);\n height: var(--size);\n}\n\n.square-move-2::before,\n.square-move-2::after {\n content: '';\n position: absolute;\n width: 50%;\n height: 50%;\n background-color: var(--color);\n}\n\n.square-move-2::before {\n top: 0;\n left: 0;\n transform: translate(0%, 0%);\n animation: var(--animation-timing-function) var(--animation-duration) infinite square-move-2-animation-before;\n}\n\n.square-move-2::after {\n right: 0;\n bottom: 0;\n transform: translate(0%, 0%);\n animation: var(--animation-timing-function) var(--animation-duration) infinite square-move-2-animation-after;\n}\n\n@keyframes square-move-2-animation-before {\n 0% {\n transform: translate(0%, 0%);\n }\n\n 25% {\n transform: translate(100%, 0%);\n }\n\n 50% {\n transform: translate(100%, 100%);\n }\n\n 75% {\n transform: translate(0%, 100%);\n }\n\n 100% {\n transform: translate(0%, 0%);\n }\n}\n\n@keyframes square-move-2-animation-after {\n 0% {\n transform: translate(0%, 0%);\n }\n\n 25% {\n transform: translate(-100%, 0%);\n }\n\n 50% {\n transform: translate(-100%, -100%);\n }\n\n 75% {\n transform: translate(0%, -100%);\n }\n\n 100% {\n transform: translate(0%, 0%);\n }\n}"},{id:"square-move-3",title:"Moving square loader #3",category:"square",css:".square-move-3 {\n --size: 24px;\n --color: currentColor;\n --accent-opacity: .25;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n position: relative;\n width: var(--size);\n height: var(--size);\n}\n\n.square-move-3::before,\n.square-move-3::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 50%;\n background-color: var(--color);\n transform: translate(0%, 0%);\n animation: var(--animation-timing-function) var(--animation-duration) infinite square-move-3-animation;\n}\n\n.square-move-3::before {\n opacity: var(--accent-opacity);\n animation-delay: calc(var(--animation-duration) * .125);\n}\n\n@keyframes square-move-3-animation {\n 0% {\n transform: translate(0%, 0%);\n }\n\n 12.5% {\n transform: translate(100%, 0%);\n }\n\n 25% {\n transform: translate(100%, 0%);\n }\n\n 37.5% {\n transform: translate(100%, 100%);\n }\n\n 50% {\n transform: translate(100%, 100%);\n }\n\n 62.5% {\n transform: translate(0%, 100%);\n }\n\n 75% {\n transform: translate(0%, 100%);\n }\n\n 87.5% {\n transform: translate(0%, 0%);\n }\n\n 100% {\n transform: translate(0%, 0%);\n }\n}"},{id:"square-fill-1",title:"Filling square loader #1",category:"square",css:".square-fill-1 {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: steps(2, start);\n --animation-duration: 4s;\n display: flex;\n flex-direction: column;\n width: var(--size);\n height: var(--size);\n}
1\n\n.square-fill-1::before,\n.square-fill-1::after {\n content: '';\n width: 100%;\n height: 50%;\n background-color: var(--color);\n transform: scaleX(0);\n}\n\n.square-fill-1::before {\n align-self: flex-start;\n transform-origin: center left;\n animation: var(--animation-timing-function) var(--animation-duration) infinite square-fill-1-animation-before;\n}\n\n.square-fill-1::after {\n align-self: flex-end;\n transform-origin: center right;\n animation: var(--animation-timing-function) var(--animation-duration) infinite square-fill-1-animation-after;\n animation-delay: calc(var(--animation-duration) / 4);\n}\n\n@keyframes square-fill-1-animation-before {\n 0% {\n transform: scaleX(0);\n transform-origin: center left;\n }\n\n 25% {\n transform: scaleX(1);\n transform-origin: center left;\n }\n\n 50% {\n transform: scaleX(1);\n transform-origin: center right;\n }\n\n 75% {\n transform: scaleX(0);\n transform-origin: center right;\n }\n\n 100% {\n transform: scaleX(0);\n transform-origin: center right;\n }\n}\n\n@keyframes square-fill-1-animation-after {\n 0% {\n transform: scaleX(0);\n transform-origin: center right;\n }\n\n 25% {\n transform: scaleX(1);\n transform-origin: center right;\n }\n\n 50% {\n transform: scaleX(1);\n transform-origin: center left;\n }\n\n 75% {\n transform: scaleX(0);\n transform-origin: center left;\n }\n\n 100% {\n transform: scaleX(0);\n transform-origin: center left;\n }\n}"},{id:"line-1-horizontal",title:"Horizontal progress loader #1",category:"line",css:".line-1-horizontal {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --color: currentColor;\n --animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);\n --animation-duration: 2s;\n width: var(--size);\n height: var(--stroke-width);\n background-color: var(--color);\n transform: scaleX(0);\n transform-origin: center left;\n animation: var(--animation-timing-function) var(--animation-duration) infinite line-1-horizontal-animation;\n}\n\n@keyframes line-1-horizontal-animation {\n 0% {\n transform: scaleX(0);\n transform-origin: center left;\n }\n\n 50% {\n transform: scaleX(1);\n transform-origin: center left;\n }\n\n 51% {\n transform: scaleX(1);\n transform-origin: center right;\n }\n\n 100% {\n transform: scaleX(0);\n transform-origin: center right;\n }\n}"},{id:"line-1-vertical",title:"Vertical progress loader #1",category:"line",css:".line-1-vertical {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --color: currentColor;\n --animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);\n --animation-duration: 2s;\n width: var(--stroke-width);\n height: var(--size);\n background-color: var(--color);\n transform: scaleY(0);\n transform-origin: top center;\n animation: var(--animation-timing-function) var(--animation-duration) infinite line-1-vertical-animation;\n}\n\n@keyframes line-1-vertical-animation {\n 0% {\n transform: scaleY(0);\n transform-origin: top center;\n }\n\n 50% {\n transform: scaleY(1);\n transform-origin: top center;\n }\n\n 51% {\n transform: scaleY(1);\n transform-origin: bottom center;\n }\n\n 100% {\n transform: scaleY(0);\n transform-origin: bottom center;\n }\n}"},{id:"line-2-horizontal",title:"Horizontal line loader #2",category:"line",css:".line-2-horizontal {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n position: relative;\n width: var(--size);\n height: var(--size);\n }\n \n .line-2-horizontal::before,\n .line-2-horizontal::after {\n content: '';\n position: absolute;\n transform: scaleY(1);\n animation: var(--animation-timing-function) var(--animation-duration) infinite line-2-horizontal-animation;\n }\n \n .line-2-horizontal::before {\n inset: 0;\n border-top: var(--stroke-width) solid var(--color);\n border-bottom: var(--stroke-width) solid var(--color);\n }\n \n .line-2-horizontal::after {\n top: calc(50% - var(--stroke-width) / 2);\n right: 0;\n left: 0;\n border-top: var(--stroke-width) solid var(--color);\n animation-delay: calc(var(--animation-duration) / 2);\n }\n \n @keyframes line-2-horizontal-animation {\n 0% {\n transform: scaleX(1);\n }\n \n 50% {\n transform: scaleX(.5);\n }\n \n 100% {\n transform: scaleX(1);\n }\n }"},{id:"line-2-vertical",title:"Vertical line loader #2",category:"line",css:".line-2-vertical {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n position: relative;\n width: var(--size);\n height: var(--size);\n}
1\n\n.line-2-vertical::before,\n.line-2-vertical::after {\n content: '';\n position: absolute;\n transform: scaleY(1);\n animation: var(--animation-timing-function) var(--animation-duration) infinite line-2-vertical-animation;\n}\n\n.line-2-vertical::before {\n inset: 0;\n border-right: var(--stroke-width) solid var(--color);\n border-left: var(--stroke-width) solid var(--color);\n}\n\n.line-2-vertical::after {\n top: 0;\n bottom: 0;\n left: calc(50% - var(--stroke-width) / 2);\n border-left: var(--stroke-width) solid var(--color);\n animation-delay: calc(var(--animation-duration) / 2);\n}\n\n@keyframes line-2-vertical-animation {\n 0% {\n transform: scaleY(1);\n }\n\n 50% {\n transform: scaleY(.5);\n }\n\n 100% {\n transform: scaleY(1);\n }\n}"},{id:"line-3-horizontal",title:"Horizontal line loader #3",category:"line",css:".line-3-horizontal {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --scale: calc(4 / 24);\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n position: relative;\n width: var(--size);\n height: var(--size);\n}\n\n.line-3-horizontal::before,\n.line-3-horizontal::after {\n content: '';\n position: absolute;\n transform: scaleY(1);\n animation: var(--animation-timing-function) var(--animation-duration) infinite line-3-horizontal-animation;\n}\n\n.line-3-horizontal::before {\n inset: 0;\n border-top: var(--stroke-width) solid var(--color);\n border-bottom: var(--stroke-width) solid var(--color);\n}\n\n.line-3-horizontal::after {\n top: calc(50% - var(--stroke-width) / 2);\n right: 0;\n left: 0;\n border-top: var(--stroke-width) solid var(--color);\n}\n\n@keyframes line-3-horizontal-animation {\n 0% {\n transform: scaleX(1);\n }\n\n 25% {\n transform: scaleX(var(--scale));\n }\n\n 75% {\n transform: scaleX(var(--scale));\n }\n\n 100% {\n transform: scaleX(1);\n }\n}"},{id:"line-3-vertical",title:"Vertical line loader #3",category:"line",css:".line-3-vertical {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --scale: calc(4 / 24);\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n position: relative;\n width: var(--size);\n height: var(--size);\n}\n\n.line-3-vertical::before,\n.line-3-vertical::after {\n content: '';\n position: absolute;\n transform: scaleY(1);\n animation: var(--animation-timing-function) var(--animation-duration) infinite line-3-vertical-animation;\n}\n\n.line-3-vertical::before {\n inset: 0;\n border-right: var(--stroke-width) solid var(--color);\n border-left: var(--stroke-width) solid var(--color);\n}\n\n.line-3-vertical::after {\n top: 0;\n bottom: 0;\n left: calc(50% - var(--stroke-width) / 2);\n border-left: var(--stroke-width) solid var(--color);\n}\n\n@keyframes line-3-vertical-animation {\n 0% {\n transform: scaleY(1);\n }\n\n 25% {\n transform: scaleY(var(--scale));\n }\n\n 75% {\n transform: scaleY(var(--scale));\n }\n\n 100% {\n transform: scaleY(1);\n }\n}"},{id:"arrow-1-up",title:"Up arrow loader #1",category:"arrow",css:".arrow-1-up {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);\n --animation-duration: 2s;\n position: relative;\n width: var(--size);\n height: var(--size);\n overflow-y: hidden;\n}\n\n.arrow-1-up::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--color);\n clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 75% 50%, 75% 100%, 25% 100%, 25% 50%, 0% 50%);\n transform: translateY(-100%);\n animation: var(--animation-timing-function) var(--animation-duration) infinite arrow-1-up-animation;\n}\n\n@keyframes arrow-1-up-animation {\n 0% {\n transform: translateY(100%);\n }\n\n 45% {\n transform: translateY(0%);\n }\n\n 55% {\n transform: translateY(0%);\n }\n\n 100% {\n transform: translateY(-100%);\n }\n}"},{id:"arrow-1-right",title:"Right arrow loader #1",category:"arrow",css:".arrow-1-right {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);\n --animation-duration: 2s;\n position: relative;\n width: var(--size);\n height: var(--size);\n overflow-x: hidden;\n}\n\n.arrow-1-right::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--color);\n clip-path: polygon(0% 25%, 50% 25%, 50% 0%, 100% 50%, 50% 100%, 50% 75%, 0% 75%, 0% 25%);\n transform: translateX(-100%);\n animation: var(--animation-timing-function) var(--animation-duration) infinite arrow-1-right-animation;\n}\n\n@keyframes arrow-1-right-animation {\n 0% {\n transform: translateX(-100%);\n }\n\n 45% {\n transform: translateX(0%);\n }\n\n 55% {\n transform: translateX(0%);\n }\n\n 100% {\n transform: translateX(100%);\n }\n}"},{id:"arrow-1-down",title:"Down arrow loader #1",category:"arrow",css:".arrow-1-down {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);\n --animation-duration: 2s;\n position: relative;\n width: var(--size);\n height: var(--size);\n overflow-y: hidden;\n}\n\n.arrow-1-down::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--color);\n clip-path: polygon(0% 50%, 50% 100%, 100% 50%, 75% 50%, 75% 0%, 25% 0%, 25% 50%, 0% 50%);\n transform: translateY(-100%);\n animation: var(--animation-timing-function) var(--animation-duration) infinite arrow-1-down-animation;\n}\n\n@keyframes arrow-1-down-animation {\n 0% {\n transform: translateY(-100%);\n }\n\n 45% {\n transform: translateY(0%);\n }\n\n 55% {\n transform: translateY(0%);\n }\n\n 100% {\n transform: translateY(100%);\n }\n}"},{id:"arrow-1-left",title:"Left arrow loader #1",category:"arrow",css:".arrow-1-left {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);\n --animation-duration: 2s;\n position: relative;\n width: var(--size);\n height: var(--size);\n overflow-x: hidden;\n}\n\n.arrow-1-left::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--color);\n clip-path: polygon(0% 50%, 50% 0%, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0% 50%);\n transform: translateX(100%);\n animation: var(--animation-timing-function) var(--animation-duration) infinite arrow-1-left-animation;\n}\n\n@keyframes arrow-1-left-animation {\n 0% {\n transform: translateX(100%);\n }\n\n 45% {\n transform: translateX(0%);\n }\n\n 55% {\n transform: translateX(0%);\n }\n\n 100% {\n transform: translateX(-100%);\n }\n}"},{id:"plus-1",title:"Plus loader #1",category:"plus",css:".plus-1 {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 4s;\n position: relative;\n width: var(--size);\n height: var(--size);\n animation: var(--animation-timing-function) var(--animation-duration) infinite plus-1-animation;\n}
1\n\n.plus-1::before,\n.plus-1::after {\n content: '';\n position: absolute;\n background-color: var(--color);\n}\n\n.plus-1::before {\n top: 50%;\n left: 0;\n width: 100%;\n height: var(--stroke-width);\n transform: translateY(-50%);\n}\n\n.plus-1::after {\n top: 0;\n left: 50%;\n width: var(--stroke-width);\n height: 100%;\n transform: translateX(-50%);\n}\n\n@keyframes plus-1-animation {\n 0% {\n transform: rotate(0deg);\n }\n\n 2.5% {\n transform: rotate(0deg);\n }\n\n 22.5% {\n transform: rotate(90deg);\n }\n\n 27.5% {\n transform: rotate(90deg);\n }\n\n 47.5% {\n transform: rotate(180deg);\n }\n\n 52.5% {\n transform: rotate(180deg);\n }\n\n 72.5% {\n transform: rotate(270deg);\n }\n\n 77.5% {\n transform: rotate(270deg);\n }\n\n 97.5% {\n transform: rotate(360deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{id:"misc-1-horizontal",title:"Horizontal miscellaneous loader #1",category:"misc",css:".misc-1-horizontal {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n position: relative;\n width: var(--size);\n height: calc(var(--size) / 2);\n border-radius: var(--size);\n overflow-x: hidden;\n}\n\n.misc-1-horizontal::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--color);\n border-radius: inherit;\n transform: translateX(calc(var(--size) / 2 - 100%));\n animation: var(--animation-timing-function) var(--animation-duration) infinite misc-1-horizontal-animation;\n}\n\n@keyframes misc-1-horizontal-animation {\n 0% {\n transform: translateX(calc(var(--size) / 2 - 100%));\n }\n\n 50% {\n transform: translateX(calc(100% - var(--size) / 2));\n }\n\n 100% {\n transform: translateX(calc(var(--size) / 2 - 100%));\n }\n}"},{id:"misc-1-vertical",title:"Vertical miscellaneous loader #1",category:"misc",css:".misc-1-vertical {\n --size: 24px;\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 2s;\n position: relative;\n width: calc(var(--size) / 2);\n height: var(--size);\n border-radius: var(--size);\n overflow-y: hidden;\n}\n\n.misc-1-vertical::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--color);\n border-radius: inherit;\n transform: translateY(calc(var(--size) / 2 - 100%));\n animation: var(--animation-timing-function) var(--animation-duration) infinite misc-1-vertical-animation;\n}\n\n@keyframes misc-1-vertical-animation {\n 0% {\n transform: translateY(calc(var(--size) / 2 - 100%));\n }\n\n 50% {\n transform: translateY(calc(100% - var(--size) / 2));\n }\n\n 100% {\n transform: translateY(calc(var(--size) / 2 - 100%));\n }\n}"},{id:"typing-1",title:"Typing loader #1",category:"speciality",css:".typing-1 {\n --size: 24px;\n --stroke-width: calc(var(--size) / 6);\n --color: currentColor;\n --animation-timing-function: linear;\n --animation-duration: 1s;\n position: relative;\n width: var(--size);\n height: var(--size);\n border-bottom: var(--stroke-width) solid var(--color);\n}\n\n.typing-1::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: calc(var(--stroke-width) / 2);\n left: 0;\n width: calc(var(--stroke-width) * 1.25);\n background-color: var(--color);\n clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);\n transform: translateX(0) rotate(10deg);\n animation: var(--animation-timing-function) var(--animation-duration) infinite typing-1-animation;\n}\n\n@keyframes typing-1-animation {\n 0% {\n transform: translateX(0) rotate(10deg);\n }\n\n 85% {\n transform: translateX(var(--size)) rotate(10deg);\n }\n\n 100% {\n transform: translateX(0) rotate(10deg);\n }\n}"}]}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.