├── .babelrc ├── .eslintrc.json ├── .gitignore ├── README.md ├── assets ├── a64b345016e96adfb8849af5521c8e0ecfe8f027-555x555.webp ├── earphones_a_1.webp ├── earphones_a_2.webp ├── earphones_a_3.webp ├── earphones_a_4.webp ├── earphones_b_1.webp ├── earphones_b_2.webp ├── earphones_b_3.webp ├── earphones_b_4.webp ├── earphones_c_1.webp ├── earphones_c_2.webp ├── earphones_c_3.webp ├── earphones_c_4.webp ├── headphones_a_1.webp ├── headphones_a_2.webp ├── headphones_a_3.webp ├── headphones_a_4.webp ├── headphones_b_1.webp ├── headphones_b_2.webp ├── headphones_b_3.webp ├── headphones_b_4.webp ├── headphones_c_1.webp ├── headphones_c_2.webp ├── headphones_c_3.webp ├── headphones_c_4.webp ├── speaker1.webp ├── speaker2.webp ├── speaker3.webp ├── speaker4.webp ├── watch_1.webp ├── watch_2.webp ├── watch_3.webp └── watch_4.webp ├── components ├── Cart.jsx ├── Footer.jsx ├── FooterBanner.jsx ├── HeroBanner.jsx ├── Layout.jsx ├── Navbar.jsx ├── Product.jsx └── index.js ├── context └── StateContext.js ├── lib ├── client.js ├── getStripe.js └── utils.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── api │ ├── hello.js │ └── stripe.js ├── index.js ├── product │ └── [slug].js └── success.js ├── public ├── favicon.ico └── vercel.svg ├── sanity-ecommerce-stripe ├── .eslintrc ├── .npmignore ├── README.md ├── config │ ├── .checksums │ └── @sanity │ │ ├── data-aspects.json │ │ ├── default-layout.json │ │ ├── default-login.json │ │ ├── form-builder.json │ │ └── vision.json ├── dist │ ├── index.html │ └── static │ │ ├── .gitkeep │ │ ├── css │ │ └── main.css │ │ ├── favicon.ico │ │ └── js │ │ ├── app.bundle.js │ │ └── vendor.bundle.js ├── package.json ├── plugins │ └── .gitkeep ├── sanity.json ├── schemas │ ├── banner.js │ ├── product.js │ └── schema.js ├── static │ ├── .gitkeep │ └── favicon.ico ├── tsconfig.json └── yarn.lock └── styles ├── Home.module.css └── globals.css /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-react"] 3 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "prettier"], 3 | "rules": { 4 | // Other rules 5 | "@next/next/no-img-element": "off" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | .env 31 | 32 | # vercel 33 | .vercel 34 | 35 | # Rohit's files 36 | readMeRohit.txt 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Hey, this is a Next.js project of a Fullstack Ecommerce Store selling Smart Gadgets. Sanity is used as a backend CMS & integrated with Stripe Payment Gateway for making online transaction on the website. The site is hosted live @ https://react-ecommerce-website-stripe.vercel.app/. I'm still learning and implementing new features to this project so it's in a developmenmt phase. 2 | 3 | These are some sample shots for the hosted site. 4 | 5 | ![p1](https://user-images.githubusercontent.com/68563695/174877915-edac47c3-9d4c-429b-adf1-4a900365edad.PNG) 6 | 7 | ![p2](https://user-images.githubusercontent.com/68563695/174877919-d649ab2b-b6f2-428a-90ca-f1e15236bde7.PNG) 8 | 9 | ![p3](https://user-images.githubusercontent.com/68563695/174877930-0766ec73-59a8-4c1f-abb5-0feb31240a4c.PNG) 10 | 11 | ![p4](https://user-images.githubusercontent.com/68563695/174877934-6979dc55-a8ae-4344-a3f4-e627c410f188.PNG) 12 | 13 | ![p5 - Copy](https://user-images.githubusercontent.com/68563695/175359319-49d57a22-d668-492e-b832-3405fdad20ca.png) 14 | -------------------------------------------------------------------------------- /assets/a64b345016e96adfb8849af5521c8e0ecfe8f027-555x555.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/a64b345016e96adfb8849af5521c8e0ecfe8f027-555x555.webp -------------------------------------------------------------------------------- /assets/earphones_a_1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/earphones_a_1.webp -------------------------------------------------------------------------------- /assets/earphones_a_2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/earphones_a_2.webp -------------------------------------------------------------------------------- /assets/earphones_a_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/earphones_a_3.webp -------------------------------------------------------------------------------- /assets/earphones_a_4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/earphones_a_4.webp -------------------------------------------------------------------------------- /assets/earphones_b_1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/earphones_b_1.webp -------------------------------------------------------------------------------- /assets/earphones_b_2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/earphones_b_2.webp -------------------------------------------------------------------------------- /assets/earphones_b_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/earphones_b_3.webp -------------------------------------------------------------------------------- /assets/earphones_b_4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/earphones_b_4.webp -------------------------------------------------------------------------------- /assets/earphones_c_1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/earphones_c_1.webp -------------------------------------------------------------------------------- /assets/earphones_c_2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/earphones_c_2.webp -------------------------------------------------------------------------------- /assets/earphones_c_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/earphones_c_3.webp -------------------------------------------------------------------------------- /assets/earphones_c_4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/earphones_c_4.webp -------------------------------------------------------------------------------- /assets/headphones_a_1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/headphones_a_1.webp -------------------------------------------------------------------------------- /assets/headphones_a_2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/headphones_a_2.webp -------------------------------------------------------------------------------- /assets/headphones_a_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/headphones_a_3.webp -------------------------------------------------------------------------------- /assets/headphones_a_4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/headphones_a_4.webp -------------------------------------------------------------------------------- /assets/headphones_b_1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/headphones_b_1.webp -------------------------------------------------------------------------------- /assets/headphones_b_2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/headphones_b_2.webp -------------------------------------------------------------------------------- /assets/headphones_b_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/headphones_b_3.webp -------------------------------------------------------------------------------- /assets/headphones_b_4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/headphones_b_4.webp -------------------------------------------------------------------------------- /assets/headphones_c_1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/headphones_c_1.webp -------------------------------------------------------------------------------- /assets/headphones_c_2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/headphones_c_2.webp -------------------------------------------------------------------------------- /assets/headphones_c_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/headphones_c_3.webp -------------------------------------------------------------------------------- /assets/headphones_c_4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/headphones_c_4.webp -------------------------------------------------------------------------------- /assets/speaker1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/speaker1.webp -------------------------------------------------------------------------------- /assets/speaker2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/speaker2.webp -------------------------------------------------------------------------------- /assets/speaker3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/speaker3.webp -------------------------------------------------------------------------------- /assets/speaker4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/speaker4.webp -------------------------------------------------------------------------------- /assets/watch_1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/watch_1.webp -------------------------------------------------------------------------------- /assets/watch_2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/watch_2.webp -------------------------------------------------------------------------------- /assets/watch_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/watch_3.webp -------------------------------------------------------------------------------- /assets/watch_4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/assets/watch_4.webp -------------------------------------------------------------------------------- /components/Cart.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import Link from "next/link"; 3 | import { 4 | AiOutlineMinus, 5 | AiOutlinePlus, 6 | AiOutlineLeft, 7 | AiOutlineShopping, 8 | } from "react-icons/ai"; 9 | import { TiDeleteOutline } from "react-icons/ti"; 10 | import { toast } from "react-hot-toast"; 11 | import { useStateContext } from "../context/StateContext"; 12 | import { urlFor } from "../lib/client"; 13 | 14 | import getStripe from "../lib/getStripe"; 15 | 16 | const Cart = () => { 17 | const cartRef = useRef(); 18 | const { 19 | totalPrice, 20 | totalQuantities, 21 | cartItems, 22 | setShowCart, 23 | toggleCartItemQuanitity, 24 | onRemove, 25 | } = useStateContext(); 26 | 27 | const handleCheckout = async () => { 28 | const stripe = await getStripe(); 29 | 30 | const response = await fetch("/api/stripe", { 31 | method: "POST", 32 | headers: { 33 | "Content-Type": "application/json", 34 | }, 35 | body: JSON.stringify(cartItems), 36 | }); 37 | 38 | if (response.statusCode === 500) return; //Something went wrong 39 | 40 | //Else 41 | const data = await response.json(); 42 | 43 | toast.loading("Redirecting..."); 44 | 45 | stripe.redirectToCheckout({ sessionId: data.id }); //Redirect to stripe checkout 46 | }; 47 | 48 | return ( 49 |
50 |
51 | 60 | 61 | {/* Checking if cart is empty ? */} 62 | {cartItems.length < 1 && ( 63 |
64 | 65 |

Your shopping bag is empty

66 | 67 | 74 | 75 |
76 | )} 77 | 78 | {/* If cart is not empty */} 79 |
80 | {cartItems.length >= 1 && 81 | cartItems.map((item) => ( 82 |
83 | 87 |
88 |
89 |
{item.name}
90 |

₹ {item.price}

91 |
92 |
93 |
94 |

95 | 98 | toggleCartItemQuanitity(item._id, "dec") 99 | } 100 | > 101 | 102 | 103 | 104 | {item.quantity} 105 | 106 | 109 | toggleCartItemQuanitity(item._id, "inc") 110 | } 111 | > 112 | 113 | 114 |

115 |
116 | 123 |
124 |
125 |
126 | ))} 127 |
128 | {/* Subtotal calculation */} 129 | {cartItems.length >= 1 && ( 130 |
131 |
132 |

Subtotal:

133 |

₹ {totalPrice}

134 |
135 |
136 | 139 |
140 |
141 | )} 142 |
143 |
144 | ); 145 | }; 146 | 147 | export default Cart; 148 | -------------------------------------------------------------------------------- /components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { AiFillInstagram, AiOutlineTwitter, AiFillFacebook } from 'react-icons/ai'; //Importing 'Instagram" & "Twitter" icons 4 | 5 | const Footer = () => { 6 | return ( 7 |
8 |

Smart Store | 2022 | All Rights Reserved

9 |

10 | 11 | 12 | 13 |

14 |
15 | ) 16 | } 17 | 18 | export default Footer; -------------------------------------------------------------------------------- /components/FooterBanner.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Link from "next/link"; 4 | 5 | import { urlFor } from "../lib/client"; 6 | 7 | const FooterBanner = ({ 8 | footerBanner: { 9 | discount, 10 | largeText1, 11 | largeText2, 12 | saleTime, 13 | smallText, 14 | midText, 15 | product, 16 | buttonText, 17 | image, 18 | desc, 19 | }, 20 | }) => { 21 | return ( 22 |
23 |
24 |
25 |

{discount}

26 |

{largeText1}

27 |

{largeText2}

28 |

{saleTime}

29 |
30 |
31 |

{smallText}

32 |

{midText}

33 |

{desc}

34 | 35 | 36 | 37 |
38 | 39 | 42 |
43 |
44 | ); 45 | }; 46 | 47 | export default FooterBanner; 48 | -------------------------------------------------------------------------------- /components/HeroBanner.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Link from 'next/link'; //Using tags 4 | 5 | import { urlFor } from '../lib/client'; //Generating product URL's 6 | 7 | //Passing the fetched data from Sanity as a prop to HeroBanner function 8 | const HeroBanner = ({ heroBanner }) => { 9 | return ( 10 |
11 |

12 | {heroBanner.smallText} 13 |

14 |

{heroBanner.midText}

15 |

{heroBanner.largeText1}

16 | headphones 17 |
18 | {/* tags in Next.js are exactly sumilar to the tags in React.js */} 19 | 20 | 21 | 22 |
23 |
24 | Description 25 |
26 |

{heroBanner.desc}

27 |
28 |
29 |
30 | ) 31 | } 32 | 33 | export default HeroBanner; -------------------------------------------------------------------------------- /components/Layout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Head from 'next/head'; //Similar to the tag in HTML but you have to import it into Next.js 3 | 4 | import Navbar from './Navbar'; 5 | import Footer from './Footer'; 6 | 7 | const Layout = ({ children }) => { 8 | return ( 9 |
10 | 11 | Galaxy Store 12 | 13 |
14 | 15 |
16 |
17 | {children} 18 |
19 |
20 |
21 |
22 |
23 | ) 24 | } 25 | 26 | export default Layout; -------------------------------------------------------------------------------- /components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Link from 'next/link'; 3 | import { AiOutlineShopping } from 'react-icons/ai' 4 | 5 | import { Cart } from '.'; 6 | import { useStateContext} from '../context/StateContext'; 7 | 8 | const Navbar = () => { 9 | const { showCart, setShowCart, totalQuantities } = useStateContext(); 10 | 11 | return ( 12 |
13 |

14 | Smart Store 15 |

16 | 17 | 21 | 22 | {/* Only show the Cart when setShowCart is true */} 23 | {showCart && } 24 |
25 | ) 26 | } 27 | 28 | export default Navbar; -------------------------------------------------------------------------------- /components/Product.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Link from 'next/link'; 4 | 5 | import { urlFor } from '../lib/client'; 6 | 7 | const Product = ({ product: { image, name, slug, price} }) => { 8 | return ( 9 |
10 | 11 |
12 | 18 |

{name}

19 |

₹ {price}

20 |
21 | 22 |
23 | ) 24 | } 25 | 26 | export default Product; -------------------------------------------------------------------------------- /components/index.js: -------------------------------------------------------------------------------- 1 | // Export files for using all over the project 2 | export { default as Footer } from './Footer'; 3 | 4 | export { default as Navbar } from './Navbar'; 5 | 6 | export { default as Cart } from './Cart'; 7 | 8 | export { default as Layout } from './Layout'; 9 | 10 | export { default as HeroBanner } from './HeroBanner'; 11 | 12 | export { default as FooterBanner } from './FooterBanner'; 13 | 14 | export { default as Product } from './Product'; 15 | -------------------------------------------------------------------------------- /context/StateContext.js: -------------------------------------------------------------------------------- 1 | //Contains all the logic for the cart itemss 2 | import React, { createContext, useContext, useState, useEffect } from "react"; 3 | 4 | import { toast } from "react-hot-toast"; //For making the pop-up notification 5 | 6 | const Context = createContext(); //Hook 7 | 8 | export const StateContext = ({ children }) => { 9 | const [showCart, setShowCart] = useState(false); //'false' shows the initail property for the state 10 | 11 | const [cartItems, setCartItems] = useState([]); //Cart items using 'Local Storage' 12 | 13 | const [totalPrice, setTotalPrice] = useState(0); //Total price of the cart 14 | 15 | const [totalQuantities, setTotalQuantities] = useState(0); //Total quantity of the cart 16 | 17 | const [qty, setQty] = useState(1); //Quantity 18 | 19 | let foundProduct; 20 | let index; 21 | 22 | //Function to AddToCart 23 | const onAdd = (product, quantity) => { 24 | const checkProductInCart = cartItems.find( 25 | (item) => item._id === product._id 26 | ); 27 | 28 | setTotalPrice( 29 | (prevTotalPrice) => prevTotalPrice + product.price * quantity 30 | ); 31 | setTotalQuantities((prevTotalQuantities) => prevTotalQuantities + quantity); 32 | 33 | if (checkProductInCart) { 34 | //Checking if the item we are currently trying to add to cart is already in cart or not ? 35 | //Yes 36 | //Updating actual items in cart 37 | const updatedCartItems = cartItems.map((cartProduct) => { 38 | if (cartProduct._id === product._id) 39 | return { 40 | ...cartProduct, 41 | //Incrementing the quantity of that particular product 42 | quantity: cartProduct.quantity + quantity, 43 | }; 44 | }); 45 | 46 | setCartItems(updatedCartItems); 47 | } else { 48 | //No 49 | //If the product we are trying to add is not already present in the cart 50 | product.quantity = quantity; 51 | 52 | setCartItems([...cartItems, { ...product }]); 53 | } 54 | //Showing the pop-up notification 55 | toast.success(`${qty} ${product.name} added to the cart.`); 56 | }; 57 | 58 | //Function to remove an item from the cart 59 | const onRemove = (product) => { 60 | foundProduct = cartItems.find((item) => item._id === product._id); 61 | const newCartItems = cartItems.filter((item) => item._id !== product._id); 62 | 63 | setTotalPrice((prevTotalPrice) => prevTotalPrice -foundProduct.price * foundProduct.quantity); 64 | setTotalQuantities(prevTotalQuantities => prevTotalQuantities - foundProduct.quantity); 65 | setCartItems(newCartItems); 66 | } 67 | 68 | //Function to change item quantity of a particular function in cart 69 | const toggleCartItemQuanitity = (id, value) => { 70 | foundProduct = cartItems.find((item) => item._id === id) 71 | index = cartItems.findIndex((product) => product._id === id); 72 | const newCartItems = cartItems.filter((item) => item._id !== id) 73 | 74 | if(value === 'inc') { 75 | setCartItems([...newCartItems, { ...foundProduct, quantity: foundProduct.quantity + 1 } ]); 76 | setTotalPrice((prevTotalPrice) => prevTotalPrice + foundProduct.price) 77 | setTotalQuantities(prevTotalQuantities => prevTotalQuantities + 1) 78 | } else if(value === 'dec') { 79 | if (foundProduct.quantity > 1) { 80 | setCartItems([...newCartItems, { ...foundProduct, quantity: foundProduct.quantity - 1 } ]); 81 | setTotalPrice((prevTotalPrice) => prevTotalPrice - foundProduct.price) 82 | setTotalQuantities(prevTotalQuantities => prevTotalQuantities - 1) 83 | } 84 | } 85 | } 86 | 87 | //Function - Logic for increasing cart item + 88 | const incQty = () => { 89 | setQty((prevQty) => prevQty + 1); 90 | }; 91 | //Function - Logic for decreasing cart item - 92 | const decQty = () => { 93 | setQty((prevQty) => { 94 | if (prevQty - 1 < 1) return 1; 95 | 96 | return prevQty - 1; 97 | }); 98 | }; 99 | 100 | return ( 101 | //Returning Context Provider 102 | 121 | {children} 122 | 123 | ); 124 | }; 125 | 126 | export const useStateContext = () => useContext(Context); 127 | -------------------------------------------------------------------------------- /lib/client.js: -------------------------------------------------------------------------------- 1 | import sanityClient from "@sanity/client"; 2 | import ImageUrlBuilder from '@sanity/image-url'; 3 | 4 | export const client = sanityClient({ 5 | projectId: '5rsw848q', 6 | dataset: 'production', 7 | apiVersion: '2022-03-10', 8 | useCdn: 'true', 9 | token: process.env.NEXT_PUBLIC_SANITY_TOKEN 10 | }); 11 | 12 | const builder = ImageUrlBuilder(client); 13 | 14 | export const urlFor = (source) => builder.image(source); -------------------------------------------------------------------------------- /lib/getStripe.js: -------------------------------------------------------------------------------- 1 | import { loadStripe } from '@stripe/stripe-js'; 2 | 3 | let stripePromise; 4 | 5 | const getStripe = () => { 6 | if(!stripePromise) { 7 | stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY); 8 | } 9 | 10 | return stripePromise; 11 | } 12 | 13 | export default getStripe; -------------------------------------------------------------------------------- /lib/utils.js: -------------------------------------------------------------------------------- 1 | import confetti from 'canvas-confetti'; 2 | 3 | export const runFireworks = () => { 4 | var duration = 5 * 1000; 5 | var animationEnd = Date.now() + duration; 6 | var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }; 7 | 8 | function randomInRange(min, max) { 9 | return Math.random() * (max - min) + min; 10 | } 11 | 12 | var interval = setInterval(function() { 13 | var timeLeft = animationEnd - Date.now(); 14 | 15 | if (timeLeft <= 0) { 16 | return clearInterval(interval); 17 | } 18 | 19 | var particleCount = 50 * (timeLeft / duration); 20 | // since particles fall down, start a bit higher than random 21 | confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } })); 22 | confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } })); 23 | }, 250); 24 | } -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-ecommerce-website", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@babel/core": "^7.17.9", 13 | "@sanity/client": "^3.2.0", 14 | "@sanity/image-url": "^1.0.1", 15 | "@stripe/stripe-js": "^1.25.0", 16 | "canvas-confetti": "^1.5.1", 17 | "next": "12.1.6", 18 | "next-sanity-image": "^3.2.1", 19 | "react": "18.1.0", 20 | "react-dom": "18.1.0", 21 | "react-hot-toast": "^2.2.0", 22 | "react-icons": "^4.3.1", 23 | "stripe": "^8.209.0" 24 | }, 25 | "devDependencies": { 26 | "@babel/preset-react": "^7.17.12", 27 | "eslint": "8.17.0", 28 | "eslint-config-next": "12.1.6", 29 | "eslint-config-prettier": "^8.5.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import React from 'react' 3 | 4 | import { Layout } from '../components'; 5 | 6 | import { StateContext } from '../context/StateContext'; //Using StateContext 7 | 8 | import { Toaster } from 'react-hot-toast'; //Adding pop-up 9 | 10 | 11 | function MyApp({ Component, pageProps }) { 12 | return ( 13 | //Using as a wrapper here makes it available across the entire application 14 | 15 | 16 | 17 | 18 | 19 | 20 | ) 21 | } 22 | export default MyApp 23 | -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /pages/api/stripe.js: -------------------------------------------------------------------------------- 1 | // Stripe Backend 2 | 3 | import Stripe from "stripe"; 4 | 5 | //Creating new instance for the Stripe call 6 | const stripe = new Stripe(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY); 7 | 8 | export default async function handler(req, res) { 9 | if (req.method === "POST") { 10 | try { 11 | const params = { 12 | submit_type: "pay", //Paying something 13 | mode: "payment", //Mode = payment 14 | payment_method_types: ["card"], 15 | billing_address_collection: "auto", 16 | //USD Free Shipping 17 | // shipping_options: [{ shipping_rate: "shr_1LC3NfSCw2fpMkHGwQR5ryDk" }], 18 | //INR Free shipping 19 | shipping_options: [{ shipping_rate: "shr_1LCIT9SCw2fpMkHGQlJ86ylY" }], 20 | line_items: req.body.map((item) => { 21 | const img = item.image[0].asset._ref; 22 | const newImage = img 23 | .replace( 24 | "image-", 25 | "https://cdn.sanity.io/images/5rsw848q/production/" 26 | ) 27 | .replace("-webp", ".webp"); 28 | 29 | return { 30 | price_data: { 31 | currency: "INR", 32 | product_data: { 33 | name: item.name, 34 | images: [newImage], 35 | }, 36 | unit_amount: item.price * 100, 37 | }, 38 | adjustable_quantity: { 39 | enabled: true, 40 | minimum: 1, 41 | }, 42 | quantity: item.quantity, 43 | }; 44 | }), 45 | success_url: `${req.headers.origin}/success`, // Redirecting to /success.js 46 | cancel_url: `${req.headers.origin}/canceled`, 47 | }; 48 | 49 | // Create checkout session & calling params 50 | const session = await stripe.checkout.sessions.create(params); 51 | res.status(200).json(session); 52 | } catch (err) { 53 | res.status(err.statusCode || 500).json(err.message); 54 | } 55 | } else { 56 | res.setHeader("Allow", "POST"); 57 | res.status(405).end("Method Not Allowed"); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | //Main page/ Home page 2 | 3 | import React from 'react' 4 | 5 | import { client } from '../lib/client'; 6 | 7 | import { Product, FooterBanner, HeroBanner } from '../components'; 8 | 9 | const Home = ({ products, bannerData }) => { 10 | return ( 11 | <> 12 | 13 |
14 |

15 | Best Selling Products 16 |

17 |

18 | Speakers of many variations 19 |

20 |
21 | 22 |
23 | {products?.map( (product) => )} 24 |
25 | 26 | 27 | 28 | ) 29 | } 30 | 31 | export const getServerSideProps = async() => { 32 | const query = '*[_type == "product"]'; 33 | const products = await client.fetch(query); 34 | 35 | const bannerQuery = '*[_type == "banner"]'; 36 | const bannerData = await client.fetch(bannerQuery); 37 | 38 | return { 39 | props: { products, bannerData } 40 | } 41 | } 42 | 43 | export default Home; -------------------------------------------------------------------------------- /pages/product/[slug].js: -------------------------------------------------------------------------------- 1 | // Putting a [name] makes the file dynamic 2 | // File based routing 3 | 4 | import React, { useState } from "react"; 5 | 6 | import { 7 | AiOutlineMinus, 8 | AiOutlinePlus, 9 | AiFillStar, 10 | AiOutlineStar, 11 | } from "react-icons/ai"; 12 | 13 | import { client, urlFor } from "../../lib/client"; 14 | 15 | import { Product } from "../../components"; 16 | 17 | import { useStateContext } from '../../context/StateContext'; 18 | 19 | 20 | 21 | const ProductDetails = ({ product, products}) => { 22 | 23 | const { image, name, details, price } = product; 24 | const { decQty, incQty, qty, onAdd, setShowCart } = useStateContext(); 25 | const [index, setIndex] = useState(0); 26 | 27 | const handleBuyNow = () => { 28 | onAdd(product, qty); 29 | 30 | setShowCart(true); 31 | } 32 | return ( 33 |
34 |
35 |
36 |
37 | 41 |
42 |
43 | {image?.map((item, i) => ( 44 | setIndex(i)} 50 | /> 51 | ))} 52 |
53 |
54 | 55 |
56 |

{name}

57 |
58 |
59 | 60 | 61 | 62 | 63 | 64 |
65 |

(20)

66 |
67 |

Details:

68 |

{details}

69 |

₹ {price}

70 |
71 |

Quantity:

72 |

73 | {/* Minus button */} 74 | 75 | {/* Quantity display */} 76 | {qty} 77 | {/* Plus button */} 78 | 79 |

80 |
81 |
82 | {/* Add to cart button */} 83 | 84 | 85 | 88 |
89 |
90 |
91 | 92 | {/* Product banner for similar items to the selected items */} 93 |
94 |

You may also like

95 |
96 |
97 | {products.map((item) => ( 98 | 99 | ))} 100 |
101 |
102 |
103 |
104 | ); 105 | }; 106 | 107 | // getStaticProps function is used when the data required to render the page is available at runtime ahead of user request 108 | 109 | export const getStaticPaths = async () => { 110 | const query = `*[_type == "product"] { 111 | slug { 112 | current 113 | } 114 | } 115 | `; 116 | 117 | const products = await client.fetch(query); 118 | 119 | const paths = products.map((product) => ({ 120 | params: { 121 | slug: product.slug.current, 122 | }, 123 | })); 124 | 125 | return { 126 | paths, 127 | fallback: "blocking", 128 | }; 129 | }; 130 | 131 | //To fetch product details from thne product page we are on currently 132 | export const getStaticProps = async ({ params: { slug } }) => { 133 | const query = `*[_type == "product" && slug.current == '${slug}'][0]`; //Fetching a particular product requested 134 | const productsQuery = '*[_type == "product"]'; //Fetching similar products 135 | 136 | const product = await client.fetch(query); 137 | const products = await client.fetch(productsQuery); 138 | 139 | // console.log(product); 140 | 141 | return { 142 | props: { product, products }, 143 | }; 144 | }; 145 | 146 | export default ProductDetails; 147 | -------------------------------------------------------------------------------- /pages/success.js: -------------------------------------------------------------------------------- 1 | // Page showing the success message after successfull payment ! 2 | 3 | import React, { useState, useEffect } from 'react' 4 | import Link from 'next/link'; 5 | import { BsBagCheckFill } from 'react-icons/bs'; 6 | import { useRouter } from 'next/router'; 7 | 8 | import { useStateContext } from '../context/StateContext'; 9 | 10 | import { runFireworks } from '../lib/utils'; 11 | 12 | const Success = () => { 13 | const { setCartItems, setTotalPrice, setTotalQuantities } = useStateContext(); 14 | 15 | // As soon as someone arrives at this page make this following changes 16 | useEffect(() => { 17 | localStorage.clear(); // Clearing local storage 18 | setCartItems([]); // Setting cart items an empty array 19 | setTotalPrice(0); // Setting total price in cart to 0 20 | setTotalQuantities(0); // Setting total products in cart to 0 21 | runFireworks(); // Firework confetti work 22 | }, []); 23 | const [order, setOrder] = useState(null); 24 | 25 | return ( 26 |
27 |
28 |

29 | 30 |

31 |

Thank you for your order !

32 |

Check your inbox for your reciept.

33 |

34 | If you have any questions, please reach us at at 35 | 36 | order@example.com 37 | 38 |

39 | 40 | 43 | 44 |
45 |
46 | ) 47 | } 48 | 49 | export default Success; -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/public/favicon.ico -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@sanity/eslint-config-studio" 3 | } 4 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | /logs 3 | *.log 4 | 5 | # Coverage directory used by tools like istanbul 6 | /coverage 7 | 8 | # Dependency directories 9 | node_modules 10 | 11 | # Compiled sanity studio 12 | /dist 13 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/README.md: -------------------------------------------------------------------------------- 1 | # Sanity Clean Content Studio 2 | 3 | Congratulations, you have now installed the Sanity Content Studio, an open source real-time content editing environment connected to the Sanity backend. 4 | 5 | Now you can do the following things: 6 | 7 | - [Read “getting started” in the docs](https://www.sanity.io/docs/introduction/getting-started?utm_source=readme) 8 | - [Join the community Slack](https://slack.sanity.io/?utm_source=readme) 9 | - [Extend and build plugins](https://www.sanity.io/docs/content-studio/extending?utm_source=readme) 10 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/config/.checksums: -------------------------------------------------------------------------------- 1 | { 2 | "#": "Used by Sanity to keep track of configuration file checksums, do not delete or modify!", 3 | "@sanity/default-layout": "bb034f391ba508a6ca8cd971967cbedeb131c4d19b17b28a0895f32db5d568ea", 4 | "@sanity/default-login": "e2ed4e51e97331c0699ba7cf9f67cbf76f1c6a5f806d6eabf8259b2bcb5f1002", 5 | "@sanity/form-builder": "b38478227ba5e22c91981da4b53436df22e48ff25238a55a973ed620be5068aa", 6 | "@sanity/data-aspects": "d199e2c199b3e26cd28b68dc84d7fc01c9186bf5089580f2e2446994d36b3cb6", 7 | "@sanity/vision": "da5b6ed712703ecd04bf4df560570c668aa95252c6bc1c41d6df1bda9b8b8f60" 8 | } 9 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/config/@sanity/data-aspects.json: -------------------------------------------------------------------------------- 1 | { 2 | "listOptions": {} 3 | } 4 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/config/@sanity/default-layout.json: -------------------------------------------------------------------------------- 1 | { 2 | "toolSwitcher": { 3 | "order": [], 4 | "hidden": [] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/config/@sanity/default-login.json: -------------------------------------------------------------------------------- 1 | { 2 | "providers": { 3 | "mode": "append", 4 | "redirectOnSingle": false, 5 | "entries": [] 6 | }, 7 | "loginMethod": "dual" 8 | } 9 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/config/@sanity/form-builder.json: -------------------------------------------------------------------------------- 1 | { 2 | "images": { 3 | "directUploads": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/config/@sanity/vision.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultApiVersion": "2021-10-21" 3 | } 4 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/dist/index.html: -------------------------------------------------------------------------------- 1 | ecommerce-stripe – Sanity
Connecting to Sanity.io
-------------------------------------------------------------------------------- /sanity-ecommerce-stripe/dist/static/.gitkeep: -------------------------------------------------------------------------------- 1 | Files placed here will be served by the Sanity server under the `/static`-prefix 2 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/dist/static/css/main.css: -------------------------------------------------------------------------------- 1 | .FieldStatus_root_1yAmi{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:23px;width:77px;margin-left:.5rem}.FieldStatus_root_1yAmi[data-max-avatars="1"]{max-width:23px}.FieldStatus_root_1yAmi[data-position=top]{-ms-flex-item-align:start;align-self:flex-start}.FieldStatus_root_1yAmi[data-position=bottom]{-ms-flex-item-align:end;align-self:flex-end}.text-input_root_1Ee4m{-webkit-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #cad1dc;display:block;width:100%;outline:none;font:inherit;line-height:1.25;-webkit-box-sizing:border-box;box-sizing:border-box;padding:calc(.75rem - 3px) calc(.75rem - 1px) calc(.75rem - 2px);border-radius:2px;color:#262f3d;background-color:#fff;-webkit-box-shadow:none;box-shadow:none}.text-input_root_1Ee4m::-webkit-input-placeholder{color:#cad1dc}.text-input_root_1Ee4m::-moz-placeholder{color:#cad1dc}.text-input_root_1Ee4m::-ms-input-placeholder{color:#cad1dc}.text-input_root_1Ee4m::placeholder{color:#cad1dc}.text-input_textInput_3rhBL:disabled{color:#3c4758;background:#f8f9fb}.text-input_textInput_3rhBL:-moz-read-only{color:#3c4758;background:#f8f9fb}.text-input_textInput_3rhBL:read-only{color:#3c4758;background:#f8f9fb}.text-input_textInput_3rhBL:not(:disabled):not(:-moz-read-only):hover{box-shadow:none;border-color:#95a3b9}.text-input_textInput_3rhBL:not(:disabled):not(:read-only):hover{-webkit-box-shadow:none;box-shadow:none;border-color:#95a3b9}.text-input_textInput_3rhBL:not(:disabled):not(:-moz-read-only):active{border-color:#2276fc}.text-input_textInput_3rhBL:not(:disabled):not(:read-only):active{border-color:#2276fc}.text-input_textInput_3rhBL:not(:disabled):not(:-moz-read-only):focus,.text-input_textInput_3rhBL:not(:disabled):not(:-moz-read-only):focus-within{box-shadow:0 0 0 1px #2276fc;background-color:#fff;border-color:#2276fc}.text-input_textInput_3rhBL:not(:disabled):not(:read-only):focus,.text-input_textInput_3rhBL:not(:disabled):not(:read-only):focus-within{-webkit-box-shadow:0 0 0 1px #2276fc;box-shadow:0 0 0 1px #2276fc;background-color:#fff;border-color:#2276fc}.text-input_textInput_3rhBL:not(:disabled):not(:-moz-read-only):focus-within:invalid,.text-input_textInput_3rhBL:not(:disabled):not(:-moz-read-only):focus:invalid{box-shadow:0 0 0 1px #2276fc}.text-input_textInput_3rhBL:not(:disabled):not(:read-only):focus-within:invalid,.text-input_textInput_3rhBL:not(:disabled):not(:read-only):focus:invalid{-webkit-box-shadow:0 0 0 1px #2276fc;box-shadow:0 0 0 1px #2276fc}.text-input_textInput_3rhBL:not(:disabled):not(:-moz-read-only):not(:focus):not(:focus-within):invalid{border-color:rgba(240,62,47,.5)}.text-input_textInput_3rhBL:not(:disabled):not(:read-only):not(:focus):not(:focus-within):invalid{border-color:rgba(240,62,47,.5)}.text-input_textInput_3rhBL:not(:disabled):not(:-moz-read-only):invalid{background-color:#fff;box-shadow:none}.text-input_textInput_3rhBL:not(:disabled):not(:read-only):invalid{background-color:#fff;-webkit-box-shadow:none;box-shadow:none}.DefaultSelect_root_3EiwW{display:block;position:relative;outline:none;color:inherit}.DefaultSelect_root_3EiwW:hover .DefaultSelect_arrow_1980f{color:#2276fc}.DefaultSelect_root_3EiwW:hover .DefaultSelect_arrow_1980f svg{color:inherit;opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}.DefaultSelect_root_3EiwW:focus-within .DefaultSelect_arrow_1980f{color:#2276fc}.DefaultSelect_root_3EiwW:focus-within .DefaultSelect_arrow_1980f svg{color:inherit;opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}.DefaultSelect_select_1bZdJ{-webkit-box-sizing:border-box;box-sizing:border-box;min-width:112px;min-width:7rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;overflow:hidden;height:2.5em;margin-right:2.5em}.DefaultSelect_select_1bZdJ:not(:disabled):hover{-webkit-box-shadow:none;box-shadow:none;border-color:#95a3b9}.DefaultSelect_select_1bZdJ:not(:disabled):focus,.DefaultSelect_select_1bZdJ:not(:disabled):focus-within{-webkit-box-shadow:0 0 0 1px #2276fc;box-shadow:0 0 0 1px #2276fc;border-color:#2276fc}.DefaultSelect_select_1bZdJ:not(:disabled):active{border-color:#2276fc}.DefaultSelect_select_1bZdJ:not(:disabled):invalid{border-color:rgba(240,62,47,.5);background-color:#fff;-webkit-box-shadow:none;box-shadow:none}.DefaultSelect_select_1bZdJ:disabled{opacity:1;color:#3c4758;background:#f8f9fb}.DefaultSelect_select_1bZdJ:disabled+.DefaultSelect_functions_2lP9S{color:#3c4758}.DefaultSelect_invalid_373bY:not(:disabled){border-color:rgba(240,62,47,.5);background-color:#fff}.DefaultSelect_invalid_373bY:not(:disabled):hover:not(:focus){border-color:rgba(240,62,47,.5)}.DefaultSelect_invalid_373bY:not(:disabled):focus{-webkit-box-shadow:0 0 0 1px #2276fc;box-shadow:0 0 0 1px #2276fc}.DefaultSelect_disabled_3AzOc:hover .DefaultSelect_arrow_1980f{color:#3c4758}.DefaultSelect_selectContainer_3eXUJ{position:relative;color:#cad1dc}.DefaultSelect_hasFocus_3eyX7 .DefaultSelect_selectContainer_3eXUJ,.DefaultSelect_selectContainer_3eXUJ:hover{color:#2276fc}.DefaultSelect_selectContainerDisabled_1o2Gq{color:#262f3d}.DefaultSelect_selectContainerDisabled_1o2Gq:hover{color:inherit}.DefaultSelect_root_3EiwW:hover .DefaultSelect_selectContainerDisabled_1o2Gq{border-color:#95a3b9}.DefaultSelect_hasFocus_3eyX7 .DefaultSelect_selectContainerDisabled_1o2Gq{color:inherit}.DefaultSelect_selectContainerDisabled_1o2Gq:focus{border-color:#2276fc;-webkit-box-shadow:0 0 0 2px #2276fc;box-shadow:0 0 0 2px #2276fc}.DefaultSelect_functions_2lP9S{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;position:absolute;top:0;right:0;height:100%;cursor:default;z-index:1;pointer-events:none;color:#262f3d}.DefaultSelect_functions_2lP9S>*{pointer-events:auto}.DefaultSelect_functions_2lP9S .DefaultSelect_arrow_1980f{pointer-events:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:2.5em;color:inherit;font-size:18px;font-size:1.125rem}.DefaultSelect_functions_2lP9S>:not(:first-child){margin-left:.5em}.DefaultSelect_functions_2lP9S svg{color:inherit}.shadows_shadow-0dp_2QvgV{-webkit-box-shadow:none;box-shadow:none}.shadows_shadow-1dp_1W7wb{-webkit-box-shadow:0 0 0 1px rgba(123,140,168,.25),0 1px 2px 0 rgba(38,47,61,.1),0 2px 1px -2px rgba(38,47,61,.08),0 1px 3px 0 rgba(38,47,61,.02);box-shadow:0 0 0 1px rgba(123,140,168,.25),0 1px 2px 0 rgba(38,47,61,.1),0 2px 1px -2px rgba(38,47,61,.08),0 1px 3px 0 rgba(38,47,61,.02)}.shadows_shadow-6dp_1wJ8d{-webkit-box-shadow:0 0 0 1px rgba(123,140,168,.25),0 3px 3px 0 rgba(38,47,61,.1),0 1px 7px 0 rgba(38,47,61,.08),0 3px 1px -1px rgba(38,47,61,.02);box-shadow:0 0 0 1px rgba(123,140,168,.25),0 3px 3px 0 rgba(38,47,61,.1),0 1px 7px 0 rgba(38,47,61,.08),0 3px 1px -1px rgba(38,47,61,.02)}.shadows_shadow-12dp_2SxWF{-webkit-box-shadow:0 0 0 1px rgba(123,140,168,.25),0 8px 17px 2px rgba(38,47,61,.1),0 3px 14px 2px rgba(38,47,61,.08),0 5px 5px -3px rgba(38,47,61,.02);box-shadow:0 0 0 1px rgba(123,140,168,.25),0 8px 17px 2px rgba(38,47,61,.1),0 3px 14px 2px rgba(38,47,61,.08),0 5px 5px -3px rgba(38,47,61,.02)}.shadows_shadow-16dp_1MeKN{-webkit-box-shadow:0 0 0 1px rgba(123,140,168,.25),0 16px 24px 2px rgba(38,47,61,.1),0 6px 30px 5px rgba(38,47,61,.08),0 8px 10px -7px rgba(38,47,61,.02);box-shadow:0 0 0 1px rgba(123,140,168,.25),0 16px 24px 2px rgba(38,47,61,.1),0 6px 30px 5px rgba(38,47,61,.08),0 8px 10px -7px rgba(38,47,61,.02)}.shadows_shadow-24dp_3B34J{-webkit-box-shadow:0 0 0 1px rgba(123,140,168,.25),0 24px 38px 3px rgba(38,47,61,.1),0 9px 46px 8px rgba(38,47,61,.08),0 11px 15px -7px rgba(38,47,61,.02);box-shadow:0 0 0 1px rgba(123,140,168,.25),0 24px 38px 3px rgba(38,47,61,.1),0 9px 46px 8px rgba(38,47,61,.08),0 11px 15px -7px rgba(38,47,61,.02)}.clear-button_root_49HkS{color:#262f3d;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;padding:0;margin:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform .1s;transition:-webkit-transform .1s;transition:transform .1s;transition:transform .1s,-webkit-transform .1s}.clear-button_root_49HkS:focus,.clear-button_root_49HkS:hover{color:#f03e2f;-webkit-transform:scale(1.3);transform:scale(1.3)}.clear-button_root_49HkS:active{-webkit-transform:scale(1.6);transform:scale(1.6)}.clear-button_root_49HkS svg{display:block}.SearchableSelect_layer_3x4-n{pointer-events:none}.SearchableSelect_selectContainer_38jcE input{padding-right:5.5em}.SearchableSelect_arrowAndSpinnerContainer_3H-rP{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-left:1px solid #cad1dc;min-width:2.5em}.SearchableSelect_arrow_1i0vM{-webkit-transition:opacity .1s linear,-webkit-transform .1s linear;transition:opacity .1s linear,-webkit-transform .1s linear;transition:transform .1s linear,opacity .1s linear;transition:transform .1s linear,opacity .1s linear,-webkit-transform .1s linear;outline:none;-webkit-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:initial;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1;color:inherit;font-size:18px;font-size:1.125rem}.SearchableSelect_arrow_1i0vM:focus,.SearchableSelect_arrow_1i0vM:hover{color:#2276fc}.SearchableSelect_arrow_1i0vM:focus svg,.SearchableSelect_arrow_1i0vM:hover svg{color:inherit;opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}.SearchableSelect_functions_L6_uc{border:1px solid transparent;-webkit-box-sizing:border-box;box-sizing:border-box}.SearchableSelect_popper_2_yow{pointer-events:all;padding:0 1px;-webkit-box-sizing:border-box;box-sizing:border-box}.SearchableSelect_listContainer_p9sNz{display:block;min-height:56px;min-height:3.5rem;max-height:200px;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#fff;-webkit-transition:max-height .1s linear;transition:max-height .1s linear;margin:-1px 0;border-radius:1px}.SearchableSelect_listContainerNoResult_18q1O{max-height:64px;max-height:4rem}.SearchableSelect_listContainerHidden_28g0z{display:none}.SearchableSelect_noResultText_1JOaN{position:absolute;width:100%;opacity:1;-webkit-box-sizing:border-box;box-sizing:border-box;padding:1rem;-webkit-transition:opacity .1s ease-out;transition:opacity .1s ease-out;-webkit-transition-delay:.1s;transition-delay:.1s}.SearchableSelect_noResultTextHidden_3Z8O-{-webkit-transition:none;transition:none;opacity:0;pointer-events:none}.SearchableSelect_spinner_3dpP7{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1em}.SearchableSelect_spinner_3dpP7 svg{display:block}.SearchableSelect_item_OJaJV{padding:.5rem}.SearchableSelect_openItem_ezE6B{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform .1s;transition:-webkit-transform .1s;transition:transform .1s;transition:transform .1s,-webkit-transform .1s;cursor:pointer;outline:none}.SearchableSelect_openItem_ezE6B:last-child{margin-right:1rem}.SearchableSelect_openItem_ezE6B a,.SearchableSelect_openItem_ezE6B button{outline:none}.SearchableSelect_openItem_ezE6B:focus,.SearchableSelect_openItem_ezE6B:focus-within,.SearchableSelect_openItem_ezE6B:hover{opacity:1;-webkit-transform:scale(1.3);transform:scale(1.3);color:#2276fc}.SearchableSelect_openItem_ezE6B:focus-within svg,.SearchableSelect_openItem_ezE6B:focus svg,.SearchableSelect_openItem_ezE6B:hover svg{color:#2276fc}.SearchableSelect_openItem_ezE6B:active{opacity:1;color:#262f3d}.SearchableSelect_openItem_ezE6B:active svg{color:#262f3d}.SearchableSelect_openItem_ezE6B svg{display:block;color:#262f3d}.SearchableSelect_clearButton_35gb2:focus{outline:0}@-webkit-keyframes Spinner_sanity_spinner_rotation_2NPhN{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes Spinner_sanity_spinner_rotation_2NPhN{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes Spinner_sanity_spinner_appear_1l--h{0%{opacity:0}to{opacity:1}}@keyframes Spinner_sanity_spinner_appear_1l--h{0%{opacity:0}to{opacity:1}}.Spinner_root_3QVps{-webkit-animation-name:Spinner_sanity_spinner_appear_1l--h;animation-name:Spinner_sanity_spinner_appear_1l--h;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:once;animation-iteration-count:once;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0}.Spinner_root_3QVps.Spinner_center_2Io03,.Spinner_root_3QVps.Spinner_fullscreen_BPq5E{text-align:center}.Spinner_root_3QVps.Spinner_fullscreen_BPq5E{background-color:rgba(228,232,237,.5);position:fixed;height:100%;width:100%;top:0;left:0;z-index:200}.Spinner_block_wf8A1{text-align:center}.Spinner_inline_2Yt8h{display:inline-block;vertical-align:top;white-space:nowrap}.Spinner_root_3QVps.Spinner_fullscreen_BPq5E .Spinner_inner_26EeO{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.Spinner_iconContainer_11YTx{display:inline-block;vertical-align:top;height:1.0625em;width:1.0625em}.Spinner_root_3QVps.Spinner_center_2Io03 .Spinner_iconContainer_11YTx,.Spinner_root_3QVps.Spinner_fullscreen_BPq5E .Spinner_iconContainer_11YTx{display:block;margin:0 auto}.Spinner_iconContainer_11YTx>svg{-webkit-animation-name:Spinner_sanity_spinner_rotation_2NPhN;animation-name:Spinner_sanity_spinner_rotation_2NPhN;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-transform-origin:center center;transform-origin:center center;will-change:transform;display:block;font-size:1.0625em;width:1em;height:1em;shape-rendering:geometricPrecision}.Spinner_iconContainer_11YTx>svg[data-sanity-icon=true]{font-size:1.5625em;margin:-.16em}.Spinner_root_3QVps.Spinner_fullscreen_BPq5E .Spinner_iconContainer_11YTx>svg{font-size:1.3125em}.Spinner_root_3QVps.Spinner_fullscreen_BPq5E .Spinner_iconContainer_11YTx>svg[data-sanity-icon=true]{font-size:1.8125em;margin:-.13793em}.Spinner_root_3QVps.Spinner_fullscreen_BPq5E .Spinner_iconContainer_11YTx{height:1.3125em;width:1.3125em;margin:-.19048em}.Spinner_message_2saZ3{display:inline-block;vertical-align:top;margin:-2px 0 -1px .5rem}.Spinner_root_3QVps.Spinner_center_2Io03 .Spinner_message_2saZ3,.Spinner_root_3QVps.Spinner_fullscreen_BPq5E .Spinner_message_2saZ3{margin:calc(.5rem - 2px) auto -1px;display:block;white-space:pre-wrap;padding-top:.5rem;-ms-flex-item-align:center;align-self:center}.Portal_captureTabFocus_2c5bV{position:absolute;height:0;width:0}.DefaultTextInput_container_-OSag,.DefaultTextInput_input_PFTVB{position:relative}.DefaultTextInput_isClearable_ibN3z .DefaultTextInput_input_PFTVB{padding-right:2rem}.DefaultTextInput_input_PFTVB[type=number]::-webkit-inner-spin-button,.DefaultTextInput_input_PFTVB[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.DefaultTextInput_clearButton_3BIpO{position:absolute;top:0;right:8px;right:.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.DefaultTextInput_clearButton_3BIpO svg{color:inherit}.List_root_2ChkO{display:block;margin:0;padding:0}.List_divider_2PH77{width:100%;height:0;padding:0;margin:0;background:none;border-top:1px solid rgba(123,140,168,.25);border-bottom:none;-webkit-box-sizing:border-box;box-sizing:border-box}.ListItem_root_1RIrt{display:block;margin:0;padding:0}.selectable_item_3oWeU{background-color:#fff;color:#262f3d;cursor:default}.selectable_item_3oWeU[disabled]{color:#cad1dc}@media (hover:hover) and (min-width:512px){.selectable_item_3oWeU:not([disabled]):hover{background-color:#f1f3f6;color:#262f3d}}.selectable_item_3oWeU:not([disabled]):focus{outline:none}@media (hover:hover){.selectable_item_3oWeU:not([disabled]):focus{background-color:#e4e8ed;color:#262f3d}}.selectable_item_3oWeU:not([disabled]):active{background-color:#f1f3f6;color:#262f3d}.selectable_selected_1ywgY{background-color:#2276fc!important;color:#fff!important}@media (hover:hover){.selectable_selected_1ywgY:hover{background-color:#2276fc!important;color:#fff!important}}.selectable_selected_1ywgY:focus{outline:none}@media (hover:hover){.selectable_selected_1ywgY:focus{background-color:#2276fc!important;color:#fff!important}}.selectable_highlighted_38F7d,.selectable_highlighted_38F7d.selectable_selected_1ywgY{background-color:#e4e8ed}.backgrounds_frosted_hLPn9{background-color:rgba(123,140,168,.15)}.backgrounds_listItemStates_2IO58{position:relative}@media (hover:hover){.backgrounds_listItemStates_2IO58:active,.backgrounds_listItemStates_2IO58:hover{background-color:#f1f3f6}}.SelectMenu_root_N1Otx{height:100%;position:relative}.SelectMenu_scrollContainer_2shVf{-webkit-transform:translateZ(0);transform:translateZ(0)}.SelectMenu_list_21EVJ{margin:0;padding:0;display:block}.SelectMenu_item_QRIAB{display:block;margin:0;padding:0}.DefaultButton_root_i03nr{-webkit-font-smoothing:inherit;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;margin:0;padding:0;outline:none;font:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;background:none;color:inherit;border:none;border-radius:0;white-space:nowrap}.DefaultButton_root_i03nr[disabled]{color:inherit}.DefaultButton_root_i03nr.DefaultButton_bleed_1DBud{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}.DefaultButton_root_i03nr>.DefaultButton_inner_Dhde5{background-color:#7b8ca8;color:#fff;border:1px solid transparent}.DefaultButton_root_i03nr:not(.DefaultButton_bleed_1DBud)>.DefaultButton_inner_Dhde5{border-radius:4px}.DefaultButton_root_i03nr .DefaultButton_spinner_20Jg6{background-color:rgba(123,140,168,.8)}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j):focus>.DefaultButton_inner_Dhde5{-webkit-box-shadow:0 0 0 1px #fff,0 0 0 3px #2276fc;box-shadow:0 0 0 1px #fff,0 0 0 3px #2276fc}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j):focus[data-tone=navbar]>.DefaultButton_inner_Dhde5{-webkit-box-shadow:0 0 0 1px #121923,0 0 0 3px #2276fc;box-shadow:0 0 0 1px #121923,0 0 0 3px #2276fc}@media (hover:hover){.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j):hover>.DefaultButton_inner_Dhde5{background-color:#6b7f9e}}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j):active>.DefaultButton_inner_Dhde5{background-color:#5f7291}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar])>.DefaultButton_inner_Dhde5{background-color:transparent;color:#5f7291}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]) .DefaultButton_spinner_20Jg6{background-color:hsla(0,0%,100%,.8)}@media (hover:hover){.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]):hover>.DefaultButton_inner_Dhde5{background-color:rgba(123,140,168,.1);color:#4b5a72}}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]):active>.DefaultButton_inner_Dhde5{background-color:rgba(123,140,168,.2)}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]).DefaultButton_selected_3Zs27>.DefaultButton_inner_Dhde5{background-color:rgba(34,118,252,.15);color:#2276fc}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6[data-tone=navbar]>.DefaultButton_inner_Dhde5{background-color:transparent;color:#b8babd}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6[data-tone=navbar] .DefaultButton_spinner_20Jg6{background-color:hsla(0,0%,100%,.8)}@media (hover:hover){.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6[data-tone=navbar]:hover>.DefaultButton_inner_Dhde5{background-color:rgba(123,140,168,.1);color:#b8c1d1}}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6[data-tone=navbar]:active>.DefaultButton_inner_Dhde5{background-color:rgba(123,140,168,.2)}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6[data-tone=navbar].DefaultButton_selected_3Zs27>.DefaultButton_inner_Dhde5{background-color:rgba(34,118,252,.2);color:#6da4fd}.DefaultButton_root_i03nr.DefaultButton_inverted_2nFwE:not(.DefaultButton_disabled_34S1j):not(:focus):not(:hover):not(:active)>.DefaultButton_inner_Dhde5{color:#7b8ca8;border-color:rgba(123,140,168,.35);background-color:transparent}.DefaultButton_root_i03nr.DefaultButton_inverted_2nFwE:not(.DefaultButton_disabled_34S1j):not(:focus):not(:hover):not(:active) .DefaultButton_spinner_20Jg6{background-color:hsla(0,0%,100%,.8)}.DefaultButton_root_i03nr.DefaultButton_inverted_2nFwE:not(.DefaultButton_disabled_34S1j):not(:focus):not(:hover):not(:active).DefaultButton_selected_3Zs27>.DefaultButton_inner_Dhde5{background-color:rgba(123,140,168,.2)}.DefaultButton_root_i03nr.DefaultButton_disabled_34S1j>.DefaultButton_inner_Dhde5{background-color:#e5e8ee;color:#7b8ca8}.DefaultButton_root_i03nr.DefaultButton_disabled_34S1j.DefaultButton_simple_Pa4y6>.DefaultButton_inner_Dhde5{background-color:transparent;color:#7b8ca8}.DefaultButton_root_i03nr.DefaultButton_loading_3Mglt>.DefaultButton_inner_Dhde5{overflow:hidden}.DefaultButton_root_i03nr.DefaultButton_size__extra-small_1OvbI{font-size:10px;font-size:.625rem;line-height:1.2}.DefaultButton_root_i03nr.DefaultButton_size__small_338Ah{font-size:13px;font-size:.8125rem;line-height:1.23077}.DefaultButton_root_i03nr.DefaultButton_size__large_1vPIq{font-size:18px;font-size:1.125rem;line-height:1.33333}.DefaultButton_root_i03nr.DefaultButton_size__extra-large_1Mdnw{font-size:21px;font-size:1.3125rem;line-height:1.33333}.DefaultButton_inner_Dhde5{outline:none;display:-webkit-box;display:-ms-flexbox;display:flex;justify-self:stretch;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:-webkit-fill-available;width:-moz-available;width:stretch;position:relative}.DefaultButton_groupContainer_3IHCX .DefaultButton_root_i03nr:not(:last-child):not(:first-child){border-radius:0}.DefaultButton_groupContainer_3IHCX .DefaultButton_root_i03nr:not(:last-child){border-right:1px solid rgba(228,232,237,.3)}.DefaultButton_groupContainer_3IHCX .DefaultButton_inverted_2nFwE:not(:last-child){border-right:none}.DefaultButton_groupContainer_3IHCX .DefaultButton_inverted_2nFwE:not(:last-child):hover{border-right:1px solid}.DefaultButton_groupContainer_3IHCX .DefaultButton_inverted_2nFwE:not(:last-child):hover+.DefaultButton_inverted_2nFwE{border-left:none}.DefaultButton_groupContainer_3IHCX .DefaultButton_root_i03nr:first-child:not(:last-child){border-radius:4px 0 0 4px}.DefaultButton_groupContainer_3IHCX .DefaultButton_root_i03nr:last-child:not(:first-child){border-radius:0 4px 4px 0}.DefaultButton_groupContainer_3IHCX .DefaultButton_root_i03nr+.DefaultButton_root_i03nr{margin:0}.DefaultButton_icon_2yss-{position:relative;font-size:17px;font-size:1.0625rem;line-height:1;min-width:16px;min-width:1rem}.DefaultButton_icon_2yss->svg{display:block}.DefaultButton_icon_2yss->svg[data-sanity-icon=true]{font-size:25px;font-size:1.5625rem;margin:-.25rem}.DefaultButton_iconStatus_1Tq4F{position:absolute;top:-1px;right:-1px;width:6px;height:6px;border-radius:3px;-webkit-box-shadow:0 0 0 1px #7b8ca8;box-shadow:0 0 0 1px #7b8ca8}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j)[data-icon-status=primary] .DefaultButton_iconStatus_1Tq4F{background:#2276fc}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j)[data-icon-status=danger] .DefaultButton_iconStatus_1Tq4F,.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j)[data-icon-status=success] .DefaultButton_iconStatus_1Tq4F,.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j)[data-icon-status=warning] .DefaultButton_iconStatus_1Tq4F{background:#3ab667}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6 .DefaultButton_iconStatus_1Tq4F{-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6[data-tone=navbar] .DefaultButton_iconStatus_1Tq4F{-webkit-box-shadow:0 0 0 1px #121923;box-shadow:0 0 0 1px #121923}.DefaultButton_root_i03nr:not(.DefaultButton_disabled_34S1j):hover .DefaultButton_iconStatus_1Tq4F{-webkit-box-shadow:0 0 0 1px #6b7f9e;box-shadow:0 0 0 1px #6b7f9e}.DefaultButton_text_1bhQ0{margin:-2px 0 -1px}.DefaultButton_icon_2yss-+.DefaultButton_text_1bhQ0{margin-left:.5em}.DefaultButton_content_Oa3aH{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:-webkit-fill-available;width:-moz-available;width:stretch}.DefaultButton_padding_small_1DBGl .DefaultButton_content_Oa3aH{padding:calc(.5em - 1px)}.DefaultButton_padding_medium_1plSb .DefaultButton_content_Oa3aH{padding:calc(.75em - 1px)}.DefaultButton_padding_large_3VnWf .DefaultButton_content_Oa3aH{padding:calc(1em - 1px)}.DefaultButton_color__primary_2H71y:not(.DefaultButton_disabled_34S1j)>.DefaultButton_inner_Dhde5{border-color:transparent;background-color:#2276fc;color:#fff}.DefaultButton_color__primary_2H71y:not(.DefaultButton_disabled_34S1j) .DefaultButton_spinner_20Jg6{background-color:rgba(34,118,252,.8)}@media (hover:hover){.DefaultButton_color__primary_2H71y:not(.DefaultButton_disabled_34S1j):hover>.DefaultButton_inner_Dhde5{background-color:#0966fb}}.DefaultButton_color__primary_2H71y:not(.DefaultButton_disabled_34S1j):active>.DefaultButton_inner_Dhde5{background-color:#045be7}.DefaultButton_color__primary_2H71y:not(.DefaultButton_disabled_34S1j).DefaultButton_inverted_2nFwE:not(:focus):not(:hover):not(:active)>.DefaultButton_inner_Dhde5{border-color:rgba(34,118,252,.5);background-color:transparent;color:#2276fc}.DefaultButton_color__primary_2H71y:not(.DefaultButton_disabled_34S1j).DefaultButton_inverted_2nFwE:not(:focus):not(:hover):not(:active) .DefaultButton_spinner_20Jg6{background-color:hsla(0,0%,100%,.8)}.DefaultButton_color__primary_2H71y:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar])>.DefaultButton_inner_Dhde5{background-color:transparent;color:#0347b5}@media (hover:hover){.DefaultButton_color__primary_2H71y:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]):hover>.DefaultButton_inner_Dhde5{background-color:rgba(34,118,252,.1);color:#0347b5}}.DefaultButton_color__primary_2H71y:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]):active>.DefaultButton_inner_Dhde5{background-color:rgba(34,118,252,.2)}.DefaultButton_color__primary_2H71y:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]).DefaultButton_selected_3Zs27>.DefaultButton_inner_Dhde5{background-color:rgba(34,118,252,.15);color:#0966fb}.DefaultButton_color__success_2jvXj:not(.DefaultButton_disabled_34S1j)>.DefaultButton_inner_Dhde5{border-color:transparent;background-color:#3ab667;color:#fff}.DefaultButton_color__success_2jvXj:not(.DefaultButton_disabled_34S1j) .DefaultButton_spinner_20Jg6{background-color:rgba(58,182,103,.8)}@media (hover:hover){.DefaultButton_color__success_2jvXj:not(.DefaultButton_disabled_34S1j):hover>.DefaultButton_inner_Dhde5{background-color:#33a35c}}.DefaultButton_color__success_2jvXj:not(.DefaultButton_disabled_34S1j):active>.DefaultButton_inner_Dhde5{background-color:#2d8f51}.DefaultButton_color__success_2jvXj:not(.DefaultButton_disabled_34S1j).DefaultButton_inverted_2nFwE:not(:focus):not(:hover):not(:active)>.DefaultButton_inner_Dhde5{border-color:rgba(58,182,103,.5);background-color:transparent;color:#3ab667}.DefaultButton_color__success_2jvXj:not(.DefaultButton_disabled_34S1j).DefaultButton_inverted_2nFwE:not(:focus):not(:hover):not(:active) .DefaultButton_spinner_20Jg6{background-color:hsla(0,0%,100%,.8)}.DefaultButton_color__success_2jvXj:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar])>.DefaultButton_inner_Dhde5{background-color:transparent;color:#21693b}@media (hover:hover){.DefaultButton_color__success_2jvXj:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]):hover>.DefaultButton_inner_Dhde5{background-color:rgba(58,182,103,.1);color:#21693b}}.DefaultButton_color__success_2jvXj:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]):active>.DefaultButton_inner_Dhde5{background-color:rgba(58,182,103,.2)}.DefaultButton_color__success_2jvXj:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]).DefaultButton_selected_3Zs27>.DefaultButton_inner_Dhde5{background-color:rgba(58,182,103,.15);color:#33a35c}.DefaultButton_color__warning_25m2n:not(.DefaultButton_disabled_34S1j)>.DefaultButton_inner_Dhde5{border-color:transparent;background-color:#b89b23;color:#fff}.DefaultButton_color__warning_25m2n:not(.DefaultButton_disabled_34S1j) .DefaultButton_spinner_20Jg6{background-color:rgba(184,155,35,.8)}@media (hover:hover){.DefaultButton_color__warning_25m2n:not(.DefaultButton_disabled_34S1j):hover>.DefaultButton_inner_Dhde5{background-color:#a3881f}}.DefaultButton_color__warning_25m2n:not(.DefaultButton_disabled_34S1j):active>.DefaultButton_inner_Dhde5{background-color:#8d761b}.DefaultButton_color__warning_25m2n:not(.DefaultButton_disabled_34S1j).DefaultButton_inverted_2nFwE:not(:focus):not(:hover):not(:active)>.DefaultButton_inner_Dhde5{border-color:rgba(184,155,35,.5);background-color:transparent;color:#b89b23}.DefaultButton_color__warning_25m2n:not(.DefaultButton_disabled_34S1j).DefaultButton_inverted_2nFwE:not(:focus):not(:hover):not(:active) .DefaultButton_spinner_20Jg6{background-color:hsla(0,0%,100%,.8)}.DefaultButton_color__warning_25m2n:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar])>.DefaultButton_inner_Dhde5{background-color:transparent;color:#635313}@media (hover:hover){.DefaultButton_color__warning_25m2n:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]):hover>.DefaultButton_inner_Dhde5{background-color:rgba(184,155,35,.1);color:#635313}}.DefaultButton_color__warning_25m2n:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]):active>.DefaultButton_inner_Dhde5{background-color:rgba(184,155,35,.2)}.DefaultButton_color__warning_25m2n:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]).DefaultButton_selected_3Zs27>.DefaultButton_inner_Dhde5{background-color:rgba(184,155,35,.15);color:#a3881f}.DefaultButton_color__danger_2CSHt:not(.DefaultButton_disabled_34S1j)>.DefaultButton_inner_Dhde5{border-color:transparent;background-color:#f03e2f;color:#fff}.DefaultButton_color__danger_2CSHt:not(.DefaultButton_disabled_34S1j) .DefaultButton_spinner_20Jg6{background-color:rgba(240,62,47,.8)}@media (hover:hover){.DefaultButton_color__danger_2CSHt:not(.DefaultButton_disabled_34S1j):hover>.DefaultButton_inner_Dhde5{background-color:#ef2715}}.DefaultButton_color__danger_2CSHt:not(.DefaultButton_disabled_34S1j):active>.DefaultButton_inner_Dhde5{background-color:#db200f}.DefaultButton_color__danger_2CSHt:not(.DefaultButton_disabled_34S1j).DefaultButton_inverted_2nFwE:not(:focus):not(:hover):not(:active)>.DefaultButton_inner_Dhde5{border-color:rgba(240,62,47,.5);background-color:transparent;color:#f03e2f}.DefaultButton_color__danger_2CSHt:not(.DefaultButton_disabled_34S1j).DefaultButton_inverted_2nFwE:not(:focus):not(:hover):not(:active) .DefaultButton_spinner_20Jg6{background-color:hsla(0,0%,100%,.8)}.DefaultButton_color__danger_2CSHt:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar])>.DefaultButton_inner_Dhde5{background-color:transparent;color:#db200f}@media (hover:hover){.DefaultButton_color__danger_2CSHt:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]):hover>.DefaultButton_inner_Dhde5{background-color:rgba(240,62,47,.1);color:#ac190c}}.DefaultButton_color__danger_2CSHt:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]):active>.DefaultButton_inner_Dhde5{background-color:rgba(240,62,47,.2)}.DefaultButton_color__danger_2CSHt:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:not([data-tone=navbar]).DefaultButton_selected_3Zs27>.DefaultButton_inner_Dhde5{background-color:rgba(240,62,47,.15);color:#ef2715}.DefaultButton_color__white_1X5he.DefaultButton_disabled_34S1j>.DefaultButton_inner_Dhde5{background-color:transparent;color:rgba(123,140,168,.2)}.DefaultButton_color__white_1X5he:not(.DefaultButton_disabled_34S1j)>.DefaultButton_inner_Dhde5{background-color:#fff;color:#7b8ca8}.DefaultButton_color__white_1X5he:not(.DefaultButton_disabled_34S1j) .DefaultButton_spinner_20Jg6{background-color:hsla(0,0%,100%,.8)}@media (hover:hover){.DefaultButton_color__white_1X5he:not(.DefaultButton_disabled_34S1j):hover>.DefaultButton_inner_Dhde5{background-color:#f2f2f2;color:#4b5a72}}.DefaultButton_color__white_1X5he:not(.DefaultButton_disabled_34S1j):active>.DefaultButton_inner_Dhde5{background-color:#e6e6e6;color:#4b5a72}.DefaultButton_color__white_1X5he:not(.DefaultButton_disabled_34S1j).DefaultButton_inverted_2nFwE:not(:focus):not(:hover):not(:active) .DefaultButton_spinner_20Jg6,.DefaultButton_color__white_1X5he:not(.DefaultButton_disabled_34S1j).DefaultButton_inverted_2nFwE:not(:focus):not(:hover):not(:active)>.DefaultButton_inner_Dhde5{color:#fff}@media (hover:hover){.DefaultButton_color__white_1X5he:not(.DefaultButton_disabled_34S1j).DefaultButton_inverted_2nFwE:not(:focus):not(:hover):not(:active):hover>.DefaultButton_inner_Dhde5{background-color:hsla(0,0%,100%,.1)}}.DefaultButton_color__white_1X5he:not(.DefaultButton_disabled_34S1j).DefaultButton_inverted_2nFwE:not(:focus):not(:hover):not(:active):active>.DefaultButton_inner_Dhde5{background-color:hsla(0,0%,100%,.2)}.DefaultButton_color__white_1X5he:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6>.DefaultButton_inner_Dhde5{background-color:transparent;color:#fff}@media (hover:hover){.DefaultButton_color__white_1X5he:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:hover>.DefaultButton_inner_Dhde5{background-color:hsla(0,0%,100%,.1);color:#fff}}.DefaultButton_color__white_1X5he:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6.DefaultButton_selected_3Zs27>.DefaultButton_inner_Dhde5,.DefaultButton_color__white_1X5he:not(.DefaultButton_disabled_34S1j).DefaultButton_simple_Pa4y6:active>.DefaultButton_inner_Dhde5{background-color:hsla(0,0%,100%,.2);color:#fff}.DefaultButton_color__white_1X5he:not(.DefaultButton_disabled_34S1j).DefaultButton_inverted_2nFwE:not(.DefaultButton_disabled_34S1j):not(:focus):not(:hover):not(:active)>.DefaultButton_inner_Dhde5{border-color:hsla(0,0%,100%,.1)}.DefaultButton_spinner_20Jg6{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;line-height:0}.DefaultButton_spinner_20Jg6>*{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:inherit}.positioning_absoluteCenter_2ncjL{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center}.positioning_center-both_CGfPc{height:100%;width:100%}.positioning_flexCenter_1X-kj{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;width:100%}@media (min-width:512px){.scrolling_lightScrollbars_35rBs::-webkit-scrollbar{background-color:transparent;width:.25rem}.scrolling_lightScrollbars_35rBs::-webkit-scrollbar *{background:transparent}.scrolling_lightScrollbars_35rBs::-webkit-scrollbar-thumb:window-inactive{opacity:0}.scrolling_lightScrollbars_35rBs:hover::-webkit-scrollbar{width:.25rem}.scrolling_lightScrollbars_35rBs:hover::-webkit-scrollbar-thumb{background-color:#7b8ca8;border-radius:.125rem;border:2px solid rgba(18,25,35,.02)}.scrolling_lightScrollbars_35rBs:hover::-webkit-scrollbar-track{padding:2px;width:.25rem;background-color:transparent}.scrolling_lightScrollbars_35rBs::-webkit-scrollbar-thumb{background-color:transparent}.scrolling_lightScrollbars_35rBs::-webkit-scrollbar-thumb:hover{background-color:#121923}}.scrolling_thinLightScrollbars_1dp0Z::-webkit-scrollbar{width:3px}@media (min-width:512px){.scrolling_thinLightScrollbars_1dp0Z::-webkit-scrollbar{width:3px}}.scrolling_thinLightScrollbars_1dp0Z:hover::-webkit-scrollbar{width:3px}@media (min-width:512px){.scrolling_thinLightScrollbars_1dp0Z:hover::-webkit-scrollbar{width:3px}}.scrolling_hideScrollbars_2Gjdt{-ms-overflow-style:-ms-autohiding-scrollbar;overflow-style:overflow}.scrolling_touchScroll_3KYot{-webkit-overflow-scrolling:touch}.scrolling_scrollAll_1TAtc{overflow:auto}.scrolling_scrollX_K4MDJ{overflow-y:hidden;overflow-x:auto}.scrolling_scrollY_1Ov6i{overflow-y:auto;overflow-x:hidden}@-webkit-keyframes DefaultDialog_reveal_31qMf{0%{-webkit-transform:scale(.9);transform:scale(.9)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes DefaultDialog_reveal_31qMf{0%{-webkit-transform:scale(.9);transform:scale(.9)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes DefaultDialog_fadeIn_1HkWB{0%{opacity:0}to{opacity:1}}@keyframes DefaultDialog_fadeIn_1HkWB{0%{opacity:0}to{opacity:1}}.DefaultDialog_root_XGkzf{position:absolute;top:0;left:0;right:0;bottom:0;outline:none}@media (max-width:511px){.DefaultDialog_root_XGkzf{position:fixed}}.DefaultDialog_overlay_Ktmw4{-webkit-animation-name:DefaultDialog_fadeIn_1HkWB;animation-name:DefaultDialog_fadeIn_1HkWB;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:cubic-bezier(0,0,0,1);animation-timing-function:cubic-bezier(0,0,0,1);-webkit-animation-iteration-count:once;animation-iteration-count:once;top:0;left:0;bottom:0;width:100%;height:100%;position:absolute;pointer-events:none}.DefaultDialog_card_1PAns{position:relative;border-radius:4px;-webkit-animation-name:DefaultDialog_reveal_31qMf;animation-name:DefaultDialog_reveal_31qMf;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:cubic-bezier(0,0,0,1);animation-timing-function:cubic-bezier(0,0,0,1);-webkit-animation-iteration-count:once;animation-iteration-count:once;-webkit-transform-origin:center;transform-origin:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:calc(100% - 2rem);min-height:0;max-height:calc(100% - 2rem);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;@nest .root:not([data-dialog-size]){width:auto;height:auto}}.DefaultDialog_root_XGkzf[data-dialog-size=small][data-container-min~=medium] .DefaultDialog_card_1PAns{max-width:320px;max-width:20rem}.DefaultDialog_root_XGkzf[data-dialog-size=medium][data-container-min~=medium] .DefaultDialog_card_1PAns{width:432px;width:27rem}.DefaultDialog_root_XGkzf[data-dialog-size=medium][data-container-min~=default] .DefaultDialog_card_1PAns{width:528px;width:33rem}.DefaultDialog_root_XGkzf[data-dialog-size=medium][data-container-min~=large] .DefaultDialog_card_1PAns{width:560px;width:35rem}.DefaultDialog_root_XGkzf[data-dialog-size=large][data-container-min~=medium] .DefaultDialog_card_1PAns{width:448px;width:28rem}.DefaultDialog_root_XGkzf[data-dialog-size=large][data-container-min~=default] .DefaultDialog_card_1PAns{width:640px;width:40rem}.DefaultDialog_root_XGkzf[data-dialog-size=large][data-container-min~=large] .DefaultDialog_card_1PAns{width:800px;width:50rem}.DefaultDialog_isClosed_1EFd9{display:none}.DefaultDialog_isOpen_2j-9S{display:-webkit-box;display:-ms-flexbox;display:flex}.DefaultDialog_header_3EbfE{position:relative;background-color:#fff;color:#262f3d;border-radius:4px 4px 0 0;padding:1rem;z-index:10;line-height:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0}.DefaultDialog_header_3EbfE:after{content:"";display:block;position:absolute;left:0;right:0;bottom:-1px;border-bottom:1px solid rgba(123,140,168,.25);pointer-events:none}.DefaultDialog_root_XGkzf[data-dialog-color=success] .DefaultDialog_header_3EbfE{background-color:#3ab667;color:#fff}.DefaultDialog_root_XGkzf[data-dialog-color=warning] .DefaultDialog_header_3EbfE{background-color:#b89b23;color:#fff}.DefaultDialog_root_XGkzf[data-dialog-color=danger] .DefaultDialog_header_3EbfE{background-color:#f03e2f;color:#fff}.DefaultDialog_inner_324vZ{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.DefaultDialog_content_dgxes{position:relative;border-radius:4px 4px 0 0;background-color:#fff;color:#262f3d;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0;max-height:100%}.DefaultDialog_header_3EbfE+.DefaultDialog_content_dgxes{border-top-left-radius:0!important;border-top-right-radius:0!important}.DefaultDialog_contentWithoutFooter_u7P7k{border-radius:4px}.DefaultDialog_root_XGkzf[data-dialog-padding=small] .DefaultDialog_contentWrapper_38jtY{padding:1rem .5rem}.DefaultDialog_root_XGkzf[data-dialog-padding=medium] .DefaultDialog_contentWrapper_38jtY{padding:1.5rem 1rem}.DefaultDialog_root_XGkzf[data-dialog-padding=large] .DefaultDialog_contentWrapper_38jtY{padding:2rem 1.5rem}.DefaultDialog_title_13bX8{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.DefaultDialog_title_13bX8>h1{font-size:16px;font-size:1rem;line-height:1.25;font-weight:700;margin:-2px 0 -1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.DefaultDialog_closeButtonContainer_2AHS6{margin-left:1rem}.DefaultDialog_header_3EbfE .DefaultDialog_closeButton_qvrcZ{margin:-.5rem}.DefaultDialog_floatingCloseButtonContainer_1Oaou{position:absolute;border:0;top:0;right:0;z-index:1;background-color:#fff;color:#262f3d;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);border-radius:50%}.DefaultDialog_floatingCloseButtonContainer_1Oaou>button>span{border-radius:50%!important}.DefaultDialog_footer_3Oc_Q{-webkit-box-sizing:border-box;box-sizing:border-box;padding:1rem;background-color:#fff;color:#262f3d;border-radius:0 0 4px 4px;position:relative;z-index:10;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0}.DefaultDialog_footer_3Oc_Q:before{content:"";position:absolute;display:block;left:0;top:-1px;right:0;border-top:1px solid rgba(123,140,168,.25);pointer-events:none}.ButtonGrid_root_2aJXw{width:100%;display:grid;grid-gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr))}.ButtonGrid_root_2aJXw[data-buttons="1"]{display:block;grid-template-columns:unset}@media (max-width:520px){.ButtonGrid_root_2aJXw[data-buttons="4"]{grid-template-columns:1fr 1fr}}.ButtonGrid_root_2aJXw>*{min-width:96px;min-width:6rem}.ButtonGrid_root_2aJXw:not([data-buttons="1"])>*{margin:0!important;width:-webkit-fill-available;width:-moz-available;width:stretch;display:-webkit-box;display:-ms-flexbox;display:flex}.ButtonGrid_alignStart_2hgK0{direction:ltr}.ButtonGrid_alignEnd_1vpEW{direction:rtl}.ButtonGrid_root_2aJXw>*{direction:ltr}.ButtonGrid_small_1q2-i{font-size:13px;font-size:.8125rem}.ButtonGrid_secondary_mCf3g{display:contents}.ButtonGrid_secondary_mCf3g:not([data-buttons="1"])>*{margin:0!important;width:-webkit-fill-available;width:-moz-available;width:stretch}@media (min-width:512px){.ButtonGrid_secondary_mCf3g{display:-webkit-box;display:-ms-flexbox;display:flex;grid-column:span 1/-1}}.popoverArrow_root_1iFqA{position:absolute;pointer-events:none;width:27px;height:27px;fill:none}:empty+.popoverArrow_root_1iFqA{display:none}.popoverArrow_root_1iFqA>svg{display:block;-webkit-transform-origin:13.5px 13.5px;transform-origin:13.5px 13.5px}[data-popper-placement^=top]>.popoverArrow_root_1iFqA{bottom:-27px}[data-popper-placement^=right]>.popoverArrow_root_1iFqA{left:-27px}[data-popper-placement^=right]>.popoverArrow_root_1iFqA>svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}[data-popper-placement^=left]>.popoverArrow_root_1iFqA{right:-27px}[data-popper-placement^=left]>.popoverArrow_root_1iFqA>svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}[data-popper-placement^=bottom]>.popoverArrow_root_1iFqA{top:-27px}[data-popper-placement^=bottom]>.popoverArrow_root_1iFqA>svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.popoverArrow_border_2u3Qk{fill:rgba(123,140,168,.25)}.popoverArrow_shape_KMMUg{fill:#fff}.popover_root_1WVUH{pointer-events:all;display:-webkit-box;display:-ms-flexbox;display:flex}.popover_card_3ZfZr{background:#fff;color:#262f3d;border-radius:4px;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.popover_card_3ZfZr:empty{display:none}.DropDownButton_root_erx2S{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.DropDownButton_buttonContainer_3fpGo{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:-webkit-fill-available;width:-moz-available;width:stretch}.DropDownButton_button_3dvbO{width:-webkit-fill-available;width:-moz-available;width:stretch}.DropDownButton_inner_1ZTW_{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;outline:none}.DropDownButton_label_2C0oc{display:block}.DropDownButton_iconContainer_3rIJ-{height:17px;line-height:0;margin:2px 0 1px}.DropDownButton_iconContainer_3rIJ->svg{display:block;font-size:1.0625em}.DropDownButton_iconContainer_3rIJ->svg[data-sanity-icon=true]{font-size:1.5625em;margin:-.16em}.DropDownButton_label_2C0oc+.DropDownButton_iconContainer_3rIJ-{margin-left:.5rem}.DropDownButton_menu_NcQwQ{display:block;padding:.25rem 0!important;max-height:calc(50vh - 6em);overflow:auto}.DropDownButton_menuItem_2D57L{white-space:pre}.DropDownButton_menuItem__inner_1ZYjZ{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.75rem 1rem}.DropDownButton_menuItem__inner_1ZYjZ[data-color=danger]{color:#f03e2f}.DropDownButton_menuItem__iconContainer_1sovn{height:17px}.DropDownButton_menuItem__iconContainer_1sovn>svg{font-size:1.0625em}.DropDownButton_menuItem__iconContainer_1sovn>svg[data-sanity-icon=true]{font-size:1.5625em;margin:-.16em}.DropDownButton_menuItem__label_1lsEn{margin:-2px 0 -1px}.DropDownButton_menuItem__iconContainer_1sovn+.DropDownButton_menuItem__label_1lsEn{margin-left:.5rem}.StyleSelect_root_LiUnI{display:block;outline:none;position:relative}.StyleSelect_button_3vDd0{-webkit-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;background:none;color:#7b8ca8;cursor:default;margin:0;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:left;outline:none;border:1px solid transparent;border-radius:4px}.StyleSelect_root_LiUnI:not(.StyleSelect_transparent_3xaas) .StyleSelect_button_3vDd0{border-color:rgba(123,140,168,.25)}.StyleSelect_button_3vDd0[disabled]{color:#cad1dc}@media (hover:hover){.StyleSelect_root_LiUnI.StyleSelect_transparent_3xaas:hover .StyleSelect_button_3vDd0:not([disabled]){background-color:rgba(123,140,168,.1);color:#4b5a72}.StyleSelect_button_3vDd0:not([disabled]):focus{-webkit-box-shadow:0 0 0 1px #2276fc;box-shadow:0 0 0 1px #2276fc;border-color:#2276fc}}.StyleSelect_padding_large_3z8TG .StyleSelect_button_3vDd0{padding:calc(1em - 1px)}.StyleSelect_padding_default_3aGn5 .StyleSelect_button_3vDd0{padding:calc(.75em - 1px)}.StyleSelect_padding_small_3GX0- .StyleSelect_button_3vDd0{padding:calc(.5em - 1px)}.StyleSelect_title_1oWgq{color:inherit;margin:-2px 0 -1px}.StyleSelect_buttonInner_1xDgr{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.StyleSelect_arrow_2W_6B{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:1rem;margin-left:auto}.StyleSelect_arrow_2W_6B svg{display:block;font-size:1.5625em;margin:-.16em}.StyleSelect_popper_2nKjJ{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#fff;position:relative;max-height:inherit;overflow:auto}.StyleSelect_list_22dAe{margin:0}.StyleSelect_list_22dAe>li{padding:.25rem 0}.StyleSelect_list_22dAe>li+li{border-top:1px solid rgba(123,140,168,.25)}.StyleSelect_item_214wV{position:relative;overflow:hidden;min-height:2em;cursor:default;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.StyleSelect_itemContent_3Ty0c{white-space:nowrap;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;padding:0 .5rem}.StyleSelect_itemIcon_3CcFg{padding:.5rem;display:block;width:1.0625em}.StyleSelect_itemIcon_3CcFg svg{display:block;font-size:1.0625em}.StyleSelect_itemIcon_3CcFg svg[data-sanity-icon=true]{font-size:1.5625em;margin:-.16em}.StyleSelect_disabled_C69Df{opacity:.2}.Poppable_layer_10G75{pointer-events:none}.Poppable_root_29Aaj{pointer-events:all}.FullscreenDialog_root_2-SH4{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(123,140,168,.15);color:#262f3d;padding:1.5rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (max-width:511px){.FullscreenDialog_root_2-SH4{position:fixed}}.FullscreenDialog_card_cCkRd{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;max-height:100%;background:#fff;border-radius:4px;width:100%;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.FullscreenDialog_header_3QP0l{border-bottom:1px solid rgba(123,140,168,.25);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem}.FullscreenDialog_title_2Jwgb{font-size:16px;font-size:1rem;line-height:1.25;font-weight:700;padding:.5rem;margin:-2px 0 -1px;-webkit-box-flex:1;-ms-flex:1;flex:1}.FullscreenDialog_actions_1ClS5{margin-left:1em}.FullscreenDialog_content_33jhF{-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0;overflow:auto;padding:1rem}.FullscreenDialog_content_33jhF>:first-child{margin-top:0}.FullscreenDialog_content_33jhF>:last-child{margin-bottom:0}.FullscreenDialog_actionsWrapper_3KKeP{border-top:1px solid rgba(123,140,168,.25);padding:1rem}.FullscreenDialog_closeButton_32zL2{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;display:block;font:inherit;border:none;color:inherit;outline:none;padding:0;lmargin:0;cursor:pointer}.FullscreenDialog_closeButton_32zL2>svg{display:block}.FullscreenDialog_default_wQ7Ll .FullscreenDialog_closeButton_32zL2{color:#7b8ca8}.FullscreenDialog_default_wQ7Ll .FullscreenDialog_closeButton_32zL2:hover{color:inherit}.tooltipArrow_root_qVP7M{position:absolute;width:15px;height:15px;fill:none}:empty+.tooltipArrow_root_qVP7M{display:none}.tooltipArrow_root_qVP7M>svg{display:block;-webkit-transform-origin:7.5px 7.5px;transform-origin:7.5px 7.5px}[data-popper-placement^=top]>.tooltipArrow_root_qVP7M{bottom:-15px}[data-popper-placement^=right]>.tooltipArrow_root_qVP7M{left:-15px}[data-popper-placement^=right]>.tooltipArrow_root_qVP7M>svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}[data-popper-placement^=left]>.tooltipArrow_root_qVP7M{right:-15px}[data-popper-placement^=left]>.tooltipArrow_root_qVP7M>svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}[data-popper-placement^=bottom]>.tooltipArrow_root_qVP7M{top:-15px}[data-popper-placement^=bottom]>.tooltipArrow_root_qVP7M>svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tooltipArrow_border_2TCTQ{fill:rgba(123,140,168,.25)}.tooltipArrow_shape_G3i9n{fill:#fff}.tooltipArrow_root_qVP7M[data-tone=navbar] .tooltipArrow_shape_G3i9n{fill:#121923}.tooltip_root_qfkcD{pointer-events:none}.tooltip_card_3OPQf{background:#fff;color:#262f3d;border-radius:4px}[data-tone=navbar]>.tooltip_card_3OPQf{background:#121923;color:#fff}.tooltip_card_3OPQf:empty{display:none}.ValidationListItem_root_bzNOo{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;color:inherit;padding:1rem;line-height:0}.ValidationListItem_root_bzNOo.ValidationListItem_kind_simple_2zyjf{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:unset;padding:.25rem 1rem;border:0}.ValidationListItem_root_bzNOo.ValidationListItem_error_3sl_Z .ValidationListItem_icon__wtr8{color:#f03e2f}.ValidationListItem_root_bzNOo.ValidationListItem_warning_ro98N .ValidationListItem_icon__wtr8{color:#b89b23}.ValidationListItem_interactive_IzeuF{cursor:pointer}.ValidationListItem_interactive_IzeuF.ValidationListItem_error_3sl_Z:not(.ValidationListItem_kind_simple_2zyjf):focus,.ValidationListItem_interactive_IzeuF.ValidationListItem_error_3sl_Z:not(.ValidationListItem_kind_simple_2zyjf):hover{background-color:rgba(240,62,47,.1)}.ValidationListItem_interactive_IzeuF.ValidationListItem_warning_ro98N:not(.ValidationListItem_kind_simple_2zyjf):focus,.ValidationListItem_interactive_IzeuF.ValidationListItem_warning_ro98N:not(.ValidationListItem_kind_simple_2zyjf):hover{background-color:rgba(184,155,35,.1)}.ValidationListItem_icon__wtr8{display:block;margin:-3px 0 -3px -3px}.ValidationListItem_icon__wtr8>svg{font-size:1.0625em}.ValidationListItem_icon__wtr8>svg[data-sanity-icon=true]{font-size:1.5625em;margin:-4px}.ValidationListItem_content_380IB{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-width:0;padding-left:.5rem;margin:-3px 0 -2px}.ValidationListItem_path_2VeUU{font-size:13px;font-size:.8125rem;line-height:1.23077;font-weight:600}.ValidationListItem_message_2_2tL{color:#3c4758;font-size:13px;font-size:.8125rem;line-height:1.23077}.ValidationListItem_path_2VeUU+.ValidationListItem_message_2_2tL{margin-top:.125rem}.ValidationListItem_truncate_GjZfc .ValidationListItem_message_2_2tL{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ValidationList_root_xyJUR{max-width:250px;max-height:60vh;overflow:auto;list-style:none;margin:0;padding:0}.ValidationList_root_xyJUR[data-kind=simple]{max-width:220px;padding:.5rem .5rem .5rem 0}.ValidationList_item_-ZeIS{padding:.25rem 0}.ValidationList_root_xyJUR:not([data-kind=simple])>.ValidationList_item_-ZeIS:not(:last-child){border-bottom:1px solid rgba(123,140,168,.25)}.ValidationStatus_root_2tMBW{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;outline:none;border-radius:2px}.ValidationStatus_root_2tMBW>svg{display:block;font-size:25px;font-size:1.5625rem;pointer-events:none}.ValidationStatus_root_2tMBW:focus-visible{-webkit-box-shadow:0 0 0 2px #2276fc;box-shadow:0 0 0 2px #2276fc}.ValidationStatus_root_2tMBW.ValidationStatus_error_28Ja-{color:#f03e2f}.ValidationStatus_root_2tMBW.ValidationStatus_warning_zhy6H{color:#b89b23}.ValidationStatus_tooltip_3x5B7{display:-webkit-box;display:-ms-flexbox;display:flex;padding:.5rem}.ValidationStatus_tooltipIcon_3-ZzI>svg{display:block;font-size:1.0625em}.ValidationStatus_tooltipIcon_3-ZzI>svg[data-sanity-icon=true]{font-size:1.5625em;margin:-.16em}.ValidationStatus_tooltipErrorIcon_3zGlY{color:#f03e2f}.ValidationStatus_tooltipWarningIcon_2rdjR{color:#b89b23}.ValidationStatus_tooltipText_1FTYa{color:#3c4758;font-size:13px;font-size:.8125rem;line-height:1.23077;font-weight:400;margin:0 0 1px;padding-left:.5rem}@-webkit-keyframes DefaultDialog_reveal_31qMf{0%{-webkit-transform:scale(.9);transform:scale(.9)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes DefaultDialog_reveal_31qMf{0%{-webkit-transform:scale(.9);transform:scale(.9)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes DefaultDialog_fadeIn_1HkWB{0%{opacity:0}to{opacity:1}}@keyframes DefaultDialog_fadeIn_1HkWB{0%{opacity:0}to{opacity:1}}.DefaultDialog_root_XGkzf{position:absolute;top:0;left:0;right:0;bottom:0;outline:none}@media (max-width:511px){.DefaultDialog_root_XGkzf{position:fixed}}.DefaultDialog_overlay_Ktmw4{-webkit-animation-name:DefaultDialog_fadeIn_1HkWB;animation-name:DefaultDialog_fadeIn_1HkWB;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:cubic-bezier(0,0,0,1);animation-timing-function:cubic-bezier(0,0,0,1);-webkit-animation-iteration-count:once;animation-iteration-count:once;top:0;left:0;bottom:0;width:100%;height:100%;position:absolute;pointer-events:none}.DefaultDialog_card_1PAns{position:relative;border-radius:4px;-webkit-animation-name:DefaultDialog_reveal_31qMf;animation-name:DefaultDialog_reveal_31qMf;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:cubic-bezier(0,0,0,1);animation-timing-function:cubic-bezier(0,0,0,1);-webkit-animation-iteration-count:once;animation-iteration-count:once;-webkit-transform-origin:center;transform-origin:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:calc(100% - 2rem);min-height:0;max-height:calc(100% - 2rem);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;@nest .root:not([data-dialog-size]){width:auto;height:auto}}.DefaultDialog_root_XGkzf[data-dialog-size=small][data-container-min~=medium] .DefaultDialog_card_1PAns{max-width:320px;max-width:20rem}.DefaultDialog_root_XGkzf[data-dialog-size=medium][data-container-min~=medium] .DefaultDialog_card_1PAns{width:432px;width:27rem}.DefaultDialog_root_XGkzf[data-dialog-size=medium][data-container-min~=default] .DefaultDialog_card_1PAns{width:528px;width:33rem}.DefaultDialog_root_XGkzf[data-dialog-size=medium][data-container-min~=large] .DefaultDialog_card_1PAns{width:560px;width:35rem}.DefaultDialog_root_XGkzf[data-dialog-size=large][data-container-min~=medium] .DefaultDialog_card_1PAns{width:448px;width:28rem}.DefaultDialog_root_XGkzf[data-dialog-size=large][data-container-min~=default] .DefaultDialog_card_1PAns{width:640px;width:40rem}.DefaultDialog_root_XGkzf[data-dialog-size=large][data-container-min~=large] .DefaultDialog_card_1PAns{width:800px;width:50rem}.DefaultDialog_isClosed_1EFd9{display:none}.DefaultDialog_isOpen_2j-9S{display:-webkit-box;display:-ms-flexbox;display:flex}.DefaultDialog_header_3EbfE{position:relative;background-color:#fff;color:#262f3d;border-radius:4px 4px 0 0;padding:1rem;z-index:10;line-height:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0}.DefaultDialog_header_3EbfE:after{content:"";display:block;position:absolute;left:0;right:0;bottom:-1px;border-bottom:1px solid rgba(123,140,168,.25);pointer-events:none}.DefaultDialog_root_XGkzf[data-dialog-color=success] .DefaultDialog_header_3EbfE{background-color:#3ab667;color:#fff}.DefaultDialog_root_XGkzf[data-dialog-color=warning] .DefaultDialog_header_3EbfE{background-color:#b89b23;color:#fff}.DefaultDialog_root_XGkzf[data-dialog-color=danger] .DefaultDialog_header_3EbfE{background-color:#f03e2f;color:#fff}.DefaultDialog_inner_324vZ{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.DefaultDialog_content_dgxes{position:relative;border-radius:4px 4px 0 0;background-color:#fff;color:#262f3d;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0;max-height:100%}.DefaultDialog_header_3EbfE+.DefaultDialog_content_dgxes{border-top-left-radius:0!important;border-top-right-radius:0!important}.DefaultDialog_contentWithoutFooter_u7P7k{border-radius:4px}.DefaultDialog_root_XGkzf[data-dialog-padding=small] .DefaultDialog_contentWrapper_38jtY{padding:1rem .5rem}.DefaultDialog_root_XGkzf[data-dialog-padding=medium] .DefaultDialog_contentWrapper_38jtY{padding:1.5rem 1rem}.DefaultDialog_root_XGkzf[data-dialog-padding=large] .DefaultDialog_contentWrapper_38jtY{padding:2rem 1.5rem}.DefaultDialog_title_13bX8{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.DefaultDialog_title_13bX8>h1{font-size:16px;font-size:1rem;line-height:1.25;font-weight:700;margin:-2px 0 -1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.DefaultDialog_closeButtonContainer_2AHS6{margin-left:1rem}.DefaultDialog_header_3EbfE .DefaultDialog_closeButton_qvrcZ{margin:-.5rem}.DefaultDialog_floatingCloseButtonContainer_1Oaou{position:absolute;border:0;top:0;right:0;z-index:1;background-color:#fff;color:#262f3d;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);border-radius:50%}.DefaultDialog_floatingCloseButtonContainer_1Oaou>button>span{border-radius:50%!important}.DefaultDialog_footer_3Oc_Q{-webkit-box-sizing:border-box;box-sizing:border-box;padding:1rem;background-color:#fff;color:#262f3d;border-radius:0 0 4px 4px;position:relative;z-index:10;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0}.DefaultDialog_footer_3Oc_Q:before{content:"";position:absolute;display:block;left:0;top:-1px;right:0;border-top:1px solid rgba(123,140,168,.25);pointer-events:none}@-webkit-keyframes PopoverDialog_popoverDialogBackgroundFadeIn_1SQbI{0%{opacity:0}to{opacity:1}}@keyframes PopoverDialog_popoverDialogBackgroundFadeIn_1SQbI{0%{opacity:0}to{opacity:1}}.PopoverDialog_overlay_16_9_{position:absolute;top:0;left:0;height:100%;width:100%;background-color:rgba(123,140,168,.15);opacity:.75;pointer-events:none;-webkit-animation-name:PopoverDialog_popoverDialogBackgroundFadeIn_1SQbI;animation-name:PopoverDialog_popoverDialogBackgroundFadeIn_1SQbI;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:cubic-bezier(0,0,0,1);animation-timing-function:cubic-bezier(0,0,0,1);-webkit-animation-iteration-count:once;animation-iteration-count:once}.PopoverDialog_root_Pe9Od{width:calc(100% - 16px);max-height:50vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.PopoverDialog_root_Pe9Od:not([data-size]),.PopoverDialog_root_Pe9Od[data-size=auto]{width:auto}.PopoverDialog_root_Pe9Od[data-size=small]{max-width:320px;max-width:20rem}.PopoverDialog_root_Pe9Od[data-size=medium]{max-width:560px;max-width:35rem}.PopoverDialog_root_Pe9Od[data-size=large]{max-width:640px;max-width:40rem;max-width:800px;max-width:50rem}.PopoverDialog_root_Pe9Od[data-popper-reference-hidden=true]{display:none}.PopoverDialog_root_Pe9Od[data-color=danger] .PopoverDialog_card_yfMZa{background-color:#f03e2f;color:#fff}.PopoverDialog_closeButtonContainer_1KXGo{margin-left:1rem}.PopoverDialog_header_38Efu .PopoverDialog_closeButton_N1Kov{margin:-.5rem}.PopoverDialog_floatingCloseButtonContainer_21hiC{position:absolute;border:0;top:0;right:0;z-index:1;background:#fff;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);border-radius:50%}.PopoverDialog_floatingCloseButtonContainer_21hiC>button>span{border-radius:50%!important}.PopoverDialog_content_2rPDx{overflow:auto;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.PopoverDialog_root_Pe9Od[data-padding=small] .PopoverDialog_contentWrapper_2Qx1Y{padding:1rem .5rem}.PopoverDialog_root_Pe9Od[data-padding=medium] .PopoverDialog_contentWrapper_2Qx1Y{padding:1.5rem 1rem}.PopoverDialog_root_Pe9Od[data-padding=large] .PopoverDialog_contentWrapper_2Qx1Y{padding:2rem 1.5rem}.PopoverDialog_header_38Efu{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;line-height:0}.PopoverDialog_header_38Efu:after{content:"";display:block;position:absolute;left:0;right:0;bottom:-1px;border-bottom:1px solid rgba(123,140,168,.25);pointer-events:none}.PopoverDialog_root_Pe9Od[data-padding=small] .PopoverDialog_header_38Efu{padding:.5rem}.PopoverDialog_root_Pe9Od[data-padding=medium] .PopoverDialog_header_38Efu{padding:1rem}.PopoverDialog_root_Pe9Od[data-padding=large] .PopoverDialog_header_38Efu{padding:1.5rem}.PopoverDialog_title_Qa1DJ{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.PopoverDialog_title_Qa1DJ>h3{font-size:16px;font-size:1rem;line-height:1.25;font-weight:700;margin:-2px 0 -1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.PopoverDialog_root_Pe9Od[data-padding=small] .PopoverDialog_footer_3CGZ3{padding:.5rem}.PopoverDialog_root_Pe9Od[data-padding=medium] .PopoverDialog_footer_3CGZ3{padding:1rem}.PopoverDialog_root_Pe9Od[data-padding=large] .PopoverDialog_footer_3CGZ3{padding:1.5rem}.EditItemFoldOut_root_3YOjM{position:relative;display:block;width:100%;z-index:200}.EditItemFoldOut_card_2hH42{background-color:#fff;margin-left:-.5rem;margin-right:-.5rem;width:calc(100% + 1rem);border-radius:0 0 4px 4px;max-height:50vh;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.EditItemFoldOut_card_2hH42:after{content:"";display:block;position:absolute;top:calc(-.5rem - 1px);left:0;height:0;width:0;margin-left:-1px;margin-top:-1px;border-color:transparent;border-bottom:calc(.5rem + 1px) solid rgba(123,140,168,.25);border-left:calc(.5rem + 1px) solid transparent;z-index:-1}.EditItemFoldOut_card_2hH42:before{content:"";display:block;position:absolute;top:calc(-.5rem - 1px);right:0;height:0;width:0;margin-right:-1px;margin-top:-1px;border-color:transparent;border-bottom:calc(.5rem + 1px) solid rgba(123,140,168,.25);border-right:calc(.5rem + 1px) solid transparent;z-index:-1}.EditItemFoldOut_header_L6dkp{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.EditItemFoldOut_header_L6dkp:after{content:"";display:block;position:absolute;left:0;right:0;bottom:-1px;border-bottom:1px solid rgba(123,140,168,.25);z-index:1}.EditItemFoldOut_header__title_1gA3X{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;margin:-2px 0 -1px;font-weight:600;padding:1rem}.EditItemFoldOut_header__actions_2_EvX{padding:.5rem}.EditItemFoldOut_content_1zSzW{-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0;padding:1rem;overflow:auto}.text-blocks_default_jpiHw{display:block}.text-blocks_root_1_FF7{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Fira Sans,sans-serif;margin:0;padding:0}.text-blocks_base_3RN62{font-size:16px;font-size:1rem;line-height:1.25}.text-blocks_lead_2lsZ9{font-size:18px;font-size:1.125rem;line-height:1.33333;margin:1rem 0}.text-blocks_small_175Js{font-size:13px;font-size:.8125rem;line-height:1.23077}.text-blocks_description_2zNyP{color:#66758d}.text-blocks_paragraph_3LNng{margin:1rem 0}.text-blocks_blockquote_3Wkda{position:relative;color:#3c4758;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Fira Sans,sans-serif;font-size:16px;font-size:1rem;line-height:1.25;font-style:normal;margin:1rem 0;padding-left:calc(1rem - 1px);border-left:1px solid rgba(123,140,168,.25)}.forms_label_3w1Gv{font-size:13px;font-size:.8125rem;line-height:1.23077;font-weight:600;color:#262f3d}.DefaultFieldset_root_3F-ZK{outline:none}.DefaultFieldset_fieldWrapper_1jRAL{display:grid;grid-gap:2rem 1rem}.DefaultFieldset_fieldWrapper_1jRAL[data-columns=true]{grid-template-columns:minmax(0,1fr)}.DefaultFieldset_fieldset_1IBKV{margin:0;padding:0;border:none;min-width:0}.DefaultFieldset_header_2NeYm{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:.5rem}.DefaultFieldset_headerMain_2bvIE{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:.25rem 0}.DefaultFieldset_headerStatus_b28Xm{padding:0 .5rem}.DefaultFieldset_description_3C_y9{margin:.25rem 0 0;padding:0;display:block}@media (min-width:512px){.DefaultFieldset_columns4_3kjtx .DefaultFieldset_fieldWrapper_1jRAL[data-columns=true]{grid-template-columns:repeat(4,minmax(0,1fr))}.DefaultFieldset_columns3_-yunA .DefaultFieldset_fieldWrapper_1jRAL[data-columns=true]{grid-template-columns:repeat(3,minmax(0,1fr))}.DefaultFieldset_columns2_5CUMA .DefaultFieldset_fieldWrapper_1jRAL[data-columns=true]{grid-template-columns:repeat(2,minmax(0,1fr))}}.DefaultFieldset_transparent_3Mnnt{background-color:transparent}.DefaultFieldset_content_eg2E-{position:relative;display:block}.DefaultFieldset_transparent_3Mnnt .DefaultFieldset_content_eg2E-{background-color:transparent}.DefaultFieldset_hasErrors_1nLI0:focus-within .DefaultFieldset_content_eg2E-{-webkit-box-shadow:0 0 0 1px #2276fc!important;box-shadow:0 0 0 1px #2276fc!important}.DefaultFieldset_contentCollapsible_2TVWx{border:1px solid red!important}.DefaultFieldset_contentCollapsible_2TVWx:empty{display:none}.DefaultFieldset_content_eg2E- .DefaultFieldset_content_eg2E- .DefaultFieldset_content_eg2E-{border:none;padding:0!important;-webkit-box-shadow:none;box-shadow:none}.DefaultFieldset_level0_1wQBE,.DefaultFieldset_level1_hnMx5,.DefaultFieldset_level2_IgRoG,.DefaultFieldset_level3_2dX4f,.DefaultFieldset_level4_6stnu{display:block;-webkit-box-shadow:none;box-shadow:none}.DefaultFieldset_inner_2_Ws-{display:block}.DefaultFieldset_arrow_v3U4x{display:inline-block;width:1em;height:1em;overflow:hidden;line-height:1;padding:0;position:relative;vertical-align:middle;-webkit-transition:-webkit-transform .1s linear;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);margin:1px .25em 0 0}.DefaultFieldset_arrow_v3U4x.DefaultFieldset_isOpen_3VyXQ{-webkit-transform:rotate(0);transform:rotate(0)}.DefaultFieldset_arrow_v3U4x svg{position:absolute;-webkit-transform:scale(1.2);transform:scale(1.2)}.DefaultFieldset_legend_21JpU{color:#262f3d;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;margin:-1px 0 0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.DefaultFieldset_labelContainer_2vTRp{outline:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.DefaultFieldset_validationStatus_UwEIu{margin:-5px 0 -4px}.DefaultFieldset_label_1cl0r{padding-right:.5rem}.DefaultFieldset_root_3F-ZK.DefaultFieldset_level1_hnMx5>.DefaultFieldset_fieldset_1IBKV>.DefaultFieldset_inner_2_Ws->.DefaultFieldset_content_eg2E-{padding-left:calc(.5rem - 1px);border-left:1px solid rgba(123,140,168,.25)}@media (min-width:512px){.DefaultFieldset_root_3F-ZK.DefaultFieldset_level1_hnMx5>.DefaultFieldset_fieldset_1IBKV>.DefaultFieldset_inner_2_Ws->.DefaultFieldset_content_eg2E-{padding-left:.75rem}}.DefaultFieldset_root_3F-ZK.DefaultFieldset_level2_IgRoG>.DefaultFieldset_fieldset_1IBKV>.DefaultFieldset_inner_2_Ws->.DefaultFieldset_content_eg2E-{padding-left:calc(.5rem - 1px);border-left:1px solid rgba(123,140,168,.25)}@media (min-width:512px){.DefaultFieldset_root_3F-ZK.DefaultFieldset_level2_IgRoG>.DefaultFieldset_fieldset_1IBKV>.DefaultFieldset_inner_2_Ws->.DefaultFieldset_content_eg2E-{padding-left:.75rem}}.DefaultFieldset_debugNestingLevel_ptDtE{display:none}.DefaultLabel_root_3hSrA{display:block}.ActivateOnFocus_root_2G7tQ{position:relative;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}.ActivateOnFocus_eventHandler_3aX13{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box}.ActivateOnFocus_hasFocus_3ARvk .ActivateOnFocus_eventHandler_3aX13{pointer-events:none}.ActivateOnFocus_content_1GVid{position:relative;z-index:0}.ActivateOnFocus_overlay_18fkL{background-color:hsla(0,0%,100%,.9);z-index:2;width:100%;height:100%;position:absolute;top:0;left:0;-webkit-transition:opacity .1s linear;transition:opacity .1s linear;opacity:0}.ActivateOnFocus_noFocus_11mQ1:hover .ActivateOnFocus_overlay_18fkL,.ActivateOnFocus_root_2G7tQ:focus-within .ActivateOnFocus_overlay_18fkL{opacity:.9}.ActivateOnFocus_hasFocus_3ARvk .ActivateOnFocus_overlay_18fkL{opacity:0}.ActivateOnFocus_message_3LppQ{z-index:3;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:opacity .1s linear;transition:opacity .1s linear;opacity:0;text-align:center}.ActivateOnFocus_noFocus_11mQ1:hover .ActivateOnFocus_message_3LppQ,.ActivateOnFocus_root_2G7tQ:focus-within .ActivateOnFocus_message_3LppQ{opacity:1}.ActivateOnFocus_hasFocus_3ARvk .ActivateOnFocus_message_3LppQ{opacity:0}.ActivateOnFocus_stringMessage_2dLef{font-size:24px;font-size:1.5rem;pointer-events:none;text-transform:uppercase}.ActivateOnFocus_hasFocus_3ARvk .ActivateOnFocus_stringMessage_2dLef{pointer-events:none}.ActivateOnFocus_html_3j6YC{pointer-events:auto;font-size:1em}.DefaultFormField_root_1aVxI{display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.DefaultFormField_block_1wkQu{display:block}.DefaultFormField_inline_1Khfb{display:inline-block}.DefaultFormField_content_27lax,.DefaultFormField_label_3Hn5g{display:block}.DefaultFormField_inline_1Khfb .DefaultFormField_content_27lax{-ms-flex-preferred-size:77%;flex-basis:77%;-webkit-box-flex:10;-ms-flex-positive:10;flex-grow:10;display:inline-block}.DefaultFormField_description_tbabp+.DefaultFormField_content_27lax,.DefaultFormField_label_3Hn5g+.DefaultFormField_content_27lax{margin-top:.5rem}.DefaultFormField_header_2-arU{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:.5rem}.DefaultFormField_headerMain_2OkC2{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;padding:.25rem 0}.DefaultFormField_title_23cfP{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:-1px}.DefaultFormField_description_tbabp{margin-top:.25rem}.DefaultFormField_validationStatus_3IVc2{margin:-5px 0 -5px .25rem}.DefaultFormField_validationList_1G2o-{padding:0}.DefaultFormField_validationList_1G2o- div[class*=root]{margin:0;padding:0}.DefaultFormField_validationList_1G2o- div[class*=root] .DefaultFormField_item_2IS3Y{padding:0;border:0}.DefaultFormField_labelAndDescriptionWrapper_2BUG8{display:block}.DefaultFormField_inline_1Khfb .DefaultFormField_labelAndDescriptionWrapper_2BUG8{-ms-flex-preferred-size:33%;flex-basis:33%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.DefaultFormField_wrapped_g7Zrp{padding:1rem;background-color:#fff;border:1px solid rgba(123,140,168,.25);border-radius:4px;overflow:hidden;max-width:100%}.DefaultFormField_inner_1JIFE{display:block}.DefaultFormField_inline_1Khfb .DefaultFormField_inner_1JIFE{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}@-webkit-keyframes ProgressCircle_finish_10Qjs{0%{stroke-width:1em}10%{stroke-width:.5em}90%{-webkit-transform:scale(.9);transform:scale(.9)}to{-webkit-transform:scale(2);transform:scale(2);opacity:0;stroke-width:1px}}@keyframes ProgressCircle_finish_10Qjs{0%{stroke-width:1em}10%{stroke-width:.5em}90%{-webkit-transform:scale(.9);transform:scale(.9)}to{-webkit-transform:scale(2);transform:scale(2);opacity:0;stroke-width:1px}}@-webkit-keyframes ProgressCircle_rotate_15ZQ7{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes ProgressCircle_rotate_15ZQ7{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes ProgressCircle_strokeWidth_1JtoJ{0%{stroke-width:0}50%{stroke-width:1px}to{stroke-width:0}}@keyframes ProgressCircle_strokeWidth_1JtoJ{0%{stroke-width:0}50%{stroke-width:1px}to{stroke-width:0}}@-webkit-keyframes ProgressCircle_strokeDash_fq0gz{0%{stroke-dasharray:0,314.15927;stroke-dashoffset:0}50%{stroke-dasharray:314.15927,0;stroke-dashoffset:0}to{stroke-dasharray:314.15927,314.15927;stroke-dashoffset:-314.15927}}@keyframes ProgressCircle_strokeDash_fq0gz{0%{stroke-dasharray:0,314.15927;stroke-dashoffset:0}50%{stroke-dasharray:314.15927,0;stroke-dashoffset:0}to{stroke-dasharray:314.15927,314.15927;stroke-dashoffset:-314.15927}}.ProgressCircle_root_1ruEu{width:100%;display:block}.ProgressCircle_svg_39WWQ{display:block;margin:0 auto}.ProgressCircle_background_1lIjt{stroke:#121923;stroke-width:.5em;opacity:.05;fill:none;-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.ProgressCircle_completed_2VFYh .ProgressCircle_background_1lIjt{opacity:0}.ProgressCircle_foreground_1XleW{-webkit-transform-origin:center center;transform-origin:center center;stroke:#121923;fill:none;stroke-width:.5em;-webkit-transition:stroke .2s linear,opacity .3s linear;transition:stroke .2s linear,opacity .3s linear}.ProgressCircle_completed_2VFYh .ProgressCircle_foreground_1XleW{stroke:#3ab667;-webkit-animation-name:ProgressCircle_finish_10Qjs;animation-name:ProgressCircle_finish_10Qjs;-webkit-animation-delay:.2s;animation-delay:.2s;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.ProgressCircle_hundredPercent_1z0Vr .ProgressCircle_foreground_1XleW{stroke:#3ab667}.ProgressCircle_activeCircle_3wSTr{-webkit-transform-origin:center center;transform-origin:center center;stroke:#121923;fill:none;stroke-width:1px;stroke-dasharray:0,314.15927;-webkit-animation:ProgressCircle_strokeDash_fq0gz 6s ease-out infinite,ProgressCircle_strokeWidth_1JtoJ 3s ease-out infinite,ProgressCircle_rotate_15ZQ7 18s linear infinite;animation:ProgressCircle_strokeDash_fq0gz 6s ease-out infinite,ProgressCircle_strokeWidth_1JtoJ 3s ease-out infinite,ProgressCircle_rotate_15ZQ7 18s linear infinite}.ProgressCircle_completed_2VFYh .ProgressCircle_activeCircle_3wSTr{opacity:0}.ProgressCircle_text_WDo7V{font-weight:400;font-size:1em;fill:inherit;-webkit-transform-origin:center center;transform-origin:center center}.ProgressCircle_completed_2VFYh .ProgressCircle_text_WDo7V{-webkit-animation-name:ProgressCircle_finish_10Qjs;animation-name:ProgressCircle_finish_10Qjs;-webkit-animation-delay:.2s;animation-delay:.2s;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.ProgressCircle_percent_3E6qs{font-weight:400}.ProgressCircle_status_14vz1{fill:inherit;font-weight:400;font-size:.7em}.ProgressCircle_completed_2VFYh .ProgressCircle_status_14vz1{-webkit-animation-name:ProgressCircle_finish_10Qjs;animation-name:ProgressCircle_finish_10Qjs;-webkit-animation-delay:.2s;animation-delay:.2s;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.SnackbarItem_root_1-icA{position:fixed;z-index:1000001;bottom:0;right:0;-webkit-transform:translate3d(100vw,0,0);transform:translate3d(100vw,0,0);max-width:calc(100vw - 2rem);width:100%;line-height:1.3125;outline:0}@media (min-width:512px){.SnackbarItem_root_1-icA{-webkit-transform:translate3d(500px,0,0);transform:translate3d(500px,0,0);max-width:30rem;margin:0 1rem}}.SnackbarItem_inner_25h1w{position:relative;border-radius:6px;line-height:1.3125}.SnackbarItem_root_1-icA[data-kind=info] .SnackbarItem_inner_25h1w{background-color:#2276fc;color:#fff}.SnackbarItem_root_1-icA[data-kind=warning] .SnackbarItem_inner_25h1w{background-color:#b89b23;color:#fff}.SnackbarItem_root_1-icA[data-kind=success] .SnackbarItem_inner_25h1w{background-color:#3ab667;color:#fff}.SnackbarItem_root_1-icA[data-kind=error] .SnackbarItem_inner_25h1w{background-color:#f03e2f;color:#fff}.SnackbarItem_icon_zBEmh{float:left;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:start;align-self:flex-start;font-size:calc(1.125rem + 5px);margin:calc(1rem - 2px) .5rem calc(1rem - 2px) calc(1rem - 2px)}.SnackbarItem_content_3s7Lo{padding:1rem calc(1rem - 2px)}.SnackbarItem_buttonsWrapper_2ce66{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;float:right;max-height:52.8px;max-height:3.3rem}.SnackbarItem_buttonsWrapper_2ce66:empty{display:none}.SnackbarItem_buttonContainer_3ZAVV{max-height:100%}@media (hover:hover){.SnackbarItem_buttonContainer_3ZAVV{opacity:.7}.SnackbarItem_buttonContainer_3ZAVV:hover{opacity:1}}.SnackbarItem_closeButtonContainer_DrnXu{font-size:calc(1.125rem + 5px)}@media (hover:hover){.SnackbarItem_buttonContainer_3ZAVV [class^=DefaultButton_root]:hover{background-color:transparent!important}}.SnackbarItem_actionButtonContainer_14Zvi [class^=DefaultButton_inner]{padding:1rem .5rem}.SnackbarItem_closeButtonContainer_DrnXu [class^=DefaultButton_inner]{padding:calc(1rem - 2px)}.SnackbarItem_actionButtonContainer_14Zvi:first-child [class*=inner]{padding:1rem calc(1rem - 2px)}.SnackbarItem_icon_zBEmh~.SnackbarItem_content_3s7Lo{padding-left:calc(3.125rem - 3px)}.SnackbarItem_showSnack_26rf5{-webkit-transform:translateZ(0);transform:translateZ(0)}.SnackbarItem_children_E2xlX:not(:empty){padding-top:.5em}.SnackbarItem_dismissSnack_1DOvR{-webkit-transform:translate3d(100vw,0,0);transform:translate3d(100vw,0,0);opacity:0}@media (min-width:512px){.SnackbarItem_dismissSnack_1DOvR{-webkit-transform:translate3d(500px,0,0);transform:translate3d(500px,0,0)}}.FullscreenMessageDialog_root_2Hjqj{position:fixed;top:0;left:0;right:0;bottom:0;padding:1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#e4e8ed}.FullscreenMessageDialog_card_3fT9q{background-color:#fff;border-radius:4px;width:100%;min-width:0;max-width:540px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:0 2px 4px rgba(0,0,0,.1);max-height:calc(100% - 2rem);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.FullscreenMessageDialog_color_info_1p6kJ .FullscreenMessageDialog_card_3fT9q{color:#2276fc}.FullscreenMessageDialog_color_success_2X0gP .FullscreenMessageDialog_card_3fT9q{color:#3ab667}.FullscreenMessageDialog_color_warning_2-wwT .FullscreenMessageDialog_card_3fT9q{color:#b89b23}.FullscreenMessageDialog_color_danger_3hlC4 .FullscreenMessageDialog_card_3fT9q{color:#f03e2f}.FullscreenMessageDialog_cardHeader_11m_9{padding:1rem;border-bottom:1px solid rgba(123,140,168,.25);display:-webkit-box;display:-ms-flexbox;display:flex}.FullscreenMessageDialog_cardTitle_YZxIg{margin:0;-webkit-box-flex:1;-ms-flex:1;flex:1}.FullscreenMessageDialog_cardHeaderActions_imQ1x{margin:-2px -2px -1px}.FullscreenMessageDialog_cardHeaderActions_imQ1x button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;color:inherit;border-radius:2px;font:inherit;padding:.25rem}.FullscreenMessageDialog_cardHeaderActions_imQ1x button>svg{font-size:1.5625em;display:block}.FullscreenMessageDialog_cardContent_3slJy{-webkit-overflow-scrolling:touch;-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:16px;font-size:1rem;line-height:1.25;padding:1rem;overflow:auto}.FullscreenMessageDialog_cardContent_3slJy p{margin:1rem 0}.FullscreenMessageDialog_cardContent_3slJy p code{font-family:-apple-system-ui-monospace,SF Mono,Menlo,Monaco,Consolas,monospace;background:rgba(123,140,168,.1);color:#3c4758;border-radius:2px}.FullscreenMessageDialog_cardContent_3slJy pre{font-family:-apple-system-ui-monospace,SF Mono,Menlo,Monaco,Consolas,monospace;background:rgba(123,140,168,.1);color:#3c4758;padding:.5rem;overflow:auto;border-radius:2px;margin:1rem 0}.FullscreenMessageDialog_cardContent_3slJy pre code{font-family:-apple-system-ui-monospace,SF Mono,Menlo,Monaco,Consolas,monospace}.FullscreenMessageDialog_cardContent_3slJy p:first-child,.FullscreenMessageDialog_cardContent_3slJy pre:first-child{margin-top:0}.FullscreenMessageDialog_cardContent_3slJy p:last-child,.FullscreenMessageDialog_cardContent_3slJy pre:last-child{margin-bottom:0}.FullscreenMessageDialog_cardButtons_2sOIY{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:.5rem;padding:1rem;border-top:1px solid rgba(123,140,168,.25)} -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/dist/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/sanity-ecommerce-stripe/dist/static/favicon.ico -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecommerce-stripe", 3 | "private": true, 4 | "version": "1.0.0", 5 | "description": "", 6 | "main": "package.json", 7 | "author": "Rohit Roy ", 8 | "license": "UNLICENSED", 9 | "scripts": { 10 | "start": "sanity start", 11 | "build": "sanity build" 12 | }, 13 | "keywords": [ 14 | "sanity" 15 | ], 16 | "dependencies": { 17 | "@sanity/base": "^2.30.1", 18 | "@sanity/core": "^2.30.1", 19 | "@sanity/default-layout": "^2.30.1", 20 | "@sanity/default-login": "^2.30.1", 21 | "@sanity/desk-tool": "^2.30.1", 22 | "@sanity/eslint-config-studio": "^2.0.0", 23 | "@sanity/vision": "^2.30.1", 24 | "eslint": "^8.6.0", 25 | "prop-types": "^15.7", 26 | "react": "^17.0", 27 | "react-dom": "^17.0", 28 | "styled-components": "^5.2.0" 29 | }, 30 | "devDependencies": {} 31 | } 32 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/plugins/.gitkeep: -------------------------------------------------------------------------------- 1 | User-specific packages can be placed here 2 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/sanity.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "project": { 4 | "name": "ecommerce-stripe" 5 | }, 6 | "api": { 7 | "projectId": "5rsw848q", 8 | "dataset": "production" 9 | }, 10 | "plugins": [ 11 | "@sanity/base", 12 | "@sanity/default-layout", 13 | "@sanity/default-login", 14 | "@sanity/desk-tool" 15 | ], 16 | "env": { 17 | "development": { 18 | "plugins": [ 19 | "@sanity/vision" 20 | ] 21 | } 22 | }, 23 | "parts": [ 24 | { 25 | "name": "part:@sanity/base/schema", 26 | "path": "./schemas/schema" 27 | } 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/schemas/banner.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'banner', 3 | title: 'Banner', 4 | type: 'document', 5 | fields: [ 6 | { 7 | name: 'image', 8 | title: 'Image', 9 | type: 'image', 10 | options: { 11 | hotspot: true, 12 | }, 13 | }, 14 | { 15 | name: 'buttonText', 16 | title: 'ButtonText', 17 | type: 'string', 18 | }, 19 | { 20 | name: 'product', 21 | title: 'Product', 22 | type: 'string', 23 | }, 24 | { 25 | name: 'desc', 26 | title: 'Desc', 27 | type: 'string', 28 | }, 29 | { 30 | name: 'smallText', 31 | title: 'SmallText', 32 | type: 'string', 33 | }, 34 | { 35 | name: 'midText', 36 | title: 'MidText', 37 | type: 'string', 38 | }, 39 | { 40 | name: 'largeText1', 41 | title: 'LargeText1', 42 | type: 'string', 43 | }, 44 | { 45 | name: 'largeText2', 46 | title: 'LargeText2', 47 | type: 'string', 48 | }, 49 | { 50 | name: 'discount', 51 | title: 'Discount', 52 | type: 'string', 53 | }, 54 | { 55 | name: 'saleTime', 56 | title: 'SaleTime', 57 | type: 'string', 58 | }, 59 | ], 60 | }; -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/schemas/product.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'product', //Name of schema 3 | title: 'Product', //Title of schema 4 | type: 'document', //Type of schema 5 | //Fields required in this particular schema 6 | fields: [ //Array of objects 7 | { 8 | //Image of the product 9 | name: 'image', 10 | title: 'Image', 11 | type: 'array', 12 | of: [{type: 'image'}], //Array 'of' images 13 | options: { 14 | hotspot: true, //Hotspot is a property for enabling user images to be placed in a better format 15 | } 16 | }, 17 | { 18 | //Name of the product 19 | name: 'name', 20 | title: 'Name', 21 | type: 'string', 22 | }, 23 | { 24 | //Slug/URL for the product 25 | name: 'slug', 26 | title: 'Slug', 27 | type: 'slug', //type = url 28 | options: { 29 | source: 'name', 30 | maxLength: 90, 31 | } 32 | }, 33 | { 34 | //Price of the product 35 | name: 'price', 36 | title: 'Price', 37 | type: 'number', 38 | }, 39 | { 40 | //Products details/ description 41 | name: 'details', 42 | title: 'Details', 43 | type: 'string', 44 | } 45 | ] 46 | } -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/schemas/schema.js: -------------------------------------------------------------------------------- 1 | // First, we must import the schema creator 2 | import createSchema from 'part:@sanity/base/schema-creator' 3 | 4 | // Then import schema types from any plugins that might expose them 5 | import schemaTypes from 'all:part:@sanity/base/schema-type' 6 | 7 | //Import our custom schemas 8 | import product from './product'; 9 | import banner from './banner'; 10 | 11 | // Then we give our schema to the builder and provide the result to Sanity 12 | export default createSchema({ 13 | name: 'default', 14 | types: schemaTypes.concat([ 15 | product, 16 | banner 17 | ]), 18 | }) 19 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/static/.gitkeep: -------------------------------------------------------------------------------- 1 | Files placed here will be served by the Sanity server under the `/static`-prefix 2 | -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitroy-github/react-ecommerce-website-stripe/0e4a996abe5b489fab98ee58b728f83627fae39e/sanity-ecommerce-stripe/static/favicon.ico -------------------------------------------------------------------------------- /sanity-ecommerce-stripe/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // Note: This config is only used to help editors like VS Code understand/resolve 3 | // parts, the actual transpilation is done by babel. Any compiler configuration in 4 | // here will be ignored. 5 | "include": ["./node_modules/@sanity/base/types/**/*.ts", "./**/*.ts", "./**/*.tsx"] 6 | } 7 | -------------------------------------------------------------------------------- /styles/Home.module.css: -------------------------------------------------------------------------------- 1 | /* This file contains the CSS styling for the default Next.js index page */ 2 | 3 | /* .container { 4 | padding: 0 2rem; 5 | } 6 | 7 | .main { 8 | min-height: 100vh; 9 | padding: 4rem 0; 10 | flex: 1; 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .footer { 18 | display: flex; 19 | flex: 1; 20 | padding: 2rem 0; 21 | border-top: 1px solid #eaeaea; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | 26 | .footer a { 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | flex-grow: 1; 31 | } 32 | 33 | .title a { 34 | color: #0070f3; 35 | text-decoration: none; 36 | } 37 | 38 | .title a:hover, 39 | .title a:focus, 40 | .title a:active { 41 | text-decoration: underline; 42 | } 43 | 44 | .title { 45 | margin: 0; 46 | line-height: 1.15; 47 | font-size: 4rem; 48 | } 49 | 50 | .title, 51 | .description { 52 | text-align: center; 53 | } 54 | 55 | .description { 56 | margin: 4rem 0; 57 | line-height: 1.5; 58 | font-size: 1.5rem; 59 | } 60 | 61 | .code { 62 | background: #fafafa; 63 | border-radius: 5px; 64 | padding: 0.75rem; 65 | font-size: 1.1rem; 66 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 67 | Bitstream Vera Sans Mono, Courier New, monospace; 68 | } 69 | 70 | .grid { 71 | display: flex; 72 | align-items: center; 73 | justify-content: center; 74 | flex-wrap: wrap; 75 | max-width: 800px; 76 | } 77 | 78 | .card { 79 | margin: 1rem; 80 | padding: 1.5rem; 81 | text-align: left; 82 | color: inherit; 83 | text-decoration: none; 84 | border: 1px solid #eaeaea; 85 | border-radius: 10px; 86 | transition: color 0.15s ease, border-color 0.15s ease; 87 | max-width: 300px; 88 | } 89 | 90 | .card:hover, 91 | .card:focus, 92 | .card:active { 93 | color: #0070f3; 94 | border-color: #0070f3; 95 | } 96 | 97 | .card h2 { 98 | margin: 0 0 1rem 0; 99 | font-size: 1.5rem; 100 | } 101 | 102 | .card p { 103 | margin: 0; 104 | font-size: 1.25rem; 105 | line-height: 1.5; 106 | } 107 | 108 | .logo { 109 | height: 1em; 110 | margin-left: 0.5rem; 111 | } 112 | 113 | @media (max-width: 600px) { 114 | .grid { 115 | width: 100%; 116 | flex-direction: column; 117 | } 118 | } */ 119 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, * { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | box-sizing: border-box; 8 | 9 | } 10 | ::-webkit-scrollbar { 11 | width: 0px; 12 | } 13 | 14 | a { 15 | color: inherit; 16 | text-decoration: none; 17 | } 18 | 19 | .main-container{ 20 | max-width: 1400px; 21 | margin: auto; 22 | width: 100%; 23 | 24 | } 25 | .layout{ 26 | padding: 10px; 27 | } 28 | 29 | .navbar-container{ 30 | display: flex; 31 | justify-content: space-between; 32 | margin: 6px 18px; 33 | position: relative; 34 | } 35 | .marquee-text{ 36 | font-size: 29px; 37 | font-weight: 600; 38 | margin: 60px 0px; 39 | color: #f02d34; 40 | } 41 | .marquee { 42 | position: relative; 43 | height: 400px; 44 | width: 100%; 45 | overflow-x: hidden; 46 | } 47 | 48 | .track { 49 | position: absolute; 50 | white-space: nowrap; 51 | will-change: transform; 52 | animation: marquee 15s linear infinite; 53 | width: 180%; 54 | } 55 | .track:hover { 56 | animation-play-state: paused; 57 | } 58 | @keyframes marquee { 59 | from { transform: translateX(0); } 60 | to { transform: translateX(-50%); } 61 | } 62 | 63 | span.text-red { 64 | -webkit-text-stroke: 1px #f02d34; 65 | margin-left: 6px; 66 | } 67 | .logo{ 68 | color: gray; 69 | font-size: 18px; 70 | 71 | } 72 | .cart-icon{ 73 | font-size: 25px; 74 | color: gray; 75 | cursor: pointer; 76 | position: relative; 77 | transition: transform .4s ease; 78 | border: none; 79 | background-color: transparent; 80 | } 81 | .cart-icon:hover{ 82 | transform: scale(1.1,1.1); 83 | } 84 | .cart-item-qty{ 85 | position: absolute; 86 | right: -8px; 87 | font-size: 12px; 88 | color: #eee; 89 | background-color: #f02d34; 90 | width: 18px; 91 | height: 18px; 92 | border-radius: 50%; 93 | text-align: center; 94 | font-weight: 600; 95 | 96 | } 97 | .products-container{ 98 | display: flex; 99 | flex-wrap: wrap; 100 | justify-content: center; 101 | gap: 15px; 102 | margin-top: 20px; 103 | width: 100%; 104 | } 105 | .product-card{ 106 | cursor: pointer; 107 | transform: scale(1, 1); 108 | transition: transform 0.5s ease; 109 | color: #324d67; 110 | 111 | } 112 | .product-card:hover{ 113 | transform: scale(1.1,1.1) 114 | } 115 | .product-image{ 116 | border-radius: 15px; 117 | background-color: #ebebeb; 118 | transform: scale(1, 1); 119 | transition: transform 0.5s ease; 120 | } 121 | 122 | .product-name{ 123 | font-weight: 500; 124 | } 125 | .product-price{ 126 | font-weight: 800; 127 | margin-top: 6px; 128 | color: black; 129 | } 130 | 131 | .hero-banner-container{ 132 | padding: 100px 40px; 133 | background-color: #dcdcdc; 134 | border-radius: 15px; 135 | position: relative; 136 | height: 500px; 137 | line-height: 0.9; 138 | width: 100%; 139 | 140 | } 141 | .hero-banner-container .beats-solo{ 142 | font-size: 20px; 143 | } 144 | .hero-banner-container button{ 145 | border-radius: 15px; 146 | padding: 10px 16px; 147 | background-color: #f02d34; 148 | color: white; 149 | border: none; 150 | margin-top: 40px; 151 | font-size: 18px; 152 | font-weight: 500; 153 | cursor: pointer; 154 | z-index:10000 !important; 155 | } 156 | 157 | .hero-banner-container h3{ 158 | font-size: 4rem; 159 | margin-top: 4px; 160 | } 161 | .hero-banner-container h1{ 162 | color: white; 163 | font-size: 10em; 164 | margin-left: -20px; 165 | text-transform: uppercase; 166 | } 167 | .hero-banner-image{ 168 | position: absolute; 169 | top: 0%; 170 | right:20%; 171 | width: 450px; 172 | height: 450px; 173 | } 174 | 175 | 176 | .desc{ 177 | position: absolute; 178 | right: 10%; 179 | bottom: 5%; 180 | width: 300px; 181 | line-height: 1.3; 182 | display: flex; 183 | flex-direction: column; 184 | color: #324d67; 185 | 186 | } 187 | .desc p{ 188 | color: #5f5f5f; 189 | font-weight: 100; 190 | text-align: end; 191 | } 192 | .desc h5{ 193 | margin-bottom: 12px; 194 | font-weight: 700; 195 | font-size: 16px; 196 | /* color: black; */ 197 | align-self: flex-end; 198 | } 199 | .products-heading{ 200 | text-align: center; 201 | margin: 40px 0px; 202 | color: #324d67; 203 | 204 | } 205 | .products-heading h2{ 206 | font-size: 40px; 207 | font-weight: 800; 208 | } 209 | .products-heading p{ 210 | font-size: 16px; 211 | font-weight: 200; 212 | } 213 | .footer-banner-container{ 214 | padding: 100px 40px; 215 | background-color: #f02d34; 216 | border-radius: 15px; 217 | position: relative; 218 | height: 400px; 219 | line-height: 1; 220 | color: white; 221 | width: 100%; 222 | margin-top: 120px; 223 | } 224 | .banner-desc{ 225 | display: flex ; 226 | justify-content: space-between; 227 | } 228 | .banner-desc button{ 229 | border-radius: 15px; 230 | padding: 10px 16px; 231 | background-color: white; 232 | color: red; 233 | border: none; 234 | margin-top: 40px; 235 | font-size: 18px; 236 | font-weight: 500; 237 | cursor: pointer; 238 | } 239 | .banner-desc .left h3{ 240 | font-weight: 900; 241 | font-size: 80px; 242 | margin-left: 25px; 243 | } 244 | .banner-desc .left p{ 245 | margin:18px; 246 | } 247 | .footer-banner-image{ 248 | position: absolute; 249 | /* top: -35%; 250 | left: 8%; */ 251 | top: -25%; 252 | left: 25%; 253 | } 254 | .banner-desc .right{ 255 | line-height: 1.4; 256 | } 257 | .banner-desc .right h3{ 258 | font-weight: 800; 259 | font-size: 60px; 260 | } 261 | .banner-desc .right p{ 262 | font-size: 18px; 263 | } 264 | .banner-desc .right .company-desc{ 265 | font-size: 14px; 266 | font-weight: 300; 267 | } 268 | .cart-wrapper{ 269 | width: 100vw; 270 | background: rgba(0, 0, 0, 0.5); 271 | position: fixed; 272 | right: 0; 273 | top: 0; 274 | z-index: 100; 275 | /* will-change: transform; */ 276 | transition: all 1s ease-in-out; 277 | 278 | } 279 | .cart-container{ 280 | height: 100vh; 281 | width: 600px; 282 | background-color: white; 283 | float: right; 284 | padding: 40px 10px; 285 | position: relative; 286 | 287 | } 288 | 289 | .footer-container{ 290 | color: #324d67; 291 | text-align: center; 292 | margin-top: 20px; 293 | padding: 30px 10px; 294 | font-weight: 700; 295 | display: flex; 296 | flex-direction: column; 297 | align-items: center; 298 | gap: 10px; 299 | justify-content: center; 300 | 301 | } 302 | .footer-container .icons{ 303 | font-size: 30px; 304 | display: flex; 305 | gap: 10px; 306 | } 307 | .cart-heading{ 308 | display: flex; 309 | align-items: center; 310 | font-size: 18px; 311 | font-weight: 500; 312 | cursor: pointer; 313 | gap: 2px; 314 | margin-left: 10px; 315 | border: none; 316 | background-color: transparent; 317 | } 318 | 319 | .cart-heading .heading{ 320 | margin-left: 10px; 321 | } 322 | .cart-num-items{ 323 | margin-left: 10px; 324 | color: #f02d34; 325 | } 326 | .empty-cart{ 327 | margin:40px; 328 | text-align:center; 329 | } 330 | .empty-cart h3{ 331 | font-weight: 600; 332 | font-size: 20px; 333 | } 334 | .cancel{ 335 | cursor: pointer; 336 | } 337 | .product-container{ 338 | margin-top: 15px; 339 | overflow: auto; 340 | max-height: 70vh; 341 | padding: 20px 10px; 342 | } 343 | .product{ 344 | display: flex; 345 | gap: 30px; 346 | padding: 20px; 347 | } 348 | .product .cart-product-image{ 349 | width:180px ; 350 | height: 150px; 351 | border-radius: 15px; 352 | background-color: #ebebeb; 353 | } 354 | .item-desc .flex{ 355 | display: flex; 356 | justify-content: space-between; 357 | width: 350px; 358 | color: #324d67; 359 | 360 | } 361 | .item-desc .bottom{ 362 | margin-top: 60px; 363 | } 364 | .flex h5{ 365 | font-size: 24px; 366 | } 367 | .flex h4{ 368 | font-size: 20px; 369 | } 370 | .total{ 371 | display: flex; 372 | justify-content: space-between; 373 | } 374 | .total h3{ 375 | font-size: 22px; 376 | 377 | } 378 | .remove-item{ 379 | font-size: 24px; 380 | color: #f02d34; 381 | cursor: pointer; 382 | background: transparent; 383 | border: none; 384 | } 385 | .cart-bottom{ 386 | position: absolute; 387 | bottom: 12px; 388 | right: 5px; 389 | width: 100%; 390 | padding: 30px 65px; 391 | 392 | } 393 | 394 | .btn-container{ 395 | width: 400px; 396 | margin: auto; 397 | } 398 | .btn{ 399 | width: 100%; 400 | max-width: 400px; 401 | padding: 10px 12px; 402 | border-radius: 15px; 403 | border: none; 404 | font-size: 20px; 405 | margin-top: 10px; 406 | margin-top: 40px; 407 | text-transform: uppercase; 408 | background-color: #f02d34; 409 | color: #fff; 410 | cursor: pointer; 411 | transform: scale(1, 1); 412 | transition: transform 0.5s ease; 413 | } 414 | .btn:hover{ 415 | transform: scale(1.1,1.1); 416 | } 417 | .product-detail-container{ 418 | display: flex; 419 | gap: 40px; 420 | margin: 40px; 421 | margin-top: 60px; 422 | color: #324d67; 423 | 424 | } 425 | 426 | .product-detail-image{ 427 | border-radius: 15px; 428 | background-color: #ebebeb; 429 | 430 | width: 400px; 431 | height: 400px; 432 | cursor: pointer; 433 | transition: .3s ease-in-out; 434 | } 435 | .product-detail-image:hover{ 436 | background-color: #f02d34; 437 | 438 | } 439 | .small-images-container{ 440 | display: flex; 441 | gap: 10px; 442 | margin-top: 20px; 443 | } 444 | .small-image{ 445 | border-radius: 8px; 446 | background-color: #ebebeb; 447 | width: 70px; 448 | height: 70px; 449 | cursor: pointer; 450 | } 451 | 452 | .selected-image{ 453 | background-color:#f02d34; 454 | } 455 | .reviews{ 456 | color: #f02d34; 457 | margin-top: 10px; 458 | display: flex; 459 | gap: 5px; 460 | align-items: center; 461 | } 462 | 463 | .product-detail-desc h4{ 464 | margin-top: 10px; 465 | } 466 | .product-detail-desc p{ 467 | margin-top: 10px; 468 | } 469 | .reviews p{ 470 | color: #324d67; 471 | margin-top: 0px; 472 | } 473 | .product-detail-desc .price{ 474 | font-weight: 700 ; 475 | font-size: 26px; 476 | margin-top: 30px; 477 | color:#f02d34; 478 | } 479 | .price .old-price, .product-price .old-price, .price .old-price{ 480 | color: gray; 481 | text-decoration: line-through; 482 | } 483 | .product-detail-desc .quantity{ 484 | display: flex; 485 | gap: 20px; 486 | margin-top: 10px ; 487 | align-items: center; 488 | } 489 | .product-detail-desc .buttons{ 490 | display: flex; 491 | gap: 30px; 492 | } 493 | .buttons .add-to-cart{ 494 | padding: 10px 20px; 495 | border: 1px solid #f02d34 ; 496 | margin-top: 40px; 497 | font-size: 18px; 498 | font-weight: 500; 499 | background-color: white; 500 | color: #f02d34; 501 | cursor: pointer; 502 | width: 200px; 503 | transform: scale(1, 1); 504 | transition: transform 0.5s ease; 505 | } 506 | .buttons .add-to-cart:hover{ 507 | transform:scale(1.1,1.1) 508 | } 509 | .buttons .buy-now{ 510 | width: 200px; 511 | 512 | padding: 10px 20px; 513 | background-color: #f02d34; 514 | color: white; 515 | border: none; 516 | margin-top: 40px; 517 | font-size: 18px; 518 | font-weight: 500; 519 | cursor: pointer; 520 | transform: scale(1, 1); 521 | transition: transform 0.5s ease; 522 | } 523 | .buttons .buy-now:hover{ 524 | transform:scale(1.1,1.1) 525 | } 526 | .quantity-desc{ 527 | border: 1px solid gray; 528 | padding: 6px; 529 | } 530 | .quantity-desc span{ 531 | font-size: 16px; 532 | padding: 6px 12px; 533 | cursor: pointer; 534 | } 535 | .quantity-desc .minus{ 536 | border-right: 1px solid gray; 537 | color: #f02d34; 538 | } 539 | .quantity-desc .num{ 540 | border-right: 1px solid gray; 541 | font-size: 20px; 542 | } 543 | .quantity-desc .plus{ 544 | color: rgb(49, 168, 49); 545 | 546 | } 547 | 548 | .maylike-products-wrapper{ 549 | margin-top: 120px; 550 | } 551 | .maylike-products-wrapper h2{ 552 | text-align: center; 553 | margin: 50px; 554 | color: #324d67; 555 | 556 | font-size: 28px; 557 | } 558 | .maylike-products-container{ 559 | display: flex; 560 | justify-content: center; 561 | gap: 15px; 562 | margin-top: 20px; 563 | } 564 | .max-qty{ 565 | font-weight: 500; 566 | color: #f02d34; 567 | } 568 | .success-wrapper, .cancel-wrapper{ 569 | background-color: white; 570 | min-height: 60vh; 571 | 572 | } 573 | .success, .cancel{ 574 | width: 1000px; 575 | margin: auto; 576 | margin-top: 160px; 577 | background-color: #dcdcdc; 578 | padding: 50px; 579 | border-radius: 15px; 580 | display: flex; 581 | justify-content: center; 582 | align-items: center; 583 | flex-direction: column; 584 | } 585 | 586 | .success .icon { 587 | color: green; 588 | font-size: 40px; 589 | } 590 | .success h2{ 591 | text-transform: capitalize; 592 | margin-top: 15px 0px; 593 | font-weight: 900; 594 | font-size: 40px; 595 | color:#324d67; 596 | } 597 | .success .email-msg{ 598 | font-size: 16px; 599 | font-weight: 600; 600 | text-align: center; 601 | } 602 | .cancel p{ 603 | font-size: 20px; 604 | font-weight: 600; 605 | } 606 | .success .description{ 607 | font-size: 16px; 608 | font-weight: 600; 609 | text-align: center; 610 | margin: 10px; 611 | margin-top: 30px; 612 | } 613 | .success .description .email{ 614 | margin-left: 5px; 615 | color: #f02d34; 616 | } 617 | .product-max-qty{ 618 | margin-top: 10px; 619 | } 620 | 621 | @media screen and (max-width:800px) { 622 | .hero-banner-container{ 623 | height: 560px; 624 | } 625 | .hero-banner-image{ 626 | width: 77%; 627 | height: 62%; 628 | top: -2%; 629 | right: -6%; 630 | } 631 | .footer-banner-container{ 632 | height: 560px; 633 | margin-top: 80px; 634 | } 635 | .footer-banner-image{ 636 | width: 77%; 637 | left: 30%; 638 | top: 6%; 639 | height: 56% 640 | } 641 | .banner-desc .left h3{ 642 | font-weight: 900; 643 | font-size: 50px; 644 | margin-left: 5px; 645 | } 646 | .banner-desc .left p{ 647 | margin:18px; 648 | } 649 | .banner-desc .right h3{ 650 | font-size: 45px; 651 | } 652 | .banner-desc .right p{ 653 | font-size: 18px; 654 | } 655 | .banner-desc .right .company-desc{ 656 | font-size: 14px; 657 | } 658 | .banner-desc{ 659 | flex-wrap: wrap; 660 | gap: 20px; 661 | } 662 | .hero-banner-container{ 663 | line-height: 1.3; 664 | } 665 | .hero-banner-container h1{ 666 | font-size: 50px; 667 | } 668 | .hero-banner-container h3{ 669 | font-size: 40px; 670 | } 671 | .hero-banner-container button{ 672 | margin-top: 90px; 673 | z-index: 10000; 674 | } 675 | .desc{ 676 | bottom: 60px; 677 | } 678 | .product-detail-container{ 679 | flex-wrap: wrap; 680 | } 681 | .product-detail-container .product-detail-image{ 682 | width: 350px; 683 | height: 350px; 684 | } 685 | .cart-container{ 686 | width: 415px; 687 | padding: 4px; 688 | } 689 | .cart-heading{ 690 | margin-top: 35px; 691 | } 692 | .product-container{ 693 | margin-top: 10px; 694 | } 695 | .product{ 696 | padding: 20px 5px; 697 | 698 | } 699 | .product .cart-product-image{ 700 | width: 25%; 701 | height: 25%; 702 | } 703 | .buttons .add-to-cart{ 704 | width: 150px; 705 | } 706 | .buttons .buy-now{ 707 | width: 150px; 708 | } 709 | .product-detail-container{ 710 | margin: 20px; 711 | } 712 | 713 | .item-desc .flex{ 714 | width: 200px; 715 | } 716 | .top{ 717 | flex-wrap: wrap; 718 | gap: 10px; 719 | 720 | 721 | } 722 | .item-desc .bottom{ 723 | margin-top: 30px; 724 | } 725 | .flex h5{ 726 | font-size: 16px; 727 | color: #324d67; 728 | } 729 | .flex h4{ 730 | font-size: 16px; 731 | color: black; 732 | } 733 | .cart-bottom{ 734 | padding: 30px; 735 | } 736 | 737 | .total h3{ 738 | font-size: 20px; 739 | } 740 | .track { 741 | animation: marquee 10s linear infinite; 742 | width: 550%; 743 | } 744 | .success-wrapper, .cancel-wrapper{ 745 | 746 | min-height: 69vh; 747 | } 748 | .success, .cancel { 749 | width: 370px; 750 | margin-top: 100px; 751 | padding: 20px; 752 | } 753 | .success{ 754 | height: 350px; 755 | } 756 | .success h2{ 757 | font-size: 17px; 758 | } 759 | .btn-container{ 760 | width: 300px; 761 | margin: auto; 762 | } 763 | } --------------------------------------------------------------------------------