.use-copy-button{color:var(--color-primary);border:1px solid var(--color-primary);background-color:#0000;border-radius:0;padding:5px 15px;font-size:14px;font-weight:400}.use-copy-button:has(.button-spinner){justify-content:center;align-items:center;display:inline-flex;position:relative}.use-copy-button:hover{background-color:var(--color-secondary);color:var(--color-light);border-color:var(--color-secondary)}.use-copy-button .button-label{color:currentColor;justify-content:center;align-items:center;gap:5px;display:inline-flex}.use-copy-button .button-label.invisible{visibility:hidden}.use-copy-button .button-spinner{aspect-ratio:1;border:2px solid;border-right-color:#0000;border-radius:50%;height:50%;animation:.75s linear infinite spinner-border;position:absolute}@keyframes spinner-border{to{transform:rotate(1turn)}}@keyframes use-appear{0%{opacity:0;filter:blur(5px)grayscale();scale:.8}}.use-portfolio{---template-item-height:250px;background-color:var(--color-light);border:1px solid var(--color-border);border-radius:0;flex-grow:1;width:30%;max-width:100%;position:relative;overflow:hidden}.use-portfolio.animated{animation-name:use-appear;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:entry cover 15%}@media only screen and (width<=1024px){.use-portfolio{width:40%}}@media only screen and (width<=767px){.use-portfolio{width:100%}}.use-grid .use-portfolio{width:100%}.use-portfolio .body-wrapper{position:relative}.use-portfolio .body-wrapper .preview-icon-overlay{opacity:0;cursor:pointer;text-align:center;background-color:#00000080;align-content:center;width:100%;height:100%;transition:opacity .5s;position:absolute;top:0;left:0}.use-portfolio .body-wrapper .preview-icon-overlay span{color:var(--color-light);pointer-events:none;font-size:12px;display:block}@media screen and (width>=767px){.use-portfolio .body-wrapper .preview-icon-overlay span{opacity:0}}.use-portfolio .body-wrapper .preview-icon-overlay .use-icon{color:var(--color-light);pointer-events:none;font-size:20px}.use-portfolio .body-wrapper .thumbnail-image{width:100%;height:var(---template-item-height);object-fit:cover;max-height:100%;display:block}.use-portfolio .body-wrapper .badge{color:#fff;text-transform:uppercase;letter-spacing:.5px;background-color:#562dd4;padding:2px 4px;font-size:10px;display:inline-block;position:absolute;top:10px;right:10px}.use-portfolio .body-wrapper .badge.free{background-color:var(--color-heading)}.use-portfolio .body-wrapper .badge.pro{background-color:var(--color-primary)}.use-portfolio:hover .preview-icon-overlay,.use-portfolio:focus .preview-icon-overlay{opacity:1}.use-portfolio .footer-wrapper{opacity:0;background-color:var(--color-light);justify-content:space-between;align-items:center;width:100%;padding:10px;transition:all .5s;display:flex;position:absolute;bottom:0;left:0;transform:translateY(100%)}.use-portfolio .footer-wrapper button{padding:5px 15px;font-size:14px;font-weight:400}@media screen and (width>=767px){.use-portfolio:hover .footer-wrapper{opacity:1;transform:translateY(0)}}.popup-modal-header-wrapper{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:15px;padding:10px 20px;display:flex}.popup-modal-header-wrapper .responsive-menu{justify-content:center;gap:5px;height:100%;display:flex}.popup-modal-header-wrapper .responsive-menu .menu-item{cursor:pointer;border:1px solid var(--color-border);border-radius:0;justify-content:center;align-items:center;min-width:40px;padding:10px 5px;display:inline-flex}.popup-modal-header-wrapper .responsive-menu .menu-item:hover{background-color:var(--color-secondary);color:var(--color-light);border-color:var(--color-secondary)}.popup-modal-header-wrapper .responsive-menu .menu-item.active{background-color:var(--color-primary);color:var(--color-light);border-color:var(--color-primary)}@media only screen and (width<=1024px){.popup-modal-header-wrapper .responsive-menu .menu-item[data-tab=desktop]{display:none}}@media only screen and (width<=767px){.popup-modal-header-wrapper .responsive-menu .menu-item[data-tab]{display:none}}.popup-modal-header-wrapper .responsive-menu .menu-item UseIcon{pointer-events:none}.popup-modal-header-wrapper .close-button{cursor:pointer;border:1px solid var(--color-border);border-radius:0;padding:5px;display:flex}.popup-modal-header-wrapper .close-button:hover{background-color:var(--color-heading);color:var(--color-light);border-color:var(--color-heading)}.popup-modal-header-wrapper .close-button UseIcon{pointer-events:none}.foriduddin-pre-loader{z-index:1;text-align:center;isolation:isolate;border:1px solid var(--color-border);background-color:var(--color-background);background-image:radial-gradient(at top right, color-mix(in oklab, var(--color-primary) 8%, transparent) 0%, var(--color-background) 60%), radial-gradient(at bottom left, color-mix(in oklab, var(--color-primary) 8%, transparent) 0%, var(--color-background) 60%);align-content:center;width:100%;height:100%;position:absolute;inset:0}.foriduddin-pre-loader p{margin-block:0}.foriduddin-pre-loader:after{content:"";z-index:-1;background-image:radial-gradient(#7f7f7f26 1px,#0000 1px);background-size:20px 20px;width:100%;height:100%;position:absolute;inset:0}.foriduddin-pre-loader .loader{gap:5px;display:inline-flex}.foriduddin-pre-loader .loader span{background-color:var(--color-primary);width:10px;height:10px;animation:1.2s ease-in-out infinite dotBounce;animation-delay:var(--dot-delay)}@keyframes dotBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.use-portfolio-modal-body{border-block:1px solid var(--color-border);flex-grow:1;padding:20px}.use-portfolio-modal-body .portfolio-modal-preview{width:var(--preview-width,100%);border-radius:0;max-width:100%;height:100%;margin:auto;transition:width .4s,height .4s;position:relative;overflow:clip}.use-portfolio-modal-body .portfolio-modal-preview iframe{width:150%;height:150%;transform:scale(.666)translate(-25%)translateY(-25%)}.use-portfolio-modal-footer{text-align:center;padding:15px 20px}.use-portfolio-modal-footer p{margin-block:0}.use-portfolio-modal{z-index:999;background-color:#06153780;align-content:center;width:100%;height:100%;transition:all .5s ease-in-out;position:fixed;inset:0}.use-portfolio-modal .portfolio-modal-content{background-color:var(--color-light);width:min(100%, var(--container-width));flex-direction:column;justify-content:space-between;height:min(100%,90vh);margin-inline:auto;display:flex}@media only screen and (width<=1024px){.use-portfolio-modal .portfolio-modal-content{height:min(100%,100vh)}}