@import url(https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700);
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
.tippy-box[data-animation=scale][data-placement^=top]{transform-origin:bottom}.tippy-box[data-animation=scale][data-placement^=bottom]{transform-origin:top}.tippy-box[data-animation=scale][data-placement^=left]{transform-origin:right}.tippy-box[data-animation=scale][data-placement^=right]{transform-origin:left}.tippy-box[data-animation=scale][data-state=hidden]{transform:scale(.5);opacity:0}
.tippy-box[data-animation=shift-away][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top]{transform:translateY(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom]{transform:translateY(-10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left]{transform:translateX(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right]{transform:translateX(-10px)}
html,body,#root{height:100%}body{margin:0}.tippy-box{background-color:#666;font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-weight:400;padding:8px}.tippy-box[data-placement^=left]>.tippy-arrow::before{border-left-color:#666}.tippy-box[data-placement^=right]>.tippy-arrow::before{border-right-color:#666}.signature-generator{background-image:url("https://mailtrack-signature-generator.s3.eu-west-1.amazonaws.com/wave.svg");background-position:center;background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:row;height:100%}.signature-generator *{font-family:inter,helvetica,"Helvetica Neue",sans-serif}.signature-generator h1{color:#333;font-size:40px;font-weight:300}.signature-generator h2{color:#423e87;font-size:16px;text-transform:uppercase}.signature-generator__wrapper{display:grid;grid-template-columns:auto auto auto;margin:0 auto;max-width:1400px;width:100%}.signature-generator__sidebar{background-color:#fff;box-shadow:0 0 13px rgba(0,0,0,.16);max-width:400px;padding:8px 0 20px}.signature-generator__sidebar img{display:block;margin:32px 0 32px 32px}.signature-generator__sidebar h2{margin-bottom:30px;padding-left:40px}.signature-generator__sidebar form{padding:0 40px;position:relative}.signature-generator__sidebar form .clear{background-color:rgba(0,0,0,0);border:0;color:#423e87;cursor:pointer;display:flex;font-size:12px;font-weight:400;justify-content:center;line-height:18px;margin:0;padding:0;position:absolute;right:40px;text-decoration:underline;z-index:1}.signature-generator__sidebar form .clear img{margin-right:4px}.signature-generator__sidebar form .form__row{align-items:flex-end;display:flex}.signature-generator__sidebar form .form__row>:not(:first-child){margin-left:32px}.signature-generator__sidebar form .form__input,.signature-generator__sidebar form .form__textarea{display:inline-block;margin-bottom:20px;position:relative;width:100%}.signature-generator__sidebar form .form__input .form__input__label,.signature-generator__sidebar form .form__textarea .form__input__label{display:flex;flex-direction:row;justify-content:space-between}.signature-generator__sidebar form .form__input .form__input__color-picker,.signature-generator__sidebar form .form__textarea .form__input__color-picker{align-items:center;display:flex}.signature-generator__sidebar form .form__input .form__input__color-picker::before,.signature-generator__sidebar form .form__textarea .form__input__color-picker::before{color:#a4a2e2;content:"#";font-size:15px;left:55px;position:absolute}.signature-generator__sidebar form .form__input .form__input__color-picker button,.signature-generator__sidebar form .form__textarea .form__input__color-picker button{border:3px solid #fff;border-radius:50%;box-shadow:0 0 4px 1px rgba(0,0,0,.25);cursor:pointer;height:30px;margin-right:12px;width:30px}.signature-generator__sidebar form .form__input .form__input__color-picker input,.signature-generator__sidebar form .form__textarea .form__input__color-picker input{flex:1;padding-left:30px}.signature-generator__sidebar form .form__input label,.signature-generator__sidebar form .form__textarea label{color:#423e87;display:block;font-size:14px;font-weight:700;margin-bottom:8px}.signature-generator__sidebar form .form__input img,.signature-generator__sidebar form .form__textarea img{margin:10px;position:absolute}.signature-generator__sidebar form .form__input img.tooltip-img,.signature-generator__sidebar form .form__textarea img.tooltip-img{background-color:rgba(0,0,0,0);margin:0;position:relative}.signature-generator__sidebar form .form__input input,.signature-generator__sidebar form .form__input textarea,.signature-generator__sidebar form .form__textarea input,.signature-generator__sidebar form .form__textarea textarea{border:0;border-radius:8px;box-shadow:0 0 0 1px #a4a2e2;box-sizing:border-box;font-size:14px;padding:10px 14px;resize:none;width:100%}.signature-generator__sidebar form .form__input input:active,.signature-generator__sidebar form .form__input textarea:active,.signature-generator__sidebar form .form__textarea input:active,.signature-generator__sidebar form .form__textarea textarea:active{box-shadow:0 0 0 2px #a4a2e2}.signature-generator__sidebar form .form__input input:focus,.signature-generator__sidebar form .form__input input:hover,.signature-generator__sidebar form .form__input textarea:focus,.signature-generator__sidebar form .form__input textarea:hover,.signature-generator__sidebar form .form__textarea input:focus,.signature-generator__sidebar form .form__textarea input:hover,.signature-generator__sidebar form .form__textarea textarea:focus,.signature-generator__sidebar form .form__textarea textarea:hover{box-shadow:0 0 0 1px #6964ce}.signature-generator__sidebar form .form__input input:focus,.signature-generator__sidebar form .form__input textarea:focus,.signature-generator__sidebar form .form__textarea input:focus,.signature-generator__sidebar form .form__textarea textarea:focus{outline:none}.signature-generator__sidebar form .form__input input.icon,.signature-generator__sidebar form .form__input textarea.icon,.signature-generator__sidebar form .form__textarea input.icon,.signature-generator__sidebar form .form__textarea textarea.icon{padding:10px 14px 10px 40px}.signature-generator__container{margin:0 20px;padding-top:35px;text-align:center}.signature-generator__container h1{margin-bottom:104px;text-align:center}.signature-generator__container .sticky{position:sticky;top:10px}.signature-generator__container .signature-generator__preview{background-color:#fff;border-radius:8px 8px 0 0;box-shadow:0 0 13px rgba(0,0,0,.16);min-width:400px;overflow:hidden;text-align:initial}.signature-generator__container .signature-generator__preview .titlebar{align-items:center;background-color:#333;display:flex;height:40px;justify-content:right;padding:4px}.signature-generator__container .signature-generator__preview .titlebar__minimize,.signature-generator__container .signature-generator__preview .titlebar__maximize,.signature-generator__container .signature-generator__preview .titlebar__close{background-color:#fff;border-radius:6px;height:12px;margin-right:10px;transition:background-color 200ms ease-in-out;width:12px}.signature-generator__container .signature-generator__preview .titlebar__minimize:hover{background-color:#f4a624}.signature-generator__container .signature-generator__preview .titlebar__maximize:hover{background-color:#007a50}.signature-generator__container .signature-generator__preview .titlebar__close:hover{background-color:#fe4444}.signature-generator__container .signature-generator__preview .mail{padding:0 16px 34px}.signature-generator__container .signature-generator__preview .mail__skeleton{background-color:#f1f3f4;border-radius:16px;height:12px;width:100px}.signature-generator__container .signature-generator__preview .mail__row{display:flex;flex-direction:row}.signature-generator__container .signature-generator__preview .mail__row .mail__skeleton:first-child{margin-right:24px;width:256px}.signature-generator__container .signature-generator__preview .mail__recipients,.signature-generator__container .signature-generator__preview .mail__subject{align-items:center;border-bottom:1px solid #ddd;display:flex;height:32px;padding:4px}.signature-generator__container .signature-generator__preview .mail__subject .mail__skeleton{width:180px}.signature-generator__container .signature-generator__preview .mail__body{display:flex;flex-direction:column;margin:20px 0 35px;padding:4px}.signature-generator__container .signature-generator__preview .mail__body .mail__skeleton:nth-child(3){width:180px}.signature-generator__container .signature-generator__preview .mail__body .mail__skeleton:not(:nth-child(3)){margin-bottom:24px}.signature-generator__container .signature-generator__copy-btn{background-color:#423e87;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;margin-top:50px;padding:12px 64px;position:relative;text-decoration:none;text-transform:capitalize;white-space:nowrap}.signature-generator__container .signature-generator__copy-btn:active{background-color:#6964ce;box-shadow:inset 0 0 20px rgba(0,0,0,.4)}.signature-generator__container .signature-generator__copy-btn:focus,.signature-generator__container .signature-generator__copy-btn:hover{background-color:#6964ce}
