{"id":185,"html":"<div class=\"custom-modal--wrapper anchor-continue\"><\/div><div class=\"data-modal\"> <svg height=\"20\" class=\"anchor-continue\" style=\"position:absolute;right:10px;top:10px\" version=\"1.1\" viewBox=\"0 0 512 512\" width=\"20px\" xml:space=\"preserve\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"> <path d=\"M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4 L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1 c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1 c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z\"><\/path> <\/svg> <div class=\"data-modal-item\" style=\" display: flex; flex-direction: column; padding-right: 20px;\"> The product was added to your cart <\/div><div class=\"container-modal\"> <img src=\"https:\/\/dashboard.cartsave.io\/images\/cartsave.png\" style=\"margin:0 auto\"> <h2>Want Us To <span>Save Your Cart ?<\/span><\/h2> <p>GET BACK TO YOUR CART FROM ANY DEVICE<\/p><label>E-mail is required. Example: john@example.com<\/label> <div class=\"email\"> <input type=\"email\" style=\"width: 100%;\" placeholder=\"Enter your email...\" name=\"email\"> <button id=\"cartsave-form\"> SAVE <\/button> <\/div><div class=\"sk-chase\" id=\"spin-cs\"> <div class=\"sk-chase-dot\"><\/div><div class=\"sk-chase-dot\"><\/div><div class=\"sk-chase-dot\"><\/div><div class=\"sk-chase-dot\"><\/div><div class=\"sk-chase-dot\"><\/div><div class=\"sk-chase-dot\"><\/div><\/div><\/div><div class=\"thank\"> <h1>SENT !<\/h1> <p>We've sent you an email with<\/p><p>a link to your cart<\/p><\/div><div class=\"foot-modal\"> <\/div><\/div>","css":".custom-modal {\r\n        position: fixed;\r\n        width: 100%;\r\n        height: 100%;\r\n        left: 0;\r\n        top: 0;\r\n        z-index: 99999999999999;\r\n        display: none\r\n    }\r\n\r\n    .custom-modal.show {\r\n        display: block\r\n    }\r\n\r\n    .custom-modal--wrapper {\r\n        display: block;\r\n        position: absolute;\r\n        width: 100%;\r\n        left: 0;\r\n        top: 0;\r\n        height: 100%;\r\n        background: #00000059\r\n    }\r\n\r\n    .custom-modal .data-modal {\r\n        padding: 20px;\r\n        background: #fff;\r\n        border: 1px solid #000;\r\n        width: 500px;\r\n        height: auto;\r\n        top: 10%;\r\n        right: 0;\r\n        left: 0;\r\n        margin: auto;\r\n        box-sizing: border-box;\r\n        box-shadow: 1px 1px 10px #1f1f1f;\r\n        padding: 10px;\r\n        position: absolute;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        text-align: center;\r\n        animation: .3s pscaleIn\r\n    }\r\n\r\n    @keyframes pscaleIn {\r\n        from {\r\n            opacity: 0;\r\n            transform: scale(.6)\r\n        }\r\n    }\r\n    @media screen and (max-width: 500px) {\r\n        .custom-modal .data-modal {\r\n            width: 100%;\r\n            top: 0\r\n        }\r\n    }\r\n\r\n    .custom-modal .data-modal-item {\r\n        padding-bottom: 5px;\r\n        width: 100%;\r\n        border-bottom: 1px solid #e2e2e2;\r\n        margin-bottom: 10px\r\n    }\r\n\r\n    .custom-modal .data-modal .thank {\r\n        display: none\r\n    }\r\n\r\n    .custom-modal .data-modal .thank.active {\r\n        display: block\r\n    }\r\n\r\n    .custom-modal .data-modal .thank h1 {\r\n        font-weight: 500;\r\n        margin: 20px 0\r\n    }\r\n\r\n    .custom-modal .data-modal .container-modal h2 {\r\n        color: #000;\r\n        margin: 1rem\r\n    }\r\n\r\n    .custom-modal .data-modal .container-modal span {\r\n        font-weight: 600;\r\n        display: block;\r\n        font-size: 1.5em\r\n    }\r\n\r\n    .custom-modal .data-modal .container-modal img {\r\n        width: 75px;\r\n        height: 73px;\r\n    }\r\n\r\n    .custom-modal .data-modal .container-modal p {\r\n        color: #000\r\n    }\r\n\r\n    .custom-modal .data-modal .container-modal label {\r\n        display: none;\r\n        color: #9c1717\r\n    }\r\n\r\n    .custom-modal .data-modal .container-modal .email {\r\n        display: flex;\r\n        align-items: center\r\n    }\r\n\r\n    .custom-modal .data-modal .container-modal .email input {\r\n        margin: 10px 0;\r\n        border: 1px solid #000;\r\n        padding: 10px;\r\n        height: 40px;\r\n        background: #fff\r\n    }\r\n\r\n    .custom-modal .data-modal .container-modal .email button {\r\n        margin: 0 0 0 10px;\r\n        font-size: 1.2rem;\r\n        background: #000;\r\n        border: none;\r\n        color: #fff;\r\n        border-radius: 0;\r\n        border: 1px solid #000;\r\n        height: 40px;\r\n        width: 100px;\r\n        transition: .3s all;\r\n        box-shadow: none\r\n    }\r\n\r\n    .custom-modal .data-modal .container-modal .email button:hover {\r\n        background: #f5f5f5;\r\n        color: #000;\r\n        border: 1px solid #000\r\n    }\r\n\r\n    .custom-modal .data-modal .foot-modal {\r\n        display: flex;\r\n        width: 90%;\r\n        margin-top: 20px;\r\n        gap: 20px\r\n    }\r\n\r\n    .custom-modal .data-modal .foot-modal button {\r\n        background: #fff;\r\n        border: 1px solid #000;\r\n        color: #000;\r\n        padding: 5px 10px;\r\n        margin: 5px 0;\r\n        height: 40px;\r\n        border-radius: 0;\r\n        box-shadow: none;\r\n        flex: 1;\r\n        transition: .3s all\r\n    }\r\n\r\n    .custom-modal .data-modal .foot-modal button:hover {\r\n        background: #000;\r\n        color: #f5f5f5\r\n    }\r\n\r\n    .custom-modal .data-modal .foot-modal strong {\r\n        color: #000;\r\n        margin: 0 10px\r\n    }\r\n\r\n    .custom-modal .data-modal .foot-modal strong:hover {\r\n        color: #022f74;\r\n        cursor: pointer\r\n    }\r\n\r\n    #spin-cs {\r\n        display: none\r\n    }\r\n\r\n    .sk-chase {\r\n        width: 40px;\r\n        height: 40px;\r\n        position: relative;\r\n        margin: 10px auto;\r\n        animation: sk-chase 2.5s infinite linear both\r\n    }\r\n\r\n    .sk-chase-dot {\r\n        width: 100%;\r\n        height: 100%;\r\n        position: absolute;\r\n        left: 0;\r\n        top: 0;\r\n        animation: sk-chase-dot 2s infinite ease-in-out both\r\n    }\r\n\r\n    .sk-chase-dot:before {\r\n        content: '';\r\n        display: block;\r\n        width: 25%;\r\n        height: 25%;\r\n        background-color: #607d8b;\r\n        border-radius: 100%;\r\n        animation: sk-chase-dot-before 2s infinite ease-in-out both\r\n    }\r\n\r\n    .sk-chase-dot:nth-child(1) {\r\n        animation-delay: -1.1s\r\n    }\r\n\r\n    .sk-chase-dot:nth-child(2) {\r\n        animation-delay: -1s\r\n    }\r\n\r\n    .sk-chase-dot:nth-child(3) {\r\n        animation-delay: -.9s\r\n    }\r\n\r\n    .sk-chase-dot:nth-child(4) {\r\n        animation-delay: -.8s\r\n    }\r\n\r\n    .sk-chase-dot:nth-child(5) {\r\n        animation-delay: -.7s\r\n    }\r\n\r\n    .sk-chase-dot:nth-child(6) {\r\n        animation-delay: -.6s\r\n    }\r\n\r\n    .sk-chase-dot:nth-child(1):before {\r\n        animation-delay: -1.1s\r\n    }\r\n\r\n    .sk-chase-dot:nth-child(2):before {\r\n        animation-delay: -1s\r\n    }\r\n\r\n    .sk-chase-dot:nth-child(3):before {\r\n        animation-delay: -.9s\r\n    }\r\n\r\n    .sk-chase-dot:nth-child(4):before {\r\n        animation-delay: -.8s\r\n    }\r\n\r\n    .sk-chase-dot:nth-child(5):before {\r\n        animation-delay: -.7s\r\n    }\r\n\r\n    .sk-chase-dot:nth-child(6):before {\r\n        animation-delay: -.6s\r\n    }\r\n\r\n    @keyframes sk-chase {\r\n        100% {\r\n            transform: rotate(360deg)\r\n        }\r\n    }\r\n    @keyframes sk-chase-dot {\r\n        100%, 80% {\r\n            transform: rotate(360deg)\r\n        }\r\n    }\r\n    @keyframes sk-chase-dot-before {\r\n        50% {\r\n            transform: scale(.4)\r\n        }\r\n        0%, 100% {\r\n            transform: scale(1)\r\n        }\r\n    }\r\n\r\n    .custom-modal .data-modal-item {\r\n        margin-bottom: 0\r\n    }\r\n\r\n    .custom-modal .data-modal .container-modal {\r\n        position: relative\r\n    }\r\n\r\n    .custom-modal .data-modal .container-modal .email button {\r\n        background-color: #f12534;\r\n        border-color: #f12534\r\n    }\r\n\r\n    .custom-modal .data-modal .container-modal .email button:hover {\r\n        border-color: #f12534;\r\n        color: #f12534\r\n    }\r\n\r\n    .custom-modal .data-modal .container-modal h2, .custom-modal .data-modal .container-modal span {\r\n        font-family: \"acumin-pro-extra-condensed\",sans-serif;\r\n        font-size: 4rem;\r\n        font-weight: normal;\r\n    }","type":"cartsave_prompt","website_id":126,"created_at":"2024-01-31T17:48:44.000000Z","updated_at":"2024-01-31T17:48:44.000000Z"}