html,body{margin:0;padding:0;font-family:sans-serif}*{font-family:Helvetica,sans-serif;font-size:10px}body{background:#f3f3f3}.App{margin:1rem;color:#3f484f}.App .title{color:#102548;font-family:Helvetica,sans-serif;font-size:2.8rem;margin-top:0}.App .template-input{background:#fff;margin:1rem 0;padding:1rem 1rem 2rem;border-radius:.5rem;border:1px solid #e9e8e8}.App .template-input .input-field{margin:1.4rem 0 0}.App .template-input .input-field label{color:#3f484f;margin-right:1rem;padding-bottom:.3rem;display:block;font-size:1.4rem}.App .template-input .input-field input{padding:.6rem 1rem;border:1px solid #ccc;display:block;width:25rem;color:#3f484f;font-size:1.6rem;border-radius:.5rem}.App .template-input .input-field input::placeholder{color:#9ba5ac}.App .template-input .input-field select{padding:.6rem 1rem;border:1px solid #ccc;display:block;width:25rem;color:#3f484f;font-size:1.6rem;border-radius:.5rem}.App .template-input .input-field select::placeholder{color:#9ba5ac}.App .template-input .colors{display:flex}.App .template-input .colors .color{width:10rem;height:10rem;border:2px solid #ccc;border-radius:.5rem;margin-right:1rem;cursor:pointer;font-size:1.6rem;color:#fff;display:flex;text-transform:capitalize;justify-content:center;align-items:center}.App .template-input .colors .color.green{background:#6cc7b4}.App .template-input .colors .color.purple{background:#7159a6}.App .template-input .colors .color.blue{background:#009ac7}.App .template-input .colors .color.active{border:2px solid #3f484f}.App .template-input .colors .color:hover,.App .template-input .colors .color:focus{border:2px solid #798894;outline:none}.App .email-template{background:#fff;border:1px solid #e9e8e8;border-radius:.5rem;margin:1rem 0;padding:1rem}.App .copy-wrapper{position:relative}.App .copy-wrapper .copy-button{border-radius:.5rem;padding:.5rem 1rem;font-size:1.4rem;background-color:#102548;color:#fff;border:0}.App .copy-wrapper .copy-button:focus,.App .copy-wrapper .copy-button:hover{cursor:pointer;outline:none;background-color:#1e4587}.App .copy-wrapper .copy-message{font-size:1.2rem;color:#9ba5ac;font-style:italic;top:.6rem;left:14rem;position:absolute;animation-name:slide-in;animation-duration:.3s;animation-timing-function:ease-out}@keyframes slide-in{0%{left:13rem;opacity:0}to{left:14rem;opacity:1}}