.cx-newsletter-container input { outline: none !important; border: none; box-shadow: none !important; font-size: 1em; text-align: center; } .cx-newsletter-container input[type="text"], .cx-newsletter-container input[type="number"], .cx-newsletter-container input[type="email"], .cx-newsletter-container input[type="password"] { border: none; border-bottom: 2px solid var(--primary-color); border-radius: 0px; background-color: var(--background-color); color: var(--secondary-color); width: 300px; max-width: 100%; transition: border-color 0.5s, transform 0.5s; } .cx-newsletter-container input[type="text"]:focus, .cx-newsletter-container input[type="number"]:focus, .cx-newsletter-container input[type="email"]:focus, .cx-newsletter-container input[type="password"]:focus { border-color: var(--secondary-color); transform: scaleX(1.1); } .cx-newsletter-container input[type="submit"], .cx-newsletter-container input[type="button"], .cx-newsletter-container a { text-decoration: none; display: block; background-color: var(--primary-color); color: var(--background-color); padding: 1em 2em; border-radius: 1em; border: none; transition: background-color 0.5s; } .cx-newsletter-container input[type="submit"]:hover, .cx-newsletter-container input[type="button"]:hover, .cx-newsletter-container a:hover { background-color: var(--secondary-color); } .cx-newsletter-container textarea { width: 90%; box-sizing: border-box; min-height: 500px; padding: 1rem; border: 3px solid var(--secondary-color); border-radius: 1rem; color: var(--font-color); background-color: inherit; transition: transform 0.5s; } .cx-newsletter-container textarea:focus { transform: scaleX(1.05); } .cx-newsletter-container input[type="checkbox"] { --margin-static: calc(300px / 2 - 20px / 2); --margin-float: calc(100% / 2 - 20px / 2); box-sizing: border-box; width: 20px; height: 20px; border: 2px solid var(--primary-color); padding: 2px; margin: 0px; margin-left: min(var(--margin-static), var(--margin-float)); margin-right: min(var(--margin-static), var(--margin-float)); }