@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}

[dir="rtl"] .tippy-box[data-placement^=left]>.tippy-arrow::before{border-left-color:currentcolor;border-right-color:#666}

.tippy-box[data-placement^=right]>.tippy-arrow::before{border-right-color:#666}

[dir="rtl"] .tippy-box[data-placement^=right]>.tippy-arrow::before{border-right-color:currentcolor;border-left-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}

[dir="rtl"] .signature-generator__sidebar img{margin:32px 32px 32px 0}

.signature-generator__sidebar h2{margin-bottom:30px;padding-left:40px}

[dir="rtl"] .signature-generator__sidebar h2{padding-left:0;padding-right: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}

[dir="rtl"] .signature-generator__sidebar form .clear{right:auto;left:40px}

.signature-generator__sidebar form .clear img{margin-right:4px}

[dir="rtl"] .signature-generator__sidebar form .clear img{margin-right:0;margin-left: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}

[dir="rtl"] .signature-generator__sidebar form .form__row>:not(:first-child){margin-left:0;margin-right: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}

[dir="rtl"] .signature-generator__sidebar form .form__input .form__input__color-picker::before,[dir="rtl"] .signature-generator__sidebar form .form__textarea .form__input__color-picker::before{left:auto;right:55px}

.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}

[dir="rtl"] .signature-generator__sidebar form .form__input .form__input__color-picker button,[dir="rtl"] .signature-generator__sidebar form .form__textarea .form__input__color-picker button{margin-right:0;margin-left:12px}

.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}

[dir="rtl"] .signature-generator__sidebar form .form__input .form__input__color-picker input,[dir="rtl"] .signature-generator__sidebar form .form__textarea .form__input__color-picker input{padding-left:0;padding-right: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}

[dir="rtl"] .signature-generator__sidebar form .form__input input.icon,[dir="rtl"] .signature-generator__sidebar form .form__input textarea.icon,[dir="rtl"] .signature-generator__sidebar form .form__textarea input.icon,[dir="rtl"] .signature-generator__sidebar form .form__textarea textarea.icon{padding:10px 40px 10px 14px}

.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}

[dir="rtl"] .signature-generator__container .signature-generator__preview .titlebar{justify-content:left}

.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}

[dir="rtl"] .signature-generator__container .signature-generator__preview .titlebar__minimize,[dir="rtl"] .signature-generator__container .signature-generator__preview .titlebar__maximize,[dir="rtl"] .signature-generator__container .signature-generator__preview .titlebar__close{margin-right:0;margin-left:10px}

.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}

[dir="rtl"] .signature-generator__container .signature-generator__preview .mail__row .mail__skeleton:first-child{margin-right:0;margin-left:24px}

.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}