* { box-sizing: border-box; font-family: "Inter", sans-serif; } body { padding: 0; margin: 0; -webkit-font-smoothing: antialiased; font-family: var(--font-family); overflow-x: hidden; background: radial-gradient(circle,rgba(168,237,223,.13) 0,rgba(166,143,248,.14) 50%); } .text-dark{ color: #000 !important; } /* appscms navbar */ .appscms-navbar { background-color: var(--white-color); height: 45px; position: sticky; top: 0; z-index: 999; } .appscms-navbar-nav { display: flex; width: 100%; height: 100%; justify-content: space-between; } .appscms-navbar-nav a { display: flex; align-items: center; } .appscms-navbar-nav-links { width: 100%; height: 100%; display: flex; justify-content: flex-end; gap: 45px; align-items: center; } .appscms-nav-link { font-size: 15px; color: var(--black-color); font-weight: 450; } .appscms-nav-link:hover { color: var(--black-color); text-decoration: underline; } .arrow-svg { display: none; } .appscms-toolbar { background-color: var(--primary-color); box-shadow: 1px 4px 10 #00000026; position: sticky; z-index: 999; top: 45px; } .appscms-toolbar .appscms-toolbar-list { list-style: none; display: flex; padding: 0; margin: 0; height: 40px; gap: 59px; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item { color: var(--black-light); display: block; font-size: 16px; line-height: 24px; padding: 10px; position: relative; text-decoration: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:first-child { padding-left: 0px; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:first-child { padding-right: 0px; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:hover > .list-item-dropdown { display: block; opacity: 1; white-space: nowrap; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:hover { border-bottom: 2px solid white; padding-bottom: 8px; position: relative; } /* smooth scrolling code */ .appscms-toolbar-list { overflow-y: hidden; overflow-x: auto; } .appscms-toolbar-list::-webkit-scrollbar { width: 0; height: 0; } .appscms-toolbar-list::-webkit-scrollbar-track { background-color: transparent; } .appscms-toolbar-list::-webkit-scrollbar-thumb { background-color: transparent; } .appscms-toolbar .list-item-dropdown { border: 5px solid #fff; left: 0px; position: fixed; top: 85px; min-width: 500px; max-height: 500px; overflow-y: auto; width: 90vw; box-shadow: 3px 10px 40px rgba(24, 29, 32, 0.05); z-index: 200; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 25px 50px 50px 50px; display: none; background-color: var(--white-color); } .list-item-dropdown-heading { font-weight: 600; font-size: 13px; color: var(--black-light); margin-bottom: 8px; } .list-item-dropdown li { padding-top: 1px; padding-bottom: 1px; list-style: none; } .list-item-dropdown .toolbar-link { font-weight: 600; display: block; line-height: 1.7; color: var(--dark-gray); /* padding-top: 10px; padding-bottom: 8px; */ align-items: center; width: 100%; font-size: 16px; text-decoration: none; text-transform: capitalize; white-space: nowrap; } .list-item-dropdown .toolbar-link:hover { background-color: rgba(241, 241, 241, 0.279); box-shadow: 0px 0px 5px rgba(241, 241, 241, 0.279); border-radius: 5px; color: #323232; } .appscms-toolbar-list-item-span { color: var(--white-color); display: block; font-size: 15px; line-height: 24px; width: 100%; white-space: nowrap; padding: 8px 0; position: relative; text-decoration: none; } .hamburger { display: none; } .appscms-faq-section { max-width: 1140px; } @media (max-width: 768px) { .list-item-dropdown .toolbar-link{ color: #fff; } .close-nav-ham { display: flex !important; justify-content: end; } .hamburger { display: block; cursor: pointer; position: absolute; right: -20px; /* top: 5px; */ z-index: 9999; } .appscms-toolbar { background-color: var(--black-color); box-shadow: 1px 4px 10 #00000026; overflow-x: hidden; } .appscms-navbar-nav-links { display: none; } .appscms-toolbar { top: 0px; position: fixed; transition: all 0.3s ease; width: 272px; right: -272px; display: none; z-index: 1000; } .appscms-toolbar .appscms-toolbar-list { height: 100vh; flex-direction: column; gap: 0px; overflow-y: scroll; overflow-x: hidden; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item { align-items: flex-start; flex-direction: column; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:first-child { padding-left: 10px; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:hover { border-bottom: none; padding-bottom: 10px; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:first-child { padding-right: 10px; } .list-item-dropdown li .toolbar-link { color: var(--white-color); font-size: 15px; } .appscms-toolbar-list-item-span { font-size: 17px; font-weight: 600; } .list-item-dropdown-heading { display: none; } .appscms-toolbar .list-item-dropdown { padding: 0px; width: 100%; border: none; position: static; display: block; overflow: hidden; transition: all 0.3s ease; background-color: transparent; opacity: 0; height: 0px; max-height: 0px; } .appscms-toolbar .appscms-toolbar-list-item:nth-child(1) > .list-item-dropdown { opacity: 1; height: auto; max-height: 200px; } .arrow-svg { display: block; } } .bg-primary { background-color: #1b2fe7; } /* headings section */ .appscms-h1, .success-msg { font-size: 37px; font-weight: 799; font-family: "inter", sans-serif; margin: 10px 0px; color: var(--mid-gray); } .appscms-h3 { font-size: 30px; color: var(--mid-gray); } .appscms-h2 { font-size: 17px; padding-top: 8px; font-weight: 500; color: var(--light-gray); } /* searchbar */ #appscms-searchbar { border-radius: 50px; padding: 10px; background-color: white; } .form-control:focus { border-color: transparent; box-shadow: none; } .btn-search:hover { transform: scale(1.2); } .btn-search:focus, .btn-search:active { background-color: transparent; border-color: transparent; box-shadow: none; } /* category section */ .toolfilters { margin-top: 80px; cursor: pointer; background-color: rgb(255, 255, 255); display: flex; height: 30px; box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.15); height: 53px; align-items: center; border-radius: 27px; overflow: hidden; margin: 20px; color: #000; } .toolfilter { margin: auto; padding: 0px 30px; } /* test scroll */ .toolfilters { overflow-y: hidden; overflow-x: auto; } .toolfilters::-webkit-scrollbar { width: 0; height: 0; } .toolfilters::-webkit-scrollbar-track { background-color: transparent; } .toolfilters::-webkit-scrollbar-thumb { background-color: transparent; } /* margin: 4px; */ /* overflow: hidden; */ .toolfilter:hover { background-color: var(--primary-color); color: white; height: 90%; border-radius: 26px; display: flex; align-items: center; } /* tools section */ .appscms-tool-container:nth-child(even) .appscms-tool .tool-top { background-color: rgb(233, 107, 34); } #appscms-tools-section { padding-top: 50px; } .appscms-tool { border-radius: 10px; box-shadow: 2px 3px 7px 2px rgba(0, 0, 0, 0.158); cursor: pointer; height: 169px; margin-bottom: 25px; background-color: rgba(255, 255, 255, 0.7); transition: all 0.2s ease; } .appscms-tool:hover { transform: translate(0, -4px) scale(1.01); box-shadow: 2px 5px 7px 2px rgba(0, 0, 0, 0.236); } .appscms-tool .tool-top { background: #4b5cf4; overflow: hidden; height: calc(171px - 57px); border-top-right-radius: 10px; border-top-left-radius: 10px; display: flex; align-items: center; transition: all 0.5s ease; } .appscms-tool .tool-top:hover { transform: translate(0, 0px) scale(1.001); animation: moveGradient 10s linear infinite; filter: hue-rotate(15deg) saturate(125%) brightness(104%); } .appscms-tool .tool-top:active { transform: translate(0, 0px) scale(1.003); animation: moveGradient 10s linear infinite; filter: hue-rotate(-15deg) saturate(105%) brightness(95%); } @keyframes moveGradient { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .appscms-tool .tool-top .tool-img { padding: 0px; margin-right: 21px; background: rgba(255, 255, 255, 25%); border-radius: 300px; margin-left: 20px; height: 58px; width: 58px; display: flex; align-items: center; border: 1px solid #ffffff12; } .appscms-tool .tool-top .tool-img img { height: 34px; width: 72px; transition: filter 0.3s ease-in-out; /* Smooth transitions for transform and box-shadow */ } .appscms-tool .tool-top .tool-img img:hover { transform: scale(1.001); /* Slightly scale up the image on hover */ filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.355)); } .appscms-tool .tool-text { color: var(--white-color); padding-right: 33px; font-weight: 300; font-size: 16px; line-height: 20.57px; } .appscms-tool .tool-heading { padding-top: 14px; padding-bottom: 19px; color: var(--dark-gray); height: 57px; font-weight: 500; font-size: 17px; text-align: center; } .text-primary { font-size: 30px; font-weight: 600; } .description { font-size: 12px; } /* blog section */ .appscms-blogs { border-radius: 10px; padding-top: 20px; background-color: rgba(255, 255, 255, 0.494); } .contenttool-img-wrap-blog{ padding: 14px; } .appscms-blog-cards { box-shadow: 1px 2px 9px rgba(0, 0, 0, 0.16); margin-bottom: 10px; border-radius: 10px !important; /* max-width: 340px; */ /* min-width: 300px; */ } .card-title{ font-size: 16px; } .card-img-top{ height: auto; } .card-footer{ border: none !important; border-radius: 10px !important; background: white; } .post-read-more{ font-size: 13px; display: flex; align-items: center; } .card-body { display: flex; flex-direction: column; } /* recent post blog heading */ /* author in blog */ .wrapfooter { display: flex; margin-top: 50px; margin-bottom: -0px; } .wrapfooter img { width: 42px; height: 42px; border-radius: 50%; } .wrapfooter .author-meta { padding: 0px 15px 0px 10px; /* display: flex; */ align-items: center; } .wrapfooter .author-meta a { font-size: 15px; font-weight: 500; color: #3e3e3e; text-transform: capitalize; text-decoration: none; } .post-date { color: gray; font-size: 14px; font-weight: 400; display: block; text-align: left; } /* footer */ #copyright-text { font-size: 13px !important; } .footer-prducts-div-heading { } .appscms-product-footer { background-color: white; margin-top: 50px; } .appscms-footer-products { opacity: 100%; } .footer-product-link { font-size: 15px; } .appscms-footer-products a { text-decoration: none; color: #000; } /* footer i89 modal css */ .privacy-links-item { font-stretch: 400; font-weight: 400; font-size: 16px; line-height: 24px; color: rgba(26, 26, 26, 1); margin: 0 20px; } .privacy-links-item:last-child { margin-right: 0; } .drop-down-btn { cursor: pointer; outline: 0px; border: 0px; width: auto; overflow: visible; display: flex; -webkit-box-align: center; align-items: center; background-color: transparent; transition: background-color 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s; font-weight: 400; font-size: 13px; line-height: 24px; color: rgb(26, 26, 26); } .language-drop-down-menu { display: flex; justify-content: space-between; margin: 0; padding: 0; flex-wrap: wrap; } .language-drop-down-item { list-style: none; width: 50%; padding: 10px 12px 0px 0px; text-align: center; font-size: 15px; margin-bottom: 0; text-decoration: none; display: flex; align-items: center; padding: 9px 9px; color: #1e1e1e; font-size: 13px; border-bottom: 1px solid rgb(224, 224, 224); } .language-drop-down-item:hover { background: var(--secondary-color-3); border-radius: 3px; } .language-drop-down-item a { text-decoration: none; display: flex; width: 100%; align-items: center; padding: 9px 9px; color: #1e1e1e; font-size: 13px; border-bottom: 1px solid rgb(224, 224, 224); } @media (max-width: 575.98px) { body { background: var(--secondary-color); } .appscms-h1, .success-msg { font-size: 30px; font-weight: 799; } .appscms-h2 { font-size: 12px; font-weight: 400; color: var(--mid-gray); } #appscms-tools-section { padding-top: 10px; } /* category section */ .toolfilters { font-size: 10px; height: 30px; padding: 3px; } .toolfilter { margin: auto; padding: 0px 15px; } /* search bar */ #appscms-searchbar { border-radius: 50px; padding: 0px; font-size: 8px; } #searchbar-placeholder { font-size: 12px; } .text-primary { font-size: 20px; font-weight: 600; } .description { font-size: 12px; line-height: 0.2; } .footer-product-link { font-size: 12px; } /* recent post and blog section phone */ /* blog section */ .appscms-blogs { border-radius: 10px; padding-top: 20px; background-color: rgba(255, 255, 255, 0.494); } .appscms-blog-cards { box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.06); margin-bottom: 20px; border-radius: 10px; /* max-width: 340px; */ /* min-width: 300px; */ } .appscms-blog-cards .extrapaddingforimg img { height: auto; border-radius: 10px 10px 0px 0px; } .card-body { display: flex; flex-direction: column; justify-content: space-between; } /* recent post blog heading */ /* author in blog */ .wrapfooter { display: flex; margin-top: 50px; margin-bottom: -0px; } .wrapfooter img { width: 42px; height: 42px; border-radius: 50%; } .wrapfooter .author-meta { padding: 0px 15px 0px 10px; } .wrapfooter .author-meta a { font-size: 15px; font-weight: 500; color: #3e3e3e; text-transform: capitalize; text-decoration: none; } .post-date { color: #000; font-size: 14px; font-weight: 500; display: block; text-align: left; } } /* Small devices (tablets) */ @media (min-width: 576px) and (max-width: 767.98px) { .toolfilters { font-size: 10px; height: 40px; padding: 1px; } #searchbar-placeholder { font-size: 13px; } #appscms-searchbar { padding: 3px; } /* toolfilter { margin: auto; padding: 0px 20px; } */ } /* Medium devices (desktops) */ @media (max-width: 768px) { #appscms-tools-section-row { gap: 15px; justify-content: center; margin-top: 35px; } .appscms-tool .tool-top .tool-img img { border-radius: 0; } .appscms-tool .tool-top .tool-img { justify-content: center; background: unset; border: 5px solid #ffffff08; } .appscms-tool { box-shadow: none; margin-bottom: 25px; height: auto; background-color: transparent; display: flex; flex-direction: column; align-items: center; } .appscms-tool:hover { box-shadow: unset; } .appscms-tool .tool-top { background-color: transparent; flex-direction: column; justify-content: center; border-radius: 10px; height: 64px; width: 64px; border-radius: 21px; } .appscms-tool .tool-img { padding: 0px !important; } .appscms-tool .tool-img img { height: 38px !important; width: 38px !important; } .appscms-tool .tool-text { display: none; } .appscms-tool .tool-heading { font-size: 12px; line-height: 14.52px; margin-top: 14px; padding: 0px; height: 15px; font-weight: 400; } .appscms-tool-container { /* margin: 0 auto; */ width: auto !important; } .appscms-tool-container:nth-child(even) .appscms-tool .tool-top { background-color: transparent; } } @media (min-width: 768px) and (max-width: 991.98px) { .toolfilters { font-size: 12px; } } /* Large devices (desktops) */ @media (min-width: 992px) and (max-width: 1199.98px) { /* Insert CSS code here */ } /* Extra Large devices (large desktops) */ @media (min-width: 1200px) and (max-width: 1399.98px) { /* Insert CSS code here */ } /* Extra Extra Large devices (larger desktops) */ @media (min-width: 1400px) { /* Insert CSS code here */ } /* animations */ .appscms-product-footer li { list-style: none; } .footer-product-link { border-radius: 5px; color: #5e5e5f; display: block; font-weight: 500; font-size: 14px; line-height: 19px; padding: 15px 20px 14px 10px; position: relative; transition: none; } .footer-product-link:hover { background-color: #f3f3f451; color: #262628; text-decoration: none; } .appscms-footer { background-color: var(--white-color); padding: 44px 10px 10px 10px; border-top: 1px solid rgb(148, 148, 148); } .appscms-footer-link { list-style: none; } .appscms-footer-link { color: #6b6b6b; display: block; margin-top: 18px; font-size: 14px; font-weight: 500; line-height: 18px; } .appscms-footer-link:hover { color: var(--black-color); } .appscms-footer-category { font-size: 14px; padding-bottom: 12px; font-weight: 700; line-height: 12px; color: var(--mid-gray); list-style: none; } .upload-from-drives { display: flex; gap: 20px; margin-top: 10px; } .upload-from-drives img { cursor: pointer; } #appscms-tools-section a { text-decoration: none; } .success-msg { text-align: center; margin: 30px 0px; color: var(--primary-color); } .go-back-block { display: flex; align-items: center; justify-content: center; margin: 30px 0px; } .go-back-block button { background-color: var(--primary-color); color: var(--white-color); border: none; border-radius: 10px; padding: 10px 15px; font-size: 15px; height: 48px; min-width: 212px; } .go-back-block button i { color: var(--black-color); background-color: var(--white-color); padding: 8px; border-radius: 50%; font-size: 12px; } /* Rating tool css */ .rating-tool { display: flex; justify-content: center; align-items: center; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1); background-color: #fcfcfc; border-radius: 50px; height: 70px; margin: 40px 0; } .rating-tool #rating-img,#rating-img { height: 1px; width: 1px; filter: brightness(100); } .rating { font-size: 20px; } .rating-tool .rating-text { font-size: 16px; font-weight: 700; color: rgb(33, 33, 33); padding: 6px; } .rating-tool .rating-stars { color: #9d9d9d !important; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 1rem 0px; } .rating-tool .rating-stars i { padding: 5px; font-size: 40px; } .rating-tool .rating-value { line-height: 24px; font-size: 16px; font-weight: 400; color: rgb(33, 33, 33); padding: 6px; } .download-social-share { background: #d0d3ed; padding: 40px 0px; display: flex; justify-content: space-between; } .share-icons { display: flex; gap: 30px; justify-content: end; } .download-social-share a { color: #000; font-size: 17px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; padding: 10px 10px; border: 2px solid var(--black-color); border-radius: 50%; } .appscms-heading { font-size: 25px; text-align: center; font-weight: 500; } .website-img { height: 50px; width: 50px; } .website-showcases { padding: 50px 0px; } .website-showcase { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 25px; overflow: hidden; } .website-showcase a { color: var(--black-color); font-size: 15px; margin-top: 10px; } .feature-showcase { padding: 50px 0px; } .feature-showcase-div { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 25px; } .feature-showcase-div img { height: 45px; width: 45px; } .feature-showcase a span { margin-top: 15px; font-size: 14px; } .feature-showcase a { color: var(--black-color); } .video-h1, .audio-h1 { font-weight: 600; font-size: 53px; } .video-h2, .audio-h2 { font-size: 22px; } .shareModal { display: none; position: fixed; z-index: 100000000000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); } .shareModal .share-modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; /* border: 1px solid #888; */ width: 70%; height: 200px; text-align: center; } .shareModal .close-share-modal { color: #aaa; float: right; display: none; font-size: 28px; font-weight: bold; } .shareModal h5 { color: #000; padding-top: 10px; font-weight: 700; } .shareModal .close-share-modal:hover, .shareModal .close-share-modal:focus { color: black; text-decoration: none; cursor: pointer; } .share-modal-social { display: flex; gap: 30px; height: 100%; padding-bottom: 60px; align-items: center; justify-content: center; } .share-modal-social a { color: #000; } .share-modal-social a i { font-size: 30px; } .authors-list a { color: var(--dark-gray); } .featurePageAuthor { display: flex; flex-direction: column; width: 100%; justify-content: center; } .featurePageAuthor .author-meta { width: 500px; margin: 0 auto; padding-bottom: 5rem; } .featurePageAuthor .author-meta .authorName { font-size: 20px; padding: 1rem 0px; font-weight: 900; text-align: center; } .featurePageAuthor .author-img { width: 100px; height: 100px; border-radius: 100%; } .featurePageAuthor .author_bio { font-size: 16px; } @media (max-width: 768px) { .authors-list { padding: 25px; } .featurePageAuthor .author-meta { width: 100%; } } .contributor { width: 100px; } .contributor .contributor-name { font-size: 13px; margin-top: 8px; text-transform: capitalize; } .infographics_section { width: 100%; padding: 50px 0px 50px 0px; border-top: 1px solid rgb(224, 224, 224); } .infographics_section .infographics-desc { position: absolute; color: #000; bottom: 0; } .infographics_section .slider { position: relative; max-width: 40rem; height: 26.625rem; margin: 0 auto; overflow: hidden; } .infographics_section .slide { position: absolute; top: 0; width: 100%; height: 26.625rem; display: flex; align-items: center; justify-content: center; transition: transform 1s; } .infographics_section .slide img { width: 200px; height: 100%; transition-duration: 0.27s; /* object-fit: contain; */ } .infographics_section button { background: none; border: none; } .infographics_section button .fas { color: #000; } .infographics_section .btn-slide { position: absolute; top: 50%; z-index: 10; height: 5.5rem; width: 5.5rem; cursor: pointer; } .infographics_section .prev { left: 3rem; transform: translate(-50%, -50%); } .infographics_section .next { right: 3rem; transform: translate(50%, -50%); } .infographics_section .dots-container { display: flex; justify-content: center; align-items: center; position: relative; } .infographics_section .dot { width: 25px; height: 5px; margin: 15px 5px; border-radius: 0.5rem; background: rgba(39, 39, 39, 0.5); cursor: pointer; } .infographics_section .dot.active { background: #272727; } .slide img { transition-duration: 0.27s; } .slide img:hover { transform: scale(1.02); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12); cursor: pointer; } .no-result-found-msg { font-size: 20px; color: var(--black-light); text-align: center; width: 100%; font-weight: 500; } .close-nav-ham { display: none; } .active-lang { background: #f4f5ff; border-radius: 3px; } .post-read-more{ font-size: 13px; } .how-to-video .youtube-play-btn-wrapper { position: absolute; top: -4%; left: -17px; display: flex; text-align: center; width: 100%; justify-content: center; align-items: center; height: 100%; } .youtube-play-btn-wrapper .play-btn { font-size: 28px; width: 68px; background-color: red; border: none; border-radius: 15px; } .related_post_heading { font-size: 23px; font-weight: bold; } .appscms-loader{ display: flex; width: 100%; align-items: center; justify-content: center; } .lds-roller { display: inline-block; position: relative; width: 80px; height: 80px; } .lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 40px 40px; } .lds-roller div:after { content: " "; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-color); margin: -4px 0 0 -4px; } .lds-roller div:nth-child(1) { animation-delay: -0.036s; } .lds-roller div:nth-child(1):after { top: 63px; left: 63px; } .lds-roller div:nth-child(2) { animation-delay: -0.072s; } .lds-roller div:nth-child(2):after { top: 68px; left: 56px; } .lds-roller div:nth-child(3) { animation-delay: -0.108s; } .lds-roller div:nth-child(3):after { top: 71px; left: 48px; } .lds-roller div:nth-child(4) { animation-delay: -0.144s; } .lds-roller div:nth-child(4):after { top: 72px; left: 40px; } .lds-roller div:nth-child(5) { animation-delay: -0.18s; } .lds-roller div:nth-child(5):after { top: 71px; left: 32px; } .lds-roller div:nth-child(6) { animation-delay: -0.216s; } .lds-roller div:nth-child(6):after { top: 68px; left: 24px; } .lds-roller div:nth-child(7) { animation-delay: -0.252s; } .lds-roller div:nth-child(7):after { top: 63px; left: 17px; } .lds-roller div:nth-child(8) { animation-delay: -0.288s; } .lds-roller div:nth-child(8):after { top: 56px; left: 12px; } @keyframes lds-roller { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } :root { --maincolor: #e55c5c; } .workspace { margin-bottom: 3rem; } #Inputbox { width: 250px; cursor: pointer; display: flex; justify-content: space-around; min-height: 70px; align-items: center; background: var(--primary-color); font-weight: 600; font-size: 22px; line-height: 32px; vertical-align: middle; color: #fff; border-radius: 4px; box-shadow: 0 3px 6px 0 rgb(0 0 0 / 14%); } #Inputbox:hover, #dropbox:hover, #filepicker:hover { transition: all .5s linear; background-color: #000; } #img-svg { margin: auto; margin-top: 16px; height: 67px; width: 98px; } #file-loader { display: flex; align-items: center; flex-direction: column; } #file-loader img { height: 60px; } #file-loader p { text-align: center; color: #fff; font-size: 17px; } #loading-img { height: 27px; width: 27px; margin-right: 21px; } #dropbox svg, #filepicker svg, .boxes svg { height: 24px !important; width: 24px !important; } .feature-content-box { max-width: 900px; margin: auto } .boxes { background: #fff; border-radius: 0; cursor: pointer; display: flex; align-items: center; padding: 15px 24px; height: 54px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; justify-content: center; font-size: 15px; font-weight: 800; color: #000; } .files-processing-list { box-shadow: 0px 0px 10px rgb(0 0 0 / 20%); } .inputfiles-label { background: #d6f0fb70; /* padding: 10px; */ /* margin: 10px; */ text-transform: uppercase; font-weight: 900; padding: 5px; /* margin: 10px 0; */ width: 100px; margin-bottom: 7px; border-radius: 2px; } .ready { text-transform: uppercase; color: #fff; padding: 0 5px; color: red; border: red 1px solid; font-size: 10px; } .processing { text-transform: uppercase; color: #fff; background-color: #ffb103; padding: 0 5px; border: #ffb103 1px solid; font-size: 10px; } .done { text-transform: uppercase; color: #fff; background-color: #32be5b; padding: 0 5px; border: #32be5b 1px solid; font-size: 10px; } .spinner-border { color: #000; display: inline-block; width: 15px; height: 15px; vertical-align: middle; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; -webkit-animation: .75s linear infinite spinner-border; animation: .75s linear infinite spinner-border; /* padding-right: 1rem; */ position: relative; left: 20px; } .files-panel { text-align: left; box-shadow: 0 2px 4px rgb(0 0 0 / 20%); border-radius: 4px; padding: 15px; } .files-container-box { margin-top: 1rem; text-align: left; box-shadow: 0 2px 4px rgb(0 0 0 / 20%); /* padding-bottom: 10px; */ width: 100%; } .table td, .table th { font-size: 15px; border-top: none !important; border-bottom: 1px solid #dee2e6; vertical-align: middle !important; } .download-file-btn { border: none; background: #404040; color: #fff; padding: 4px 15px; border-radius: 5px; width: auto; font-size: 14px; } .download-file-btn:hover { color: #fff !important; } .add-more-files-button:hover { color: #fff !important } .add-more-files-button { border: 1px solid rgba(0, 0, 0, 0.1) !important; border-bottom-left-radius: unset; border-bottom-right-radius: unset; color: #fff; background-color: #404040; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; position: absolute; top: -28px; padding: 9px 20px; } .add-more-files-button img { width: 18px; } .bottom-section-container { display: none; background: #f8f9fa; border: 1px solid #f8f9fa; box-shadow: 0 2px 4px rgb(0 0 0 / 20%); } #submit-button { padding: 8px 20px; color: #fff; display: flex; gap: 20px; align-items: center; margin-top: 1.5rem; justify-content: center; width: 100%; } #submit-button:focus { border: none; outline: none; box-shadow: unset !important; } .custom-box { padding: 15px; } .inner-box { border: 1px dashed rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.1); padding: 40px; min-height: 300px; width: 100%; } .file-picker-dropdown { width: 213px; position: absolute; /* background: #fff; */ top: 111%; left: 0; display: none; /* box-shadow: rgb/(26 26 26 / 20%) 0 0 12px; */ border-radius: 4px; } .file-pick-dropdown i { margin: 0; } .file-pick-dropdown { color: #fff; cursor: pointer; display: inline-flex; background: var(--primary-color); height: 70px; border-left: 1px solid #fff; padding: 13px 20px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; align-items: center; position: relative; } #dropfile { font-size: 16px; margin-top: 15px; text-align: center; color: #fff; } .file-icon { width: 20px; } .file-picker-dropdown a, .file-picker-dropdown button { border: none; width: 100%; border-radius: 4px; text-align: left; background: #fff; font-weight: 400; font-size: 16px; line-height: 24px; padding: 15px 24px; list-style: none; height: 54px; } .options-panel { box-shadow: 0 2px 4px rgb(0 0 0 / 20%); border-radius: 4px; padding: 15px; width: 100%; } .options-panel .title { width: 100%; margin-bottom: 20px; font-size: 22px; line-height: 36px; color: #000; font-weight: 700; text-align: left; } .options-panel .description { width: 100%; font-size: 17px; color: #666; font-weight: 400; text-align: left; } .options-title { width: 100%; font-size: 17px; color: #666; font-weight: 400; text-align: left; } .download-format, .download-wrapper { display: flex; align-items: flex-start; /* border-bottom: 1px solid #ddd; */ /* margin: 12px 0px; */ /* padding: 12px 0px; */ flex-direction: column; } .download-format .select-format-title { font-size: 17px; color: #666; font-weight: 400; text-align: left; } #download-button, #addMore, #common_btn, #download-zip { border-radius: 5px; cursor: pointer; display: inline-block; width: 100%; padding: 14px 0; /* margin-bottom: 20px; */ text-align: center; /* border-radsius: 50px; */ background: var(--primary-color) ; font-size: 15px; color: #fff; font-weight: 700; text-decoration: none; transition: all 0.3s; border: none; } #download-button svg { fill: #fff; margin-right: 4px; height: 20px; } #download-zip { padding: 10px 20px; display: none; /* backgr/ound: #fff; */ } @media (max-width: 768px) { .file-icon-row { display: none; } .file-picker-dropdown { width: auto; left: auto; } #filepicker, #dropbox { margin-bottom: 0.3rem; } .options-panel { margin-top: 15px; } .fileName { font-size: 10px !important; } .download-file-btn { font-size: 10px; } .download-icon { display: none; } } @media (max-width: 992px) { .appscms-sidebar-right, .appscms-sidebar-left { display: none; } } .appscms-sidebar-right, .appscms-sidebar-left { min-width: 220px; max-width: fit-content; height: 100vh; min-height: 300px; max-height: fit-content; top: 72px; position: absolute; } .appscms-sidebar-left { left: 80px; } .appscms-sidebar-right { right: 80px; } @media screen and (min-width: 1450px) { .appscms-sidebar-left { left: 200px !important; } .appscms-sidebar-right { right: 200px !important; } } @media screen and (min-width: 1920px) { .appscms-sidebar-left { left: 300px !important; } .appscms-sidebar-right { right: 300px !important; } } .appscms-loader{ display: none; } /* CSS for the table design */ .usp-section .table { border-collapse: collapse; width: 100%; border-radius: 8px; overflow: hidden; } .usp-section .table th, .usp-section .table td { padding: 12px; text-align: left; border-bottom: 1px solid #dee2e6; } .usp-section .table th { background-color: #f8f9fa; } .usp-section .table-striped tbody tr:nth-of-type(odd) { background-color: #f8f9fa; } .usp-section .table-bordered { border: 1px solid #dee2e6; } .usp-section .table-bordered th, .usp-section .table-bordered td { border: 1px solid #dee2e6; } /* Rounded corners */ .usp-section .table-rounded { border-collapse: separate; border-spacing: 0; } .usp-section .table-rounded th:first-child, .usp-section .table-rounded td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .usp-section .table-rounded th:last-child, .usp-section .table-rounded td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } /* Clean and modern UI */ .usp-section .table-striped { background-color: transparent; } .usp-section .table-light { background-color: #ffffff; } /* Responsive design */ @media (max-width: 768px) { .usp-section .table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } } .scroll-left svg,.scroll-right svg{ cursor: pointer; position: absolute; top: 8px; } .scroll-left svg{ left: -10px; } .scroll-right svg{ right: -10px; }