{"loaderData":{"0":null,"0-3":{"total":7263,"projects":[{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"2849cc","snapshot":null,"tags":null,"title":"form by ahmed150up","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1065,"cssLen":1263,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Song Title

Artist

\n \n \n

\n","css":".audio-player {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 300px;\n height: 80px;\n background-color: #282828;\n border-radius: 8px;\n padding: 8px;\n box-sizing: border-box;\n}\n\n.album-cover {\n width: 64px;\n height: 64px;\n background-color: #fff;\n border-radius: 50%;\n margin-right: 12px;\n}\n\n.player-controls {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n}\n\n.song-info {\n margin-bottom: 4px;\n}\n\n.song-title {\n font-size: 16px;\n color: #fff;\n margin: 0;\n}\n\n.artist {\n font-size: 12px;\n color: #b3b3b3;\n margin: 0;\n}\n\n.progress-bar {\n width: 100%;\n height: 4px;\n background-color: #4f4f4f;\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress {\n width: 50%;\n height: 100%;\n background-color: #1db954;\n transform-origin: left;\n animation: progress-animation 10s linear infinite;\n}\n\n.buttons {\n display: flex;\n}\n\nbutton {\n background: none;\n border: none;\n cursor: pointer;\n outline: none;\n}\n\n.play-btn,\n.pause-btn {\n font-size: 16px;\n color: #fff;\n margin-right: 8px;\n transition: transform 0.2s ease-in-out;\n}\n\n.play-btn:hover,\n.pause-btn:hover {\n transform: scale(1.2);\n}\n\n@keyframes progress-animation {\n 0% {\n transform: scaleX(0);\n }\n\n 100% {\n transform: scaleX(1);\n }\n}\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"895b4e","snapshot":null,"tags":null,"title":"form by John-CFO","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":838,"cssLen":5002,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n","css":".form {\n position: relative;\n display: block;\n padding: 2.2rem;\n max-width: 350px;\n background: linear-gradient(14deg, rgba(2,0,36, 0.8) 0%, rgba(24, 24, 65, 0.7) 66%, \n rgb(20, 76, 99) 100%), radial-gradient(circle, rgba(2,0,36, 0.5) 0%, \n rgba(32, 15, 53, 0.2) 65%, rgba(14, 29, 28, 0.9) 100%);\n border: 2px solid #fff;\n -webkit-box-shadow: rgba(0,212,255) 0px 0px 50px -15px;\n box-shadow: rgba(0,212,255) 0px 0px 50px -15px;\n overflow: hidden;\n z-index: +1;\n}\n\n/*------input and submit section-------*/\n\n.input-container {\n position: relative;\n}\n\n.input-container input, .form button {\n outline: none;\n border: 2px solid #ffffff;\n margin: 8px 0;\n font-family: monospace;\n}\n\n.input-container input {\n background-color: #fff;\n padding: 6px;\n font-size: 0.875rem;\n line-height: 1.25rem;\n width: 250px;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n.input-mail:focus::placeholder {\n opacity: 0;\n transition: opacity .9s;\n}\n\n.input-pwd:focus::placeholder {\n opacity: 0;\n transition: opacity .9s;\n}\n\n.submit {\n position: relative;\n display: block;\n padding: 8px;\n background-color: #c0c0c0;\n color: #ffffff;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 500;\n width: 100%;\n text-transform: uppercase;\n overflow: hidden;\n}\n\n.submit:hover {\n -webkit-transition: all 0.2s ease-out;\n -moz-transition: all 0.2s ease-out;\n transition: all 0.2s ease-out;\n border-radius: 3.9px;\n box-shadow: 4px 5px 17px -4px #ffffff;\n cursor: pointer;\n}\n\n.submit:hover::before {\n -webkit-animation: sh02 0.5s 0s linear;\n -moz-animation: sh02 0.5s 0s linear;\n animation: sh02 .5s 0s linear;\n}\n\n.submit::before {\n content: '';\n display: block;\n width: 0px;\n height: 85%;\n position: absolute;\n top: 50%;\n left: 0%;\n opacity: 0;\n background: #fff;\n box-shadow: 0 0 50px 30px #fff;\n -webkit-transform: skewX(-20deg);\n -moz-transform: skewX(-20deg);\n -ms-transform: skewX(-20deg);\n -o-transform: skewX(-20deg);\n transform: skewX(-20deg);\n}\n\n@keyframes sh02 {\n from {\n opacity: 0;\n left: 0%;\n }\n\n 50% {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n left: 100%;\n }\n}\n\n/*--------signup section---------*/\n\n.signup-link {\n color: #c0c0c0;\n font-size: 0.875rem;\n line-height: 1.25rem;\n text-align: center;\n font-family: monospace;\n}\n\n.signup-link a {\n color: #fff;\n text-decoration: none;\n}\n\n.up:hover {\n text-decoration: underline;\n}\n\n\n/*--------header section-----------*/\n\n.form-title {\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-family: monospace;\n font-weight: 600;\n text-align: center;\n color: #fff;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);\n animation-duration: 1.5s;\n overflow: hidden;\n transition: .12s;\n}\n\n.form-title span {\n animation: flickering 2s linear infinite both;\n}\n\n.title-2 {\n display: block;\n margin-top: -0.5rem;\n font-size: 2.1rem;\n font-weight: 800;\n font-family: Arial, Helvetica, sans-serif;\n text-align: center;\n -webkit-text-stroke: #fff 0.1rem;\n letter-spacing: 0.2rem;\n color: transparent;\n position: relative;\n text-shadow: 0px 0px 16px #CECECE;\n}\n\n.title-2 span::before,\n.title-2 span::after {\n content: '—';\n}\n\n@keyframes flickering {\n 0%,\n 100% {\n opacity: 1;\n }\n\n 41.99% {\n opacity: 1;\n }\n\n 42% {\n opacity: 0;\n }\n\n 43% {\n opacity: 0;\n }\n\n 43.01% {\n opacity: 1;\n }\n\n 47.99% {\n opacity: 1;\n }\n\n 48% {\n opacity: 0;\n }\n\n 49% {\n opacity: 0;\n }\n\n 49.01% {\n opacity: 1;\n }\n}\n\n/*---------shooting stars-----------*/\n\n\n.bg-stars {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -2;\n background-size: cover;\n animation: animateBg 50s linear infinite;\n}\n\n@keyframes animateBg {\n 0%,100% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.2);\n }\n}\n\n.star {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 4px;\n height: 4px;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 4px rgba(255,255,255,0.1),0 0 0 8px rgba(255,255,255,0.1),0 0 20px rgba(255,255,255,0.1);\n animation: animate 3s linear infinite;\n}\n\n.star::before {\n content: '';\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 300px;\n height: 1px;\n background: linear-gradient(90deg,#fff,transparent);\n}\n\n@keyframes animate {\n 0% {\n transform: rotate(315deg) translateX(0);\n opacity: 1;\n }\n\n 70% {\n opacity: 1;\n }\n\n 100% {\n transform: rotate(315deg) translateX(-1000px);\n opacity: 0;\n }\n}\n\n.star:nth-child(1) {\n top: 0;\n right: 0;\n left: initial;\n animation-delay: 0s;\n animation-duration: 1s;\n}\n\n.star:nth-child(2) {\n top: 0;\n right: 100px;\n left: initial;\n animation-delay: 0.2s;\n animation-duration: 3s;\n}\n\n.star:nth-child(3) {\n top: 0;\n right: 220px;\n left: initial;\n animation-delay: 2.75s;\n animation-duration: 2.75s;\n}\n\n.star:nth-child(4) {\n top: 0;\n right: -220px;\n left: initial;\n animation-delay: 1.6s;\n animation-duration: 1.6s;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"295237","snapshot":null,"tags":null,"title":"form by KhelVers","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":8727,"cssLen":2098,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n

\n \n \n \n \n \n \n \n \n \n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":"#Container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n height: 100%;\n}\n\n#rays {\n z-index: 2;\n position: relative;\n bottom: -1.5em;\n animation: rays 2s ease-in-out infinite;\n}\n\n.form {\n position: relative;\n top: 5em;\n padding: 4%;\n z-index: 3;\n display: flex;\n flex-direction: column;\n border-radius: 0.5rem;\n border: 4px solid #fff;\n background: rgba(0, 255, 240, 0.52);\n box-shadow: 0px 0px 64px 0px #82e1ff inset, 0px 0px 16px #a8fffaa6;\n backdrop-filter: blur(3.5px);\n gap: 1em;\n animation: float 2s ease-in-out infinite;\n}\n\n#login-lable {\n text-align: center;\n color: white;\n font-size: 2rem;\n font-weight: 600;\n letter-spacing: 8px;\n text-shadow: 0px 0px 16px rgb(243, 243, 243);\n}\n\n.form-content {\n height: 3em;\n padding: 1px 8px;\n color: white;\n text-decoration: none;\n letter-spacing: 1px;\n font-weight: bold;\n border-radius: 6px;\n border: 2px solid #fff;\n background: rgba(139, 255, 247, 0.486);\n box-shadow: 0px 0px 1px 3px #9ee5e3 inset, 0px 4px 4px 0px #181a6040;\n text-shadow: 0px 1px 4px rgb(243, 243, 243);\n}\n\n.form-content:focus-visible {\n outline: none;\n text-decoration: none;\n background: rgba(139, 189, 255, 0.59);\n box-shadow: 0px 0px 1px 4px #9ee5e3;\n}\n\n.form-content:hover {\n background: rgba(139, 189, 255, 0.59);\n}\n\n::placeholder {\n font-weight: 300;\n color: white;\n letter-spacing: 0.1rem;\n text-shadow: 0px 1px 5px rgb(66, 66, 66);\n}\n\n.form button {\n cursor: pointer;\n height: 3.5rem;\n padding: 0%;\n color: white;\n font-size: 1.5em;\n letter-spacing: 0.3rem;\n border: 2px solid white;\n background: linear-gradient(144deg, #9c11ffce, #2000eeb6 50%, #15efffbb);\n}\n\n.form button:hover {\n position: relative;\n bottom: 4px;\n background: linear-gradient(144deg, #9c11ff, #2000ee 50%, #15fff3);\n box-shadow: 0px 0px 2px 2px #ffffff;\n}\n\n@keyframes float {\n 0% {\n position: relative;\n }\n\n 50% {\n top: 50px;\n }\n\n 100% {\n position: relative;\n }\n}\n\n@keyframes rays {\n 0% {\n opacity: 0.6;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0.6;\n }\n}\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"7fb175","snapshot":null,"tags":null,"title":"form by andrew-demchenk0","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1453,"cssLen":3704,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n

\n \n

","css":".wrapper {\n --input-focus: #2d8cf0;\n --font-color: #fefefe;\n --font-color-sub: #7e7e7e;\n --bg-color: #111;\n --bg-color-alt: #7e7e7e;\n --main-color: #fefefe;\n /* display: flex; */\n /* flex-direction: column; */\n /* align-items: center; */\n}\n/* switch card */\n.switch {\n transform: translateY(-200px);\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 30px;\n width: 50px;\n height: 20px;\n}\n\n.card-side::before {\n position: absolute;\n content: 'Log in';\n left: -70px;\n top: 0;\n width: 100px;\n text-decoration: underline;\n color: var(--font-color);\n font-weight: 600;\n}\n\n.card-side::after {\n position: absolute;\n content: 'Sign up';\n left: 70px;\n top: 0;\n width: 100px;\n text-decoration: none;\n color: var(--font-color);\n font-weight: 600;\n}\n\n.toggle {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n box-sizing: border-box;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--bg-color);\n transition: 0.3s;\n}\n\n.slider:before {\n box-sizing: border-box;\n position: absolute;\n content: \"\";\n height: 20px;\n width: 20px;\n border: 2px solid var(--main-color);\n border-radius: 5px;\n left: -2px;\n bottom: 2px;\n background-color: var(--bg-color);\n box-shadow: 0 3px 0 var(--main-color);\n transition: 0.3s;\n}\n\n.toggle:checked + .slider {\n background-color: var(--input-focus);\n}\n\n.toggle:checked + .slider:before {\n transform: translateX(30px);\n}\n\n.toggle:checked ~ .card-side:before {\n text-decoration: none;\n}\n\n.toggle:checked ~ .card-side:after {\n text-decoration: underline;\n}\n\n/* card */ \n\n.flip-card__inner {\n width: 300px;\n height: 350px;\n position: relative;\n background-color: transparent;\n perspective: 1000px;\n /* width: 100%;\n height: 100%; */\n text-align: center;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n}\n\n.toggle:checked ~ .flip-card__inner {\n transform: rotateY(180deg);\n}\n\n.toggle:checked ~ .flip-card__front {\n box-shadow: none;\n}\n\n.flip-card__front, .flip-card__back {\n padding: 20px;\n position: absolute;\n display: flex;\n flex-direction: column;\n justify-content: center;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n background: var(--bg-color);\n gap: 20px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n}\n\n.flip-card__back {\n width: 100%;\n transform: rotateY(180deg);\n}\n\n.flip-card__form {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n}\n\n.title {\n margin: 20px 0 20px 0;\n font-size: 25px;\n font-weight: 900;\n text-align: center;\n color: var(--main-color);\n}\n\n.flip-card__input {\n width: 250px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 15px;\n font-weight: 600;\n color: var(--font-color);\n padding: 5px 10px;\n outline: none;\n}\n\n.flip-card__input::placeholder {\n color: var(--font-color-sub);\n opacity: 0.8;\n}\n\n.flip-card__input:focus {\n border: 2px solid var(--input-focus);\n}\n\n.flip-card__btn:active, .button-confirm:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}\n\n.flip-card__btn {\n margin: 20px 0 20px 0;\n width: 120px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 17px;\n font-weight: 600;\n color: var(--font-color);\n cursor: pointer;\n} "},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"55efae","snapshot":null,"tags":null,"title":"form by ahmed150up","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":990,"cssLen":1025,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".card {\n width: 350px;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-shadow: 2px 2px 8px rgba(0,0,0,0.1);\n overflow: hidden;\n margin: 10px;\n}\n\n.card-header {\n background-color: #333;\n padding: 16px;\n text-align: center;\n}\n\n.card-header .text-header {\n margin: 0;\n font-size: 18px;\n color: rgb(255, 255, 255);\n}\n\n.card-body {\n padding: 16px;\n}\n\n.form-group {\n margin-bottom: 10px;\n}\n\n.form-group label {\n display: block;\n font-size: 14px;\n color: #333;\n font-weight: bold;\n margin-bottom: 1px;\n}\n\n.form-group input[type=\"text\"],\n.form-group input[type=\"email\"],\n.form-group input[type=\"password\"] {\n width: 100%;\n padding: 8px;\n font-size: 14px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n\n.btn {\n padding: 12px 24px;\n margin-left: 13px;\n font-size: 16px;\n border: none;\n border-radius: 4px;\n background-color: #333;\n color: #fff;\n text-transform: uppercase;\n transition: background-color 0.2s ease-in-out;\n cursor: pointer\n}\n\n.btn:hover {\n background-color: #ccc;\n color: #333;\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"209219","snapshot":null,"tags":null,"title":"form by zanina-yassine","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5681,"cssLen":4173,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Comments\n

\n \n

\n 14\n

\n \n

\n Yassine Zanina\n

Wednesday, March 13th at 2:45pm

\n I've been using this product for a few days now and I'm really impressed! The interface is intuitive and easy to\n use, and the features are exactly what I need to streamline my workflow.\n

\n\n

\n \n

\n \n \n \n \n \n \n

","css":".card {\n width: 450px;\n height: fit-content;\n background-color: white;\n box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);\n border-radius: 17px 17px 27px 27px;\n}\n\n.title {\n width: 100%;\n height: 50px;\n position: relative;\n display: flex;\n align-items: center;\n padding-left: 20px;\n border-bottom: 1px solid #f1f1f1;\n font-weight: 700;\n font-size: 13px;\n color: #47484b;\n}\n\n.title::after {\n content: '';\n width: 8ch;\n height: 1px;\n position: absolute;\n bottom: -1px;\n background-color: #47484b;\n}\n\n.comments {\n display: grid;\n grid-template-columns: 35px 1fr;\n gap: 20px;\n padding: 20px;\n}\n\n.comment-react {\n width: 35px;\n height: fit-content;\n display: grid;\n grid-template-columns: auto;\n margin: 0;\n background-color: #f1f1f1;\n border-radius: 5px;\n}\n\n.comment-react button {\n width: 35px;\n height: 35px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n border: 0;\n outline: none;\n}\n\n.comment-react button:after {\n content: '';\n width: 40px;\n height: 40px;\n position: absolute;\n left: -2.5px;\n top: -2.5px;\n background-color: #f5356e;\n border-radius: 50%;\n z-index: 0;\n transform: scale(0);\n}\n\n.comment-react button svg {\n position: relative;\n z-index: 9;\n}\n\n.comment-react button:hover:after {\n animation: ripple 0.6s ease-in-out forwards;\n}\n\n.comment-react button:hover svg {\n fill: #f5356e;\n}\n\n.comment-react button:hover svg path {\n stroke: #f5356e;\n fill: #f5356e;\n}\n\n.comment-react hr {\n width: 80%;\n height: 1px;\n background-color: #dfe1e6;\n margin: auto;\n border: 0;\n}\n\n.comment-react span {\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: auto;\n font-size: 13px;\n font-weight: 600;\n color: #707277;\n}\n\n.comment-container {\n display: flex;\n flex-direction: column;\n gap: 15px;\n padding: 0;\n margin: 0;\n}\n\n.comment-container .user {\n display: grid;\n grid-template-columns: 40px 1fr;\n gap: 10px;\n}\n\n.comment-container .user .user-pic {\n width: 40px;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #f1f1f1;\n border-radius: 50%;\n}\n\n.comment-container .user .user-pic:after {\n content: '';\n width: 9px;\n height: 9px;\n position: absolute;\n right: 0px;\n bottom: 0px;\n border-radius: 50%;\n background-color: #0fc45a;\n border: 2px solid #ffffff;\n}\n\n.comment-container .user .user-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n gap: 3px;\n}\n\n.comment-container .user .user-info span {\n font-weight: 700;\n font-size: 12px;\n color: #47484b;\n}\n\n.comment-container .user .user-info p {\n font-weight: 600;\n font-size: 10px;\n color: #acaeb4;\n}\n\n.comment-container .comment-content {\n font-size: 12px;\n line-height: 16px;\n font-weight: 600;\n color: #5f6064;\n}\n\n.text-box {\n width: 100%;\n height: fit-content;\n background-color: #f1f1f1;\n padding: 8px;\n}\n\n.text-box .box-container {\n background-color: #ffffff;\n border-radius: 8px 8px 21px 21px;\n padding: 8px;\n}\n\n.text-box textarea {\n width: 100%;\n height: 40px;\n resize: none;\n border: 0;\n border-radius: 6px;\n padding: 12px 12px 10px 12px;\n font-size: 13px;\n outline: none;\n caret-color: #0a84ff;\n}\n\n.text-box .formatting {\n display: grid;\n grid-template-columns: auto auto auto auto auto 1fr;\n}\n\n.text-box .formatting button {\n width: 30px;\n height: 30px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n border-radius: 50%;\n border: 0;\n outline: none;\n}\n\n.text-box .formatting button:hover {\n background-color: #f1f1f1;\n}\n\n.text-box .formatting .send {\n width: 30px;\n height: 30px;\n background-color: #0a84ff;\n margin: 0 0 0 auto;\n}\n\n.text-box .formatting .send:hover {\n background-color: #026eda;\n}\n\n@keyframes ripple {\n 0% {\n transform: scale(0);\n opacity: 0.6;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"35f10b","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6809,"cssLen":3410,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Sign Up

It's quick and easy.

\n \n \n \n

\n \n \n

\n \n

\n Date of birth (?) \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n Gender (?) \n

\n \n Female\n \n \n \n Male\n \n \n \n Custom\n \n \n

\n People who use our service may have uploaded your contact information to\n Facebook.\n Learn more.\n

\n By clicking Sign Up, you agree to our\n Terms,\n Privacy Policy\n and\n Cookies Policy. You may receive SMS notifications from us and can opt out at any\n time.\n

\n \n Sign Up\n \n

\n","css":".mx-auto{margin-left:auto;margin-right:auto}.mt-1{margin-top:0.25rem}.mt-4{margin-top:1rem}.flex{display:flex}.h-7{height:1.75rem}.w-7{width:1.75rem}.w-full{width:100%}.max-w-\\[432px\\]{max-width:432px}.flex-1{flex:1 1 0%}.items-center{align-items:center}.justify-between{justify-content:space-between}.space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.75rem * var(--tw-space-x-reverse));margin-left:calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175 / var(--tw-border-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-1{padding-left:0.25rem;padding-right:0.25rem}.px-16{padding-left:4rem;padding-right:4rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-1\\.5{padding-top:0.375rem;padding-bottom:0.375rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.pb-6{padding-bottom:1.5rem}.pt-3{padding-top:0.75rem}.text-center{text-align:center}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.ring-gray-400{--tw-ring-opacity:1;--tw-ring-color:rgb(156 163 175 / var(--tw-ring-opacity))}.drop-shadow-md{--tw-drop-shadow:drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\\:text-blue-900:hover{--tw-text-opacity:1;color:rgb(30 58 138 / var(--tw-text-opacity))}.hover\\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.focus\\:placeholder-gray-500:focus::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128 / var(--tw-placeholder-opacity))}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"df52af","snapshot":null,"tags":null,"title":"form by emmanuelh-dev","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1751,"cssLen":2960,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Reset password

\n \n

","css":".relative{position:relative}.col-span-full{grid-column:1 / -1}.mx-auto{margin-left:auto;margin-right:auto}.mb-3{margin-bottom:0.75rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.w-full{width:100%}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.appearance-none{-webkit-appearance:none;appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.space-y-6 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-2\\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.text-center{text-align:center}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.duration-200{transition-duration:200ms}.placeholder\\:text-gray-400::placeholder{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.hover\\:border-black:hover{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.hover\\:bg-transparent:hover{background-color:transparent}.hover\\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.focus\\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}.focus-visible\\:outline-black:focus-visible{outline-color:#000}.focus-visible\\:ring-black:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0 / var(--tw-ring-opacity))}@media (min-width: 640px){.sm\\:px-4{padding-left:1rem;padding-right:1rem}.sm\\:text-sm{font-size:0.875rem;line-height:1.25rem}}@media (min-width: 768px){.md\\:w-96{width:24rem}.md\\:max-w-sm{max-width:24rem}.md\\:px-0{padding-left:0px;padding-right:0px}.md\\:px-12{padding-left:3rem;padding-right:3rem}}@media (min-width: 1024px){.lg\\:px-20{padding-left:5rem;padding-right:5rem}}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"3ae52b","snapshot":null,"tags":null,"title":"form by KapeParaguay","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5093,"cssLen":2397,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n background: linear-gradient(45deg, skyblue, darkblue);\n padding: 30px;\n width: 450px;\n border-radius: 20px;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n transition: background 0.3s ease;\n}\n\n.form:hover {\n background: linear-gradient(45deg, darkblue, skyblue);\n}\n\n::placeholder {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n}\n\n.form button {\n align-self: flex-end;\n}\n\n.flex-column > label {\n color: white;\n font-weight: 600;\n}\n\n.inputForm {\n border: 1.5px solid #ecedec;\n border-radius: 10em;\n height: 50px;\n display: flex;\n align-items: center;\n padding-left: 10px;\n transition: 0.2s ease-in-out;\n background-color: white;\n}\n\n.input {\n margin-left: 10px;\n border-radius: 10rem;\n border: none;\n width: 100%;\n height: 100%;\n}\n\n.input:focus {\n outline: none;\n}\n\n.inputForm:focus-within {\n border: 1.5px solid orange;\n}\n\n.flex-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 10px;\n justify-content: space-between;\n}\n\n.flex-row > div > label {\n font-size: 14px;\n color: black;\n font-weight: 400;\n}\n\n.span {\n font-size: 14px;\n margin-left: 5px;\n color: white;\n font-weight: 500;\n cursor: pointer;\n}\n\n.button-submit {\n position: relative;\n display: inline-block;\n padding: 15px 30px;\n text-align: center;\n letter-spacing: 1px;\n text-decoration: none;\n background: transparent;\n transition: ease-out 0.5s;\n border: 2px solid;\n border-radius: 10em;\n box-shadow: inset 0 0 0 0 blue;\n margin: 20px 0 10px 0;\n color: white;\n font-size: 15px;\n font-weight: 500;\n height: 50px;\n width: 100%;\n cursor: pointer;\n}\n\n.button-submit:hover {\n color: white;\n box-shadow: inset 0 -100px 0 0 royalblue;\n}\n\n.button-submit:active {\n transform: scale(0.9);\n}\n\n.p {\n text-align: center;\n color: white;\n font-size: 14px;\n margin: 5px 0;\n}\n\n.btn {\n margin-top: 10px;\n width: 100%;\n height: 50px;\n border-radius: 10em;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n gap: 10px;\n border: 1px solid #ededef;\n background-color: white;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n}\n\n.btn:hover {\n border: 1px solid orange;\n}\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"e6c432","snapshot":null,"tags":null,"title":"form by John-CFO","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":631,"cssLen":3220,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n --glow-color: rgb(176, 255, 251);\n --glow-spread-color: rgba(123, 246, 255, 0.781);\n --enhanced-glow-color: rgb(182, 71, 71);\n --btn-color: rgba(65, 65, 65, 0.508);\n border: 2px solid var(--glow-color);\n padding: 25px;\n display: flex;\n max-width: 420px;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n color: var(--glow-color);\n background-color: var(--btn-color);\n border-radius: 20px;\n position: relative;\n}\n\n/*----heading and description-----*/\n\n.info {\n margin-bottom: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.title {\n color: #fff;\n font-size: 1.6rem;\n font-weight: 900;\n}\n\n.description {\n color: #fff;\n margin-top: 10px;\n font-size: 1rem;\n}\n\n/*----input-fields------*/\n\n.form .input-fields {\n display: flex;\n justify-content: space-between;\n gap: 10px;\n}\n\n.form .input-fields input {\n height: 2.5em;\n width: 2.5em;\n outline: none;\n text-align: center;\n font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;\n font-size: 1.5rem;\n color: #fff;\n border-radius: 12px;\n border: 2.5px solid rgba(253, 253, 253, 0.363);\n background-color: rgb(255 255 255 / 0.05);\n}\n\n.form .input-fields input:focus {\n border: 1px solid rgb(99, 236, 241);\n box-shadow: inset -1px -1px 5px rgba(255, 255, 255, .6),\n inset 10px 10px 10px rgba(0, 0, 0, .25);\n transform: scale(1.05);\n transition: 0.5s;\n}\n\n/*-----verify and clear buttons-----*/\n\n.action-btns {\n display: flex;\n margin-top: 12px;\n gap: 0.5rem;\n}\n\n.verify {\n padding: 10px 20px;\n text-transform: uppercase;\n text-decoration: none;\n border-radius: 8px;\n font-size: 1rem;\n font-weight: 500;\n color: #00f7ff;\n text-shadow: none;\n background: transparent;\n box-shadow: transparent;\n border: 1px solid #ffffff80;\n transition: 0.5s ease;\n user-select: none;\n}\n\n.verify:hover,:focus {\n color: #ffffff;\n background: #00eeff;\n border: 1px solid #00e1ff;\n text-shadow: 0 0 5px #ffffff,\n 0 0 10px #ffffff,\n 0 0 20px #ffffff;\n box-shadow: 0 0 5px #00e1ff,\n 0 0 20px #00e1ff,\n 0 0 50px #00e1ff,\n 0 0 100px #00e1ff;\n}\n\n.clear {\n padding: 10px 20px;\n text-transform: uppercase;\n text-decoration: none;\n border-radius: 8px;\n font-size: 1rem;\n font-weight: 500;\n color: #ff0000;\n text-shadow: none;\n background: transparent;\n box-shadow: transparent;\n border: 1px solid #ffffff80;\n transition: 0.5s ease;\n user-select: none;\n}\n\n.clear:hover,:focus {\n color: #ffffff;\n background: #ff0000;\n border: 1px solid #ff0000;\n text-shadow: 0 0 5px #ffffff,\n 0 0 10px #ffffff,\n 0 0 20px #ffffff;\n box-shadow: 0 0 5px #ff0000,\n 0 0 20px #ff0000,\n 0 0 50px #ff0000,\n 0 0 100px #ff0000;\n}\n\n/*-----close button------*/\n\n.close {\n position: absolute;\n right: 10px;\n top: 10px;\n background-color: #494949;\n color: #ff0000;\n height: 30px;\n width: 30px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n cursor: pointer;\n font-weight: 600;\n transition: .5s ease;\n}\n\n.close:hover {\n background-color: rgba(255, 0, 0, 0.644);\n color: #fff;\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"75ae76","snapshot":null,"tags":null,"title":"form by mi-series","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1303,"cssLen":1514,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Feedback Form

Name

\n \n

Email*

\n \n

What is your overall impression?*

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

	Very Satisfied	Satisfied	Unsatisfied	Very Unsatisfied
Professional

Feel free to add any other comments or suggestions:

\n \n

","css":"form, p {\n padding: 0;\n margin: 0;\n outline: none;\n font-family: Roboto, Arial, sans-serif;\n font-size: 14px;\n color: #000;\n line-height: 13px;\n border-radius: 10px;\n}\n\n#h1 {\n font-size: 24px;\n font-weight: 400;\n text-align: center;\n}\n\n#h4 {\n margin: 20px 0 2px;\n color: #000;\n}\n\n.testbox {\n display: flex;\n justify-content: center;\n align-items: center;\n height: inherit;\n padding: 80px;\n}\n\nform {\n width: 100%;\n padding: 20px;\n background: #EBEBE1;\n box-shadow: 0 2px 5px #ccc;\n}\n\n.input {\n width: calc(100% - 10px);\n padding: 5px;\n border: 1px solid #000;\n border-radius: 3px;\n vertical-align: middle;\n background-color: #F7F7F7;\n}\n\n.input:hover, textarea:hover {\n outline: none;\n border: 1px solid #000;\n}\n\n.first-name {\n margin-bottom: 5px;\n}\n\nth, td {\n width: 21%;\n padding: 15px 0;\n border-bottom: 1px solid #ccc;\n text-align: center;\n vertical-align: set;\n line-height: 18px;\n font-weight: 400;\n word-break: break-all;\n}\n\n.first-col {\n width: 16%;\n text-align: left;\n}\n\ntable {\n width: 100%;\n}\n\ntextarea {\n width: calc(100% - 6px);\n background: #F7F7F7;\n border-radius: 5px;\n}\n\n.btn-block {\n margin-top: 20px;\n text-align: center;\n}\n\nbutton {\n width: 150px;\n padding: 10px;\n border: none;\n -webkit-border-radius: 5px;\n -moz-border-radius: 5px;\n border-radius: 5px;\n background-color: #F3D153;\n font-size: 16px;\n color: #000;\n cursor: pointer;\n}\n\nbutton:hover {\n opacity: .9;\n}\n\n@media (min-width: 568px) {\n th, td {\n word-break: keep-all;\n }\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"f957ee","snapshot":null,"tags":null,"title":"form by vinodjangid07","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":787,"cssLen":1897,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n\n","css":".otp-Form {\n width: 230px;\n height: 300px;\n background-color: rgb(255, 255, 255);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 20px 30px;\n gap: 20px;\n position: relative;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.082);\n border-radius: 15px;\n}\n\n.mainHeading {\n font-size: 1.1em;\n color: rgb(15, 15, 15);\n font-weight: 700;\n}\n\n.otpSubheading {\n font-size: 0.7em;\n color: black;\n line-height: 17px;\n text-align: center;\n}\n\n.inputContainer {\n width: 100%;\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: center;\n}\n\n.otp-input {\n background-color: rgb(228, 228, 228);\n width: 30px;\n height: 30px;\n text-align: center;\n border: none;\n border-radius: 7px;\n caret-color: rgb(127, 129, 255);\n color: rgb(44, 44, 44);\n outline: none;\n font-weight: 600;\n}\n\n.otp-input:focus,\n.otp-input:valid {\n background-color: rgba(127, 129, 255, 0.199);\n transition-duration: .3s;\n}\n\n.verifyButton {\n width: 100%;\n height: 30px;\n border: none;\n background-color: rgb(127, 129, 255);\n color: white;\n font-weight: 600;\n cursor: pointer;\n border-radius: 10px;\n transition-duration: .2s;\n}\n\n.verifyButton:hover {\n background-color: rgb(144, 145, 255);\n transition-duration: .2s;\n}\n\n.exitBtn {\n position: absolute;\n top: 5px;\n right: 5px;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.171);\n background-color: rgb(255, 255, 255);\n border-radius: 50%;\n width: 25px;\n height: 25px;\n border: none;\n color: black;\n font-size: 1.1em;\n cursor: pointer;\n}\n\n.resendNote {\n font-size: 0.7em;\n color: black;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 5px;\n}\n\n.resendBtn {\n background-color: transparent;\n border: none;\n color: rgb(127, 129, 255);\n cursor: pointer;\n font-size: 1.1em;\n font-weight: 700;\n}"}]}},"actionData":null,"errors":null}