{"loaderData":{"0":null,"0-2":{"total":6508,"projects":[{"created":"2024-01-22T17:03:57.000Z","isPrivate":0,"projectId":"2dcad2","snapshot":null,"tags":null,"title":"checkbox by ozgeozkaraa01","updated":"2024-01-22T17:03:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":132,"cssLen":1076,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".cbx {\n position: relative;\n top: 1px;\n width: 27px;\n height: 27px;\n border: 1px solid #475569;\n border-radius: 10px;\n transition: background 0.2s ease;\n cursor: pointer;\n display: block;\n box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);\n}\n\n.cbx:after {\n content: '';\n position: absolute;\n top: 2px;\n left: 8px;\n width: 7px;\n height: 14px;\n opacity: 0;\n transform: rotate(45deg) scale(0);\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n transition: all 0.3s ease;\n transition-delay: 0.15s;\n}\n\n#cbx:checked ~ .cbx {\n border-color: transparent;\n background: #ec4899;\n animation: jelly 0.4s ease;\n}\n\n#cbx:checked ~ .cbx:after {\n opacity: 1;\n transform: rotate(45deg) scale(1);\n}\n\n.cntr {\n position: relative;\n}\n\n@keyframes jelly {\n from {\n transform: scale(1, 1);\n }\n\n 20% {\n transform: scale(1.3, 0.7);\n }\n\n 40% {\n transform: scale(0.7, 1.3);\n }\n\n 60% {\n transform: scale(1.1, 0.9);\n }\n\n 80% {\n transform: scale(0.9, 1.1);\n }\n\n to {\n transform: scale(1, 1);\n }\n}\n\n.hidden-xs-up {\n display: none!important;\n}\n"},{"created":"2024-01-22T17:03:57.000Z","isPrivate":0,"projectId":"d9664e","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1112,"cssLen":902,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n ","css":"/*------ Settings ------*/\n.container {\n --color: #a5a5b0;\n --size: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: var(--size);\n user-select: none;\n fill: var(--color);\n}\n\n.container .mute {\n position: absolute;\n animation: keyframes-fill .5s;\n}\n\n.container .voice {\n position: absolute;\n display: none;\n animation: keyframes-fill .5s;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .mute {\n display: none;\n}\n\n.container input:checked ~ .voice {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* ------ Animation ------ */\n@keyframes keyframes-fill {\n 0% {\n transform: rotate(0deg) scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: rotate(-10deg) scale(1.2);\n }\n}"},{"created":"2024-01-22T17:03:57.000Z","isPrivate":0,"projectId":"732c2a","snapshot":null,"tags":null,"title":"checkbox by mrhyddenn","updated":"2024-01-22T17:03:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":114,"cssLen":1016,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 1.3em;\n width: 1.3em;\n background-color: #ccc;\n border-radius: 0.2pc;\n box-shadow: 3px 3px grey;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: #5ee429;\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n}\n\n/* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n display: block;\n}\n\n/* Style the checkmark/indicator */\n.container .checkmark:after {\n left: 0.45em;\n top: 0.25em;\n width: 0.25em;\n height: 0.5em;\n border: solid white;\n border-width: 0 0.15em 0.15em 0;\n transform: rotate(45deg);\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"64c9e3","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1227,"cssLen":884,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n","css":"/*------ Settings ------*/\n.container {\n --color: #a5a5b0;\n --size: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: var(--size);\n user-select: none;\n fill: var(--color);\n}\n\n.container .expand {\n position: absolute;\n animation: keyframes-fill .5s;\n}\n\n.container .compress {\n position: absolute;\n display: none;\n animation: keyframes-fill .5s;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .expand {\n display: none;\n}\n\n.container input:checked ~ .compress {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* ------ Animation ------ */\n@keyframes keyframes-fill {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: scale(1.2);\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"8490f2","snapshot":null,"tags":null,"title":"checkbox by sujeet-12","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1821,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n animation: jello-horizontal 0.9s both;\n}\n\n.checkmark:hover {\n animation: jello-horizontal 0.9s both;\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 1.3em;\n width: 1.3em;\n border-radius: 50%;\n background-color: #eee;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: royalblue;\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n}\n\n/* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n display: block;\n}\n\n/* Style the checkmark/indicator */\n.container .checkmark:after {\n left: 0.45em;\n top: 0.25em;\n width: 0.25em;\n height: 0.5em;\n border: solid white;\n border-width: 0 0.15em 0.15em 0;\n transform: rotate(45deg);\n}\n\n@keyframes jello-horizontal {\n 0% {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 30% {\n -webkit-transform: scale3d(1.25, 0.75, 1);\n transform: scale3d(1.25, 0.75, 1);\n }\n\n 40% {\n -webkit-transform: scale3d(0.75, 1.25, 1);\n transform: scale3d(0.75, 1.25, 1);\n }\n\n 50% {\n -webkit-transform: scale3d(1.15, 0.85, 1);\n transform: scale3d(1.15, 0.85, 1);\n }\n\n 65% {\n -webkit-transform: scale3d(0.95, 1.05, 1);\n transform: scale3d(0.95, 1.05, 1);\n }\n\n 75% {\n -webkit-transform: scale3d(1.05, 0.95, 1);\n transform: scale3d(1.05, 0.95, 1);\n }\n\n 100% {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"e940b2","snapshot":null,"tags":null,"title":"checkbox by sans-script","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":61,"cssLen":588,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\t\n

","css":".center {\n width: 100%;\n text-align: center;\n}\n\ninput[type=\"checkbox\"] {\n position: relative;\n top: 8px;\n width: 40px;\n height: 40px;\n -webkit-appearance: none;\n outline: none;\n transition: 0.5s;\n}\n\ninput[type=\"checkbox\"]:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 4px solid #262626;\n box-sizing: border-box;\n transition: 0.5s;\n}\n\ninput:checked[type=\"checkbox\"]:before {\n border-left: none;\n border-top: none;\n width: 20px;\n border-color: rgb(24, 196, 24);\n transform: rotate(45deg) translate(5px, -10px);\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"ba7c39","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":665,"cssLen":1088,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n","css":"/*------ Settings ------*/\n.container {\n --color: #a5a5b0;\n --size: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: var(--size);\n user-select: none;\n fill: var(--color);\n}\n\n.container .chevron-right {\n position: absolute;\n animation: keyframes-return .5s;\n}\n\n.container .chevron-down {\n position: absolute;\n display: none;\n animation: keyframes-fill .5s;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .chevron-right {\n display: none;\n}\n\n.container input:checked ~ .chevron-down {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* ------ Animation ------ */\n@keyframes keyframes-fill {\n 0% {\n transform: rotate(-90deg) scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: rotate(0deg) scale(1.2);\n }\n}\n\n@keyframes keyframes-return {\n 0% {\n transform: rotate(90deg) scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: rotate(0deg) scale(1.2);\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"e94ce6","snapshot":null,"tags":null,"title":"checkbox by faxriddin20","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":790,"cssLen":3402,"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","css":".checkbox-wrapper-12 {\n position: relative;\n}\n\n.checkbox-wrapper-12 > svg {\n position: absolute;\n top: -130%;\n left: -170%;\n width: 110px;\n pointer-events: none;\n}\n\n.checkbox-wrapper-12 * {\n box-sizing: border-box;\n}\n\n.checkbox-wrapper-12 input[type=\"checkbox\"] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-tap-highlight-color: transparent;\n cursor: pointer;\n margin: 0;\n}\n\n.checkbox-wrapper-12 input[type=\"checkbox\"]:focus {\n outline: 0;\n}\n\n.checkbox-wrapper-12 .cbx {\n width: 24px;\n height: 24px;\n top: calc(100px - 12px);\n left: calc(100px - 12px);\n}\n\n.checkbox-wrapper-12 .cbx input {\n position: absolute;\n top: 0;\n left: 0;\n width: 24px;\n height: 24px;\n border: 2px solid #bfbfc0;\n border-radius: 50%;\n}\n\n.checkbox-wrapper-12 .cbx label {\n width: 24px;\n height: 24px;\n background: none;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n transform: trasnlate3d(0, 0, 0);\n pointer-events: none;\n}\n\n.checkbox-wrapper-12 .cbx svg {\n position: absolute;\n top: 5px;\n left: 4px;\n z-index: 1;\n pointer-events: none;\n}\n\n.checkbox-wrapper-12 .cbx svg path {\n stroke: #fff;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 19;\n stroke-dashoffset: 19;\n transition: stroke-dashoffset 0.3s ease;\n transition-delay: 0.2s;\n}\n\n.checkbox-wrapper-12 .cbx input:checked + label {\n animation: splash-12 0.6s ease forwards;\n}\n\n.checkbox-wrapper-12 .cbx input:checked + label + svg path {\n stroke-dashoffset: 0;\n}\n\n@-moz-keyframes splash-12 {\n 40% {\n background: lime;\n box-shadow: 0 -18px 0 -8px lime, 16px -8px 0 -8px lime, 16px 8px 0 -8px lime,\n 0 18px 0 -8px lime, -16px 8px 0 -8px lime, -16px -8px 0 -8px lime;\n }\n\n 100% {\n background: lime;\n box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,\n 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,\n -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;\n }\n}\n\n@-webkit-keyframes splash-12 {\n 40% {\n background: lime;\n box-shadow: 0 -18px 0 -8px lime, 16px -8px 0 -8px lime, 16px 8px 0 -8px lime,\n 0 18px 0 -8px lime, -16px 8px 0 -8px lime, -16px -8px 0 -8px lime;\n }\n\n 100% {\n background: lime;\n box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,\n 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,\n -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;\n }\n}\n\n@-o-keyframes splash-12 {\n 40% {\n background: lime;\n box-shadow: 0 -18px 0 -8px lime, 16px -8px 0 -8px lime, 16px 8px 0 -8px lime,\n 0 18px 0 -8px lime, -16px 8px 0 -8px lime, -16px -8px 0 -8px lime;\n }\n\n 100% {\n background: lime;\n box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,\n 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,\n -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;\n }\n}\n\n@keyframes splash-12 {\n 40% {\n background: lime;\n box-shadow: 0 -18px 0 -8px lime, 16px -8px 0 -8px lime, 16px 8px 0 -8px lime,\n 0 18px 0 -8px lime, -16px 8px 0 -8px lime, -16px -8px 0 -8px lime;\n }\n\n 100% {\n background: lime;\n box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,\n 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,\n -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;\n }\n}\n"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"6a719e","snapshot":null,"tags":null,"title":"checkbox by JaydipPrajapati1910","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":138,"cssLen":643,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n \n

","css":".clear {\n clear: both;\n}\n\n.checkBox {\n display: block;\n cursor: pointer;\n width: 30px;\n height: 30px;\n border: 3px solid rgba(255, 255, 255, 0);\n border-radius: 10px;\n position: relative;\n overflow: hidden;\n box-shadow: 0px 0px 0px 2px black;\n}\n\n.checkBox div {\n width: 60px;\n height: 60px;\n background-color: black;\n top: -52px;\n left: -52px;\n position: absolute;\n transform: rotateZ(45deg);\n z-index: 100;\n}\n\n.checkBox input[type=checkbox]:checked + div {\n left: -10px;\n top: -10px;\n}\n\n.checkBox input[type=checkbox] {\n position: absolute;\n left: 50px;\n visibility: hidden;\n}\n\n.transition {\n transition: 300ms ease;\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"07798e","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1246,"cssLen":928,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n","css":"/*------ Settings ------*/\n.container {\n --color: #a5a5b0;\n --size: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: var(--size);\n user-select: none;\n fill: var(--color);\n}\n\n.container .star-regular {\n position: absolute;\n animation: keyframes-star .5s;\n}\n\n.container .star-solid {\n position: absolute;\n animation: keyframes-star .5s;\n display: none;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .star-regular {\n display: none;\n}\n\n.container input:checked ~ .star-solid {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* ------ Animations ------ */\n@keyframes keyframes-star {\n 0% {\n transform: rotate(0deg) scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: rotate(10deg) scale(1.3);\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"e8b6d6","snapshot":null,"tags":null,"title":"checkbox by Shoh2008","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":133,"cssLen":3800,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".checkbox-wrapper-19 {\n box-sizing: border-box;\n --background-color: #fff;\n --checkbox-height: 25px;\n}\n\n@-moz-keyframes dothabottomcheck-19 {\n 0% {\n height: 0;\n }\n\n 100% {\n height: calc(var(--checkbox-height) / 2);\n }\n}\n\n@-webkit-keyframes dothabottomcheck-19 {\n 0% {\n height: 0;\n }\n\n 100% {\n height: calc(var(--checkbox-height) / 2);\n }\n}\n\n@keyframes dothabottomcheck-19 {\n 0% {\n height: 0;\n }\n\n 100% {\n height: calc(var(--checkbox-height) / 2);\n }\n}\n\n@keyframes dothatopcheck-19 {\n 0% {\n height: 0;\n }\n\n 50% {\n height: 0;\n }\n\n 100% {\n height: calc(var(--checkbox-height) * 1.2);\n }\n}\n\n@-webkit-keyframes dothatopcheck-19 {\n 0% {\n height: 0;\n }\n\n 50% {\n height: 0;\n }\n\n 100% {\n height: calc(var(--checkbox-height) * 1.2);\n }\n}\n\n@-moz-keyframes dothatopcheck-19 {\n 0% {\n height: 0;\n }\n\n 50% {\n height: 0;\n }\n\n 100% {\n height: calc(var(--checkbox-height) * 1.2);\n }\n}\n\n.checkbox-wrapper-19 input[type=checkbox] {\n display: none;\n}\n\n.checkbox-wrapper-19 .check-box {\n height: var(--checkbox-height);\n width: var(--checkbox-height);\n background-color: transparent;\n border: calc(var(--checkbox-height) * .1) solid #000;\n border-radius: 5px;\n position: relative;\n display: inline-block;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n -moz-transition: border-color ease 0.2s;\n -o-transition: border-color ease 0.2s;\n -webkit-transition: border-color ease 0.2s;\n transition: border-color ease 0.2s;\n cursor: pointer;\n}\n\n.checkbox-wrapper-19 .check-box::before,\n .checkbox-wrapper-19 .check-box::after {\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n position: absolute;\n height: 0;\n width: calc(var(--checkbox-height) * .2);\n background-color: #34b93d;\n display: inline-block;\n -moz-transform-origin: left top;\n -ms-transform-origin: left top;\n -o-transform-origin: left top;\n -webkit-transform-origin: left top;\n transform-origin: left top;\n border-radius: 5px;\n content: \" \";\n -webkit-transition: opacity ease 0.5;\n -moz-transition: opacity ease 0.5;\n transition: opacity ease 0.5;\n}\n\n.checkbox-wrapper-19 .check-box::before {\n top: calc(var(--checkbox-height) * .72);\n left: calc(var(--checkbox-height) * .41);\n box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);\n -moz-transform: rotate(-135deg);\n -ms-transform: rotate(-135deg);\n -o-transform: rotate(-135deg);\n -webkit-transform: rotate(-135deg);\n transform: rotate(-135deg);\n}\n\n.checkbox-wrapper-19 .check-box::after {\n top: calc(var(--checkbox-height) * .37);\n left: calc(var(--checkbox-height) * .05);\n -moz-transform: rotate(-45deg);\n -ms-transform: rotate(-45deg);\n -o-transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg);\n}\n\n.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,\n .checkbox-wrapper-19 .check-box.checked {\n border-color: #34b93d;\n}\n\n.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,\n .checkbox-wrapper-19 .check-box.checked::after {\n height: calc(var(--checkbox-height) / 2);\n -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;\n -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;\n -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;\n animation: dothabottomcheck-19 0.2s ease 0s forwards;\n}\n\n.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,\n .checkbox-wrapper-19 .check-box.checked::before {\n height: calc(var(--checkbox-height) * 1.2);\n -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;\n -o-animation: dothatopcheck-19 0.4s ease 0s forwards;\n -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;\n animation: dothatopcheck-19 0.4s ease 0s forwards;\n}"}]}},"actionData":null,"errors":null}