{"loaderData":{"0":null,"0-3":{"total":7517,"projects":[{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"84fe46","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2583,"cssLen":1472,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Walk\n

\n\n

\n \n

\n Bike\n

\n\n

\n \n

\n Drive\n

\n","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.radio-tile-group {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.radio-tile-group .input-container {\n position: relative;\n height: 80px;\n width: 80px;\n margin: 0.5rem;\n}\n\n.radio-tile-group .input-container .radio-button {\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n margin: 0;\n cursor: pointer;\n}\n\n.radio-tile-group .input-container .radio-tile {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n border: 2px solid #079ad9;\n border-radius: 5px;\n padding: 1rem;\n transition: transform 300ms ease;\n}\n\n.radio-tile-group .input-container .icon svg {\n fill: #079ad9;\n width: 2rem;\n height: 2rem;\n}\n\n.radio-tile-group .input-container .radio-tile-label {\n text-align: center;\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: #079ad9;\n}\n\n.radio-tile-group .input-container .radio-button:checked + .radio-tile {\n background-color: #079ad9;\n border: 2px solid #079ad9;\n color: white;\n transform: scale(1.1, 1.1);\n}\n\n.radio-tile-group .input-container .radio-button:checked + .radio-tile .icon svg {\n fill: white;\n background-color: #079ad9;\n}\n\n.radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {\n color: white;\n background-color: #079ad9;\n}\n"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"4f02a2","snapshot":null,"tags":null,"title":"input by Codewithvinay","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":93,"cssLen":708,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n /* fallback for old browsers */\n background: -webkit-linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);\n /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);\n /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n background-repeat: no-repeat;\n border-radius: 89% 29% 90% 23% / 0% 100% 0% 100%;\n border-color: transparent;\n width: 200px;\n height: 50px;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n font-weight: 500;\n font-family: inherit;\n box-shadow: 23px 23px 46px #bebebe,\n -23px -23px 46px #ffffff;\n}\n\n.input::placeholder {\n color: white;\n}"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"c5436a","snapshot":null,"tags":null,"title":"input by ayman-ashine","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":336,"cssLen":2450,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".rounded-full {\n border-radius: 9999px;\n}\n.bg-zinc-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(228 228 231 / var(--tw-bg-opacity));\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n \"Liberation Mono\", \"Courier New\", monospace;\n}\n.text-zinc-600 {\n --tw-text-opacity: 1;\n color: rgb(82 82 91 / var(--tw-text-opacity));\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),\n 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0\n var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0\n calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.ring-zinc-400 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(161 161 170 / var(--tw-ring-opacity));\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.placeholder\\:text-zinc-600::placeholder {\n --tw-text-opacity: 1;\n color: rgb(82 82 91 / var(--tw-text-opacity));\n}\n.placeholder\\:opacity-50::placeholder {\n opacity: 0.5;\n}\n.focus\\:shadow-lg:focus {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),\n 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.focus\\:shadow-rose-400:focus {\n --tw-shadow-color: #fb7185;\n --tw-shadow: var(--tw-shadow-colored);\n}\n.focus\\:ring-2:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0\n var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0\n calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-rose-400:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(251 113 133 / var(--tw-ring-opacity));\n}\n"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"09bcf2","snapshot":null,"tags":null,"title":"input by ElsayedShamsEldeen","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":134,"cssLen":1192,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n User name\n

\n","css":".container {\n display: flex;\n flex-direction: column;\n gap: 7px;\n position: relative;\n color: white;\n}\n\n.container .label {\n font-size: 15px;\n padding-left: 10px;\n position: absolute;\n top: 13px;\n transition: 0.3s;\n pointer-events: none;\n}\n\n.input {\n width: 200px;\n height: 45px;\n border: none;\n outline: none;\n padding: 0px 7px;\n border-radius: 6px;\n color: #fff;\n font-size: 15px;\n background-color: transparent;\n box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),\n -1px -1px 6px rgba(255, 255, 255, 0.4);\n}\n\n.input:focus {\n border: 2px solid transparent;\n color: #fff;\n box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),\n -1px -1px 6px rgba(255, 255, 255, 0.4), inset 3px 3px 10px rgba(0, 0, 0, 1),\n inset -1px -1px 6px rgba(255, 255, 255, 0.4);\n}\n\n.container .input:valid ~ .label,\n.container .input:focus ~ .label {\n transition: 0.3s;\n padding-left: 2px;\n transform: translate(15px, -27px);\n letter-spacing: 5px;\n font-weight: bold;\n}\n\n.container .input:valid,\n.container .input:focus {\n box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),\n -1px -1px 6px rgba(255, 255, 255, 0.4), inset 3px 3px 10px rgba(0, 0, 0, 1),\n inset -1px -1px 6px rgba(255, 255, 255, 0.4);\n}\n"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"08ab37","snapshot":null,"tags":null,"title":"input by boryanakrasteva","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":602,"cssLen":1112,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".input-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 15px;\n position: relative;\n}\n\n.input {\n border-style: none;\n height: 50px;\n width: 50px;\n padding: 10px;\n outline: none;\n border-radius: 50%;\n transition: .5s ease-in-out;\n background-color: #7e4fd4;\n box-shadow: 0px 0px 3px #f3f3f3;\n padding-right: 40px;\n color: #fff;\n}\n\n.input::placeholder,\n.input {\n font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;\n font-size: 17px;\n}\n\n.input::placeholder {\n color: #8f8f8f;\n}\n\n.icon {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n right: 0px;\n cursor: pointer;\n width: 50px;\n height: 50px;\n outline: none;\n border-style: none;\n border-radius: 50%;\n pointer-events: painted;\n background-color: transparent;\n transition: .2s linear;\n}\n\n.icon:focus ~ .input,\n.input:focus {\n box-shadow: none;\n width: 250px;\n border-radius: 0px;\n background-color: transparent;\n border-bottom: 3px solid #7e4fd4;\n transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);\n}\n\n\n"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"66a262","snapshot":null,"tags":null,"title":"input by rricol","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":207,"cssLen":975,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Email\n \n enter a valid email\n

","css":".input {\n position: relative;\n max-width: 190px;\n border: none;\n box-shadow: 0px 1.5px 0px 0px #858585;\n padding: .5rem;\n transition: all 200ms ease-in-out;\n opacity: .8;\n}\n\n.input-box {\n display: flex;\n flex-direction: column;\n}\n\n.input-label {\n font-size: .625rem;\n font-weight: bold;\n color: #858585;\n margin-bottom: 4px;\n margin-left: 1px;\n}\n\n.input-helper {\n color: #858585;\n font-size: .5rem;\n margin-top: 6px;\n margin-left: 1px;\n visibility: hidden;\n transform: translateY(-.5rem);\n transition: all 100ms linear;\n z-index: -1;\n}\n\n.input::placeholder {\n color: rgb(145, 145, 145);\n font-size: .75rem;\n}\n\n.input::after {\n content: attr(placeholder);\n position: absolute;\n color: #161616;\n top: 0;\n left: 0;\n}\n\n.input:focus {\n border: none;\n box-shadow: 0px 1.5px 0px 0px #72E985;\n outline: none;\n}\n\n.input:focus + .input-helper {\n visibility: visible;\n transform: translateY(0rem);\n}\n\n.input:focus::placeholder {\n visibility: hidden;\n}"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"78dcb9","snapshot":null,"tags":null,"title":"input by Sunhotep","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":173,"cssLen":1057,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Ask Ptah\n

","css":".form__group {\n position: relative;\n padding: 20px 0 0;\n width: 100%;\n max-width: 180px;\n}\n\n.form__field {\n font-family: inherit;\n width: 100%;\n border: none;\n border-bottom: 2px solid #6b6b6b;\n outline: 0;\n font-size: 17px;\n color: #fff;\n padding: 7px 0;\n background: transparent;\n transition: border-color 0.2s;\n}\n\n.form__field::placeholder {\n color: transparent;\n}\n\n.form__field:placeholder-shown ~ .form__label {\n font-size: 17px;\n cursor: text;\n top: 20px;\n}\n\n.form__label {\n position: absolute;\n top: 0;\n display: block;\n transition: 0.2s;\n font-size: 17px;\n color: #FFE699;\n pointer-events: none;\n}\n\n.form__field:focus {\n padding-bottom: 6px;\n font-weight: 700;\n border-width: 3px;\n border-image: linear-gradient(to right, #FFE699, #5D3294);\n border-image-slice: 1;\n}\n\n.form__field:focus ~ .form__label {\n position: absolute;\n top: 0;\n display: block;\n transition: 0.2s;\n font-size: 17px;\n color: #FFE699;\n font-weight: 700;\n}\n\n/* reset input */\n.form__field:required, .form__field:invalid {\n box-shadow: none;\n}"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"92e555","snapshot":null,"tags":null,"title":"input by doniaskima","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":173,"cssLen":844,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Your Name\n

\n","css":".inputContainer {\n position: relative;\n margin-bottom: 20px;\n}\n\n.customInput {\n width: 100%;\n padding: 12px;\n font-size: 16px;\n background-color: transparent;\n border: none;\n border-bottom: 2px solid #007bff;\n outline: none;\n transition: border-color 0.3s ease;\n color: #007bff;\n}\n\n.customInput:focus,\n.customInput:not(:placeholder-shown) {\n border-color: #0056b3;\n}\n\n.inputLabel {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n padding: 5px;\n font-size: 16px;\n color: #007bff;\n transition: transform 0.3s ease, color 0.3s ease;\n}\n\n.customInput:focus + .inputLabel,\n.customInput:not(:placeholder-shown) + .inputLabel {\n transform: translateY(-100%) translateX(-5px) scale(0.8);\n}\n\n.inputUnderline {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: #007bff;\n}\n"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"aa5810","snapshot":null,"tags":null,"title":"input by Galahhad","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5083,"cssLen":13716,"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 Phonenumber*\n \n \n

\n \n This is not a valid phone number\n

🇦🇹Austria (+43)
🇧🇪Belgium (+32)
🇧🇬Bulgaria (+359)
🇭🇷Croatia (+385)
🇨🇾Cyprus (+357)
🇨🇿Czech Republic (+420)
🇩🇰Denmark (+45)
🇪🇪Estonia (+372)
🇫🇮Finland (+358)
🇫🇷France (+33)
🇩🇪Germany (+49)
🇬🇷Greece (+30)
🇭🇺Hungary (+36)
🇮🇸Iceland (+354)
🇮🇪Republic of Ireland (+353)
🇮🇹Italy (+39)
🇱🇻Latvia (+371)
🇱🇮Liechtenstein (+423)
🇱🇹Lithuania (+370)
🇱🇺Luxembourg (+352)
🇲🇹Malta (+356)
🇳🇱Netherlands (+31)
🇳🇴Norway (+47)
🇵🇱Poland (+48)
🇵🇹Portugal (+351)
🇷🇴Romania (+40)
🇸🇰Slovakia (+421)
🇸🇮Slovenia (+386)
🇪🇸Spain (+34)
🇸🇪Sweden (+46)

","css":".ui-wrapper {\n --width: 250px;\n --height: 50px;\n --background: #fff;\n --text-color: rgb(73, 73, 73);\n --border-color: rgb(185, 184, 184);\n --border-focus-color: rgb(0, 110, 255);\n --shadow-color: rgba(34, 60, 80, 0.2);\n --shadow-focus-color: rgba(0, 110, 255, 0.2);\n --dropdown-button-color: #e6e6e6;\n --dropdown-button-hover-color: #dad9d9;\n}\n\n.ui-wrapper *,\n.ui-wrapper *::before,\n.ui-wrapper *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n font-family: sans-serif;\n color: var(--text-color);\n}\n\n.ui-wrapper {\n width: var(--width);\n height: var(--height);\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n border-radius: 10px;\n position: relative;\n border: 1px solid var(--border-color);\n background-color: var(--background);\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding-right: 10px;\n -webkit-box-shadow: 0px 2px 5px 0px var(--shadow-color);\n box-shadow: 0px 2px 5px 0px var(--shadow-color);\n -webkit-transition: .4s;\n -o-transition: .4s;\n transition: .4s;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.ui-wrapper>input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n margin: 0;\n width: 0;\n height: 0;\n opacity: 0;\n position: absolute;\n left: 9999px;\n}\n\n.dropdown-container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 10px;\n cursor: pointer;\n border-radius: 9px 0 0 9px;\n background-color: var(--dropdown-button-color);\n}\n\n.dropdown-container::before {\n content: \"🇦🇹\";\n font-size: 20px;\n background: none !important;\n}\n\n.dropdown-container::after {\n content: \"\";\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNDk0OTQ5IiB3aWR0aD0iNzAwcHQiIGhlaWdodD0iNzAwcHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDcwMCA3MDAiCiAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwYXRoCiAgICAgICAgZD0ibTM4MC4zOSA0ODQuNzkgMzA3LjA0LTMwNS45OWMxNi43NjYtMTcuODEyIDE2Ljc2Ni00NS4wNTkgMC02MS44MjgtMTYuNzY2LTE2Ljc2Ni00NS4wNTktMTYuNzY2LTYxLjgyOCAwbC0yNzUuNiAyNzUuNi0yNzUuNi0yNzUuNmMtMTcuODEyLTE2Ljc2Ni00NS4wNTktMTYuNzY2LTYxLjgyOCAwLTE2Ljc2NiAxNi43NjYtMTYuNzY2IDQ0LjAxMiAwIDYxLjgyOGwzMDUuOTkgMzA1Ljk5YzE3LjgxMiAxNi43NjYgNDUuMDU5IDE2Ljc2NiA2MS44MjggMHoiCiAgICAgICAgZmlsbC1ydWxlPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg==\");\n width: 12px;\n height: 12px;\n background-position: center;\n background-size: cover;\n margin-left: 5px;\n -webkit-transition: .2s;\n -o-transition: .2s;\n transition: .2s;\n}\n\n.select-wrapper {\n width: var(--width);\n position: absolute;\n top: calc(var(--height) + 20px);\n left: 0;\n opacity: 0;\n visibility: hidden;\n -webkit-transition: .2s;\n -o-transition: .2s;\n transition: .2s;\n}\n\n.select-wrapper ul {\n width: 100%;\n background-color: white;\n border-radius: 10px;\n padding: 10px;\n margin: 0;\n list-style: none;\n height: 300px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n overflow-y: auto;\n white-space: nowrap;\n}\n\n.select-wrapper ul li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 5px;\n border-radius: 5px;\n}\n\n.select-wrapper ul li label {\n width: 100%;\n}\n\n.select-wrapper ul li,\n.select-wrapper ul li * {\n cursor: pointer;\n}\n\n.select-wrapper ul li:hover {\n background: lightgray;\n}\n\n.select-wrapper ul li span {\n display: inline-block;\n margin-right: 15px;\n}\n\n.input-wrapper {\n width: 100%;\n padding-left: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n row-gap: 2px;\n}\n\n.input-wrapper legend {\n font-size: 11px;\n}\n\n.input-wrapper .textfield {\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.input-wrapper .textfield::before {\n content: \"+31\";\n margin-right: 5px;\n white-space: nowrap;\n}\n\n.input-wrapper .textfield input {\n width: 100%;\n font-size: 16px;\n outline: none;\n border: none;\n background: none;\n}\n\n.invalid-msg {\n font-size: 12px;\n position: absolute;\n color: red;\n top: 115%;\n left: 0;\n opacity: 0;\n visibility: hidden;\n -webkit-transition: .2s;\n -o-transition: .2s;\n transition: .2s;\n}\n\n/* actions */\n\n#phonenumber:invalid+.invalid-msg {\n top: 110%;\n opacity: 1;\n visibility: visible;\n}\n\n.ui-wrapper:focus-within {\n border-color: var(--border-focus-color);\n -webkit-box-shadow: 0px 2px 5px 0px var(--shadow-focus-color);\n box-shadow: 0px 2px 5px 0px var(--shadow-focus-color);\n}\n\n.dropdown-container:hover {\n background-color: var(--dropdown-button-hover-color);\n}\n\n.dropdown-checkbox:checked~.select-wrapper {\n top: calc(var(--height) + 5px);\n opacity: 1;\n visibility: visible;\n}\n\n.dropdown-checkbox:checked+.dropdown-container::after {\n rotate: 180deg;\n translate: 0 -2px;\n}\n\n.ui-wrapper input#Austria:checked~.dropdown-container::before,\n.ui-wrapper input#Austria:checked~.select-wrapper li.Austria {\n content: \"🇦🇹\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Belgium:checked~.dropdown-container::before,\n.ui-wrapper input#Belgium:checked~.select-wrapper li.Belgium {\n content: \"🇧🇪\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Bulgaria:checked~.dropdown-container::before,\n.ui-wrapper input#Bulgaria:checked~.select-wrapper li.Bulgaria {\n content: \"🇧🇬\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Croatia:checked~.dropdown-container::before,\n.ui-wrapper input#Croatia:checked~.select-wrapper li.Croatia {\n content: \"🇭🇷\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Cyprus:checked~.dropdown-container::before,\n.ui-wrapper input#Cyprus:checked~.select-wrapper li.Cyprus {\n content: \"🇨🇾\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Czech:checked~.dropdown-container::before,\n.ui-wrapper input#Czech:checked~.select-wrapper li.Czech {\n content: \"🇨🇿\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Denmark:checked~.dropdown-container::before,\n.ui-wrapper input#Denmark:checked~.select-wrapper li.Denmark {\n content: \"🇩🇰\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Estonia:checked~.dropdown-container::before,\n.ui-wrapper input#Estonia:checked~.select-wrapper li.Estonia {\n content: \"🇪🇪\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Finland:checked~.dropdown-container::before,\n.ui-wrapper input#Finland:checked~.select-wrapper li.Finland {\n content: \"🇫🇮\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#France:checked~.dropdown-container::before,\n.ui-wrapper input#France:checked~.select-wrapper li.France {\n content: \"🇫🇷\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Germany:checked~.dropdown-container::before,\n.ui-wrapper input#Germany:checked~.select-wrapper li.Germany {\n content: \"🇩🇪\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Greece:checked~.dropdown-container::before,\n.ui-wrapper input#Greece:checked~.select-wrapper li.Greece {\n content: \"🇬🇷\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Hungary:checked~.dropdown-container::before,\n.ui-wrapper input#Hungary:checked~.select-wrapper li.Hungary {\n content: \"🇭🇺\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Iceland:checked~.dropdown-container::before,\n.ui-wrapper input#Iceland:checked~.select-wrapper li.Iceland {\n content: \"🇮🇸\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Ireland:checked~.dropdown-container::before,\n.ui-wrapper input#Ireland:checked~.select-wrapper li.Ireland {\n content: \"🇮🇪\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Italy:checked~.dropdown-container::before,\n.ui-wrapper input#Italy:checked~.select-wrapper li.Italy {\n content: \"🇮🇹\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Latvia:checked~.dropdown-container::before,\n.ui-wrapper input#Latvia:checked~.select-wrapper li.Latvia {\n content: \"🇱🇻\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Liechtenstein:checked~.dropdown-container::before,\n.ui-wrapper input#Liechtenstein:checked~.select-wrapper li.Liechtenstein {\n content: \"🇱🇮\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Lithuania:checked~.dropdown-container::before,\n.ui-wrapper input#Lithuania:checked~.select-wrapper li.Lithuania {\n content: \"🇱🇹\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Luxembourg:checked~.dropdown-container::before,\n.ui-wrapper input#Luxembourg:checked~.select-wrapper li.Luxembourg {\n content: \"🇱🇺\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Malta:checked~.dropdown-container::before,\n.ui-wrapper input#Malta:checked~.select-wrapper li.Malta {\n content: \"🇲🇹\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Netherlands:checked~.dropdown-container::before,\n.ui-wrapper input#Netherlands:checked~.select-wrapper li.Netherlands {\n content: \"🇳🇱\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Norway:checked~.dropdown-container::before,\n.ui-wrapper input#Norway:checked~.select-wrapper li.Norway {\n content: \"🇳🇴\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Poland:checked~.dropdown-container::before,\n.ui-wrapper input#Poland:checked~.select-wrapper li.Poland {\n content: \"🇵🇱\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Portugal:checked~.dropdown-container::before,\n.ui-wrapper input#Portugal:checked~.select-wrapper li.Portugal {\n content: \"🇵🇹\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Romania:checked~.dropdown-container::before,\n.ui-wrapper input#Romania:checked~.select-wrapper li.Romania {\n content: \"🇷🇴\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Slovakia:checked~.dropdown-container::before,\n.ui-wrapper input#Slovakia:checked~.select-wrapper li.Slovakia {\n content: \"🇸🇰\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Slovenia:checked~.dropdown-container::before,\n.ui-wrapper input#Slovenia:checked~.select-wrapper li.Slovenia {\n content: \"🇸🇮\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Spain:checked~.dropdown-container::before,\n.ui-wrapper input#Spain:checked~.select-wrapper li.Spain {\n content: \"🇪🇸\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Sweden:checked~.dropdown-container::before,\n.ui-wrapper input#Sweden:checked~.select-wrapper li.Sweden {\n content: \"🇸🇪\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Austria:checked~.input-wrapper .textfield::before {\n content: \"+43\";\n}\n\n.ui-wrapper input#Belgium:checked~.input-wrapper .textfield::before {\n content: \"+32\";\n}\n\n.ui-wrapper input#Bulgaria:checked~.input-wrapper .textfield::before {\n content: \"+359\";\n}\n\n.ui-wrapper input#Croatia:checked~.input-wrapper .textfield::before {\n content: \"+385\";\n}\n\n.ui-wrapper input#Cyprus:checked~.input-wrapper .textfield::before {\n content: \"+357\";\n}\n\n.ui-wrapper input#Czech:checked~.input-wrapper .textfield::before {\n content: \"+420\";\n}\n\n.ui-wrapper input#Denmark:checked~.input-wrapper .textfield::before {\n content: \"+45\";\n}\n\n.ui-wrapper input#Estonia:checked~.input-wrapper .textfield::before {\n content: \"+372\";\n}\n\n.ui-wrapper input#Finland:checked~.input-wrapper .textfield::before {\n content: \"+358\";\n}\n\n.ui-wrapper input#France:checked~.input-wrapper .textfield::before {\n content: \"+33\";\n}\n\n.ui-wrapper input#Germany:checked~.input-wrapper .textfield::before {\n content: \"+49\";\n}\n\n.ui-wrapper input#Greece:checked~.input-wrapper .textfield::before {\n content: \"+30\";\n}\n\n.ui-wrapper input#Hungary:checked~.input-wrapper .textfield::before {\n content: \"+36\";\n}\n\n.ui-wrapper input#Iceland:checked~.input-wrapper .textfield::before {\n content: \"+354\";\n}\n\n.ui-wrapper input#Ireland:checked~.input-wrapper .textfield::before {\n content: \"+353\";\n}\n\n.ui-wrapper input#Italy:checked~.input-wrapper .textfield::before {\n content: \"+39\";\n}\n\n.ui-wrapper input#Latvia:checked~.input-wrapper .textfield::before {\n content: \"+371\";\n}\n\n.ui-wrapper input#Liechtenstein:checked~.input-wrapper .textfield::before {\n content: \"+423\";\n}\n\n.ui-wrapper input#Lithuania:checked~.input-wrapper .textfield::before {\n content: \"+370\";\n}\n\n.ui-wrapper input#Luxembourg:checked~.input-wrapper .textfield::before {\n content: \"+352\";\n}\n\n.ui-wrapper input#Malta:checked~.input-wrapper .textfield::before {\n content: \"+356\";\n}\n\n.ui-wrapper input#Netherlands:checked~.input-wrapper .textfield::before {\n content: \"+31\";\n}\n\n.ui-wrapper input#Norway:checked~.input-wrapper .textfield::before {\n content: \"+47\";\n}\n\n.ui-wrapper input#Poland:checked~.input-wrapper .textfield::before {\n content: \"+48\";\n}\n\n.ui-wrapper input#Portugal:checked~.input-wrapper .textfield::before {\n content: \"+351\";\n}\n\n.ui-wrapper input#Romania:checked~.input-wrapper .textfield::before {\n content: \"+40\";\n}\n\n.ui-wrapper input#Slovakia:checked~.input-wrapper .textfield::before {\n content: \"+421\";\n}\n\n.ui-wrapper input#Slovenia:checked~.input-wrapper .textfield::before {\n content: \"+386\";\n}\n\n.ui-wrapper input#Spain:checked~.input-wrapper .textfield::before {\n content: \"+34\";\n}\n\n.ui-wrapper input#Sweden:checked~.input-wrapper .textfield::before {\n content: \"+46\";\n}"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"f8bbb5","snapshot":null,"tags":null,"title":"input by naelawadallah","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":666,"cssLen":1023,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".search-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: center;\n}\n\n.search-header__input {\n font-family: inherit;\n font-size: 16px;\n background-color: #0a0a0a;\n border: solid 0.5px #525252;\n color: #646464;\n padding: 0.7rem 1rem;\n border-radius: 25px;\n width: 240px;\n height: 48px;\n transition: all ease-in-out 0.5s;\n margin-right: -2rem;\n opacity: 1;\n text-align: center;\n}\n\n.search-header__input:hover,\n.search-header__input:focus {\n box-shadow: 0 0 1em #00000013;\n}\n\n.search-header__input:focus {\n outline: none;\n background-color: #0a0a0aad;\n}\n\n.search-header__input::-webkit-input-placeholder {\n font-weight: 100;\n color: #3a3a3a;\n}\n\n.search-header__input:focus + .search-header__button {\n background-color: transparent;\n}\n\n.search-header__button {\n border: none;\n background-color: transparent;\n margin-top: 0.1em;\n}\n\n.search-header__button:hover {\n cursor: pointer;\n}\n\n.search-header__icon {\n height: 1.3em;\n width: 1.3em;\n fill: #3a3a3a;\n}\n"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"2381d0","snapshot":null,"tags":null,"title":"input by Darlley","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1385,"cssLen":2477,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n\n

\n 0:00\n

\n\n

\n \n

\n\n

","css":".audio.green-audio-player {\n width: 400px;\n min-width: 300px;\n height: 56px;\n box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-left: 24px;\n padding-right: 24px;\n border-radius: 4px;\n user-select: none;\n -webkit-user-select: none;\n background-color: #fff;\n}\n\n.audio.green-audio-player .play-pause-btn {\n cursor: pointer;\n}\n\n.audio.green-audio-player .slider {\n flex-grow: 1;\n background-color: #d8d8d8;\n cursor: pointer;\n position: relative;\n}\n\n.audio.green-audio-player .slider .progress {\n background-color: #44bfa3;\n border-radius: inherit;\n position: absolute;\n pointer-events: none;\n}\n\n.audio.green-audio-player .slider .progress .pin {\n height: 16px;\n width: 16px;\n border-radius: 8px;\n background-color: #44bfa3;\n position: absolute;\n pointer-events: all;\n box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);\n}\n\n.audio.green-audio-player .controls {\n font-family: \"Roboto\", sans-serif;\n font-size: 16px;\n line-height: 18px;\n color: #55606e;\n display: flex;\n flex-grow: 1;\n justify-content: space-between;\n align-items: center;\n margin-left: 24px;\n margin-right: 24px;\n}\n\n.audio.green-audio-player .controls .slider {\n margin-left: 16px;\n margin-right: 16px;\n border-radius: 2px;\n height: 4px;\n}\n\n.audio.green-audio-player .controls .slider .progress {\n width: 0;\n height: 100%;\n}\n\n.audio.green-audio-player .controls .slider .pin {\n right: -8px;\n top: -6px;\n}\n\n.audio.green-audio-player .controls span {\n cursor: default;\n}\n\n.audio.green-audio-player .volume {\n position: relative;\n}\n\n.audio.green-audio-player .volume .volume-btn {\n cursor: pointer;\n}\n\n.audio.green-audio-player .volume .volume-btn .open path {\n fill: #44bfa3;\n}\n\n.audio.green-audio-player .volume .volume-controls {\n width: 30px;\n height: 135px;\n background-color: rgba(0, 0, 0, 0.62);\n border-radius: 7px;\n position: absolute;\n left: -3px;\n bottom: 52px;\n flex-direction: column;\n align-items: center;\n display: flex;\n}\n\n.audio.green-audio-player .volume .volume-controls.hidden {\n display: none;\n}\n\n.audio.green-audio-player .volume .volume-controls .slider {\n margin-top: 12px;\n margin-bottom: 12px;\n width: 6px;\n border-radius: 3px;\n}\n\n.audio.green-audio-player .volume .volume-controls .slider .progress {\n bottom: 0;\n height: 100%;\n width: 6px;\n}\n\n.audio.green-audio-player .volume .volume-controls .slider .progress .pin {\n left: -5px;\n top: -8px;\n}\n"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"b4cca5","snapshot":null,"tags":null,"title":"input by omriluz","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":207,"cssLen":1069,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".input {\n color: #fff;\n font-size: 0.9rem;\n background-color: transparent;\n width: 100%;\n box-sizing: border-box;\n padding-inline: 0.5em;\n padding-block: 0.7em;\n border: none;\n border-bottom: var(--border-height) solid var(--border-before-color);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.input-border {\n position: absolute;\n background: var(--border-after-color);\n height: 2px;\n width: 100%;\n bottom: 0;\n left: 0;\n transform: scaleX(0%);\n transition: transform 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);\n}\n\n.input:focus {\n outline: none;\n}\n\n.input:focus + .input-border {\n transform: scaleX(100%);\n}\n\n.form-control {\n position: relative;\n --width-of-input: 300px;\n}\n\n.input-alt {\n font-size: 1.2rem;\n padding-inline: 1em;\n padding-block: 0.8em;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n.input-border-alt {\n height: 3px;\n background: linear-gradient(90deg, #ff6464 0%, #ffbf59 50%, #47c9ff 100%);\n transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);\n}\n\n.input-alt:focus + .input-border-alt {\n transform: scaleX(100%);\n}\n"}]}},"actionData":null,"errors":null}