/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }
/* Global */
* {
    box-sizing: border-box;
}
body {
	font-family: 'Inter UI', sans-serif;
    letter-spacing: -0.03em;
}
a,
a:not(.btn):hover {
	text-decoration: none;
	color: #2F7DF6;
}
input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: 0;
}
[contenteditable=true] {
	cursor: text;
}
[contenteditable=true]:empty::before {
	content: attr(placeholder);
	color: rgba(0, 0, 0, 0.4)
}
.input--transparent {
	border: 0;
	background: none;
	outline: 0;
}
button {
	font-family: 'Inter UI', sans-serif;
	letter-spacing: -0.03em;
	padding: 1px 7px 2px; /* Chrome default values */
}
button:hover {
	cursor: pointer;
}
/* Loading indicator */
.loader {

}
.loader--with-background::after {
	content: '';
	position: fixed;
	left: 0;
	top: 48px;
	height: 100%;
	height: calc(100% - 48px);
	width: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1001;
}	
	.loader__content {
		position: fixed;
		left: 50%;
		top: 50%;
		text-align: center;
		z-index: 11;

		transform: translate(-50%, -50%);
	}
		.loader__img {
			width: 50px;
			height: 50px;
			display: block;
			margin: 0 auto;
		}
/* Buttons */
.btn {
	padding: 6px 24px;

	border: 1px solid #CCCCCC;
	border-radius: 3px;

	font-weight: bold;
	line-height: 15px;
	font-size: 12px;
	letter-spacing: -0.03em;
}
.btn:hover {
	cursor: pointer;
}
.btn:focus {
	outline: 0;
	box-shadow: none;
}
	/* BTN styles */
	.btn--primary {
		border-color: #2f7df6;
		background: #2f7df6;
		color: #fdfdfd;
	}
	.btn--secondary {
		color: #2f7df6;
		background: rgba(47, 125, 246, 0.08);
		border: 1px solid rgba(47, 125, 246, 0.28);		
	}
	.btn--light {
		background: #FFFFFF;
		border: 1px solid rgba(47, 125, 246, 0.28);
		color: #2f7df6;
	}
	.btn--unstyled {
		border: 0;
		outline: 0;
	
		background: none;
		text-transform: uppercase;

		text-shadow: 0px 8px 13px rgba(0, 0, 0, 0.08);
	}
		.btn--unstyled:focus {
			outline: 0;
			box-shadow: none;
		}
		.btn--unstyled-blue {
			color: #2F7DF6;
		}
		.btn--unstyled-dark {
			color: #767676;
		}
	.btn--danger {
		background: #EA6A6A;
		border: 1px solid #EA6A6A;
		border-radius: 2px;
		color: #FFFFFF;
	}
	.btn--warning {
		background: #F8CC46;
		border: 1px solid #E78C6C;
		border-radius: 2px;
		color: #000000;
	}
	.btn--uppercase {
		text-transform: uppercase;
	}
	/* BTN sizes */
	.btn--small {
		font-size: 10px;
	}
	.btn--medium {
		font-size: 10px;
	}
	.btn--large {
		padding: 13px;
		font-size: 13px;
	}
	.btn--xlarge {
		padding: 19px;
		border-radius: 5px;
		font-size: 16px;
	}
	/* BTN colours */
	.btn--dark {
		color: #767676;
	}
	.btn--add-new-animation {
		padding: 0;
		display: inline;
		border: 0;
		margin-left: 5px;
		position: absolute;
		left: 30px;
		top: 4px;
	}
		.btn--add-new-animation svg path {
			transition: 200ms;
		}
		.btn--add-new-animation svg rect {
			transition: 200ms;
		}		
		.btn--add-new-animation:hover svg path {
			fill: #fff;
		}
		.btn--add-new-animation:hover svg rect {
			fill: #2F7DF6;
		}	
	.btn--account-back-to-projects {
		float: left;
		padding-left: 25px;
		padding-right: 25px;		
	}	
.btn-icon {
	width: 36px;
	height: 22px;
	border: 1px solid #DDDDDD;
	box-sizing: border-box;
	border-radius: 4px;
	background: #fff;
}
.btn-icon:hover {
	cursor: pointer;
}
.btn + .btn {
	margin: 0 15px 0 0;
}
.btn--clean {
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
}
.btn-new-project {
    width: 100%;
    display: block;
    text-align: center;
    padding: 16px 0;
    font-size: 14px;
}

.btn--generate-animation-name {
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    left: -12px;
    top: 9px;
    padding: 0;
    padding-right: 13px;
    display: none;
}

.btn--disabled {
    cursor: none;
    min-width: 160px;
    float: right;
    margin: 0 !important;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: 49%;
    border-color: #CCCCCC;
    background: #E8E8E8;
    text-align: center;
    color: #B7B7B7;
}
.login {
    min-height: 100vh;

    background: #f8f8f8;
    background: -moz-linear-gradient(left, #f8f8f8 0%, #f8f8f8 50%, #f8f8f8 50%, #f8f8f8 50%, #ffffff 50%, #ffffff 51%, #ffffff 100%);
    background: -webkit-linear-gradient(left, #f8f8f8 0%,#f8f8f8 50%,#f8f8f8 50%,#f8f8f8 50%,#ffffff 50%,#ffffff 51%,#ffffff 100%);
    background: linear-gradient(to right, #f8f8f8 0%,#f8f8f8 50%,#f8f8f8 50%,#f8f8f8 50%,#ffffff 50%,#ffffff 51%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ffffff',GradientType=1 );
}
    .auth__back-btn {
        position: absolute;
        top: 40px;
        left: 6.944%; 
    }
    .auth__logo,
    .auth__title {
        position: absolute;
        left: 50%;

        transform: translateX(-50%);
    }
    .auth__logo {
        top: 48px;
    }
    .auth__title {
        top: 90px;
        font-family: Syne;
        line-height: 101px;
        font-size: 71px;
        text-align: center;
        letter-spacing: -0.01em;
        white-space: nowrap;

        color: #4D4D4D;
    }
    .auth__forms {
        overflow-x: hidden;
        padding: 270px 6.944% 0 6.944%;
    }
        .auth__form__nav {
            display: flex;
        }
            .auth__form__nav__item,
            .auth__form__nav__item--selected:hover {
                position: relative;
                width: 50%;
                padding: 25px 0 28px 0;

                font-weight: bold;
                line-height: 15px;
                font-size: 21px;
                text-align: center;
                letter-spacing: -0.02em;
                text-transform: none;

                color: #2F7DF6;
            }
            .auth__form__nav__item:before {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;

                height: 1px;
                background: rgba(0, 0, 0, 0.15);
            }
            .auth__form__nav__item--selected {
                color: #000000;
            }
                .auth__form__nav__item--selected:before {
                    height: 3px;
                    background: #000000;
                }
            .auth__form__nav__item:hover:before {
                height: 3px;
                background: #2F7DF6;
                box-shadow: 0px 0px 21px rgba(68, 138, 247, 0.23);
            }
                .auth__form__nav__item:after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    width: 100px;

                    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
                }
                .auth__form__nav__item:first-child:after {
                    right: 100%;
                }
                .auth__form__nav__item:last-child:after {
                    left: 100%;
                    
                }
        .auth__form {
            display: none;
        }
        .auth__form--selected {
            display: flex;
        }
            .auth__form__left,
            .auth__form__right {
                width: 50%;
                padding-top: 30px;
            }
                .auth__form__group {
                    width: 66%;
                    padding: 10px 0;
                    margin: 0 auto;
                }
                    .auth__form__label {
                        display: block;
                        margin: 10px 0 7px 10px;
                        font-weight: bold;
                        line-height: 15px;
                        font-size: 13px;
                        letter-spacing: -0.02em;

                        color: #767676;
                    }
                    .auth__form__label--normal {
                        font-weight: normal;
                    }
                    .auth__form__group input {
                        width: 100%;
                        padding: 14px 10px;
                        border: 1px solid #2F7DF6;
                        box-sizing: border-box;
                        border-radius: 7px;
                    }
                    .auth__form__group input[type="checkbox"],
                    .auth__form__group input[type="radio"] {
                        width: auto;
                    }
                    .auth__form__group input[type="number"]:focus,
                    .auth__form__group input[type="text"]:focus,
                    .auth__form__group input[type="password"]:focus,
                    .auth__form__group input[type="email"]:focus {
                        box-shadow: 0px 8px 13px rgba(47, 125, 246, 0.13), 0px 3px 5px rgba(47, 125, 246, 0.21);
                    }
                    .auth__form__group--submit {
                        margin-top: 22px;
                        text-align: center;
                    }
                        .auth__form__submit {
                            width: 100%;
                        }
                        .auth__form__reset-pass {
                            display: inline-block;
                            padding: 10px;
                            margin: 7px auto 0 auto;
                            line-height: 15px;
                            font-size: 12px;
                            text-align: center;
                            letter-spacing: -0.02em;
                            text-decoration-line: underline;

                            color: #2F7DF6;
                        }

#auth footer {
    padding: 70px 0;
    margin: 0 6.944%;
    text-align: center;
}
#auth footer a {
    text-decoration: underline;
}

/* Reset password pages */
.email {

}
    .email .auth__forms form,
    .reset .auth__forms form {
        max-width: 1000px;
        padding: 70px;
        margin: 0 auto;
        background: #F8F8F8;
        border-radius: 21px;
    }
        .email__status {
            margin-bottom: 40px;
            font-size: 21px;
            line-height: 28px;

            text-align: center;
            letter-spacing: -0.02em;

            color: #4D4D4D;
        }
        .email .auth__form__submit,
        .reset .auth__form__submit {
            width: 70%;
        }

.privacy {
	background: #43479E linear-gradient(90deg, rgba(47, 123, 246, 0) 32.59%, #2F7BF6 42.07%, rgba(47, 125, 246, 0.16) 83.34%, rgba(47, 125, 246, 0) 100%);
	box-shadow: 0px 8px 13px rgba(67, 71, 158, 0.13), 0px 3px 5px rgba(67, 71, 158, 0.21);
	border-radius: 7px;
	padding: 13px 45px;
	color: #fff;
	font-size: 0.8125em;
	letter-spacing: 0.01em;
	position: fixed;
	left: 50%;
	bottom: 10px;
	z-index: 9;
	transform: translate(-50%, 0);
	max-width: 650px;
	min-width: 300px;
}
.privacy--hidden {
    display: none;
}
    .privacy p {
        margin: 0;
    }
    .privacy a {
        color: inherit;
        text-decoration: underline;
    }
    .privacy a:hover {
        color: inherit;
    }
    .privacy__close {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
    }
    .privacy__close:before, 
    .privacy__close:after {
        content: ' ';
        position: absolute;
        left: 50%;
        top: 50%;
        height: 14px;
        width: 1px;
        background-color: #fff;

    }
    .privacy__close:before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .privacy__close:after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}
*:focus{
    outline: 0;
}
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
h1,h2,h3,h4,h5,h6{
    font-weight: normal;
}
a{
    color: inherit;
    text-decoration: none;
    -webkit-transition: color 350ms ease-in-out;
    -o-transition: color 350ms ease-in-out;
    transition: color 350ms ease-in-out;
}
a:hover, a:active, a:focus {
   outline: 0;
}
p{
    margin: 0;
    font-size: 1.0625em;
    line-height: 1.7647;
    margin: 0 0 1.7647em;
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
.caps{
    text-transform: uppercase;
}
.text-right{
    text-align: right;
}
.text-left{
    text-align: left;
}
.text-center{
    text-align: center;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
/* 
 * Input styles 
 */
/* Primary */
.is-primary {
    border: 1px solid #2F7DF6;
    color: #2F7DF6;
}
input.is-primary:focus {
    box-shadow: 0px 8px 13px rgba(47, 125, 246, 0.13), 0px 3px 5px rgba(47, 125, 246, 0.21);
}
/* Warning */
.is-warning {
    border: 1px solid #F8CC46;
    color: #F8CC46;
}
input.is-warning:focus {
    box-shadow: 0px 8px 13px rgba(248, 204, 70, 0.13), 0px 3px 5px rgba(248, 204, 70, 0.21);
}
/* Invalid or error */
input.is-invalid {
    border: 1px solid #EB5757;
    color: #EB5757;
}
input.is-invalid:focus {
    box-shadow: 0px 8px 13px rgba(235, 87, 87, 0.13), 0px 3px 5px rgba(235, 87, 87, 0.21);
}
/* Success */
.is-success {
    border: 1px solid #659E58;
    color: #659E58;
}
input.is-success:focus {
    box-shadow: 0px 8px 13px rgba(101, 158, 88, 0.13), 0px 3px 5px rgba(101, 158, 88, 0.21);
}
/* Dark neutral */
.is-dark-neutral {
    border: 1px solid #4D4D4D;
    color: #4D4D4D;
}
input.is-dark-neutral:focus {
    box-shadow: 0px 8px 13px rgba(51, 51, 51, 0.13), 0px 3px 5px rgba(51, 51, 51, 0.21);
}
/* Light neutral */
.is-light-neutral {
    border: 1px solid #4D4D4D;
    color: #4D4D4D;
}
input.is-light-neutral:focus {
    box-shadow: 0px 8px 13px rgba(229, 229, 229, 0.13), 0px 3px 5px rgba(229, 229, 229, 0.21);
}

/* Input messages */
.sys-message {
    display: block;
    padding: 10px;
    border-radius: 7px;
    margin: 6px 0 0 0;
    line-height: 14px;
    font-size: 13px;
}
.sys-message--primary {
    border: 1px solid #2F7DF6;
    background: #2F7DF6;
    color: #FAFAFA;
    box-shadow: 0px 8px 13px rgba(47, 125, 246, 0.13), 0px 3px 5px rgba(47, 125, 246, 0.21);
}
.sys-message--warning {
    border: 1px solid #F8CC46;
    background: #F8CC46;
    color: #4D4D4D;
    box-shadow: 0px 8px 13px rgba(248, 204, 70, 0.13), 0px 3px 5px rgba(248, 204, 70, 0.21);
}
.sys-message--invalid {
    border: 1px solid #EB5757;
    background: #EB5757;
    color: #F2F2F2;
    box-shadow: 0px 8px 13px rgba(235, 87, 87, 0.13), 0px 3px 5px rgba(235, 87, 87, 0.21);
}
.sys-message--success {
    border: 1px solid #659E58;
    background: #659E58;
    color: #F2F2F2;
    box-shadow: 0px 8px 13px rgba(101, 158, 88, 0.13), 0px 3px 5px rgba(101, 158, 88, 0.21);
}
.sys-message--dark-neutral {
    border: 1px solid #4D4D4D;
    background: #4D4D4D;
    color: #F2F2F2;
    box-shadow: 0px 8px 13px rgba(51, 51, 51, 0.13), 0px 3px 5px rgba(51, 51, 51, 0.21);
}
.sys-message--light-neutral {
    border: 1px solid #E6E6E6;
    background: #E6E6E6;
    color: #333333;
    box-shadow: 0px 8px 13px rgba(229, 229, 229, 0.13), 0px 3px 5px rgba(229, 229, 229, 0.21);
}