.modal {
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background: rgba(0, 0, 0, 0.4);
}
.modal__content {
	width: 60%;
	margin: 1.5em auto;
	max-width: 500px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.modal__content__custom {
	max-width: 530px;
	text-align: left;
	line-height: 1.44;
	background: #fff;
	margin: 1.5em auto;
}
.modal .modal__content__custom .modal__buttons {
	padding: 20px 30px 30px 0px;
}
.modal__content__custom .mq__modal__section {
	padding: 15px 15px 0px 15px;
}
.modal--rounded .modal__content__custom {
	border-radius: 8px;
}

.modal__header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	padding: 0.75em;
	position: relative;
	background: #e0e0e2;
	color: #1f1f1f;
	text-align: center;
	font-weight: 700;
}
.modal__header h3 {
	margin: 0;
}
.modal__main {
	padding: 10px;
}

.modal__buttons > button {
	margin-right: 10px !important;
	min-height: inherit !important;
}

.modal--rounded .modal__content {
	border-radius: 12px;
}

.modal--rounded .modal__header {
	border-top-right-radius: 12px;
	border-top-left-radius: 12px;
}

.plan__feature__extra__header {
	font-size: 28px;
}

.plan__feature__extra__header2 {
	padding-top: 25px;
	font-size: 28px;
	font-weight: 600;
}

.modal--rounded2 .modal__header {
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}

/* =============================================================================
   Specific modals style
   ========================================================================== */

.modal__new__features .modal__buttons {
	margin-top: 0.5em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal__new__features .modal__header {
	background-color: #fff;
	padding: 0.75em 1.25em;
	border: none;
	display: flex;
	justify-content: space-between;
	height: 0;
	z-index: 2;
}

.modal__new__features .modal__header a {
	margin-left: auto;
}

.modal__new__features .modal__header svg {
	width: 2em;
	height: 2em;
}

.modal__new__features .modal__main {
	position: relative;
	padding: 0 3em 2em 3em;
}

.modal__folder .modal__content {
	width: 300px;
}

/* =============================================================================
   New type of modal (e.g. duplicate project )
   ========================================================================== */

.mq__modal .modal__content {
	padding: 30px 0;
}

.mq__modal .modal__main {
	padding: 0;
}

.mq__modal .modal__buttons {
	padding: 20px 30px 0 30px;
}

.mq__modal .modal__buttons-custom {
	padding: 30px 30px 0 30px;
}

.mq__modal .modal__header {
	background-color: #fff;
	padding: 0;
	margin: 0 30px;
	border: none;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	height: auto;
	z-index: 2;
}

.mq__modal .modal__header h3 {
	font-weight: 700;
	font-size: 1.5em;
}

.mq__modal .modal__header a {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.mq__modal .modal__header svg {
	width: 2em;
	height: 2em;
}
.mq__modal .team__settings__modal__header svg {
	width: 24px !important;
	height: 24px !important;
}

.mq__modal .mq-modal-content {
	padding: 30px 0;
}

.mq__modal form > .message {
	margin: 30px 30px 0 30px;
}

.mq__modal__close {
	color: #aaaaaa;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.mq__modal__title {
	margin: 0;
	padding: 0;
	font-weight: bold;
	font-size: 1.5em;
	color: #000;
}

.mq__modal__subtitle {
	font-size: 0.85em;
	color: #aaaaaa;
}

.mq__modal__heading {
	color: #606060;
	font-weight: bold;
	font-size: 14px;
	margin: 0;
}
.mq__modal__heading2 {
	color: #000000;
	font-size: 18px;
	padding-top: 10px;
	padding-bottom: 20px;
	font-weight: 500;
}
.mq__modal__heading3 {
	color: #000000;
	font-size: 14px;
	margin: 0px;
	padding-top: 30px;
	padding-bottom: 15px;
}
.mq__modal__heading4 {
	color: #000000;
	font-size: 14px;
	padding-bottom: 4px;
}
.mq__modal__heading5 {
	color: #6c7d91;
	font-size: 18px;
	font-weight: 500;
	padding-top: 12px;
}
.mq__modal__heading6 {
	color: #000000;
	font-size: 16px;
	padding-bottom: 8px;
}

.mq__modal__subheading {
	color: #c0c0c0;
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
}

/* New modals don't use headings for now */
.mq__modal .mq-modal-heading {
	display: none;
}

.mq__modal__separator {
	border-bottom: 1px solid #e7e7e7;
	width: 100%;
	padding-top: 30px;
}

.mq__modal__section {
	padding: 20px 30px 0 30px;
	display: block;
}

.mq__modal__saml__error__section {
	padding: 0px 30px 10px 30px;
}

.mq__modal__saml__error__section .mq__modal__subtitle {
	font-size: 14px;
	color: #000;
	margin: 1em 0;
	line-height: 1.5;
}

.mq__modal__auth__section {
	padding: 30px 0px 5px 0px;
}

.mq__modal__no__account__section {
	padding: 5px 0px 30px 0px;
}

.mq__modal__section__first {
	padding-top: 0;
}

.mq__modal__section h2 {
	margin: 0;
}

.mq__modal__actions button {
	font-size: 16px;
	margin-left: 0.5em;
}

.inline__nudger {
	position: relative;
	padding: 15px;
	color: #3b4754;
	background-color: #fefce0;
	border: 1px solid #ffa834;
	border-radius: 4px;
}

.newproject__nudger .mq__modal__heading {
	padding-bottom: 1em;
}

/* =============================================================================
   Specific modals style
   ========================================================================== */

.delete__account__modal .modal__content {
	width: 520px;
	max-width: 520px;
}

.delete__account__modal .delete__email {
	font-weight: bold;
	margin: 10px 0;
}

.delete__account__modal .modal__buttons {
	display: flex;
	flex-direction: row-reverse;
}

.team__settings__modal .modal__content {
	width: 520px;
	max-width: 520px;
}

.team__settings__modal .modal__buttons {
	display: flex;
	justify-content: space-between;
}

.team__settings__modal .mq__modal__separator {
	margin-bottom: 15px;
}

.domainlist__modal .modal__content {
	width: 400px;
	max-width: 400px;
}

.domainlist__modal .modal__buttons {
	display: flex;
	flex-direction: row-reverse;
}

.domainlist__modal .mq__modal__section:first-of-type {
	padding-top: 0;
}

.domainlist__modal .modal__content {
	width: 400px;
	max-width: 400px;
}

.domainlist__modal .modal__buttons {
	display: flex;
	flex-direction: row-reverse;
}

.domainlist__modal .mq__modal__section:first-of-type {
	padding-top: 0;
}

.new__project__modal .modal__content {
	width: 550px;
	max-width: 550px;
}

.new__project__modal .new__project__name input {
	border: 1px solid #aaaaaa;
	padding: 1.2em 0.7em;
}

.new__team__modal .modal__content {
	width: 550px;
	max-width: 550px;
}

.new__team__modal .new__team__name input {
	border: 1px solid #aaaaaa;
	padding: 1.2em 0.7em;
}

.new__team__modal .modal__buttons {
	display: flex;
	flex-direction: row-reverse;
}

.project__quota__modal .modal__content {
	max-width: 630px;
	height: 620px;
	border-radius: 4px;
	padding: 10px 0px 35px 15px;
}

.project__quota__modal .modal__buttons {
	display: flex;
	justify-content: space-between;
	padding-left: 43px;
	padding-top: 30px;
	padding-bottom: 10px;
}

.project__quota__modal .p {
	color: #a3b0c1;
}

.mq__modal .mq-message {
	margin-top: 1em;
}

.mq__modal .mq-premium {
	color: #7656f3;
	background: #efebff;
}

.mq-premium.mq-premium--tag {
	padding: 2px 6px 2px 2px;
	border-radius: 8px;
	margin-right: 4px;
	margin-left: 4px;
}

.mq-message--lg {
	padding: 0.625rem 0.75rem;
	border-radius: 8px;
}

.mq__modal__nudger {
	font-size: 18px;
}

.mq__modal__nudger .mq-modal-x {
	margin: 0em;
}

.mq__modal__nudger .mq__modal__img {
	max-height: 10em;
}

.mq__modal__nudger .mq__modal__title {
	font-size: 1.5em;
	color: #3b4754;
}

.delete__team__modal .modal__content {
	width: 520px;
	max-width: 520px;
}

.delete__team__modal .modal__buttons {
	display: flex;
	flex-direction: row-reverse;
}
.delete__team__modal .p {
	font-size: 15px;
}

.project__transfer__modal .modal__content {
	width: 430px;
}
.project__transfer__modal .mq__modal__section {
	padding: 5px 30px 0px 30px;
}
.project__transfer__modal .modal__buttons {
	display: flex;
	flex-direction: row-reverse;
}

.propose_project__transfer__modal .modal__content {
	width: 530px;
}
.propose_project__transfer__modal .mq__modal__section {
	padding: 5px 30px 0px 30px;
}
.propose_project__transfer__modal .modal__buttons {
	display: flex;
	flex-direction: row;
}
.transfer__options {
	padding-top: 30px;
}
.move__options {
	padding-top: 20px;
}

.mq__modal--new .modal__content {
	width: 420px;
	max-width: 420px;
}

.mq__modal--new input {
	border: 1px solid #aaaaaa;
	padding: 1.2em 0.7em;
}

.mq__modal--new .modal__buttons {
	display: flex;
	flex-direction: row-reverse;
}

.mq__modal--new .mq__modal__section:first-of-type {
	padding-top: 0;
}
.plan__feature__info {
	display: flex;
	align-items: center;
}

.plan__feature__info .plan__feature__info__icon {
	height: 16px;
	width: 16px;
	padding-right: 14px;
	padding-bottom: 8px;
}

.plan__feature__info .plan__feature__info__icon2 {
	height: 20px;
	width: 20px;
	padding-right: 5px;
	padding-bottom: 3px;
}

.mq__modal--new .modal__content {
	width: 400px;
	max-width: 400px;
}

.mq__modal--new input {
	border: 1px solid #aaaaaa;
	padding: 1.2em 0.7em;
}

.mq__modal--new .modal__buttons {
	display: flex;
	flex-direction: row-reverse;
}

.mq__modal--new .mq__modal__section:first-of-type {
	padding-top: 0;
}

.confirm-comments__modal .modal__header {
	flex-direction: row;
}

.confirm-comments__modal .modal__header a {
	position: absolute;
	right: -10px;
	top: -10px;
}

.confirm-comments__modal.mq__modal .modal__header svg {
	width: 1.5em;
	height: 1.5em;
}

.modal__nudger {
	padding-top: 33px;
	padding-left: 45px;
}
.modal__nudger img {
	width: 320px;
	height: 180px;
}
.modal__nudger__img {
	padding-left: 40px;
}

.plain-footer {
	margin: 0;
	padding: 0;
	border: none;
}
.plain-footer__container {
	display: flex;
	flex-direction: row;
	width: 720px;
	margin: 0 auto;
}
.plain-footer__nav {
	display: flex;
	align-items: center;
	flex-grow: 1;
}
.plain-footer__links > li {
	margin-right: 3em;
}
.plain-footer__logo {
	margin-right: 4em;
}
.plain-footer__copy {
	display: flex;
	align-items: center;
	opacity: 0.3;
}

.plain-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.plain-container__title {
	margin-bottom: 30px;
	text-align: center;
	font-size: 20px;
	color: #4d4d4d;
}
.plain-container__logo {
	text-align: center;
	padding: 4em 0;
}
.plain-container__logo svg {
	fill: #616161;
}
.plain-container__content {
	margin: auto;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.plain-container__divider {
	margin: 10px 0;
	border-top: 1px solid #e0e0e0;
}
.plain-container__divider__noborder {
	margin: 12px 0;
}
.plain-container__divider__noborder {
	margin: 12px 0;
}
.plain-container__rightdivider {
	margin-right: 7px;
}
.auth-container {
	width: 26em;
	margin-bottom: 3.5em;
}
.auth-container .plain-container__divider {
	margin: 1em 0;
}
.auth-container .plain-container__divider__noborder {
	margin: 1em 0;
}
.auth-container-details {
	margin-bottom: 2em;
}
.auth-button {
	width: 100%;
}
.auth-switch > span {
	opacity: 0.5;
}

.auth-switch__icon {
	font-size: 1.1em;
	vertical-align: middle;
	display: inline-block;
	padding: 0 0.15em;
}

.plain-container__form-item {
	margin-bottom: 10px;
}

.auth-terms .input__label {
	font-size: 12px;
}

.delete__result__page p {
	margin-top: 0;
}

.delete__result__page svg {
	width: 50px;
	height: 50px;
}

.delete__result__page--success svg {
	fill: #5be4ba;
}

.delete__result__page--expired svg {
	fill: #ff5d55;
}

.not-found__container {
	text-align: center;
}
.not-found__title,
.not-found__flip {
	font-size: 2.3em;
	margin-bottom: 1em;
	color: #424242;
}
.not-found__title,
.not-found__emoji {
	opacity: 0.5;
}
.not-found__url {
	display: inline-block;
	font-size: 0.6em;
	transform: rotate(180deg);
	animation: rotate 2s 0s infinite forwards;
	animation-delay: 2s;
}
/* more frames in the same position will delay animation */
@keyframes rotate {
	0% {
		transform: rotate(-180deg);
	}
	20% {
		transform: rotate(-180deg);
	}
	30% {
		transform: rotate(-180deg);
	}
	40% {
		transform: rotate(-180deg);
	}
	50% {
		transform: rotate(-180deg);
	}
	60% {
		transform: rotate(-180deg);
	}
	70% {
		transform: rotate(-180deg);
	}
	100% {
		transform: rotate(180deg);
	}
}
.not-found__url:hover {
	text-decoration: underline;
}

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

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

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
    font-family: sans-serif; /* 1 */
    line-height: 1.15; /* 2 */
    -ms-text-size-adjust: 100%; /* 3 */
    -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
    margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

/**
 * 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
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
    display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
    margin: 1em 40px;
}

/**
 * 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
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
    background-color: transparent; /* 1 */
    -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
    outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
    font-weight: inherit;
}

/**
 * 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 style in Android 4.3-.
 */

dfn {
    font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
    background-color: #ff0;
    color: #000;
}

/**
 * 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
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
    display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
    border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
    overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif; /* 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;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
    -webkit-appearance: button; /* 2 */
}

/**
 * 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;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 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 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

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 and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[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 IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
    display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
    display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
    display: none;
}
/*
    PAGE SETUP
    ----------
/*
    The app container takes the full height of the browser window.
    (100vh = 100% of the viewport's height).
    You can also use the `min-height` property instead
    if you want to ensure the app is at least
    as big as the browser window, but not constrain it beyond that.
*/
/*
    FLEXBOX LAYOUT
    --------------

    We're using the BEM naming methodology (http://getbem.com/naming/).
    Block:
        .layout
    Elements:
        .layout__item
    Modifiers:
        .layout__item--fixed-size
        .layout__item--grow,
        et cetera
*/
/*
    The basic building block is a layout container that will distribute
    its child elements either horizontally or vertically.
*/
.layout {
	display: flex;
}
/*
    The children of a layout container may be laid either horizontally
    or vertically, depending on the `flex-direction` property.
    Here we create two modifiers for the .layout box
*/
.layout--hbox {
	flex-direction: row;
}
.layout--vbox {
	flex-direction: column;
}
/*
    A layout that stretches all child elements to the same size.
    This is useful for things like sidebars for which we might want
    to have a background that stretches all the way down.
    (Even if the sidebar only has a little content)
*/
.layout--stretch {
	align-items: stretch;
}
/*
    The alternative to stretching the child elements is to align
    them in some way. In some situations, such as in headers that
    contain logos and navigation menus, you may want to align all
    children centrally.
*/
.layout--middle {
	align-items: center;
}
/*
    In situation where we need children to 'float' at opposite directions of the layout,
    we can use the `justify-content` property to push them to the edges.
*/
.layout--spread {
	justify-content: space-between;
}
/*
    We might want to move the children towards the end of the container
*/
.layout--end {
	justify-content: flex-end;
}

.layout--start {
	justify-content: flex-start;
}
.layout--wrap {
	flex-wrap: wrap;
}

.layout--centered {
	justify-content: space-around;
}

.layout--center {
	justify-content: center;
}

/*
    This is the only element we need in a layout block.
    By default, a `layout__item` does not need to do anything special.
    It has `flex: 0 1 auto` which is a shorthand for:
        - flex-grow: 0
        - flex-shrink: 1
        - flex-basis: auto
    We do however set `overflow: hidden` on it, so that we can enable
    scrolling on items that need it (see modifiers below).
*/
.layout__item {
	flex: 0 1 auto;
	overflow: hidden;
}

/*
    This is a layout item that permits its children to overflow
*/
.layout__item--overflow {
	overflow: visible;
}

/*
    A layout item that grows to fill the available space.
*/
.layout__item--grow {
	flex-grow: 1;
}
/*
    A layout item that shows a scrollbar in case its content overflows
*/
.layout__item--scroll {
	overflow-y: auto;
	overflow-x: hidden;
}
/*
    A layout item that maintains a fixed size.
    (Either width or height, depending on how the items are laid out)
    This is accomplished by setting both `flex-grow` and `flex-shrink` to 0,
    in effect disabling the flexibility on the item.
*/
.layout__item--fixed-size {
	flex-grow: 0;
	flex-shrink: 0;
	box-sizing: border-box;
}
/*
    For items with a fixed size, we control that size by setting the
    `flex-basis` property rather than the `width` or `height` property.
    Below, we define a couple of sizes that are used throughout the layout.
*/
.layout__item--width-medium {
	flex-basis: 17em;
}
.layout__item--height-small {
	flex-basis: 3.5em;
	max-height: 3.5em;
}

.layout__item--width-small {
	flex-basis: 1em;
}

.layout__item--width-10 {
	flex-basis: 10%;
}

.layout__item--width-15 {
	flex-basis: 15%;
}

.layout__item--width-20 {
	flex-basis: 20%;
}

.layout__item--width-25 {
	flex-basis: 25%;
}

.layout__item--width-30 {
	flex-basis: 30%;
}

.layout__item--width-35 {
	flex-basis: 35%;
}

.layout__item--width-45 {
	flex-basis: 45%;
}

.layout__item--width-50 {
	flex-basis: 50%;
}

.layout__item--width-55 {
	flex-basis: 55%;
}

.layout__item--width-60 {
	flex-basis: 60%;
}

.layout__item--width-65 {
	flex-basis: 65%;
}

.layout__item--width-70 {
	flex-basis: 70%;
}

.layout__item--width-75 {
	flex-basis: 75%;
}

.layout__item--width-80 {
	flex-basis: 80%;
}

.layout__item--width-85 {
	flex-basis: 85%;
}

.layout__item--width-90 {
	flex-basis: 90%;
}

.layout__item--full-width {
	flex-basis: 100%;
}

.layout__item--position-relative {
	position: relative;
}

/*
    In general, you'd want to adjust how the app lays out when viewed
    on small devices.
    Below is a minimal example of turning all flex layouts to normal block layouts.
*/
/*@media (max-width: 40em) {
    .layout {
        display: block;
    }

    .layout__item {
        max-height: auto !important;
    }
}*/

.rc-tooltip.rc-tooltip-zoom-enter,
.rc-tooltip.rc-tooltip-zoom-leave {
  display: block;
}
.rc-tooltip-zoom-enter,
.rc-tooltip-zoom-appear {
  opacity: 0;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  animation-play-state: paused;
}
.rc-tooltip-zoom-leave {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
  animation-play-state: paused;
}
.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
  animation-name: rcToolTipZoomIn;
  animation-play-state: running;
}
.rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
  animation-name: rcToolTipZoomOut;
  animation-play-state: running;
}
@keyframes rcToolTipZoomIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
}
@keyframes rcToolTipZoomOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
}
.rc-tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  visibility: visible;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.9;
}
.rc-tooltip-hidden {
  display: none;
}
.rc-tooltip-placement-top,
.rc-tooltip-placement-topLeft,
.rc-tooltip-placement-topRight {
  padding: 5px 0 9px 0;
}
.rc-tooltip-placement-right,
.rc-tooltip-placement-rightTop,
.rc-tooltip-placement-rightBottom {
  padding: 0 5px 0 9px;
}
.rc-tooltip-placement-bottom,
.rc-tooltip-placement-bottomLeft,
.rc-tooltip-placement-bottomRight {
  padding: 9px 0 5px 0;
}
.rc-tooltip-placement-left,
.rc-tooltip-placement-leftTop,
.rc-tooltip-placement-leftBottom {
  padding: 0 9px 0 5px;
}
.rc-tooltip-inner {
  padding: 8px 10px;
  color: #fff;
  text-align: left;
  text-decoration: none;
  background-color: #373737;
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
  min-height: 34px;
}
.rc-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.rc-tooltip-placement-top .rc-tooltip-arrow,
.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
  bottom: 4px;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #373737;
}
.rc-tooltip-placement-top .rc-tooltip-arrow {
  left: 50%;
}
.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
  left: 15%;
}
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
  right: 15%;
}
.rc-tooltip-placement-right .rc-tooltip-arrow,
.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
  left: 4px;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #373737;
}
.rc-tooltip-placement-right .rc-tooltip-arrow {
  top: 50%;
}
.rc-tooltip-placement-rightTop .rc-tooltip-arrow {
  top: 15%;
  margin-top: 0;
}
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
  bottom: 15%;
}
.rc-tooltip-placement-left .rc-tooltip-arrow,
.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
  right: 4px;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #373737;
}
.rc-tooltip-placement-left .rc-tooltip-arrow {
  top: 50%;
}
.rc-tooltip-placement-leftTop .rc-tooltip-arrow {
  top: 15%;
  margin-top: 0;
}
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
  bottom: 15%;
}
.rc-tooltip-placement-bottom .rc-tooltip-arrow,
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
  top: 4px;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #373737;
}
.rc-tooltip-placement-bottom .rc-tooltip-arrow {
  left: 50%;
}
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
  left: 15%;
}
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
  right: 15%;
}

@font-face {
	font-family: 'Figtree';
	src: url(https://appstatic.moqups.com/9a094e288196fe8be7e8.woff2) format('woff2');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Figtree';
	src: url(https://appstatic.moqups.com/6f974b06b73219987c46.woff2) format('woff2');
	font-weight: 300 900;
	font-style: italic;
	font-display: swap;
}

body {
	font-size: 14px;
	line-height: 1.5;
	color: #303030;
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/*
		For Chinese/Japanese/Korean languages,
		don't break in the middle of the word.
		For non-CJK languages it behaves as `normal`.
	 */
	word-break: keep-all;
	/* Variables */
	--font-display: 'Figtree', system-ui, sans-serif;
}

input,
select,
textarea {
	font-family: inherit;
	font-size: 1em;
	transition: border-color 0.15s;
}

input,
textarea {
	border: 1px solid #ddd;
	border-radius: 0.2em;
	padding: 0.5em;
	color: #555;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border: 1px solid #006be5 !important;
}

label input[type='text'],
label input[type='password'],
label textarea {
	box-sizing: border-box;
	display: block;
}

.strong {
	font-weight: bold;
}
.btn,
button {
	padding: 0.5em 1em;
	background: #006be5;
	color: #fff;
	border: none;
	border-radius: 0.17em;
	font-size: 1em;
	text-decoration: none;
}

a {
	color: #006ce5;
	cursor: pointer;
	text-decoration: none;
}

.table tr:hover {
	background: #f8f8f9;
}

/* Actionable */

.actionable {
	text-decoration: none;
	color: #1464f6;
	font-size: 14px;
	float: right;
}

.click-action {
	cursor: pointer;
}
.box-action {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	cursor: pointer;
	height: 28px;
	width: 35px;
	padding: 0.2em 0;
	border-radius: 50%;
	border: 1px solid transparent;
	transition-delay: 0.1s;
	transition: 0.2s ease-in-out all;
	text-align: center;
}
.box-action svg {
	-webkit-user-select: none;
	user-select: none;
	fill: #424242;
	width: 28px;
	height: 28px;
}
.box-action:hover {
	background: #e1e1e1;
}
.box-action:hover svg {
	fill: #424242;
}
/*.box-action:hover {*/
/*border-color: #424242;*/
/*}*/
/* Separators */
.integrations-separator,
.menu-item-separator {
	display: block;
	height: 1px;
	background: #e0e0e0;
	margin: 0.5em 0;
	box-sizing: content-box;
}

.integrations-separator {
	margin: 1em 0;
}

/* 
	Clearfix 
	--------------------------
*/

.cf:after {
	clear: both;
	content: ' ';
	display: block;
	height: 0;
	visibility: hidden;
}

/* 
	Placeholders
	---------------------------
*/

::-moz-placeholder,
:-moz-placeholder,
:-ms-input-placeholder,
::-webkit-input-placeholder {
	font-size: 14px;
}

.inline-block {
	display: inline-block;
}

.pull-right {
	float: right;
}

/*
	TEXT STYlES
	-------------------------
*/

.text--centered {
	text-align: center;
}

.text--normal {
	font-weight: normal;
}

.text--uppercase {
	text-transform: uppercase;
}

.text-color-darkgrey {
	color: #9e9e9e;
}

.text-color-lightgrey {
	color: #a9a9a9;
}

/*
	Header
	---------------------------------
*/

.main-logo {
	padding: 0.75em;
}

/*
	Footer
	---------------------------------
*/

.undecorated-links a {
	text-decoration: none;
}

.undecorated-links a:hover {
	text-decoration: underline;
}

.link-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.link-menu li {
	display: inline-block;
	margin-right: 1em;
}

.link-menu__inline {
	display: inline-block;
	margin-left: 1em;
	white-space: nowrap;
}

footer {
	padding: 1em;
	border-top: 1px solid #eee;
}

footer nav {
	width: 100%;
}

.footer__nav {
	width: auto;
	flex-shrink: 0;
}

.footer__right-padded {
	padding-right: 5em;
}

.no-select {
	-webkit-user-select: none;
	user-select: none;
}

/*
	Utility
	------------------------
 */

.text-white {
	color: #fff !important;
}

.badge {
	vertical-align: middle;
	display: inline-block;
	padding: 0.2em 0.75em;
	background: #f0f0f0;
	color: #777;
	border-radius: 0.25em;
	text-transform: uppercase;
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
	App
	------------------------
 */

#app {
	background: #fff;
}

.content-padding {
	padding: 1em;
}

.content-padding.layout__item--scroll > div > div:last-child {
	padding-bottom: 1em;
	box-sizing: border-box;
}

.pos--relative {
	position: relative;
}

.cf:after {
	content: '.';
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}

.input-holder {
	position: relative;
}
.input-holder.check-type {
	display: inline-block;
}
.input-component.input--label-first > span.input__label,
.select-component.input--label-first > span.input__label {
	margin: 0.25em 0;
	display: block;
}

.input-component > span.input__label,
.select-component > span.input__label {
	margin: 0 0 0 0.25em;
	/*font-weight: bold;*/
}

.input-component > div.input__label,
.select-component > div.input__label {
	margin: 0.25em 0;
	/*font-weight: bold;*/
}

.input-component input,
.select-component select,
.input-component textarea {
	border: 1px solid #ddd;
	border-radius: 0.2em;
	padding: 0.75em;
	color: #555;
	box-sizing: border-box;
}
.input-component input:disabled {
	opacity: 0.5 !important;
	color: #7f8c8d;
	background: #ecf0f1;
	border-color: transparent;
	pointer-events: none;
	cursor: not-allowed;
}
.input-component input.has-icon {
	padding-left: 2.5em;
}
.input__icon {
	position: absolute;
	top: 50%;
	left: 0.75em;
	transform: translate(0, -50%);
	z-index: 2;
}
.input__icon svg {
	height: 1.1em;
	width: 1.1em;
	display: block;
	fill: #b0b4b7;
}

.input-component input[type='radio'],
.input-component input[type='checkbox'],
.input-component input[type='email'] {
	margin: 1px;
}

.input-component input[type='text'],
.input-component input[type='password'],
.input-component input[type='email'] {
	width: 100%;
}

.input--invalid input,
.input--invalid input:focus,
.select--invalid select,
.select--invalid select:focus {
	border-color: #dc143c;
}

.input-component.input--required span.input__label:after,
.select-component.select--required span.input__label:after,
.input-component.input--required div.input__label:after,
.select-component.select--required div.input__label:after {
	content: '*';
	font-weight: 700;
	color: #dc143c;
}

span.input__error-message {
	color: #dc143c;
	display: block;
}

span.input__inline-warning {
	color: #dc143c;
	display: block;
	font-size: 0.8em;
}

.input-component,
.select-component {
	width: 100%;
}

.clear {
	background: red;
}

.avatar-image {
	border-radius: 50%;
	vertical-align: middle;
}
.team-avatar {
	cursor: pointer;
}
.avatar-image--micro {
	width: 18px;
	height: 18px;
}
.avatar-image--small {
	width: 30px;
	height: 30px;
}
.avatar-image--sidebar {
	width: 2em;
	height: 2em;
}
.avatar-image--bigger {
	width: 70px;
	height: 70px;
}
.avatar-image--biggest {
	width: 90px;
	height: 90px;
}
.avatar-image--full {
	max-width: 100%;
}

.popover--simple {
	position: absolute;
	z-index: 99;
}
.popover--simple > div {
	/*position: absolute;*/
	background-color: #fff;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
	border: 1px solid #ccc;
	border-radius: 0.3em;
	z-index: 1;
}

.dropmenu {
	position: relative;
	display: inline-block;
}

.dropmenu .left {
	left: -5px;
}
.dropmenu .top {
	bottom: 30px;
}
.dropmenu > div {
	right: 10px;
	transition: 0.3s visibility;
	visibility: hidden;
	min-width: 230px;
	z-index: 10;
}
.dropmenu__label {
	display: inline-block;
	cursor: pointer;
	min-width: 35px;
	margin-right: 8px;
}
.dropmenu__label svg {
	display: inline-block;
	vertical-align: middle;
}

.dropmenu--hover:hover > div {
	visibility: visible;
}

.dropmenu--visible > div {
	visibility: visible;
}

.dropmenu--visible .box-action {
	background: #e1e1e1;
}
.dropmenu--visible .box-action svg {
	fill: #424242;
}

.dropmenu > div div {
	max-width: 230px;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}

.dropmenu .selected {
	color: #303030;
}

.dropmenu .disabled {
	color: #303030;
	background: #efefef;
}

.dropmenu .selected .click-action {
	cursor: default;
	width: 12px;
	height: 12px;
}

.dropmenu > div div > div div {
	padding: 0 0.75em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.dropmenu > div div > div div:not(.selected):not(.disabled):hover {
	background: #006ce5;
	color: #fff;
}
.dropmenu > div div > div div:not(.selected):not(.disabled):hover a {
	color: #ffffff;
}
.dropmenu > div div > div div:not(.selected):hover,
.dropmenu > div div > div div:not(.selected):hover a {
	cursor: pointer;
}

.user__label {
	display: inline-block;
	max-width: 300px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.whats-new {
	border-radius: 2px;
	border: 1px solid #ff6624;
	margin-right: 50px;
	font-size: 12px;
	padding: 4px 8px;
	vertical-align: middle;
	color: #ff6624;
}
.whats-new path {
	fill: #ff6624 !important;
}

.whats-new span {
	line-height: 20px;
}

.whats-new__icon {
	width: 18px;
	padding-right: 4px;
	height: 18px;
	vertical-align: sub;
}

#dashboard header {
	border-bottom: 1px solid #e0e0e2;
	padding: 0;
	position: relative;
	z-index: 20;
}

.nav {
	display: flex;
	flex: 1;
	margin: 0;
	padding-left: 0;
	list-style: none;
}
.nav li {
	display: flex;
	align-items: center;
	position: relative;
}
.nav li a {
	box-sizing: border-box;

	border-bottom: 3px solid transparent;

	transition: border-color 0.15s;
	color: #757575;
	padding: 12px 20px;
	text-decoration: none;
}
/*.nav li a.active::before {*/
/*bottom: 0;*/
/*left: 55%;*/
/*border: solid transparent 6px;*/
/*border-bottom-color: #e0e0e2;*/
/*content: " ";*/
/*height: 0;*/
/*width: 0;*/
/*position: absolute;*/
/*pointer-events: none;*/
/*margin-left: -10px;*/
/*}*/
.nav li a.active {
	color: #006ce5;
	pointer-events: none;

	border-color: #006ce5;
}

.user-menu {
	display: flex;
	align-items: center;
}

.user-menu img {
	margin-right: 5px;
}

.user-menu .support_link {
	margin-right: 20px;
	display: flex;
	align-items: center;
}

.mq-spinner {
	margin: 2em auto;
	position: relative;
	display: block;
	border: 10px solid #ccc;
	border-top-color: rgba(0, 0, 0, 0.2);
	border-right-color: rgba(0, 0, 0, 0.1);
	border-bottom-color: rgba(0, 0, 0, 0.2);
	border-left-color: rgba(0, 0, 0, 0.1);
	animation: load8 1.1s infinite linear;
}
/*spinner*/
.spinner,
.spinner:after {
	border-radius: 50%;
	/*width: 100px;*/
	/*height: 100px;*/
}

@keyframes load8 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Sortable items (i.e. project sidebar) */

.drag-source {
	opacity: 0.25;
	pointer-events: none;
}

.drag-ghost {
	position: absolute;
	pointer-events: none;
	display: none;
	margin-left: 10px;
	margin-top: 10px;
}

.drag-ghost.dragging {
	display: block;
}

#line-placeholder {
	height: 2px;
	background: #006ce5;
	position: absolute;
	z-index: 10000;
	pointer-events: none;
}

#line-placeholder:before,
#line-placeholder:after {
	background: #fff;
	border-radius: 50%;
	border: 2px solid #006ce5;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 4px;
	height: 4px;
	content: ' ';
}

#line-placeholder:before {
	top: 50%;
	left: 0;
}

#line-placeholder:after {
	top: 50%;
	left: 100%;
}

#sortable-ghost {
	z-index: 999;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxMnB4IiBoZWlnaHQ9IjE0cHgiIHZpZXdCb3g9IjAgMCAxMiAxNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTIgMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxnPjxwb2x5Z29uIGZpbGw9IiNGQ0ZDRkMiIHBvaW50cz0iMC41LDEzLjUgMC41LDAuNSA3LjQxOCwwLjUgMTEuNSw0LjU4MiAxMS41LDEzLjUiLz48cGF0aCBmaWxsPSIjNEM0QzREIiBkPSJNNy4yMTEsMUwxMSw0Ljc4OVYxM0gxVjFINy4yMTEgTTcuNjI1LDBIMHYxNGgxMlY0LjM3NUw3LjYyNSwwTDcuNjI1LDB6Ii8+PC9nPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzRDNEM0RCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNy42MjUiIHkxPSIxIiB4Mj0iNy42MjUiIHkyPSI0Ljg3NSIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzRDNEM0RCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMTEiIHkxPSI0LjM3NSIgeDI9IjcuNjI1IiB5Mj0iNC4zNzUiLz48L2c+PC9zdmc+DQo=)
		no-repeat center center;
	width: 12px;
	height: 14px;
}

/* /Sortable items */

.top__banner {
	position: relative;
	text-align: center;
	padding: 0.5em;
	color: #fff;
	background: #006be5;
}

.top__banner--danger {
	background: #e67a00;
}

.top__banner--note {
	background: #fedb2c;
	color: #000000;
}

.top__banner .button {
	display: flex;
	background: transparent;
	border: 2px solid #fff;
	margin: 0 1em;
}

.top__banner .btn--close {
	border: none;
	padding: 0;
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translate(0, -50%);
}

.top__banner .btn--close:hover {
	background: transparent;
}

.top__banner .btn--close svg {
	fill: #000;
}

.button {
	-webkit-user-select: none;
	user-select: none;
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	text-align: center;
	padding: 0.75em 1.5em;
	margin: 0;
	color: #fff;
	background-color: #006ce5;
	border-radius: 0.17em;
	cursor: pointer;
	transition: background-color 0.1s, color 0.1s;
	border: 1px solid transparent;
	font-size: 1em;
	line-height: 1;
}

.button,
.button a,
.button:hover,
.button a:hover {
	text-decoration: none;
}

.button:hover {
	background-color: #3392ff;
	color: #fff;
}

.button--primary,
.button--primary a {
	color: #1464f6;
}

.button--primary:hover a,
.button--secondary:hover a {
	text-decoration: none;
	color: #ffffff;
}

.button--secondary {
	color: #006ce5;
	background: transparent none;
}

.button.button--danger {
	background-color: rgb(255, 102, 36);
	color: #fff;
}
.button.button--danger:hover {
	background-color: rgb(255, 102, 36);
}

.button.button--delete {
	background-color: #ff3823;
	font-weight: bold;
}
.button.button--delete:hover {
	background-color: #ff3823;
}

.button.button--gray {
	background-color: #ebebeb;
	color: #232323;
	font-weight: bold;
}
.button.button--gray:hover {
	background-color: #ebebeb;
	color: #232323;
}

.button--secondary:hover {
	color: #ffffff;
	background-color: #006ce5;
}

.button--secondary svg {
	fill: currentColor;
}

.button--secondary:hover svg {
	fill: #fff;
}

.button.button--close--primary {
	background-color: #006ce5;
	color: #fff;
	border: 1px solid #006ce5;
	border-radius: 0.25em;
	font-weight: bold;
}
.button.button--close--primary:hover {
	background-color: #3d8af7;
	color: #fff;
}

.button.button--remove--light {
	background-color: #fff;
	color: #232323;
	border: 1px solid #d6d6d6;
	border-radius: 0.25em;
	font-weight: bold;
}
.button.button--remove--light:hover {
	background-color: #dc514a;
	color: #fff;
}

.button.button--remove {
	background-color: #dc514a;
	font-weight: bold;
}
.button.button--remove:hover {
	background-color: #dc514a;
}
.button.button--remove--disabled {
	background-color: #fff;
	font-weight: bold;
	color: #d6d6d6;
	border: 1px solid #d6d6d6;
	border-radius: 0.25em;
	pointer-events: none;
	cursor: not-allowed;
}

.button.button--remove--gray {
	background-color: #ebebeb;
	color: #232323;
	margin-left: 20px;
	font-weight: bold;
}
.button.button--remove--gray:hover {
	background-color: #ebebeb;
	color: #232323;
}

.button.button--close--right--margin {
	background-color: transparent;
	width: 92px;
	font-weight: bold;
	margin-right: 90px !important;
	border: 1px solid #d6d6d6;
	border-radius: 0.25em;
	color: #444444;
}

.button.button--close {
	background-color: transparent;
	width: 92px;
	font-weight: bold;
	margin-right: 0px !important;
	border: 1px solid #d6d6d6;
	border-radius: 0.25em;
	color: #444444;
}
.button.button--close--disabled {
	background-color: transparent;
	font-weight: bold;
	border: 1px solid #d6d6d6;
	border-radius: 0.25em;
	color: #d6d6d6;
	pointer-events: none;
	cursor: not-allowed;
}
.button.button--close:hover {
	background-color: transparent;
	color: #444444;
}
.button.button--close--only--grey--border {
	background-color: transparent;
	width: 92px;
	font-weight: bold;
	margin-right: 20px !important;
	border: 1px solid #d6d6d6;
	border-radius: 0.25em;
	color: #444444;
}
.button.button--close--only--grey--border:hover {
	background-color: transparent;
	color: #444444;
}

.button--large {
	width: 100%;
	padding: 0.5em 1.5em;
	height: 30px;
	font-size: 14px;
}
.button--stocky {
	height: 44px;
	font-size: 16px !important;
	color: #fff;
	background-color: #1181f1;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.1s;
	font-weight: bold;
}

.button--disabled,
.button[disabled] {
	background: #d6d6d6;
	pointer-events: none;
	cursor: not-allowed;
	border: 1px solid #b3b3b3;
}

.button--reactivatedisabled {
	border: none !important;
	height: 40px;
	width: 198px;
	font-size: 14px;
	font-family: Arial;
	color: #fafafa;
}

.button--pill {
	border-radius: 20px;
}

.mq__button--secondary {
	color: #929292 !important;
	background-color: transparent !important;
}

.mq__button--secondary:hover {
	color: #006ce5 !important;
}

.mq__team__quota__button {
	color: #ffffff;
	height: 40px;
	font-weight: bold;
	background-color: #3d8af7 !important;
}

.hypnotoad {
	background: #ff6624;
	color: #fff;
	text-align: center;
	padding: 0.5em;
	position: relative;
}

.hypnotoad p {
	margin: 0;
}

.hypnotoad .button {
	background: transparent;
	border: 2px solid #fff;
	margin: 0 1em;
}

.hypnotoad .btn--close {
	border: none;
	padding: 0;
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translate(0, -50%);
}

.message {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 1em 0;
	padding: 0.75em;
}
.message--info {
	background-color: #f0f9ff;
	border: 1px solid #d1e2ef;
}
.message--warning {
	background: #fcf8e3;
	border: 1px solid #faebcc;
}
.message--error {
	color: #a94442;
	background: #f2dede;
	border: 1px solid #ebccd1;
}
.message--success {
	background: #dff0d8;
	border: 1px solid #d6e9c6;
}

.message__close {
	fill: #303030;
	cursor: pointer;
}

.features__modal {
	font-size: 16px;
}

.features__modal h3 {
	margin-top: 0;
	margin-bottom: 0.3em;
	font-weight: bold;
}

.features__modal p {
	padding: 0;
	margin: 0.5em;
}

.features__modal .mq__modal__close {
	position: absolute;
	right: 1.5em;
	top: 1.5em;
}

.feature__nav {
	margin-top: 1em;
}

.features__modal .feature__title {
	align-self: flex-start;
	padding: 0 0 1em 0;
	margin: 0;
	font-size: 1.1em;
	color: #606060;
}

.feature__content {
	margin-top: 0.5em;
}

.feature__img {
	position: relative;
}

.feature__img img {
	max-width: 100%;
	border-radius: 5px;
}

.feature__nav {
	display: flex;
	align-items: center;
}

.feature__nav__item {
	cursor: pointer;
	margin-right: 0.3em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background-color: #d6d6d6;
}

.feature__nav__item:last-of-type {
	margin-right: 0;
}

.feature__nav__item--selected {
	background-color: #1464f6;
}

.feature__benefits {
	color: #797979;
}

.feature__content svg {
	height: 2em;
	width: 2em;
	margin-right: 1em;
}

.new__features__badge {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.5em 0.8em;
	border-radius: 4px;
	font-weight: bold;
	font-size: 0.9em;
	color: #243e16;
	background-color: #fded13;
}

#dashboard {
	height: 100vh;
	min-width: 1024px;
}

.sidebar-wrapper {
	background-color: #f0f0f0;
	border-right: 1px solid #e6e6e6;
}
.content-wrapper {
	overflow-y: scroll;
}

.center {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

/*
	Preloader
	--------------------------
*/

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.preloader-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.spinner {
	padding: 4em;
	text-align: center;
	margin-top: 3em;
}

.spinner svg {
	fill: #006ce5;
}

.spinner span {
	font-size: 1.4em;
	color: #999;
	display: block;
	margin: 0.5em 0;
	font-weight: 300;
}

.pure-input-holder {
	display: inline-block;
	position: relative;
}
.pure-input-holder input.has-icon {
	padding-left: 2.5em;
}
.input__icon {
	position: absolute;
	top: 50%;
	left: 0.75em;
	transform: translate(0, -50%);
	z-index: 2;
}
.input__icon svg {
	height: 1.1em;
	width: 1.1em;
	display: block;
	fill: #b0b4b7;
}

.debounce-input__inline-close {
	position: absolute;
	padding: 5px;
	top: 50%;
	transform: translate(0, -50%);
	right: 1em;
}

.badge {
	display: inline-block;
	vertical-align: middle;
	border-radius: 50px;
	padding: 0 8px;
	font-weight: normal;
	font-size: 0.7em;
	line-height: 2em;
}

.badge--alert {
	background: #ff3823;
	color: #ffffff;
}

.badge--notice {
	background: #ef5350;
	color: #fff;
}

.badge--note {
	background: #fedb2c;
	color: #000;
}

.badge--yellow {
	background: #ffe533;
	color: #000;
}

.badge--blue {
	background: #e1f0ff;
	color: #136de4;
	text-transform: none;
	white-space: nowrap;
}

.badge--violet {
	background: #f0e5fa;
	color: #6334e3;
	text-transform: none;
	white-space: nowrap;
}

.badge--cancelled {
	border-radius: 6px;
	color: #f54c52;
	background-color: #ffe9ee;
	text-transform: capitalize;
	padding: 5px 10px;
	font-weight: bold;
	font-size: 13px;
	font-family: Helvetica;
	margin-left: 10px;
}

.badge--secondary {
	background: #909090;
	color: #fff;
}

.badge--left-spaced {
	margin-left: 1em;
}

.badge--right-spaced {
	margin-right: 0.5em;
}

.badge--square {
	border-radius: 0.2em;
}

.badge--narrow {
	line-height: 1.6em;
}

.badge--uppercase {
	text-transform: uppercase;
}

.badge--bold {
	font-weight: bold;
}

.search__settings__popover {
	position: absolute;
	right: 0;
	top: 100%;
}

.search__settings__popover > div {
	border-radius: 8px;
	border-color: #d6d6d6;
}

.search__setting_icon {
	margin-top: 5px;
}

.search__settings__content {
	color: #333;
	padding: 10px 16px 8px;
	font-size: 13px;
}

.search__settings__content .badge {
	margin-left: 4px;
}

.search__settings__header {
	padding-bottom: 4px;
	font-size: 10px;
	text-transform: uppercase;
	color: #aaa;
}

.search__settings__option {
	margin-top: 7px;
	margin-bottom: 7px;
	display: flex;
}
.search__settings__option label {
	display: flex;
}
.search__settings__option label span {
	margin-left: 5px;
	margin-right: 5px;
	flex-grow: 1;
	white-space: nowrap;
}

.search__settings__content .switch__switch {
	position: absolute;
}

.search__box {
	display: flex;
	border: 1px solid #ccc;
	border-radius: 8px;
	position: relative;
}

.search__box:focus-within {
	border-color: #006ce5;
}

.bar--action .search__box .input__icon {
	left: 7px;
}

.bar--action .search__box input[type='text'] {
	border: 0;
	padding: 9px 42px 9px 32px;
	width: 24em;
	margin: 0;
	background: none;
}

.search__box .debounce-input__inline-close {
	right: 2px;
	width: 18px;
	height: 18px;
	padding: 3px 7px;
	border-left: 1px solid #ebebeb;
	background: #fff;
}

.search__box .debounce-input__inline-close:hover {
	cursor: pointer;
	fill: #006ce5;
}

.search__box input[type='text']:focus {
	border: 0 !important;
	outline: none !important;
}

.search__box .search__box__label {
	position: absolute;
	right: 4px;
	top: 4px;
	bottom: 4px;
	background: #fff;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px 0 8px;
	transition: all 0.2s ease;
	font-size: 12px;
	color: #7a7a7a;
}

.search__box .search__box__label svg path {
	fill: #7a7a7a;
}

.search__box .search__box__label svg {
	margin-left: 3px;
}

.search__box.search__box__premium .search__box__label {
	background: #edf3ff;
	color: #006ce5;
}

.search__box.search__box__premium .search__box__label svg path {
	fill: #006ce5;
}

.search__box .search__box__label:hover {
	cursor: pointer;
}

.bar--action .mobile-only {
	border-left: 0;
	fill: #7a7a7a;
	margin-right: 3px;
}

.search__box__has-close .search__box__label,
.bar--action .search__box__has-close .mobile-only {
	right: 38px;
	margin-right: 0;
}

.bar--action .search__box__premium .mobile-only {
	background: #edf3ff;
	fill: #006ce5;
	border-radius: 4px;
}

.sort__popover {
	padding-left: 0;
	margin-top: 32px;
	margin-left: -150px;
}

.sort__popover__content {
	color: #555;
	padding-top: 10px;
	padding-bottom: 3px;
}
.sort__popover__option {
	margin: 3px 10px;
}
.sort__popover__option-disabled {
	color: #ebebeb;
}
.sort__popover__divider {
	width: 100%;
	border-bottom: 1px solid #ebebeb;
}

.sort__popover__option label {
	display: flex;
	text-align: left;
	align-items: center;
}
.sort__popover__option label span {
	margin-left: 5px;
	margin-right: 5px;
	flex-grow: 1;
}

.bar--action {
	padding: 1em;
	height: 65px;
	max-height: 65px;
	position: relative;
	z-index: 10;
	border-bottom: 1px solid #e6e6e6;
}

.bar--action svg {
	vertical-align: middle;
}

.bar--action .search {
	color: #bcbcbc;
}

.bar--action .search .pure-input-holder {
	height: 100%;
}

.bar--action input[type='text'] {
	height: 100%;
	width: 20em;
	position: relative;
	display: inline-block;
	margin: 0 10px;
	font-size: 1em;
	box-sizing: border-box;
	border-radius: 4px;
	border-color: #bcbcbc;
}
.bar--action .input__icon {
	left: 1.25em;
}
.bar--action .input__icon svg {
	height: 20px;
	width: 20px;
	fill: #bcbcbc;
}
.bar--action span {
	position: relative;
}
.bar--action span label {
	display: inline-block;
	position: relative;
}

.bar--action .active span {
	border-bottom: 2px solid #929292;
}

.projects__actions {
	display: flex;
	align-items: center;
}

.projects__action {
	display: flex;
	height: 100%;
	padding: 5px;
	margin-left: 15px;
	align-items: center;
	cursor: pointer;
	text-align: center;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 14px;
	white-space: nowrap;
	transition: 0.1s ease-in-out background-color;
}

.projects__action svg {
	height: 20px;
	width: 20px;
	fill: #757575;
	margin-right: 4px;
}

.projects__action--delete {
	opacity: 1;
}

.projects__action--delete.projects__action--disabled {
	opacity: 0; /* so it still takes up dom space */
}

.projects__action--disabled {
	pointer-events: none;
	color: #e3e3e3;
}

.projects__action--disabled svg {
	fill: #e3e3e3;
}

.projects__action:not(.projects__action--disabled):hover {
	background: #e1e1e1;
	color: #424242;
}

.projects__action:not(.projects__action--disabled):hover svg {
	fill: #424242;
}

.projects__action--viewmode svg,
.button.button--new-project {
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding: 0 0.5em;
}

.button--new-project span {
	margin: 0 0.8em;
	display: flex;
	align-items: center;
}

.bar--action .mobile-only {
	display: none;
}

@media only screen and (max-width: 1280px) {
	.bar--action .search__box input[type='text'] {
		width: 16em;
	}
	.bar--action .search__box .search__box__label {
		display: none;
	}
	.bar--action .mobile-only {
		display: block;
	}
}

@media (max-width: 1048px) {
	.bar--action .search__box input[type='text'] {
		width: 12em;
	}
}

@media only screen and (max-width: 940px) {
	.bar--action .search__box input[type='text'] {
		width: 12em;
	}
	.action-label {
		display: none;
	}
}

.add__folder__modal {
	margin-bottom: 1em;
}

.add__folder__modal label span {
	margin: 0.25em 0;
	display: block;
}

.add__folder__modal input {
	border: 1px solid #ddd;
	border-radius: 0.2em;
	padding: 0.75em;
	color: #555;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 40px;
	margin-top: 20px;
}

.centered-content-box {
	padding: 4em;
	text-align: center;
	margin-top: 3em;
}

.tooltip {
	opacity: 1;
}
.tooltip .rc-tooltip-inner {
	border-radius: 0;
	min-height: 20px;
	transition: 0.3s ease;
}
.tooltip--rounded .rc-tooltip-inner {
	border-radius: 3px;
}

.tooltip--gray .rc-tooltip-arrow {
	border-right-color: #f0f0f0 !important;
	border-left-color: #f0f0f0 !important;
}
.tooltip--gray .rc-tooltip-inner {
	background-color: #f0f0f0 !important;
	color: #000;
}

.tooltip--white .rc-tooltip-arrow {
	border-bottom-color: #ffffff;
	color: #333;
}
.tooltip--white .rc-tooltip-inner {
	background-color: #ffffff !important;
	color: #333;
}
.tooltip--red .rc-tooltip-arrow {
	border-bottom-color: #e34429;
}
.tooltip--red .rc-tooltip-inner {
	background-color: #e34429 !important;
}
.tooltip--green .rc-tooltip-arrow {
	border-bottom-color: #008200;
}
.tooltip--green .rc-tooltip-inner {
	background-color: #008200 !important;
}

.tooltip--blue .rc-tooltip-inner {
	background: #f0f8ff !important;
	color: #333;
}
.tooltip--blue .rc-tooltip-arrow {
	border-bottom-color: #f0f8ff !important;
	color: #333;
}

.tooltip__children {
	display: inline-block;
	width: 100%;
}

.privacy-lock {
	margin-right: 3px;
	color: #006ce5;
}
.privacy-lock svg {
	fill: #006ce5;
	margin-top: -3px;
	width: 18px;
	height: 18px;
	display: inline-block;
	vertical-align: middle;
}

.inline-editable__buttons button {
	margin-left: 10px;
}

.inline-editable__label {
	font-weight: bold;
	padding-right: 7px;
}

.project__name {
	width: calc(100% - 26px); /* Accounts for more actions icon width */
	display: flex;
	align-items: center;
	margin-bottom: 0.25em;
	padding-bottom: 1px;
	font-size: 1em;
	color: #444444;
}

.project__name .inline-editable__label {
	font-weight: normal;
}

.project__name--folder {
	width: calc(100% - 2.2em); /* Accounts for folder icon width */
	margin-bottom: 0;
	padding-bottom: 0;
}

.project__name input,
.project__name input:focus {
	width: 100%;
	padding: 0.2em 0em;
	border: none !important;
	border-bottom: 2px solid #6eb1f9 !important;
	border-radius: 0 !important;
}

.project__name__title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.project__name a:hover {
	text-decoration: underline;
}

.project__name .quick__edit {
	padding: 0 5px;
	visibility: hidden;
	fill: #727272;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.project__name .quick__edit:hover {
	fill: #444444;
}
.project__name:hover .quick__edit {
	visibility: visible;
}

.rc-tooltip.rc-tooltip-zoom-enter,
.rc-tooltip.rc-tooltip-zoom-leave {
  display: block;
}
.rc-tooltip-zoom-enter,
.rc-tooltip-zoom-appear {
  opacity: 0;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  animation-play-state: paused;
}
.rc-tooltip-zoom-leave {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
  animation-play-state: paused;
}
.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
  animation-name: rcToolTipZoomIn;
  animation-play-state: running;
}
.rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
  animation-name: rcToolTipZoomOut;
  animation-play-state: running;
}
@keyframes rcToolTipZoomIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
}
@keyframes rcToolTipZoomOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
}
.rc-tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  visibility: visible;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.9;
}
.rc-tooltip-hidden {
  display: none;
}
.rc-tooltip-placement-top,
.rc-tooltip-placement-topLeft,
.rc-tooltip-placement-topRight {
  padding: 5px 0 9px 0;
}
.rc-tooltip-placement-right,
.rc-tooltip-placement-rightTop,
.rc-tooltip-placement-rightBottom {
  padding: 0 5px 0 9px;
}
.rc-tooltip-placement-bottom,
.rc-tooltip-placement-bottomLeft,
.rc-tooltip-placement-bottomRight {
  padding: 9px 0 5px 0;
}
.rc-tooltip-placement-left,
.rc-tooltip-placement-leftTop,
.rc-tooltip-placement-leftBottom {
  padding: 0 9px 0 5px;
}
.rc-tooltip-inner {
  padding: 8px 10px;
  color: #fff;
  text-align: left;
  text-decoration: none;
  background-color: #373737;
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
  min-height: 34px;
}
.rc-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.rc-tooltip-placement-top .rc-tooltip-arrow,
.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
  bottom: 4px;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #373737;
}
.rc-tooltip-placement-top .rc-tooltip-arrow {
  left: 50%;
}
.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
  left: 15%;
}
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
  right: 15%;
}
.rc-tooltip-placement-right .rc-tooltip-arrow,
.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
  left: 4px;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #373737;
}
.rc-tooltip-placement-right .rc-tooltip-arrow {
  top: 50%;
}
.rc-tooltip-placement-rightTop .rc-tooltip-arrow {
  top: 15%;
  margin-top: 0;
}
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
  bottom: 15%;
}
.rc-tooltip-placement-left .rc-tooltip-arrow,
.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
  right: 4px;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #373737;
}
.rc-tooltip-placement-left .rc-tooltip-arrow {
  top: 50%;
}
.rc-tooltip-placement-leftTop .rc-tooltip-arrow {
  top: 15%;
  margin-top: 0;
}
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
  bottom: 15%;
}
.rc-tooltip-placement-bottom .rc-tooltip-arrow,
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
  top: 4px;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #373737;
}
.rc-tooltip-placement-bottom .rc-tooltip-arrow {
  left: 50%;
}
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
  left: 15%;
}
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
  right: 15%;
}

.dropdownmenu__wrapper {
	display: inline-block;
	position: relative;
}

.dropdownmenu__wrapper--full {
	width: 100%;
}

.contextmenu, .contextmenu__submenu {
	pointer-events: all;
	cursor: default;
	position: absolute;
	padding: 0.2em 0;
	background: #fff;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	border: 1px solid #ccc;
	border-radius: 0.3em;
	min-width: 18em;
	z-index: 6000;
	top: 100%;
	left: 0;
}

.contextmenu--scrollable {
	overflow-y: auto;
}

.contextmenu--auto-width, .contextmenu--auto-width .contextmenu__submenu {
	min-width: auto;
}

.contextmenu--borderless, .contextmenu--borderless .contextmenu__submenu {
	border: none;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.1);
}
.contextmenu__submenu__marker {
	font-size: 0.8em;
}

.contextmenu--bottom {
	top: auto !important;
	bottom: 0;
}

.contextmenu--right {
	left: auto !important;
	right: 0;
}

.contextmenu__submenu {
	position:absolute;
	top: 0;
	left: 100%;
}

.contextmenu__submenu--scrollable {
	overflow-y: auto;
}

.contextmenu__item {
	position: relative; /* so submenu positions properly */
}

.contextmenu__item:hover > .contextmenu__item__label {
	color: #fff;
	background: #006ce5;
}

.contextmenu__item--submenuactive  > .contextmenu__item__label {
	color: #fff;
	background: #006ce5;
}

.contextmenu__item__label {
	width: 100%;
	padding: 0.2em 1em;
	display: flex;
	box-sizing: border-box;
	font-size: 0.95em; /*Slightly smaller, but better visuals*/
}

.contextmenu__item__title {
	flex-grow: 1;
	white-space: nowrap;
}
.contextmenu__item__description {
	flex-grow: 0;
	white-space: nowrap;
	color: #999;
	font-size: 0.9em;
}

.contextmenu__item:hover > .contextmenu__item__description {
	color: #fff;
	background: #006ce5;
}

.contextmenu__item__badge {
	font-size: 0.8em;
	display: inline-block;
	background-color: #e0efff;
	border-radius: 30px;
	padding: 0 0.5em;
	color: #333333;
	/* float: right; */
	position: absolute;
	right: 10px;
	bottom: 5px;
}

.contextmenu__separator {
	display: block;
	height: 1px;
	background: #E0E0E0;
	margin: 0.2em 0;
}

.contextmenu__item--disabled {
	pointer-events: none;
	color: #f3f3f3;
}

.contextmenu__item--disabled .contextmenu__item__label {
	background: transparent;
	color: #999;
	pointer-events: none;
}

.contextmenu__item.delete-permanently {
	fill: #e34429;
	color: #e34429;
}

.mq-link-dropdown {
	color: #555;
	position: relative;
}

.mq-link-dropdown-current {
	cursor: pointer;
}

.mq-link-dropdown-current:after {
	content: ' \25be';
	/*color: #555;*/
}

.mq-link-dropdown .mq-link-dropdown-current a {
	text-decoration: underline;
}

.mq-link-dropdown .mq-link-dropdown-current.isDisabled {
	cursor: default;
}

.mq-link-dropdown .mq-link-dropdown-current.isDisabled a {
	cursor: default;
	text-decoration: none;
	color: #555;
}

.mq-link-dropdown .mq-link-dropdown-current.isDisabled a:hover {
	text-decoration: none;
}

.mq-link-dropdown .mq-link-dropdown-current a:hover {
	text-decoration: underline;
}
.letter__avatar {
    text-align: center;
    line-height: 2em;
    min-width: 2em;
    max-width: 2em;
    height: 2em;
    display: inline-block;
    border-radius: 50%;
    margin-right: 0.75em;
    color: white;
    background-color: #007ee5;
}
.tooltip {
	opacity: 1;
}
.tooltip .rc-tooltip-inner {
	border-radius: 0;
	min-height: 20px;
	transition: .3s ease;
}
.tooltip--rounded .rc-tooltip-inner{
	border-radius: 3px;
}

.tooltip--white.rc-tooltip-placement-bottom .rc-tooltip-arrow {
	border-bottom-color: #ffffff;
	color: #333;
}
.tooltip--white.rc-tooltip-placement-right .rc-tooltip-arrow {
	border-right-color: #FFF;
}
.tooltip--white .rc-tooltip-inner {
	background-color: #ffffff!important;
	color: #333;
}
.tooltip--red .rc-tooltip-arrow {
	border-bottom-color: #e34429;
}
.tooltip--red .rc-tooltip-inner {
	background-color: #e34429!important;
}
.tooltip--green .rc-tooltip-arrow {
	border-bottom-color: #008200;
}
.tooltip--green .rc-tooltip-inner {
	background-color: #008200!important;
}

.tooltip--blue .rc-tooltip-inner {
	background: #F0F8FF !important;
	color: #333;
}
.tooltip--blue .rc-tooltip-arrow {
	border-bottom-color: #F0F8FF !important;
	color: #333;
}

.tooltip--gray.rc-tooltip-placement-right .rc-tooltip-arrow {
	border-right-color: #f6f6f6;
}
.tooltip--gray .rc-tooltip-inner {
	background-color: #f6f6f6!important;
	border: 1px solid #d1d1d1;
	color: #aaaaaa;
}

.tooltip--noarrow .rc-tooltip-arrow {
	display: none;
}

.tooltip__children {
	display: inline-block;
	width: 100%;
}

.dropdown-input__container {
	position: relative;
	height: 100%;
}

.dropdown-input__button {
	width: 1.5em;
	position: absolute;
	height: 100%;
	right: 1px;
	cursor: pointer;
}

.dropdown-input__button:after {
	content: '\25BE';
	position:absolute;
	top: 50%;
	left: 50%;
	font-size: 1.5em;
	line-height: 1.5;
	transform: translate(-50%,-50%);
}

.dropdown-input__button.open:after {
	content: '\25B4';
}

.dropdown-input__input {
	width: 100px;
}

.dropdown-input__input.no-focus {
	cursor: pointer;
}

.dropdown-input__options-container {
	overflow-y: scroll;
	max-height: 200px;
	position: absolute;
	width: 100%;
	z-index: 1000;
}

.dropdown-input__option {
	padding: 0.1em;
	cursor: pointer;
}

.dropdown-input__option:hover, .dropdown-input__option.focused {
	background-color: #eee;
}

.dropdown-input__options-container.hidden {
	display: none;
}

.dropdown-input__container.has-label-overlay .dropdown-input__span {
	position: relative;
}

.dropdown-input__label-view {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	height: 100%;
	box-sizing: border-box;
	padding: 0.5em;
	background: white;
	cursor: pointer;
}



.dropdown-input__label-view.no-padding {
	padding: 0;
}

.dropdown-input__label-view.no-vertical-padding {
	padding: 0 0.5em;
}
.button {
	-webkit-user-select: none;
	user-select: none;
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	text-align: center;
	padding: 0.75em 1.5em;
	margin: 0;
	color: #fff;
	background-color: #006ce5;
	border-radius: 0.17em;
	cursor: pointer;
	transition: background-color .1s, color .1s;
	border: 1px solid transparent;
	font-size: 1em;
	line-height: 1;
}

.button, .button a,
.button:hover, .button a:hover {
	text-decoration: none;
}

.button:hover {
	background-color: #3392ff;
	color: #FFF;
}

.button--primary,
.button--primary a {
	color: #1464f6;
}

.button--primary:hover a,
.button--secondary:hover a {
	text-decoration: none;
	color: #FFFFFF;
}

.button--secondary {
	color: #006ce5;
	background: transparent none;
}

.button--secondary:hover {
	color: #FFFFFF;
	background-color: #006ce5;
}

.button--large {
	width: 100%;
	padding: 0.5em 1.5em;
	height: 30px;
	font-size: 14px;
}

.button--disabled,
.button[disabled] {
	background: #d6d6d6;
	cursor: not-allowed;
	border: 1px solid #b3b3b3;
}


.sharing__avatar {
	display: flex;
	flex-shrink: 0;
	margin-right: 0.5em;
}

.sharing__avatar img {
	border-radius: 50%;
	width: 28px;
	height: 28px;
}

.sharing__avatar {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-items: center;
	border-radius: 50%;
}

.sharing__avatar--team {
	border-radius: 4px;
}

.sharing__avatar--team img {
	border-radius: 25%;
}

.sharing__avatar svg {
	fill: #fff;
	width: 100%;
	height: 100%;
	margin: auto;
}

.sharing__avatar--team svg,
.sharing__avatar--suggestion svg {
	width: 50%;
	height: 50%;
}

.team__selected {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-grow: 1;
	cursor: pointer;
}

.team__selected svg:last-of-type {
	margin-left: auto;
}

.team__selected span {
	margin-left: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.team__select__name .svg {
	font-size: 10px;
	margin: 0 5px;
}

.team__select__dropdown__menu {
	max-width: 480px;
}

.team__select__dropdown__menu .contextmenu__item__title {
	overflow: hidden;
	flex-grow: 1;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.team__select__dropdown__menu .dropdown__menu__option {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.team__select {
	margin-left: 50px;
	max-width: 380px;
}

.team__select .dropdown__menu__dropdown {
	width: 100%;
	box-sizing: border-box;
}

.team__select .dropdown__menu__dropdown:hover {
	box-shadow: 2px 3px 7px 0px rgba(0, 0, 0, 0.18);
}

.team__select__badge {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-left: 1em;
}

.team__select--floating li {
	padding: 5px;
}

/* Simple dropdown style */
.dropdown__outer {
	display: inline-block;
	border: 1px solid #b8b8b8;
	background: #fff;
	padding: 1px;
	border-radius: 0.15em;
}

.dropdown__inner {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.dropdown__value {
	padding: 0.2em 0.4em;
}

.dropdown__toggle {
	padding: 0 0.35em;
	border-left: 1px solid #b8b8b8;
}

.dropdown__toggle svg {
	width: 0.75em;
	height: 0.75em;
}

/* New dropdown styles */

.dropdown__menu {
	max-height: 100%;
	overflow-y: auto;
}

.dropdown__menu__dropdown {
	padding: 0.4em;
	transition: all 0.2s ease;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 4px;
	white-space: pre; /* Don't let dropdown trigger wrap text */
}

.dropdown__menu__dropdown:hover {
	border: 1px solid #e6e6e6;
}

.dropdown__menu svg,
.dropdown__menu__dropdown svg {
	fill: #1464f6;
	width: 18px;
	height: 18px;
}

.dropdown__menu__dropdown .dropdown__icon,
.dropdown__menu .dropdown__icon {
	padding-left: 1.3em;
}

.dropdown__menu__option .dropdown__icon {
	height: 12px;
	width: 12px;
}

.dropdown__menu.contextmenu {
	padding: 0;
}

.dropdown__menu .contextmenu__item:hover {
	background-color: #fff;
}

.dropdown__menu .contextmenu__item:hover {
	background-color: #f7f6f6;
}

.dropdown__menu .contextmenu__item:not(:last-of-type) {
	border-bottom: 1px dotted #aaaaaa;
}

.dropdown__menu__option {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dropdown__menu__option__secondary {
	font-size: 0.9em;
	color: #c0c0c0;
	padding-top: 0.9em;
}

.dropdown__menu .contextmenu__item__label {
	padding: 1em;
	cursor: pointer;
}
.dropdown__menu .contextmenu__item__label:hover {
	color: initial;
	background: initial;
}

.dropdown__option--important {
	color: #e61610;
}

.switch__wrapper {
	display: inline-block;
	margin-top: 1px;
}
.switch__wrapper-custom {
	display: inline-block;
	margin-top: 30px;
}
.switch__wrapper--disabled {
	pointer-events: none;
}
.switch__wrapper--disabled--allowclick {
	pointer-events: all;
}
.switch__wrapper > label > span {
	margin-right: 15px;
}
.switch {
	display: inline-block;
	position: relative;
	width: 3em;
	height: 1em;
	margin: 0 15px;
	font-size: 12px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.switch-custom {
	display: inline-block;
	position: relative;
	width: 3em;
	height: 1em;
	padding-right: 15px;
	font-size: 12px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.switch__reversed {
	display: inline-block;
	position: relative;
	width: 3em;
	height: 1em;
	margin-right: 15px;
	font-size: 12px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.switch__wrapper--disabled .switch {
	opacity: 0.4;
}

.switch__wrapper--disabled .switch {
	opacity: 0.4;
}

.switch__checkbox {
	display: none;
}
.switch__background {
	display: block;
	overflow: hidden;
	height: 100%;
	background-color: #eeeeee;
	cursor: pointer;
	border-radius: 1em;
	transition: all 0.1s ease-in;
}
.switch__switch {
	display: block;
	width: 1.5em;
	height: 1.5em;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background: #a1a1a1;
	border-radius: 50%;
	transition: all 0.1s ease-in;
}
.switch__checkbox:checked + .switch__background {
	background-color: #75a9f9;
}
.switch__checkbox:checked + .switch__background .switch__switch {
	left: 1.5em; /* so transition works */
	background-color: #0d58cf;
}

.modal__warning {
	padding: 1em;
	margin: 0.5em 0;
	background-color: #fffde7;
	color: #f57f17;
}

.modal__warning svg {
	height: 1.5em;
	width: 1.5em;
	padding-right: 1em;
	fill: #f57f17;
}

.switch__section__heading {
	color: #606060;
	font-weight: bold;
	font-size: 14px;
	margin: 0.5em 0;
}

.switch__section__secondary {
	margin-top: 0.5em;
	font-size: 0.85em;
	color: #929292;
}

.switch__section__warning {
	font-size: 0.85em;
	color: #db3b26;
}

.switch__v2 .switch__wrapper {
	display: inline-block;
}

.switch__v2 .switch__wrapper--disabled {
	pointer-events: none;
}

.switch__v2 .switch__wrapper--disabled .switch__background {
	pointer-events: none;
}

.switch__v2 .switch__wrapper > label > span {
	margin-right: 15px;
}

.switch__v2 .switch {
	width: 2.8em;
	height: 1.5em;
	display: inline-block;
	font-size: 100%;
}

.switch__v2 .switch__switch {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	height: 1.4em;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.15s;
	position: relative;
	background-color: #fff;
	border-radius: 50%;
}

.switch__v2 .switch__switch svg {
	height: 1.2em;
	width: 1.2em;
	fill: #c0c0c0;
}

.switch__v2 .switch__wrapper--checked .switch__switch svg {
	fill: #1364f5;
}

.switch__v2 .switch__checkbox {
	display: none;
}

.switch__v2 .switch__background {
	height: 100%;
	width: 3em;
	display: block;
	overflow: hidden;
	padding: 1px;
	background-color: #d6d6d6;
	border: 1px solid transparent;
	border-radius: 1.5em;
	transition: background-color 0.15s;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
.switch__v2 .switch__checkbox:checked + .switch__background {
	border-color: transparent;
	background-color: #006ce5;
}
.switch__v2 .switch__checkbox:checked + .switch__background .switch__switch {
	left: 1.5em; /* so transition works */
	background-color: #fff;
}

.mq__input {
	display: flex;
	flex-direction: column;
	margin-top: 0.7rem;
}

.mq__input--readonly input {
	background: #ebebeb;
}

.mq__input label {
	color: #606060;
	font-weight: bold;
	margin-bottom: 0.7rem;
}

.mq__input span {
	color: #a94442;
	font-size: 0.75rem;
	font-weight: 500;
}

.mq__input input {
	width: 100%;
	border: 1px solid #c0c0c0;
	box-sizing: border-box;
}

.mq__input input:focus,
.mq__input input:hover {
	border: 1px solid #006ce5;
}

.mq__name__input input {
	padding: 1em 0.5em;
}

.avatar__list__wrapper {
	width: 410px;
	padding: 0.75em;
}
.avatar__list {
	display: flex;
	flex-wrap: wrap;
}
.avatar__list > span {
	margin: 0 5px;
	cursor: pointer;
}

.avatar__list img {
	transition: all 0.1s ease-in-out;
}
.avatar__list img:hover {
	box-sizing: border-box;
	border: 2px solid black;
}
.avatar__list__upload {
	margin-bottom: 10px;
}
.avatar__list__upload a {
	cursor: pointer;
}
.avatar__list__upload a:hover {
	text-decoration: underline;
}
.avatar__list__upload input {
	display: none;
}

.letter__avatar {
	text-align: center;
	line-height: 2em;
	width: 2em;
	height: 2em;
	min-width: 2em;
	min-height: 2em;
	display: inline-block;
	border-radius: 50%;
	margin-right: 0.75em;
	color: white;
	background-color: #007ee5;
}
.project__option__team__avatar {
	text-align: center;
	line-height: 30px;
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	display: inline-block;
	border-radius: 50%;
	margin-right: 0em;
	color: white;
	background-color: #007ee5;
	font-size: 15px;
	margin-right: 3px;
}
.micro__letter__avatar__no_margin {
	text-align: center;
	line-height: 18px;
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	display: inline-block;
	border-radius: 50%;
	margin-right: 0em;
	color: white;
	background-color: #007ee5;
	font-size: 15px;
}
.small__letter__avatar__no_margin {
	text-align: center;
	line-height: 30px;
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	display: inline-block;
	border-radius: 50%;
	margin-right: 0em;
	color: white;
	background-color: #007ee5;
	font-size: 15px;
}
.biggest__letter__avatar__no_margin {
	text-align: center;
	line-height: 85px;
	width: 90px;
	height: 90px;
	min-width: 90px;
	min-height: 90px;
	display: inline-block;
	border-radius: 50%;
	margin-right: 0em;
	color: white;
	background-color: #007ee5;
	font-size: 45px;
}

.avatar__wrapper {
	position: relative;
	display: flex;
	margin: 0 20px;
	max-width: 200px;
	align-items: center;
	flex-direction: column;
	font-size: 12px;
	cursor: pointer;
}
.avatar--uploading {
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.avatar--uploading svg {
	fill: #fff;
	margin: auto;
}
.team__avatar__list__popover {
	left: 35%;
	top: 15%;
}
.avatar__edit {
	position: absolute;
	top: -5px;
	right: -5px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid #d6d6d6;
	background: #fff;
}

.avatar__edit svg {
	fill: #aaaaaa;
	height: 70%;
	width: 70%;
}

.collapse__wrapper {
	margin: 1em 0;
	padding: 1em;
	border: 1px solid #f0f0f0;
}
.collapse__wrapper > div {
	padding: 1em 0;
}
.collapse {
	display: block;
}
.collapse span {
	float: right;
	color: #999999;
}

.collapse--hidden {
	display: none;
}

.transfer__item {
	padding: 0.2em 0;
	box-sizing: border-box;
}
.transfer__option {
	border-radius: 5px;
	min-width: 200px;
	padding: 0.25em 1em 0.25em 0.25em;
	margin-left: 0.25em;
}
.transfer__option img {
	display: inline-block;
	vertical-align: middle;
	width: 30px !important;
	height: 30px !important;
	margin-right: 3px;
}
.transfer__option .micro__letter__avatar__no_margin {
	line-height: 30px;
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	margin-right: 3px;
}
.transfer__item input[type='radio']:checked + .transfer__option {
	color: #fff;
	background: #006ce5;
	border-radius: 5px;
	min-width: 200px;
}
.transfer__input {
	padding: 0.25em 1em 0.25em 0;
	margin-left: 0.25em;
	display: inline-block;
	vertical-align: middle;
}
.transfer__input input {
	font-size: 1em;
	box-sizing: border-box;
	border: 1px solid #ddd;
	outline: 0;
	padding: 0.5em;
	color: #555;
	transition: border-color 0.1s;
	border-radius: 0.25em;
	min-width: 218px;
}

.archive__project__nudger {
	padding-top: 33px;
	padding-left: 45px;
}
.archive__project__nudger .layout__item {
	/*padding-left: 4px;*/
}
.archive__project__nudger img {
	width: 320px;
	height: 180px;
}
.archive__project__nudger__img {
	padding-left: 40px;
}

.profile-card {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.profile-card:hover .profile-card__name {
	text-decoration: underline;
}
.profile-card__name {
	/*cursor: pointer;*/
	padding-left: 3px;
	color: #424242;
	font-size: 1.1em;
}
.profile-card__expanded {
	transition: transform 0.15s 0.2s, opacity 0.15s 0.2s, visibility 0s 0.2s;
	transition-timing-function: ease-out;
	transform: translate(0, 3em);
	left: 0;
	top: 100%;
	z-index: 1000;
	visibility: hidden;
	opacity: 0;
}
.profile-card:hover .profile-card__expanded {
	transform: translate(0, 0);
	transition: all 0.15s 0.7s;
	visibility: visible;
	opacity: 1;
}
.profile-card__content {
	display: flex;
	padding: 1em;
}
.profile-card__avatar {
	margin-right: 1em;
}
.profile-card__title {
	color: initial !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.profile-card__title > div {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.profile-card__expanded svg {
	width: 1em;
	margin-right: 0.25rem;
	fill: #aaaaaa;
}

.meta {
	margin-left: 0;
	color: #7a7a7a;
	padding: 5px 5px 0;
	display: inline-block;
	width: 100%;
	font-size: 0.9em;
	word-wrap: break-word;
	text-overflow: ellipsis;
}
.meta--detailed {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	padding-left: 0;
	padding-top: 10px;
	height: auto;
	white-space: nowrap;
	overflow: hidden;
}

.project__list__item--simple {
	padding: 1em;
	background: #fff;
	border: 3px solid transparent;
	border-bottom: 1px solid #ebebeb;
	-webkit-user-select: none;
	user-select: none;
}

.project__list__item--simple.project__list__item--selected {
	border: 3px solid transparent;
	border-bottom: 1px solid #ebebeb;
	background: #e8f0fe;
}

.project__list__item--simple.project__list__item--droptarget {
	border: 3px solid #88b4f0;
}

.project__list__item--simple.project__list__item--dragging {
	background: #f0f0f0;
	border: 3px solid #f0f0f0;
}

.project__list__item--simple:hover:not(.project__list__item--selected) {
	background: #f8f8f9;
}

/* 
    flex-grow: 1 will make the div expand to it's full width
    setting a specific width will make the div not exceed parent witdth
  */
.project__list__item--simple > .project__list__item--info {
	flex-grow: 1;
	width: 100px;
}

.project__list__item--simple .badge {
	margin-left: 0.5em;
}

.project__folder__icon {
	height: 2.2em;
	width: 2.2em;
	max-height: 2.2em;
	max-width: 2.2em;
	fill: #6eb1f9;
	margin-right: 0.5em;
	flex-grow: 1;
	flex-shrink: 0;
}

.projects__container {
	background: #f0f0f0;
}

.projects__list--simple {
	min-height: 100%;
}

.projects__list--detailed {
	padding: 8px;
	/*	EXPERIMENTAL GRID*/
	display: grid;
	grid-gap: 0;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.projects__list--detailed.projects__list--folders {
	padding: 8px 8px 0 8px;
}

.projects__list__delimiter {
	width: 100%;
	height: 1px;
	border-top: 1px solid #e0e0e0;
}

.projects__list--simple .projects__list__delimiter {
	margin: 2em 0;
}

.project__drag__ghost {
	position: absolute;
	top: -200px;
	left: -200px;
	display: flex;
	align-items: center;
	padding: 5px;
	border-radius: 4px;
	background-color: #f8f8f9;
	color: #88b4f0;
}
.project__drag__ghost svg {
	fill: #88b4f0;
}

.project__drag__ghost span {
	margin-left: 10px;
}

.project__thumbnail {
	height: 0;
	padding-bottom: 75%;
	width: 100%;

	position: relative;

	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	overflow: hidden;
}

.project__thumbnail img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
}

.project__list__item--detailed {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	padding: 8px;
	border-radius: 3px;
	-webkit-user-select: none;
	user-select: none;
	flex-grow: 0;
	flex-shrink: 0;
}

.project__list__item--detailed__wrapper {
	position: relative;
	background: #fff;
	border-radius: 8px;
	border: 3px solid #ffffff;
	box-sizing: content-box;
}

.project__list__item--folder .project__list__item--detailed__wrapper {
	padding: 15px;
	position: relative;
}

.project__list__item--selected .project__list__item--detailed__wrapper {
	border: 3px solid #88b4f0;
}

.project__list__item--detailed.project__list__item--droptarget
	.project__list__item--detailed__wrapper {
	border: 3px solid #88b4f0;
}

.project__list__item--detailed.project__list__item--dragging
	.project__list__item--detailed__wrapper {
	background: #f0f0f0;
	border: 3px solid #f0f0f0;
}

.project__list__item--detailed .centered-buttons {
	display: flex;
	flex-wrap: wrap;
	padding: 15px;
}
.centered-buttons > * {
	margin-right: 10px;
}
.centered-buttons > *:only-child {
	margin-left: 10px;
	margin-top: 0;
	margin-right: 0;
}
.centered-buttons svg {
	height: 1.5em;
	width: 1.5em;
}
.project__list__item--detailed .centered-buttons > *:only-child {
	margin-left: 0;
}

.project__list__item--detailed .dropmenu {
	position: absolute;
	border-radius: 2px;
	right: -15px;
	top: 0;
}

.project__list__item--detailed.project__list__item--folder .dropmenu {
	position: relative;
	right: initial;
	top: initial;
}

.project__list__item--detailed.project__list__item--folder .box-action {
	position: relative;
}

.project__list__item--detailed .box-action {
	height: 28px;
	width: 35px;
	text-align: center;
	border-radius: 50%;
}
.project__list__item--detailed.project__list__item--folder .dropmenu {
	position: relative;
}

.project__list__item--classic .actions-content,
.project__list__item--detailed:hover .actions-content {
	opacity: 1;
}

.actions-content {
	position: absolute;
	font-size: 1em;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.2s;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%);
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.actions-wrapper {
	position: relative;
}

.project__folder__icon {
	height: 2.2em;
	width: 2.2em;
	max-height: 2.2em;
	max-width: 2.2em;
	fill: #6eb1f9;
	margin-right: 0.5em;
	flex-grow: 1;
	flex-shrink: 0;
}

.project__folder__actions {
	position: relative;
	color: #1464f6;
}

.project__template__badge {
	display: inline-block;
	position: absolute;
	top: -1em;
	left: 0.75em;
}

.project__search__badge {
	display: inline-block;
	position: absolute;
	top: -1em;
	right: 0.75em;
}

.project__list__item--template .project__list__item--detailed__wrapper {
	border: none;
	outline: 3px solid transparent;
	cursor: pointer;
}

.project__list__item--template:hover .project__list__item--detailed__wrapper {
	outline: 3px solid #88b4f0;
}

.project__list__item--template img {
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}

.project__template__title {
	padding: 0.8em 1em;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	color: #4a5a6a;
	background-color: #f7f8fa;
	border-top: 1px solid #eeefef;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.project__breadcrumbs {
	display: flex;
	align-items: center;
	overflow-x: auto;
	margin: 1em 1em 0 1em;
	font-size: 1.3em;
}

.project__breadcrumbs--simple {
	margin-bottom: 1em;
}

.project__breadcrumb__step {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	color: #757575;
}

.project__breadcrumb__step--home {
	flex-shrink: 0;
	max-width: 15em;
	color: #303030;
}

.project__breadcrumb__step:hover {
	color: #303030;
}

.project__breadcrumb__separator {
	margin: 0 0.25em;
	transform: rotate(-90deg);
	fill: #006ce5;
}

.projectonboarding {
	text-align: center;
	padding: 2em;
}

.projectonboarding__title {
	font-size: 1.4em;
}

.projectonboarding__illo {
	display: inline-block;
	height: 12em;
}

.projectonboarding__cta .button {
	font-size: 1em;
	margin-bottom: 1em;
}

.projectonboarding__cta .anchorbtn {
	color: #777;
	text-decoration: underline;
}

.template__categories {
	padding: 1em 2.3em;
}

.template__categories > * {
	flex-basis: 0;
}

.template__category {
	margin: 0 0.4em;
	color: #fff;
	border: 2px solid transparent;
	box-sizing: border-box;
	font-size: 1em;
	padding: 0.65em 1em;
	font-weight: 600;
	border-radius: 4px;
	text-align: center;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	line-height: 1.4;
}

.template__category:first-child {
	margin-left: 0.8em;
}

.template__category:last-child {
	margin-right: 0.8em;
}

.template__category:focus {
	outline: none;
	box-shadow: 0px 0px 0px 3px #fff;
}

.template__category--selected {
	/* we need !important to override inline styles */
	background: #ffffff !important;
	color: #1764ef !important;
	border-color: currentColor;
	cursor: auto;
}

.sidebar-wrapper > .layout {
	min-height: 0;
}
.empty-sidebar__header {
	height: 65px;
}
.sidebar__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	overflow-y: auto;
	flex-grow: 1;
}
.sidebar__list--team .sidebar__item a:not(.button) {
	padding: 0.75em 0.3em 0.75em 1em;
}

.sidebar__item:first-of-type {
	margin-top: 0;
}

.sidebar__item {
	font-size: 1em;
}

.sidebar__item a:not(.button) {
	display: block;
	padding: 0.75em 0.3em 0.75em 1em;
	text-decoration: none;
	color: #757575;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar__item:not(.sidebar__item--team) a {
	padding-left: 1.5em;
	display: flex;
	align-items: center;
}

.sidebar__item .button {
	display: block;
	margin: 1em;
}

.sidebar__item a.active {
	background-color: #ffffff;
	color: #424242;
	font-weight: bold;
	cursor: default;
	/*pointer-events: none;*/
}

.sidebar__item--team--personal a {
	font-weight: normal;
}

.sidebar__group__header {
	color: #757575;
	font-size: 12px;
	padding: 1em 1em;
	font-weight: bold;
}

.sidebar__group__separator {
	border-bottom: 1px solid #dbdbdb;
	margin-bottom: 10px;
	padding-top: 10px;
}
.sidebar__group__separator--multiple-teams {
	margin-bottom: 10px;
	padding-top: 10px;
}

.sidebar__projects {
	overflow-y: auto;
}

.sidebar__projects .sidebar__item {
	height: 40px;
}

.sidebar__projects .sidebar__item a {
	padding-left: 24px;
}

.sidebar__projects .sidebar__item svg {
	width: 24px;
	height: 24px;
	margin-right: 12px;
	fill: #757575;
}

.sidebar__projects .sidebar__item a.active {
	background-color: #fff;
	font-weight: bold;
	margin-right: 12px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

.sidebar__projects .sidebar__item a.active svg {
	fill: #6eb1f9;
	color: #6eb1f9;
}

.sidebar__projects .sidebar__item:first-of-type {
	margin-top: 0;
}

.sidebar__projects__header {
	display: flex;
	align-items: center;
	height: 65px;
	min-height: 65px;
	padding: 0 1em;
	background-color: #fff;
	font-size: 14px;
	box-sizing: border-box;
	border-bottom: 1px solid #e6e6e6;
}

.sidebar__multiple__teams__header {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 65px;
	min-height: 65px;
	background-color: #fff;
	font-size: 14px;
	box-sizing: border-box;
	border-bottom: 1px solid #e6e6e6;
}

.progress-bar {
	width: 100%;
	height: 0.5em;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.1);
	/*border: 1px solid #006ce5;*/
	border-radius: 1px;
	margin-bottom: 3px;
}
.progress-bar > div {
	display: block;
	height: 100%;
	background: #006ce5;
	transition: width 0.35s;
}

.progress-bar.progress-bar--full {
	/*border: 1px solid #db3c37;*/
}
.progress-bar.progress-bar--full > div {
	background: #db3c37;
}

.progress-bar.progress-bar--half-full {
	/*border: 1px solid #e67e22;*/
}
.progress-bar.progress-bar--half-full > div {
	background: #e67e22;
}

.quota {
	font-size: 12px;
}
.quota--teams {
	padding-top: 10px;
}
.quota--multiple-teams {
	padding-top: 5px;
}
.quota__item--multiple-teams {
	color: #757575;
}
.quota__item {
	margin-right: 2em;
	color: #757575;
}
.quota__resource {
	display: flex;
}
.quota__resource svg {
	margin-right: 0.5em;
	height: 1.5em;
	fill: #757575;
}
.quota__bar {
	flex-grow: 1;
}
.quota__change-plan button {
	width: 100%;
	margin-top: 10px;
	font-size: 1.4em !important;
	text-transform: uppercase;
}
.quota__change-plan a {
	color: #fff;
}

.sidebar-quota {
	width: auto;
	padding: 1em 1em 1.5em 1em;
	color: #757575;
	border-top: 1px solid #e0e0e0;
}
.sidebar-quota .quota__resource {
	margin-top: 0.6em;
}

.sidebar-quota h4 {
	font-weight: normal;
	margin: 0 0 0.5em;
	font-size: 1.1em;
	color: #999;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-quota .quota__bar {
	margin-top: 5px;
}

.project__tree {
	overflow-y: auto;
	max-height: 300px;
}

.project__tree__list {
	text-align: center;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	padding: 0;
	margin-bottom: 0;
}

.project__tree__item__wrap {
	text-align: left;
	display: block;
	overflow: hidden;
	position: relative;
	cursor: default;
}
.project__tree__item__wrap ul {
	padding: 0;
}

/*
	Icons, in general, need to be filled with the same color
	as the text next to them.
 */
.project__tree__item__wrap svg {
	fill: currentColor;
	width: 1.2em;
	height: 1.2em;
}

/*
	A "line" in the list,
	which does not contain the item's children.
	This is the default state.
 */
.project__tree__item {
	height: 28px;
	position: relative;
	display: flex;
	align-items: center;
	padding: 0;
	margin-right: 4px;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}

.project__tree__item.selected {
	margin-right: 12px;
	background-color: #fff;
	font-weight: bold;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

.project__tree__item--root {
	height: 40px;
}

.project__tree__item.selected svg,
.project__tree__item svg.closed__folder__icon {
	fill: #6eb1f9;
}

.project__tree__item .expand {
	height: 24px;
	width: 24px;
	min-height: 24px;
	min-width: 24px;
	display: flex;
	align-items: center;
}
.project__tree__item .expand svg {
	height: 24px;
	width: 24px;
	min-height: 24px;
	min-width: 24px;
	display: flex;
	align-items: center;
}

.project__tree__item svg {
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	margin-right: 6px;
	fill: #757575;
}

.project__tree__item--root svg {
	height: 24px;
	width: 24px;
	margin-right: 12px;
}

.droptarget {
	box-shadow: 0 0 0 3px #88b4f0 inset;
}

.project__tree__item__wrap.droptarget .project__tree__item {
	background: none !important;
	color: inherit !important;
}
.targeting .project__tree__item__wrap {
	cursor: crosshair !important;
}

input.title-rename-input {
	padding: 0.15em 0.5em;
	border-radius: 0;
	width: 100%;
	font-size: 12px;
}

.project__tree__item__label {
	display: block;
	flex-grow: 1;
}

.project__tree__item__label.ellipsis {
	padding: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.project__tree__item__label .divider {
	font-weight: 200;
	opacity: 0.5;
}

.team__dropdown {
	/* 
		popover (team__dropdown) creates spans instead of divs 
		when opened, so keep it block for consistency 
	*/
	display: block;
	width: 100%;
	-webkit-user-select: none;
	user-select: none;
}

.team__dropdown.dropmenu > div {
	right: -10px;
}

.team__dropdown .dropmenu__label {
	width: 100%;
	display: flex;
	align-items: center;
}

.team__dropdown > div div {
	padding-top: 0;
	padding-bottom: 0;
}

.team__dropdown__option {
	display: flex;
	align-items: center;
	padding: 0.5em !important; /* had to, drodown has some weird css rules */
}

.team__dropdown__option:hover svg {
	fill: #fff;
}

.team__dropdown .dropmenu__label svg,
.team__dropdown__option svg {
	width: 1em;
	height: 1em;
	min-width: 1em;
	min-height: 1em;
	margin-left: 0.75em;
	fill: #757575;
}

.team__dropdown .team__dropdown__option .letter__avatar {
	padding: 0;
	margin-right: 0.75em;
}

.team__dropdown .dropmenu__label .avatar-image,
.team__dropdown .team__dropdown__option .avatar-image {
	margin-right: 0.75em;
}

.team__label__text {
	flex-grow: 1;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
}

.team__dropdown__option--selected .team__label__text,
.team__dropdown .dropmenu__label .team__label__text {
	font-weight: bold;
}

.team__dropdown .dropmenu__label svg {
	width: 1.5em;
	height: 1.5em;
	min-width: 1.5em;
	min-height: 1.5em;
}
.multiple--teams--header {
	color: #757575;
	font-size: 12px;
	padding: 0.35em 0.5em;
	font-weight: bold;
}

.team-card {
	/*display: flex;*/
	align-items: center;
}

.team-card__settings {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.team-card__settings button {
	padding: 0.2em 0.5em 0.2em 0.5em;
}

.team-card__settings button:hover svg {
	fill: #fff;
}

.team-card__settings .spinner {
	padding: 0 1em;
	margin-top: 0;
}

.team-card__settings--popover {
	right: 15px;
	top: 100px;
}

.team-card__settings__button {
	color: #444444;
	padding-right: 10px;
	cursor: pointer;
}

.team-card__settings--popover .switch__wrapper {
	margin-top: 17px;
}

.team-card__name {
	margin-left: 12px;
	font-size: 1.4em;
}

.team-card__name__simple {
	margin-left: 1.4em;
	font-size: 1.4em;
}

.team-card__name--owner {
	margin-top: 1em;
	font-size: 1.5em;
}

.team-card__name--owner svg {
	width: 20px;
	height: 20px;
}

.team-card__name--owner .inline-editable__label {
	font-weight: normal;
}

.team-settings {
	padding: 20px 0px 20px 30px;
}

.team-setting__item {
	padding-top: 10px;
}

.team-setting__item--description {
	font-size: 0.8em;
}

.team-settings__reviewers {
	border-radius: 5px;
	background: #e4dbdb;
}

.team-access__options__radio {
	padding-top: 10px;
}

.team-access__options__radio span {
	padding-left: 5px;
}

.team-access__options__info {
	padding-left: 19px;
}

.add-member-input {
	width: 50%;
	height: 7em;
	margin: 15px 0 0 0;
	rows: 4;
	font-size: 12px;
	resize: vertical;
	box-sizing: border-box;
	border: 1px solid #ddd;
	outline: none;
	padding: 0.5em;
	color: #555;
	transition: border-color 0.1s;
	border-radius: 0.25em;
}

.add-member-input--domainlist {
	width: 100%;
	margin: 0;
	border: 1px solid #aaaaaa;
	border-top: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.text-area-no-resize {
	resize: none;
}

.add-members-domainlist {
	display: flex;
	margin-top: 15px;
	padding: 10px;
	background-color: #f6f6f6;
	color: #7a7a7a;
	border: 1px solid #aaaaaa;
	border-top-left-radius: 0.25em;
	border-top-right-radius: 0.25em;
}

.add-members-domainlist svg {
	fill: #7a7a7a;
	margin-right: 10px;
}

.add-members-domainlist a {
	margin-left: auto;
}

.add-members-form {
	line-height: 1.4;
	padding-bottom: 1em;
}

.add-member-action {
	margin-bottom: 20px;
	font-size: 100%;
}

.add-members-with-role {
	padding: 8px;
}

.add-members-captcha-badge {
	z-index: 10;
	position: absolute;
}

.add-team-member-email-input {
	padding-right: 0px;
}

.add-member-action .team-member__info-label {
	font-size: 100%;
}

.add-member-restricted {
	margin-top: 10px;
	border-top: 1px solid #ebebeb;
}

.add-member-roles-dropdown .dropmenu__label {
	border: 1px solid #ddd;
	border-radius: 0.25em;
	color: #000;
	padding: 0.2em 0.75em;
	min-width: 85px;
	text-align: center;
}

.team-member-role_label {
	color: #1464f6;
}

.team-member-role:not(.selected):not(.disabled):hover > span:nth-child(2) {
	color: #ffffff;
}

.new-team {
	color: #006ce4 !important;
	font-weight: 400;
	cursor: pointer;
	padding: 0 !important ;
}

.new-team a {
	color: #006ce4 !important;
	font-weight: 400;
	cursor: pointer;
	padding-top: 0px !important;
	padding-right: 0px !important;
	padding-bottom: 0px !important;
	padding-left: 4px !important;
}

.team-member-roledropdown > div {
	min-width: 280px !important;
}

.team-member-roledropdown > div div {
	max-width: 280px !important;
	padding-top: 0;
	padding-bottom: 0;
}

.team-member-role,
.team-member-role-remove {
	padding: 1em 1.3em !important;
}

.team-member-role-remove {
	color: #e61610;
}

.team-member-role_title {
	color: #000;
}

.team-member-role.disabled .team-member-role_title {
	color: #aaa;
}

.team-member-role.selected .team-member-role_title {
	font-weight: bold;
}

.team-member-roledropdown > div div > div div:not(.selected):not(.disabled):hover:first-child {
	border-top-left-radius: 0.25em;
	border-top-right-radius: 0.25em;
}

.team-member-roledropdown > div div > div div:not(.selected):not(.disabled):hover:last-child {
	border-bottom-left-radius: 0.25em;
	border-bottom-right-radius: 0.25em;
}

.team-member-role:not(.selected):not(.disabled):hover .team-member-role_title {
	color: #fff;
}

.team-member-role:not(.selected):not(.disabled):hover .team-member-role_desc {
	color: #fff;
}

.team-member-role_checkmark {
	margin: auto 0;
}

.team-member-role_desc {
	white-space: pre-wrap;
	font-size: 12px;
	line-height: 1.3em;
	color: #aaa;
}

.team-member-role__divider {
	border-bottom: 1px dotted #a9a9a9;
	pointer-events: none;
}

.team-member-role .upgrade-plan {
	background: #fec63d;
	font-weight: bold;
	font-size: 11px;
	padding: 2px 10px;
	border-radius: 0.3em;
}

.team-member__list {
	margin-bottom: 2em;
}

.team-member__divider {
	width: 100%;
	border-bottom: 1px solid #ebebeb;
}

.team-member__card {
	display: flex;
	padding: 15px 0;
}

.team-member__subtitle {
	color: #a9a9a9;
	padding-top: 0.5em;
	font-size: 12px;
}

.team-member__title {
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-grow: 1;
}
.team-member__actions,
.team-member__private-projects {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 10px;
}

.team-member__warning {
	display: flex;
	align-items: center;
	padding: 0.25em 0.5em;
	margin: 0 1em;
	color: #fbc02d;
	background-color: #fefce0;
	border: 1px solid #fbc02d;
	border-radius: 3px;
	font-size: 12px;
}

.team-member__warning svg {
	height: 1.5em;
	width: 1.5em;
	margin-right: 0.5em;
	fill: #fbc02d;
}

.team-member__avatar-wrapper {
	margin-right: 20px;
}

.team-member__role {
	display: flex;
	align-items: center;
	padding-right: 30px;
}

.upgrade-plan__details {
	padding-left: 5px;
}
.upgrade-plan__details--title {
	font-weight: bold;
}
.upgrade-plan__row {
	padding-top: 10px;
}

.team-member__change-admin-link {
	font-size: 0.75em;
	padding-left: 3px;
}

.label--info {
	display: inline-block;
	position: relative;
	margin-left: 0.75em;
	padding: 0.75em 1.5em;
	background-color: #ecf0f1;
	font-size: 12px;
	color: #7f8c8d;
	border-radius: 0.25em;
}
.label--info:before {
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	height: 0;
	width: 0;
	border: solid transparent 8px;
	content: ' ';
	pointer-events: none;
	border-right-color: #ecf0f1;
}

.teamonboarding {
	text-align: left;
	padding: 2em;
	background-color: #f1f7fd;
	width: 75%;
	margin-bottom: 10px;
	margin-top: 10px;
	border-radius: 18px;
	font-size: 14px;
}

.teamonboarding__title {
	font-size: 24px;
	font-weight: bold;
	padding-bottom: 10px;
	margin-top: -3px;
}

.teamonboarding__illo {
	display: inline-block;
	height: 12em;
}

.teamonboarding .button {
	font-size: 18px;
	font-weight: bold;
	width: 173px;
	height: 48px;
	border-radius: 8px;
	background-color: #7656f3;
	color: #fff;
}

.teamonboarding__cta .anchorbtn {
	color: #777;
	text-decoration: underline;
}
.teamonboarding img {
	width: 226px;
	height: 107px;
}

.invite_members {
	padding: 0 10px 10px;
}

.invite_members .form-element {
	padding-right: 0;
}

.invite_members__form p.layout__item {
	padding: 0 0 0 0.75em;
}

.invite_members .form-element:not(.form-element__3-column) input + input {
	margin-left: 0.75em;
}

.invite_members .form-element input {
	flex-grow: 1;
}

.invite_members .form-element__3-column .team-member-email-input {
	flex-basis: 35%;
	flex-grow: 0;
}

.invite_members .form-element__3-column .team-member-name-input {
	flex-basis: 30%;
	flex-grow: 0;
}

.container h3 {
	padding: 0.8em 0 0 0.8em;
}
table {
	width: 100%;
	border-collapse: collapse;
}

thead td {
	font-weight: bold;
}

thead {
	border-bottom: 3px solid #f0f0f0;
}

td {
	padding: 0.5em 1em;
}

.billing-pane .btn {
	margin-right: 1em;
}

.billing-pane h3 {
	font-size: 1.4em;
}

.billing-pane .billing__nextBilling {
	margin-bottom: 20px;
}
.billing-pane .billing__planCancelled {
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 18px;
	font-family: Arial;
}

.billing-pane .expiration_date {
	color: #f54c52;
	font-weight: bold;
	font-size: 18px;
	font-family: Helvetica;
	margin-left: 8px;
}

.billing-pane .billing__discount {
	display: flex;
}

.billing-pane .billing__discount__info {
	display: inline-flex;
	align-items: center;
	padding-left: 6px;
}

.billing-pane .billing__discount__info svg {
	height: 18px;
	width: 18px;
	fill: #3d8af7;
}

.details {
	border: 3px solid #f0f0f0;
	border-radius: 0.25em;
}

.details__item {
	padding: 1.5em;
	border-right: 2px solid #eee;
	position: relative;
	padding-bottom: 4em;
}

.details__item .button {
	position: absolute;
	bottom: 1.5em;
	left: 1.5em;
}

.details__item:last-child {
	border-right: none;
}

.details__item h3 {
	margin-top: 0;
	font-family: Arial;
	font-size: 24px;
}

.details__item:last-child {
	border-bottom: none;
}

.quota-wrapper {
	margin: 1em 0;
}

.billing-pane .switch__wrapper {
	margin: 0.6em 0;
}

.ccinfo {
	margin: 1.5em 0;
	color: #777;
	font-weight: bold;
}

.payment-options {
	margin: 1em 0;
	padding: 0.5em 0;
	border: 1px solid #f0f0f0;
}

.details__bonus-seats {
	font-size: 0.75em;
	color: #a9a9a9;
	margin-top: 0;
}

.details__bonus-seats-info {
	max-width: 200px;
}

.details__bonus-seats-info p {
	margin: 0;
}

.details__plan-info {
	margin-bottom: 0px;
	font-family: Arial;
	font-size: 18px;
}

.details__plan-info2 {
	font-family: Arial;
	font-weight: bold;
	font-size: 18px;
}

.billing-pane .details__item .details__bonus-seats svg {
	height: 14px;
	width: 14px;
	fill: #a9a9a9;
	padding-top: 0.1em;
	padding-left: 0.3em;
}

.billing-address {
	flex-grow: 1;
}
.billing-address label {
	display: inline-block;
}

:global .form-element {
	padding-right: 1em;
	margin: 0 0 0.5em;
	box-sizing: border-box;
}

:global .form-element button {
	margin: 0.25em 0;
}

:global select {
	padding: 0.25em;
}

select {
	width: 100%;
}

.vat-tooltip {
	max-width: 300px;
}

.vat-indicator {
	color: #006ce5;
	margin-left: 0.2em;
	cursor: pointer;
}

.billing-address .form-element {
	padding-right: 1em;
}

.updatepayment {
	margin: -1em;
}

.updatepayment__header {
	position: relative;
	background: #fff;
	padding: 1em;
	box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1);
}

.updatepayment__header h2 {
	margin: 0;
}

.updatepayment__body {
	max-width: 65em;
	padding: 1em;
}

.updatepayment .btn--close {
	position: absolute;
	top: 50%;
	right: 1em;
	background: #fff;
	padding: 0;
	transform: translate(0, -50%);
}

.updatepayment .btn--close svg {
	width: 2em;
	height: 2em;
	display: block;
	fill: #777;
}

.subscription-info {
	display: block;
	margin: 0 0 1em 0;
	padding: 0.75em;
	background-color: #dff3fd;
	border-radius: 6px;
}

.subscription-info p {
	margin: 0;
}

.updatepayment .lockicon {
	fill: #fff;
	height: 1.25em;
	width: auto;
	display: inline-block;
	vertical-align: middle;
	margin-top: -0.1em;
	margin-right: 0.25em;
}

.paypal,
.bank-order {
	width: 5em;
	height: 2.5em;
	margin-left: 0.5em;
}

.amex,
.visa,
.mastercard {
	width: 3em;
	height: 1.5em;
}
/**
	Hero Payment
 */
.hero__wrapper {
	padding-top: 0;
	padding-bottom: 20px;
	background: #0f88f2;
	text-align: center;
}
.hero__wrapper h1 {
	color: #fff;
	font-weight: 600;
	font-size: 30px;
	line-height: 1.22;
	margin: 0 auto 50px;
	width: 60%;
	font-feature-settings: 'lnum';
}
.hero__wrapper .billing-type {
	cursor: pointer;
	outline: none;
	color: #fff;
	display: inline-block;
	padding: 10px 20px;
	font-size: 13px;
	border: 1px solid #ffffff;
	background: transparent;
}
.hero__wrapper .billing-type:first-child {
	border-radius: 4px 0 0 4px;
}
.hero__wrapper .billing-type:nth-child(2) {
	border-radius: 0 4px 4px 0;
}
.hero__wrapper .billing-type.selected {
	color: #335578;
	background-color: #fff;
}
.billing__switch__wrapper {
	position: relative;
	display: inline-block;
}
.billing__switch__wrapper svg {
	width: 90px;
	position: absolute;
	top: -20px;
	margin-left: 15px;
}
/**
	Form Footer
 */
.payment__footer {
	padding: 20px;
	box-sizing: border-box;
	background: rgba(201, 241, 253, 0.5);
	border-top: 1pt solid #c0c0c0;
	font-size: 14px;
}
.payment__footer__info {
	padding-bottom: 10px;
}
.payment__footer__details {
	height: 60px;
}
.payment__footer__plans--link {
	text-decoration: underline;
	padding-top: 5px;
	display: inline-block;
}

.payment__wrapper {
	margin: 0 auto;
	padding: 0 60px;
	box-sizing: border-box;
	max-width: 950px;
}
.payment__title {
	color: #335578;
	/*font-weight: 400;*/
	font-size: 28px;
	margin: 50px auto 35px;
	text-align: center;
}
.payment-form__content {
	padding: 20px;
}
.payment__wrapper select {
	margin-top: 0.25em;
}
.bank__order select {
	margin-top: 0;
}
.payment__wrapper .actionable {
	padding-top: 12px;
}
.payment__methods {
	display: flex;
	flex: 1;
	padding-left: 0;
	margin-block-end: 0;
	margin-block-start: 0;
	list-style: none;
}
.payment__methods li {
	flex: 1 0;
	flex-basis: 25%;
	box-sizing: border-box;
	border-right: 0.5pt solid #c0c0c0;
	border-bottom: 0.5pt solid #c0c0c0;
	text-align: center;
	background-color: #f7f6f6;
	align-items: center;
	position: relative;
	min-height: 5.5em;
}
.payment__methods li:first-child {
	border-radius: 0.25em 0 0 0;
}
.payment__methods li:last-child {
	border-right: none;
	border-radius: 0 0.25em 0 0;
}
.payment__methods li.active {
	color: #006ce5;
	pointer-events: none;
	border-color: #006ce5;
}
.updatepayment__body .change-card__form {
	border: 0px;
	border-radius: 0em;
}

.change-card__form {
	padding: 0 1em;
	margin: 0;
}

.extra_payment_method_content {
	color: #667482;
	padding-bottom: 2em;
	padding-left: 2em;
	padding-right: 2em;
	padding-top: 0;
	font-size: 16px;
	text-align: center;
}

.extra_payment_method_content .spinner {
	padding: 0.7em;
	text-align: center;
	margin-top: 1em;
}

.payment__icon {
	cursor: pointer;
	display: flex;
	justify-content: center;
}

.payment__icon svg {
	width: 100%;
	height: 3em;
	display: block;
}

.payment__icon--card svg {
	height: 2.5em;
}

.payment__icon--paypal svg {
	height: 2em;
}
.payment__icon--applepay svg {
	height: 3em;
}
.payment__icon--googlepay svg {
	height: 5.5em;
}

.method--active {
	background-color: #fff !important;
	border-bottom-color: transparent !important;
}

.payment_bank_price_notification {
	background-color: #ffffff;
	border: 1px solid #ff9800;
	padding: 0.8em;
	margin-bottom: 1.2em;
	text-align: center;
}

.voucher__apply button {
	margin-top: 22px !important;
	padding: 7px 1.5em !important;
}
.payment__side {
	color: #667482;
	font-size: 14px;
	line-height: 1.8;
	padding-top: 1.5em;
}
.payment__side > h3:first-child {
	margin-top: -10px;
}
.payment__side h3 {
	color: #335578;
	font-size: 20px;
	margin-bottom: 0;
	line-height: 2;
}
.payment__side p {
	margin-top: 3px;
}
.side__clients h3 {
	padding-bottom: 10px;
}
.payment__credit-card__intro {
	color: #667482;
	font-size: 16px;
	margin-top: 0;
}

.billing__info {
	padding-top: 10px;
	padding-left: 20px;
	font-size: 14px;
	border-bottom: 1px solid #c0c0c0;
}
.billing__info__check {
	min-width: 50px;
	padding-bottom: 10px;
}
.billing__required-field {
	font-size: 11px;
	color: #aaaaaa;
	display: block;
	padding-bottom: 15px;
}
.billing__required-field sup {
	display: inline-block;
}

.method__bordered {
	border: 0.5pt solid #c0c0c0;
	border-radius: 4px;
}
.payment__content {
	border: 1px solid #c0c0c0;
}

.payments-info {
	border: 1px solid #dddddd;
	padding: 12px 30px;
	margin: 30px 0;
}
.payments-info h3 {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
	color: #8c96a9;
	letter-spacing: 0.99px;
	line-height: 20px;
}

/*
	Voucher Box
 */
.payments__voucher {
	border: 1px solid #dddddd;
	padding: 12px 30px;
}
.payments__voucher button {
	margin-top: 1px !important;
	min-height: 31px;
}
.payments__voucher .applied {
	font-size: 12px;
	font-style: italic;
	color: #8c96a9;
	letter-spacing: 0;
	line-height: 18px;
}
.payments__voucher h3 {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
	color: #8c96a9;
	letter-spacing: 0.99px;
	line-height: 20px;
}

/*
	Subscription success
 */

.subscription__success {
	max-width: 470px;
	margin: 70px auto 0;
	text-align: center;
}
.subscription__success img,
.subscription__success svg {
	max-width: 300px;
}
.already__subscribed svg {
	max-width: 200px;
}

.subscription__success h2 {
	color: #335578;
	font-size: 20px;
	margin-bottom: 10px;
}
.subscription__success p {
	color: #000000;
	font-size: 14px;
	margin-bottom: 45px;
	font-weight: 300;
}
.subscription__success a {
	margin: 6px 0;
}
.free__success p {
	margin-top: 10px;
	margin-bottom: 25px;
}
.already__free {
	max-width: 450px;
}
.already__free h2 {
	font-size: 24px;
}
.already__free svg {
	max-width: 200px;
}
.already__free p {
	margin-bottom: 20px;
}
.already__free .already__free--details {
	color: #335578;
	margin-bottom: 25px;
}
.already__free .already__free--teaser {
	color: #335578;
	margin-bottom: 15px;
	font-weight: 500;
}
.already__subscribed {
	max-width: 450px;
}
.already__subscribed p {
	margin-bottom: 20px;
}
.already__subscribed strong {
	font-weight: 600;
}
.already__subscribed h2 {
	font-size: 24px;
	margin-bottom: 10px;
}
.already__subscribed hr {
	border: none;
	border-bottom: 1px solid rgba(51, 85, 120, 0.2);
}

.upgrade__warning {
	margin: 20px auto 0;
	max-width: 550px;
	text-align: center;
}

.upgrade__warning h2 {
	color: #335578;
}

.upgrade__warning .dismiss {
	font-weight: bold;
	line-height: 3em;
}

.upgrade__warning p {
	text-align: left;
	margin-bottom: 10px;
	margin-top: 10px;
}

.upgrade__warning p.centered {
	text-align: center;
}

.upgrade__warning .text__content {
	display: inline-block;
	max-width: 450px;
}

.upgrade__warning ul li {
	list-style: inside;
}

.upgrade__warning li {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	text-align: left;
	max-width: 200px;
	margin: 0 auto;
}

.upgrade__warning li.more {
	list-style: none;
	padding: 10px 0 10px 0;
}

.upgrade__warning .actions {
	padding-top: 20px;
}

.upgrade__warning strong {
	font-weight: 600;
}
.upgrade__warning h2 {
	font-size: 24px;
	margin-bottom: 10px;
}
.upgrade__warning hr {
	border: none;
	border-bottom: 1px solid rgba(51, 85, 120, 0.2);
}

.upgrade__warning a {
	max-width: 225px;
}

.upgrade__warning svg {
	max-width: 300px;
}

.subscription__success a {
	max-width: 225px;
}

.team-member__divider {
	width: 100%;
	border-bottom: 1px solid #ebebeb;
}

.team-members-list {
	margin-top: 20px;
	overflow-y: scroll;
	height: 200px;
	padding-bottom: 40px;
}

@media only screen and (max-width: 1200px) {
	.hero__wrapper h1 {
		margin-bottom: 30px;
	}
}
@media only screen and (max-width: 468px) {
	.billing__switch__wrapper svg {
		margin-left: -95px !important;
		top: -50px;
		width: 100px;
	}
	.already__subscribed,
	.already__free,
	.subscription__success,
	.upgrade__warning,
	.free__success {
		max-width: 100%;
		padding: 0 1em;
	}
	.already__free .layout {
		display: block !important;
	}
	.already__free .layout .layout--item {
		margin-bottom: 10px;
	}
	.already__subscribed .text--underlined {
		display: block;
	}

	.upgrade__warning .text--underlined {
		display: block;
	}

	.payment__wrapper {
		max-width: 100%;
		padding: 0 10px;
	}
	.already__subscribed a {
		max-width: 100%;
	}
	.payment-form__content .layout {
		flex-direction: column;
	}
	.payment__wrapper .layout__item--width-60,
	.payment__wrapper .layout__item--width-35 {
		flex-basis: 100%;
	}
	.payment__title {
		width: 100%;
	}

	.payment__side {
		padding: 25px 20px 10px;
	}
}
@media only screen and (max-width: 660px) {
	.payment__side {
		padding: 25px 20px 10px;
	}
	.billing__info {
		font-size: 16px;
		padding-right: 5px;
	}
	.payment__side p,
	.payment-form__content p,
	.payment-form__content label,
	.payment-form__content a,
	.payment__footer {
		font-size: 16px;
	}
	.billing__required-field {
		font-size: 14px;
	}

	.payment__credit-card__intro {
		font-size: 18px !important;
	}
	.payment__wrapper {
		max-width: 100%;
		padding: 0 20px;
	}
	.payment__method {
		flex-direction: column !important;
	}
}
@media only screen and (max-width: 940px) {
	.payment__footer__billing--type {
		display: block;
	}
	.payment__footer__plans--link {
		padding-top: 15px;
	}
}

@media only screen and (min-width: 768px) {
	.payment__credit-card select {
		margin-top: 0;
	}
}

.selected__payment__method__instrument {
	display: inline-block;
	font-size: 1.1em;
	font-weight: bold;
	color: #009cde;
	margin: 0;
}
.cancel__selected__payment__method__instrument {
	font-size: 0.75em;
	margin: 1em 0;
}

.cancel__selected__payment__method__instrument button {
	cursor: pointer;
	background: none;
	padding: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	border: none;
	font-family: inherit;
	text-decoration: underline;
	color: #777;
}

.cancel__selected__payment__method__instrument button:hover {
	color: #006ce5;
}

.update__payment__method {
	margin: 0 0 1.25em;
	box-sizing: border-box;
}

.text--pp-small {
	color: #667482;
	font-size: 0.8em;
	margin: 0 0 2em;
	line-height: 1.6;
	text-align: center;
}

.paypal__text {
	padding-top: 20px;
	color: #667482;
	font-size: 1em;
	text-align: center;
}

/*
	Braintree Drop in
 */
[data-braintree-id='card-sheet-header'],
[data-braintree-id='paypal-sheet-header'],
[data-braintree-id='apple-pay-sheet-header'],
[data-braintree-id='google-pay-sheet-header'] {
	display: none;
}

[data-braintree-id='card'],
[data-braintree-id='paypal'],
[data-braintree-id='applePay'],
[data-braintree-id='googlePay'] {
	border: 0 !important;
}

/*[data-braintree-id='paypal'],
[data-braintree-id='applePay'],
[data-braintree-id='googlePay'] {
	padding: 50px 0 20px;
}*/

[data-braintree-id='card'] > .braintree-sheet__content {
	padding: 0 !important;
}

[data-braintree-id='card'] .braintree-form__notice-of-collection {
	display: none;
}

[data-braintree-id='wrapper'] .braintree-placeholder {
	display: none;
}

[data-braintree-id='apple-pay-button'] {
	width: 145px;
	height: 45px;
}

[data-braintree-id='expiration-date-field-group'] {
	padding-left: 0px !important;
	padding-right: 5px;
}

[data-braintree-id='number-field-group'] {
	padding-left: 0px !important;
}

[data-braintree-id='sheet-container'] .braintree-sheet__content--button {
	padding: 0 !important;
	min-height: 50px !important;
}

/*
	Apple Pay on third party browsers
 */
@supports not (-webkit-appearance: -apple-pay-button) {
	[data-braintree-id='apple-pay-button'] {
		background: #000;
		min-width: 145px;
		padding-left: 23px;
		padding-top: 12px;
		background-origin: content-box;
		background-color: #000;
		background-repeat: no-repeat;
		background-image: url("data:image/svg+xml;utf8,<svg id=%27svg-logo%27 x=%270%27 y=%273.85%27 height=%2721%27 width=%27100%27 class=%27logo%27 viewBox=%270 0 105 43%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27><title>Apple Logo</title><g stroke=%27none%27 stroke-width=%271%27 fill=%27none%27 fill-rule=%27evenodd%27><g fill=%27%23FFF%27><path d=%27M19.4028,5.5674 C20.6008,4.0684 21.4138,2.0564 21.1998,0.0004 C19.4458,0.0874 17.3058,1.1574 16.0668,2.6564 C14.9538,3.9414 13.9688,6.0374 14.2258,8.0074 C16.1948,8.1784 18.1618,7.0244 19.4028,5.5674%27></path><path d=%27M21.1772,8.3926 C18.3182,8.2226 15.8872,10.0156 14.5212,10.0156 C13.1552,10.0156 11.0642,8.4786 8.8022,8.5196 C5.8592,8.5626 3.1282,10.2276 1.6342,12.8746 C-1.4378,18.1696 0.8232,26.0246 3.8112,30.3376 C5.2622,32.4716 7.0102,34.8206 9.3142,34.7366 C11.4912,34.6506 12.3442,33.3266 14.9902,33.3266 C17.6352,33.3266 18.4042,34.7366 20.7082,34.6936 C23.0972,34.6506 24.5922,32.5586 26.0422,30.4226 C27.7072,27.9906 28.3882,25.6426 28.4312,25.5126 C28.3882,25.4706 23.8232,23.7186 23.7812,18.4676 C23.7382,14.0706 27.3652,11.9786 27.5362,11.8496 C25.4882,8.8196 22.2872,8.4786 21.1772,8.3926%27></path><path d=%27M85.5508,43.0381 L85.5508,39.1991 C85.8628,39.2421 86.6158,39.2871 87.0158,39.2871 C89.2138,39.2871 90.4558,38.3551 91.2108,35.9581 L91.6548,34.5371 L83.2428,11.2321 L88.4368,11.2321 L94.2958,30.1421 L94.4068,30.1421 L100.2668,11.2321 L105.3278,11.2321 L96.6048,35.7141 C94.6078,41.3291 92.3208,43.1721 87.4828,43.1721 C87.1048,43.1721 85.8838,43.1271 85.5508,43.0381%27></path><path d=%27M42.6499,19.3555 L48.3549,19.3555 C52.6829,19.3555 55.1469,17.0255 55.1469,12.9855 C55.1469,8.9455 52.6829,6.6375 48.3769,6.6375 L42.6499,6.6375 L42.6499,19.3555 Z M49.6869,2.4425 C55.9009,2.4425 60.2289,6.7265 60.2289,12.9625 C60.2289,19.2225 55.8129,23.5285 49.5309,23.5285 L42.6499,23.5285 L42.6499,34.4705 L37.6779,34.4705 L37.6779,2.4425 L49.6869,2.4425 Z%27></path><path d=%27M76.5547,25.7705 L76.5547,23.9715 L71.0287,24.3275 C67.9207,24.5275 66.3007,25.6815 66.3007,27.7015 C66.3007,29.6545 67.9887,30.9195 70.6287,30.9195 C74.0027,30.9195 76.5547,28.7665 76.5547,25.7705 M61.4617,27.8345 C61.4617,23.7285 64.5917,21.3755 70.3627,21.0205 L76.5547,20.6425 L76.5547,18.8675 C76.5547,16.2705 74.8457,14.8495 71.8057,14.8495 C69.2967,14.8495 67.4777,16.1375 67.0997,18.1125 L62.6167,18.1125 C62.7497,13.9615 66.6567,10.9435 71.9387,10.9435 C77.6207,10.9435 81.3267,13.9175 81.3267,18.5345 L81.3267,34.4705 L76.7327,34.4705 L76.7327,30.6305 L76.6217,30.6305 C75.3127,33.1395 72.4267,34.7145 69.2967,34.7145 C64.6807,34.7145 61.4617,31.9625 61.4617,27.8345%27></path></g></g></svg>");
	}
}

.payment__side h3 {
	color: #335578;
	font-size: 20px;
	margin-bottom: 0;
	line-height: 2;
}
.payment__side {
	color: #667482;
	font-size: 14px;
	line-height: 1.8;
}

.payment__side img {
	width: 100%;
}

.planlist__wrapper {
	background-color: #fff;
	padding: 1.5em;
}

.planlist {
	padding-bottom: 20px;
}

.planlist__list {
	list-style: none;
	padding: 0;
	margin: 0;
	border: 3px solid #eee;
	border-radius: 0.25em;
}

.planlist__item {
	border-bottom: 1px solid #ddd;
	padding: 0 1em;
}

.planlist__item--current {
	color: #777;
}

.planlist__switch {
	padding: 0 0 1em;
	margin: 0.5em 0 0.5em;
	/* border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0; */
}

.planlist__title {
	float: left;
	margin: 0;
	width: 20%;
	text-align: center;
}

.planlist__cycle {
	text-align: center;
}

.planlist__cycle .anchorbtn {
	margin: 0 1em;
	text-decoration: underline;
}

.planlist__cycle .anchorbtn--active {
	font-weight: bold;
	text-decoration: none;
}

.planlist__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	border-radius: 0.25em;
}

.planlist__table th,
.planlist__table td {
	text-align: center;
	width: 25%;
}

.planlist__table td {
	padding: 0.5em;
}

.planlist__table tr {
	border-bottom: 1px solid #ccc;
}

.planlist__table tr:last-child {
	border-bottom: none;
}

.planlist__table td:last-child {
	/*width: 7em;*/
	/*text-align: right;*/
}

.planlist__table .button {
	min-width: 6em;
	min-height: 0;
	box-sizing: content-box;
}

.planlist__header {
	margin: 0;
	list-style: none;
	padding: 0 20%;
	font-weight: bold;
	color: #777;
}

.planlist__header li {
	float: left;
	width: 33.33%;
	text-align: center;
}

.planlist__section {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 0.25em;
	margin: 1em 0;
	overflow: hidden;
}

.planlist__sectionhead {
	background: #f6f6f6;
	vertical-align: middle;
	border-right: 1px solid #ccc;
	font-weight: bold;
	width: 20%;
	text-align: center;
	position: relative;
}

.planlist__sectionhead span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

.planlist .button--downgrade {
	background: #fff;
	border: 1px solid currentColor;
	color: #006be5;
}

.planlist .button--current {
	cursor: default;
	border-color: transparent;
	/* background: #fff; */
	color: #fff;
}

.plan {
	width: 280px;
	display: flex;
	box-sizing: content-box;
	position: relative;
	border: 1px solid #c0c0c0;
	border-radius: 6px;
	padding: 10px 0 0;
	text-align: center;
	font-weight: 400;
	padding-bottom: 0;
}

.plan:first-child {
	margin-right: 20px;
}
.plan:last-child {
	margin-left: 20px;
}
.plan h2 {
	font-weight: 600;
	font-size: 24px;
	color: #335578;
	margin-top: 10px;
	margin-bottom: 0;
}

.plan__extra_info {
	color: #335578;
	font-size: 13px;
	font-weight: 600;
	margin-top: 0;
}

.plan__button {
	margin: 1em 0 1.5em;
}

.plan__price {
	margin-top: 10px;
	align-items: baseline;
	justify-content: center;
	color: #335578;
	font-size: 30px;
	font-feature-settings: 'lnum';
}
.plan__price__number {
	font-weight: 800;
}

.plan__price__monthly {
	font-size: 12px;
	opacity: 0.8;
	text-align: left;
	align-self: center;
	padding-top: 3px;
	padding-left: 5px;
	line-height: 1.2;
	font-weight: 600;
}

.plan__price__cycle {
	font-size: 12px;
	opacity: 0.8;
	margin-top: -8px;
	color: #3a424a;
}

.plan__price sup {
	font-size: 16px;
	font-weight: 600;
	opacity: 0.8;
	margin-right: 3px;
	top: -10px;
	display: inline-block;
	width: 12px;
}

.plan__features {
	flex-grow: 1;
	list-style: none;
	margin-left: 0;
	margin-top: 5px;
	margin-bottom: 0;
	font-size: 12px;
	padding: 20px 34px;
	font-weight: 400;
	line-height: 26px;
	text-align: left;
	color: #3a424a;
	background: #f7f6f6;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

.plan__features .plan__check:before {
	content: ' ';
	display: inline-block;
	margin-right: 10px;
	width: 10px;
	height: 8px;
	background: url(https://appstatic.moqups.com/dashassets/77319e9d6be97e89f953..png);
	background-size: cover;
}
.plan__check__badge {
	display: inline-block;
	background-color: #929292;
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	border-radius: 5px;
	line-height: 16px;
	padding: 0px 4px 1px;
	margin-left: 2px;
}
.plan__new__features__badge {
	display: inline-block;
	background-color: #72ba53;
	color: #ffffff;
	font-size: 10px;
	font-weight: 400;
	border-radius: 0.3em;
	line-height: 16px;
	padding: 0px 4px 1px;
	margin-left: 2px;
}

.moqupsfree {
	text-align: center;
}

.business-plan-select-menu {
	padding: 0 3px;
	border-style: solid;
	border-color: #006ce5;
}

.business-plan-select-dropdown {
	list-style: none;
	border: 1px solid #c0c0c0;
}

/*
	Fix blue flicker in Firefox
	TODO: fix this betterly
*/
.business-plan-select-dropdown .contextmenu__item:hover > .contextmenu__item__label {
	color: initial;
	background: initial;
}

.change-plan-pane {
	background: #f0f0f0;
	margin: -1em;
}

.change-plan-pane__header {
	position: relative;
	background: #fff;
	padding: 1em;
	box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1);
}

.change-plan-pane__header h2 {
	margin: 0;
}

.change-plan-pane__body {
	background-color: #ffffff;
	/*max-width: 66em;*/
}

.change-plan-warning__wrapper {
	background: #fff;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: auto;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	padding: 1.5em 1.5em 0 1.5em;
}

.change-plan-warning__body {
	max-width: 400px;
	margin: 0 auto;
	padding-top: 3em;
	padding-bottom: 2em;
}

.change-plan-warning__actions {
	max-width: 400px;
	margin: 0 auto;
}

.change-plan-warning__actions .button--secondary:hover {
	color: #006ce5;
	background-color: transparent;
}

.change-plan-pane .btn--close {
	position: absolute;
	top: 50%;
	right: 1em;
	background: #fff;
	padding: 0;
	transform: translate(0, -50%);
}

.change-plan-pane .btn--show-all-plans {
	padding-right: 3.5em;
}

.change-plan-name .btn--close svg {
	width: 2em;
	height: 2em;
	display: block;
	fill: #777;
}

.change-plan-illo {
	display: block;
	height: 15em;
	margin: 0 auto;
}

.change-plan-conclusion-pane {
	text-align: center;
	background: #fff;
	padding: 2em;
}

.layout__item--position-relative .change-plan-conclusion-pane {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
}

.change-plan-pane .downgrade-warning {
	margin: 5px 0;
	background: #fffde7;
	border-top: 1px solid #d6d6d6;
	border-bottom: 1px solid #d6d6d6;

	max-width: 228px;
	text-align: left;
	padding: 3px 30px 3px;
	color: #040404;
	font-size: 13px;
}

.change-plan-summary-pane .downgrade-warning {
	margin: 5px 0;
	background: #fffde7;
	border-top: 1px solid #d6d6d6;
	border-bottom: 1px solid #d6d6d6;

	max-width: 228px;
	text-align: left;
	padding: 3px 30px 3px;
	color: #040404;
	font-size: 13px;
}

.plancard__price {
	font-weight: bold;
	margin: 0.25em 0;
}

.plancard__price--reduced {
	margin-bottom: 0;
}

.plancard__price--reduced div:first-of-type {
	font-weight: normal;
	text-decoration: line-through;
}

.plancard__price--reduced div:nth-of-type(2) {
	margin-top: 10px;
	font-size: 20px;
}

.plancard__voucher {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.plancard__voucher svg {
	margin-right: 0.5em;
}

.plancard__voucher input {
	border-radius: 0.2em 0 0 0.2em;
}

.plancard__voucher button {
	border-radius: 0 0.2em 0.2em 0;
}

.plancard__voucher a {
	color: #aaaaaa;
	text-decoration: underline;
}

.plancard__voucher a:hover {
	color: #2766ed;
	text-decoration: underline;
}

.plancard__voucher--editing div {
	display: flex;
}

.plancard__voucher--valid {
	font-size: 11px;
}
.plancard__voucher--valid svg path {
	fill: #72bb53;
}

.plancard__voucher__code {
	background-color: #f3f4f4;
	font-weight: 500;
	padding: 0.25em;
	color: #555;
}

.plancard {
	background: #fff;
	padding: 1em;
	border-radius: 0.2em;
	line-height: 1.8em;
}

.plancard__title {
	margin: 0 0 0.5em;
}

.plancard__restrictions {
	list-style: none;
	padding: 0.5em 0;
	margin: 1em 0 0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}

.change-plan-summary-pane {
	padding: 2em;
	background: #fff;
}

.layout__item--position-relative .change-plan-summary-pane {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
}

.change-plan-summary-pane .arrow-illustration {
	width: 7em;
}

.change-plan-summary-pane .plus-illustration {
	margin: 2em;
}

.planbox {
	border: 1px solid #d0d0d0;
	text-align: center;
	min-width: 20em;
	padding: 0 0 1.5em;
	border-radius: 0.25em;
}

.planbox__title {
	background-color: #f5f5f5;
	color: #888;
	font-weight: bold;
	padding: 0.5em 1em;
	margin: 0;
	font-size: 1em;
	border-radius: 0.25em 0.25em 0 0;
	border-bottom: 1px solid #d0d0d0;
}

.planbox--superior {
	box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
}

.planbox--superior .planbox__title {
	background-color: rgb(76, 189, 15);
	color: #fff;
	border-bottom: none;
	padding: 1em;
}

.planbox--superior .plancard__restrictions {
	font-weight: bold;
}

a[disabled] {
	pointer-events: none;
	color: #d6d6d6;
}

.newplanshero {
	padding: 1em 0.5em 0;
	margin: 0;
	text-align: center;
	background: #fff;
}

.newplanshero .layout__item {
	margin: 0 1.5em;
}

.newplanshero__title {
	/* color: #ddd; */
	font-size: 1.6em;
	margin: 0;
}

.newplanshero__illo {
	width: 10em;
}

.newplanshero__description {
	margin: 0.5em 0 1.25em;
	font-size: 1.3em;
}

.avatar__list__wrapper {
	width: 410px;
	padding: 0.75em;
}
.avatar__list {
	display: flex;
	flex-wrap: wrap;
}
.avatar__list > span {
	margin: 0 5px;
	cursor: pointer;
}

.avatar__list img {
	transition: all 0.1s ease-in-out;
}
.avatar__list img:hover {
	box-sizing: border-box;
	border: 2px solid black;
}
.avatar__list__upload {
	margin-bottom: 10px;
}
.avatar__list__upload a {
	cursor: pointer;
}
.avatar__list__upload a:hover {
	text-decoration: underline;
}
.avatar__list__upload input {
	display: none;
}

.avatar__wrapper {
	position: relative;
	display: flex;
	margin: 0 20px;
	max-width: 200px;
	align-items: center;
	flex-direction: column;
	font-size: 12px;
	cursor: pointer;
}
.avatar__wrapper__no-margin {
	position: relative;
	display: flex;
	max-width: 200px;
	align-items: center;
	flex-direction: column;
	font-size: 12px;
	cursor: pointer;
}
.avatar--uploading {
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.avatar--uploading svg {
	fill: #fff;
	margin: auto;
}
.list__popover {
	left: 35%;
	top: 10%;
}

.locale__dropdown__label {
	width: 200px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.2em 0.75em;
	line-height: 30px;
	border: 1px solid #ddd;
	border-radius: 0.25em;
	color: #000;
}

.locale__dropdown > div {
	min-width: 280px !important;
	left: 0;
}

.locale__dropdown > div div {
	max-width: 280px !important;
	padding-top: 0;
	padding-bottom: 0;
}

.locale__dropdown__option {
	padding: 1em 1.3em !important;
}

.locale__dropdown__option_title {
	color: #000;
}

.locale__dropdown__option.selected .locale__dropdown__option_title {
	font-weight: bold;
}

.locale__dropdown > div div > div div:not(.selected):not(.disabled):hover:first-child {
	border-top-left-radius: 0.25em;
	border-top-right-radius: 0.25em;
}

.locale__dropdown > div div > div div:not(.selected):not(.disabled):hover:last-child {
	border-bottom-left-radius: 0.25em;
	border-bottom-right-radius: 0.25em;
}

.locale__dropdown__option:not(.selected):not(.disabled):hover .locale__dropdown__option_title {
	color: #fff;
}

.locale__dropdown__option:not(.selected):not(.disabled):hover .locale__dropdown__option_desc {
	color: #fff;
}

.locale__dropdown__option_checkmark {
	margin: auto 0;
}

.locale__dropdown__option__divider {
	border-bottom: 1px dotted #a9a9a9;
	pointer-events: none;
}

.profile {
	/*margin-top: 25px;*/
}

.profile__form input {
	width: 100%;
}
.profile__form__message {
	margin-top: 10px;
}
.profile__form__submit {
	margin-top: 12px;
}

.account__page__section {
	width: 60%;
	min-width: 500px;
}

.twofactor__section {
	width: 50%;
	min-width: 500px;
	margin-left: 20px;
	margin-bottom: 15px;
}

.twofactor__section.twofactor__token {
	width: 40%;
	min-width: 350px;
}

.qr__code {
	width: 140px;
	min-width: 140px;
	height: 140px;
	margin-right: 20px;
	border-radius: 8px;
	border: 1px solid #d6d6d6;
}

.qr__code img {
	height: 100%;
	width: 100%;
}

.account__page__separator {
	width: 100%;
	margin-top: 30px;
	margin-bottom: 10px;
	border-bottom: 1px solid #ebebeb;
}

.sso__wrapper .switch__wrapper {
	margin: 20px 0;
	padding: 15px 15px;
	border: 1px solid #d6d6d6;
	border-radius: 5px;
}
.sso__wrapper .switch__wrapper .switch {
	margin-left: 0;
}

.domain__list__setting,
.transfer__account__setting {
	margin: 20px 0;
	padding: 20px;
	border: 1px solid #d6d6d6;
	border-radius: 5px;
}

.sso__wrapper .switch__wrapper,
.domain__list__setting,
.transfer__account__setting {
	width: 440px;
}

.transfer__account__setting .collapse__wrapper {
	padding: 0;
	border: none;
}

.domain__list__setting .switch__wrapper {
	margin: 0;
	padding: 0;
}

.domain__list__setting .switch__wrapper .switch {
	margin-left: 0;
}

.domain__list__setting a {
	color: #929292;
	text-decoration: underline;
}

.domain__list {
	display: flex;
	flex-direction: column;
	max-height: 175px;
	overflow-y: scroll;
	padding: 0;
}

.domain__list li {
	padding: 0.5em 0;
}

.domain__list li:first-of-type {
	padding-top: 0;
}

.domain__list li:last-of-type {
	padding-bottom: 0;
}

.domain__list a {
	margin-right: 0.7em;
}

.domain__list__new,
.transfer__account__new {
	padding: 20px 0;
}

.domain__list__new input,
.transfer__account__new input {
	padding: 0.7em 0.5em;
	border-top-left-radius: 0.17em;
	border-bottom-left-radius: 0.17em;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.transfer__account__new .input-component {
	flex-grow: 1;
}

.transfer__account__new .message {
	margin: 1em 0;
}

.domain__list__new .button {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 0.17em;
	border-bottom-right-radius: 0.17em;
}

.scratch__codes__wrapper {
	background-color: #e7f0ff;
	border: 1px solid #d4e3fc;
	border-radius: 3px;
	margin-top: 1em;
	padding: 25px;
}

.scratch__codes__wrapper p {
	margin-top: 0;
}

.scratch__codes {
	display: flex;
}

.scratch__codes > span {
	margin-right: 15px;
}

.twofa__provider {
	display: flex;
	padding-right: 10px;
	align-items: center;
}

.twofa__provider svg {
	width: 45px;
	height: 45px;
	margin-right: 15px;
}

.transfer__modal .modal__header {
	flex-direction: row;
}

.message-error {
	color: red;
}

.info-banner {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 10px 0;
	padding: 10px;
	background: #f1f7fd;
	border-radius: 8px;
	font-size: 12px;
}

.info-banner p {
	padding-left: 10px;
	margin: 0;
}

.info-banner svg {
	flex-shrink: 0;
	height: 2em;
	width: 2em;
	fill: #1181f1;
}

.password__meter {
	width: 100%;
}
.password__meter__indicator {
	margin: 0.5em 0 1em 0;
	height: 4px;
	background-color: #eeeeee;
}
.password__meter__indicator > div {
	height: 100%;
	width: 0%;
	transition: all 0.5s ease;
}
.password__meter__label {
	transition: color 0.5s ease;
}
.password__meter__tooltip {
	font-size: 1.2em;
	max-width: 350px;
}
.password__meter__tooltip .password__meter__indicator {
	margin: 0.5em 0;
}
.password__meter--short {
	color: #bdbdbd;
	fill: #bdbdbd;
}
.password__meter__indicator.password__meter--short > div {
	background-color: #eeeeee;
}
.password__meter--weak {
	color: #f44336;
	fill: #f44336;
}
.password__meter__indicator.password__meter--weak > div {
	background-color: #f44336;
}
.password__meter--medium {
	color: #ffa726;
	fill: #ffa726;
}
.password__meter__indicator.password__meter--medium > div {
	background-color: #ffa726;
}
.password__meter--strong {
	color: #4caf50;
	fill: #4caf50;
}
.password__meter__indicator.password__meter--strong > div {
	background-color: #4caf50;
}
.password__meter--blacklisted {
	color: #212121;
	fill: #212121;
}
.password__meter__indicator.password__meter--blacklisted > div {
	background-color: #212121;
}

.password__form {
	width: 100%;
}
.password__form input {
	margin: 0.5em 0;
}
.password__form input:first-of-type {
	margin-top: 0;
}
.password__form__submit {
	margin-top: 10px;
}

.web__hook {
	border-bottom: 1px solid #e0e0e0;
	line-height: 2.5em;
	padding: 0 0.75em;
}
.web__hook:first-of-type {
	border-top: 1px solid #e0e0e0;
}
.web__hook--details {
	color: #9e9e9e;
}
.web__hook--ellipsis {
	margin-right: 2em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.label {
	display: block;
	margin: 0.5em 0;
	box-sizing: border-box;
}
.service-actions button {
	width: 100%;
}
.gdrive-img {
	height: 48px;
	width: 48px;
	background: url(https://appstatic.moqups.com/dashassets/ed6b34776e0ce981c6fd..png) no-repeat center;
	background-size: contain;
}
.info {
	font-size: 0.9em;
	padding-right: 1em;
}
.switch--margin-bottom {
	margin-top: 20px;
}
.side-button {
	margin-right: 20px;
}
.hook-list {
	margin-top: 50px;
}
.hook-form {
	margin-top: 20px;
}
.form-element {
	margin-bottom: 1em;
}
.hook-form .input-wrap {
	margin-right: 1em;
}
.save-webhook {
	margin-right: -8px;
	margin-top: 5px;
	display: inline-block;
	width: auto;
}

.cancel-webhook {
	margin-left: 4em;
}

.integrations__container {
	width: 100%;
}

.channels__container {
	margin-bottom: 50px;
	padding-bottom: 30px;
}

.channels__container .button--large {
	width: 185px;
}

.slack__separator {
	padding-bottom: 3em;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 1em;
}

.saml_or_scim__separator {
	margin-bottom: 1em;
}

.slack__teams {
	margin-top: 3em;
}

.scim__token {
	width: 100%;
}

.scim__token input {
	flex-grow: 1;
	color: #606060;
	margin: 0 0 0 10px;
	padding: 0.7em 0.7em;
	border-top-left-radius: 0.17em;
	border-bottom-left-radius: 0.17em;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.scim__token .copy__token {
	min-width: 76px;
	display: flex;
	cursor: pointer;
	margin: 0 0 0 5px;
	align-items: center;
	padding: 0.55em 1.5em;
	background-color: #f7f6f6;
	border-left: 1px solid #d6d6d6;
	border-right: 1px solid #d6d6d6;
	border-top: 1px solid #d6d6d6;
	border-bottom: 1px solid #d6d6d6;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 0.17em;
	border-bottom-right-radius: 0.17em;
}

.copy__token:hover {
	border-left: 1px solid;
	border-color: #3392ff;
}

.scim__token .copy__token__disabled {
	display: flex;
	align-items: center;
	padding: 0.53em 1.5em;
	pointer-events: none;
	cursor: not-allowed;
	color: #fff;
	background: #d6d6d6;
	border-left: 1px solid #b3b3b3;
	border-right: 1px solid #b3b3b3;
	border-top: 1px solid #b3b3b3;
	border-bottom: 1px solid #b3b3b3;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 0.17em;
	border-bottom-right-radius: 0.17em;
}

.upgrade__plan {
	color: #8764ef;
}

.service__actions {
	display: flex;
	align-items: center;
}
.service__action {
	display: inline-block;
	margin-left: 20px;
}
.gdrive-img {
	height: 48px;
	width: 48px;
	background: url(https://appstatic.moqups.com/dashassets/ed6b34776e0ce981c6fd..png) no-repeat center;
	background-size: contain;
}
.integrations__separator {
	padding-bottom: 1em;
	border-bottom: 1px solid #e0e0e0;
	box-sizing: border-box;
	margin-bottom: 1em;
}
.icon--side {
	display: block;
	margin: 20px;
}
.service__buttons .button--large {
	width: 185px;
}
.service__buttons {
	float: right;
}

.services__autosync {
	margin-top: 20px;
}

.slack__team__container {
	padding: 1em;
	border: 1px solid #e0e0e0;
	margin-right: 20px;
}
.slack__team__container:not(:first-child) {
	border-top: none;
}
.slack__team__head {
	align-items: center;
	margin: -1em -1em 1em;
	padding: 0.75em;
	background-color: #f3f3f3;
}
.slack__team__head span {
	display: inline-flex;
	align-items: center;
	font-weight: bold;
}
.slack__team__head .button {
	margin: auto 0;
	width: auto;
}
.slack__team__actions {
	margin-top: 40px;
}
.slack__team__hooks {
	padding: 0;
}

.team__item {
	padding: 0.2em 0;
	box-sizing: border-box;
}

.select_team__modal .modal__content {
	width: 400px;
}

.team__option {
	overflow: hidden;
	text-overflow: elipsis;
	white-space: nowrap;
	border-radius: 5px;
	min-width: 200px;
	padding: 0.25em 1em 0.25em 0.25em;
	margin-left: 0.25em;
}

.team__option img {
	display: inline-block;
	vertical-align: middle;
	width: 30px !important;
	height: 30px !important;
	margin-right: 3px;
}

.team__item input[type='radio']:checked + .team__option {
	color: #fff;
	background: #006ce5;
	border-radius: 5px;
	min-width: 300px;
}

.team__avatar-all {
	height: 2em;
	min-height: 2em;
}

.atlassian-integrations__item {
	align-items: center;
}
.atlassian-integrations__text {
	display: inline-flex;
	align-items: center;
	font-weight: bold;
}
.atlassian-integrations__item .button {
	margin-right: 20px;
	width: auto;
}
.atlassian-integrations__actions {
	margin-top: 40px;
}

.atlassian-integrations__instance-name {
	margin-right: 30px;
}

.notifications__wrapper {
	max-width: 40em;
}

.notifications__wrapper h4 {
	margin-bottom: 0.7em;
}

.notifications__teams {
	margin-left: 3em;
}

.team__name {
	margin-left: 1em;
	font-weight: bold;
}

.team__notifications__separator {
	width: 100%;
	margin: 1em 0;
	border-bottom: 1px solid #ebebeb;
}

.delete__account {
	display: inline-flex;
	flex-direction: column;
	min-width: 400px;
	padding: 20px;
	border: 2px solid #ebebeb;
	border-radius: 4px;
}

.delete__account .delete__account__details {
	max-width: 350px;
}

.delete__account a {
	margin-top: 12px;
}

.delete__account .message {
	white-space: nowrap;
	display: inline-flex;
}

.saml-sso-error span {
	font-size: 15px;
	font-weight: bold;
}
.saml-sso-error-msg {
	background: #f7f7f7;
	border-radius: 3px;
	padding: 10px 15px;
	overflow: auto;
	margin-left: 50px;
	margin-top: 15px;
	margin-bottom: 15px;
	max-width: 480px;
	font-family: monospace, monospace;
	font-size: 1em;
}

.cancellation__reasons__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	overflow-y: auto;
	flex-grow: 1;
}
.cancellation__reasons__item {
	background-color: #f5f5f5;
	border: 2px solid transparent;
	color: #253238;
	font-size: 13px;
	font-family: var(--font-display);
	cursor: default;
	padding: 0.8em;
	padding-left: 2.2em;
}
.cancellation__reasons__item:hover {
	border: 2px solid #1464f6;
	cursor: pointer;
}
.cancellation__reasons__item__separator {
	margin-top: 0.45em;
}
.offboarding_interogation {
	color: #606060;
	font-size: 16px;
	font-family: var(--font-display);
	margin-top: -10px;
	margin-bottom: 10px;
}

.offboarding_details {
	flex-basis: 37%;
}
.offboarding_details_spacing {
	margin-top: -9px;
	margin-bottom: 24px;
	font-family: var(--font-display);
}

.offboarding-button {
	background: #f7f8f9;
	color: #000;
	font-weight: bold;
	font-family: var(--font-display);
	font-size: 14px;
	border-radius: 5px;
	height: 37px;
	width: 200px;
}

.offboarding-button.main-action {
	background: #f45f20;
	color: #fff;
}

.offboarding-button.main-action:hover {
	background: #ff9268;
}

.offboarding-close-button {
	background: #1464f6;
	color: #ffffff;
	font-weight: bold;
	font-family: var(--font-display);
	font-size: 14px;
	/*border-color: #1865f6;*/
	border-radius: 4px;
	height: 40px;
	width: 130px;
}
.offboarding-extra-top-spacing {
	margin-top: 10px;
}
.offboarding-button-disabled {
	color: #7a7a7a;
	background: #ffffff !important;
	border-color: #606060 !important;
}
.offboarding-feedback-input {
	width: 100%;
	height: 100px;
	rows: 6;
	font-size: 12px;
	resize: vertical;
	box-sizing: border-box;
	border: 2px solid #ddd;
	outline: none;
	padding: 0.5em;
	color: #555;
	transition: border-color 0.1s;
	border-radius: 0.4em;
}
.offboarding-feedback-input-no-resize {
	resize: none;
}
.offboarding-header {
	color: #000000;
	font-family: var(--font-display);
	font-size: 26px;
	margin-top: -19px;
	margin-bottom: -9px;
}
.offboarding-header2 {
	color: #000000;
	font-family: var(--font-display);
	font-size: 26px;
	margin-top: 40px;
	margin-bottom: -9px;
}
.offboarding-text {
	margin-bottom: 33px;
	color: #000000;
	font-family: var(--font-display);
	font-size: 16px;
}
.offboarding-text2 {
	line-height: 1.3;
	margin-top: 25px;
	margin-bottom: 33px;
	color: #000000;
	font-family: var(--font-display);
	font-size: 16px;
}

.offboarding_details > h2 {
	font-family: var(--font-display);
	font-size: 40px;
	margin-bottom: 5px;
}

.go__back {
	display: flex;
	width: 70px;
	max-height: 2.5em;
	color: #1464f6;
	padding: 6px;
	margin-left: 15px;
	align-items: center;
	cursor: pointer;
	text-align: center;
	font-weight: 400;
	font-size: 15px;
	border-radius: 4px;
	box-sizing: border-box;
	justify-content: space-between;
}

.go__back svg {
	height: 24px;
	width: 16px;
	fill: #1464f6;
	margin-right: 4px;
}
.change-plan-pane__header .go__back {
	/*margin-top: 7px;*/
}
.go__back:hover {
	cursor: pointer;
	background: #f7f6f6 !important;
	color: #1464f6 !important;
}

.offboarding__offer {
	width: 500px;
}

.offboarding__actions {
	height: 90px;
}

img.offboarding__image {
	width: 200px;
}

.auth-row {
	margin: 0.6em 0;
}

.auth-row--flex {
	display: flex;
	justify-content: space-between;
}

.auth-row--flex > * {
	flex-grow: 1;
}

.auth-row--flex > :first-child {
	/*margin-right: 0.5em;*/
}

.auth-button__signup {
	margin-right: 0 !important;
}

.auth-button__wrapper {
	/*width: 100%;*/
	display: inline-block;
	/*box-sizing: border-box !important;*/
	padding: 2px;
	font-size: 1em;
	transition: 0.1s all;
	background: #efefef !important;
	vertical-align: middle;
	border: 1px solid #bbb !important;
}

.auth-button__wrapper:hover {
	background-color: #006ce5 !important;
	text-decoration: none;
	color: #fff;
}
.auth-button__wrapper > span {
	display: flex;
	align-items: center;
}
.custom-auth-button__wrapper {
	padding: 8px 12px 0px 12px;
	height: 41px;
	background: transparent;
	vertical-align: middle;
}
.custom-auth-button__wrapper:hover {
	background-color: initial;
	text-decoration: none;
	color: #fff;
}
.custom-auth-button__wrapper > span {
	display: flex;
	color: rgb(61, 138, 247);
	font-weight: 600;
	align-items: center;
}
.auth-button__text {
	/*margin: 0 auto;*/
	color: #757575;
	/*padding: 0 0.6em;*/
}
.custom-auth-button__text {
	margin-left: 12px;
	color: #5e5e5e;
	font-weight: 600;
}
.custom-auth-row:hover {
	background-color: initial;
	text-decoration: none;
}
.custom-auth-row a {
	border: 1px solid #dedede;
	border-radius: 0.4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	height: 40px;
	text-decoration: none;
	transition: border-color 0.1s ease-out, color 0.1s ease-out;
	box-sizing: border-box;
	color: #3b4754;
	padding: 0px 12px;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.03);
}

.custom-auth-row a:hover {
	color: #1071f2;
	border-color: #1071f2;
}

.custom-auth-row a:focus {
	color: #1071f2;
	border-color: #1071f2;
	background: #fff;
}

.auth-button__wrapper:hover .auth-button__text {
	color: #fff;
}

.button.google {
	border-radius: 0.4rem;
	height: 40px;
	padding: 1px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.03);
	border: 1px solid #ccc !important;
	transition: border-color 0.1s ease-out, color 0.1s ease-out;
	background: #fff !important;
	color: #3b4754 !important;
	font-weight: 600;
}

.button.google:hover {
	color: #1071f2 !important;
	border-color: #1071f2 !important;
	background-color: #fff;
}

.button.google:focus {
	background-color: #fff !important;
	border-color: rgb(0, 107, 229) !important;
}

.button.faded {
	opacity: 0.5;
}

.basic-auth__wrapper {
	text-align: center;
	font-weight: 600;
	color: rgb(61, 138, 247);
}

.basic-auth__wrapper .auth-button__text {
	text-align: center;
}

.mq-auth-options-divider {
	text-align: center;
	color: #8592a6;
	/*margin: 0;*/
	/*padding: 10px 0;*/
	position: relative;
	/*height: 1px;*/
}

.mq-auth-options-divider em {
	background: #fff;
	padding: 0.5em;
	position: relative;
	z-index: 2;
}

.mq-auth-options-divider span {
	width: 90%;
	height: 1px;
	background: #eef0f4;
	position: absolute;
	left: 5%;
	top: 50%;
	z-index: 1;
	text-align: center;
}

.consent-banner {
	position: fixed;
	bottom: 1rem;
	left: 50%;
	transform: translate(-50%, 0);
	padding: 1rem;
	background: white;
	color: black;
	border-radius: 0.5rem;
	/* Above all */
	z-index: 5000;
	border: 1px solid #aaa;
	padding-right: 3rem;
	max-width: 80vw;
	max-width: min(40rem, 80vw);
	width: 100%;
	box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
}

.consent-banner-message {
	margin: 0 0 1rem;
}

.consent-banner-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: transparent;
	padding: 0;
	cursor: pointer;
}

.consent-banner-close svg {
	display: block;
}

.consent-banner-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}


/*# sourceMappingURL=https://my.moqups.com/sourcemaps/main.da3d3579217e7bf41521.css.map*/