.button {
	-webkit-user-select: none;
	user-select: none;
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	text-align: center;
	padding: 0.35em 1em;
	margin: 0;
	font-weight: 600;
	color: #fff;
	background-color: #3d8af7;
	text-decoration: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.1s, color 0.1s;
	border: 1px solid transparent;
	min-height: 30px;
	/*border: none;*/
	font-size: 1em;
	line-height: normal;
}
.button:hover {
	background-color: #006ce5;
	/*border-color: #109E82;*/
	text-decoration: none;
	color: #fff;
}
.button.primary,
.button.primary a {
	color: #fff;
}
.button.cta {
	background-color: #ff6624;
	margin: 5px 0;
}

.button.primary:hover a,
.button.secondary:hover a {
	text-decoration: none;
	color: #ffffff;
}
.button.secondary {
	box-sizing: border-box;
	border: 1px solid #3d8af7;
	color: #335578;
	background: transparent none;
}
.button.secondary.alternative {
	border-color: #ffffff;
	width: 100px;
	background: transparent;
	color: #ffffff;
	display: block;
}
.button.secondary.alternative a {
	color: #ffffff !important;
}
.button.secondary:hover {
	color: #ffffff;
	background-color: #006ce5;
	/*border-color: #0d47a1;*/
}
.button.hollow {
	border: 1px solid #fff;
	background: transparent;
}
.button.hollow:hover {
	background-color: #fff;
	color: #757575;
}
.button.large {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 1.5em;
	font-size: 13px;
}
.button.secondary:hover,
.button a {
	text-decoration: none;
}
.button.disabled,
.button[disabled] {
	background: #d6d6d6;
	cursor: not-allowed;
	border: 1px solid #b3b3b3;
}

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

.button-link {
	-webkit-appearance: none;
	appearance: none;
	text-decoration: underline;
	background: transparent;
	padding: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.button.button__dashboard {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0.35em 1em;
	border: 2px solid #fff;
	border-radius: 1.5em;
	font-size: 16px;
	line-height: 40px;
	font-weight: bold;
	white-space: nowrap;
}

.button.button__signup {
	display: inline-flex;
	padding: 0.6em 1.8em;
	border-radius: 10px;
	font-size: 16px;
	font-weight: bold;
	background-color: #ffe533;
	color: #29323d;
	box-shadow: rgba(255, 229, 51, 0.1) 0 0.3rem 2rem 0;
	float: right;
}

.button.button__signup:hover {
	background-color: #fedb2c;
}

.button.button__dashboard svg {
	height: 1.5em;
	width: 1.5em;
	position: relative;
	margin-right: 0.5em;
	transform: none;
	left: initial;
	top: initial;
	right: initial;
}

.button.linklike {
	background: transparent;
	text-decoration: underline;
	color: inherit;
	font-weight: normal;
}

.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;
	width: 1em;
	height: 1em;
}

.consent-banner-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.modal {
	font-size: 14px;
	line-height: 1.5;
	color: #303030;
	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__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;
	font-size: 1.2em;
	font-weight: bold;
}
.modal__main {
	padding: 10px;
}

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

.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;
}
.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;
}
.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 3em;
}
.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 #c9c9c9;
}
.plain-container__divider__noborder {
	margin: 12px 0;
}
.plain-container__divider__noborder {
	margin: 12px 0;
}
.plain-container__rightdivider {
	margin-right: 7px;
}
.auth-container {
	width: 350px;
	margin-bottom: 50px;
}
.auth-container .plain-container__divider {
	margin: 15px 0 10px 0;
}
.auth-container .plain-container__divider__noborder {
    margin: 1em 0;
}
.auth-button {
	font-size: 1.2em;
	width: 100%;
	font-family: inherit;
}
.auth-switch {
	font-size: 16px;
}
.auth-switch > span {
	opacity: 1;
}
.plain-container__form-item {
	margin-bottom: 10px;
}

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

@media only screen and (max-width: 468px) {
	.auth-container {
		max-width: 100%;
		width: auto;
	}

	.main-logo {
		margin-left: 1em;
		padding-bottom: 0!important;
		padding-left: 0!important;
	}
}
@media only screen and (max-width: 569px) {
	.plain-footer__container {
		display: block!important;
		width: auto!important;
		max-width: 100%;
	}
	.plain-container__content {
		max-width: 100%;
		padding: 0 10px;
	}
	.plain-footer__copy {
		margin-left: 1em;
	}
}

@media only screen and (min-width: 570px) and (max-width: 769px) {
	.plain-footer__container {
		width: 100%!important;
		padding-right: 20px;
	}
}
@media only screen and (min-width: 767px) and (max-width: 1023px) {
	.plain-container {
		height: 100vh;
		max-height: 100vh;
	}
}
.footer {
	margin: 0 0 120px;
}
.footer__list {
	padding: 20px 0;
}
.footer__list li {
	padding: 7px 0;
}
.footer__list li a {
	font-size: 17px;
	color: #000000;
	opacity: 0.8;
}
.footer__list__title {
	color: #0052bd;
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 12px;
	opacity: 0.8;
}
.copyright__image {
	width: 50px;
	height: 50px;
}
svg.copyright__image {
	fill: #0052bd;
}
.copyright__text {
	color: #677482;
	height: 18px;
	font-size: 14px;
	line-height: 14px;
}
.copyright__links a {
	color: #2c3d4e;
	padding: 0 5px;
}
/*social*/
.social__icon {
	display: inline-block !important;
	font-size: 24px !important;
	padding-right: 30px;
}
.social__icon__facebook {
	color: #3b5998 !important;
}
.social__icon__facebook:hover {
	color: #2f4779 !important;
}

.social__icon__twitter {
	color: #1da1f3 !important;
}
.social__icon__twitter:hover {
	color: #0c94e9 !important;
}
/* queries */
@media only screen and (max-width: 468px) {
	.footer {
		/*border-top: 1px dashed #d0d0d0;*/
		margin-top: 15px;
	}
}
@media only screen and (max-width: 767px) {
	.social__icon {
		padding: 0 30px;
	}
	.footer__list {
		text-align: center;
	}
	.copyright > * {
		text-align: center;
	}
	.copyright__text {
		margin: 10px 0 0;
	}
	.footer > div,
	.copyright__wrapper {
		justify-content: center;
	}
	.locale__dropdown {
		width: 100%;
	}
	.footer > div {
		flex-flow: row wrap;
	}
	.footer__list {
		flex-basis: 100%;
	}
	.footer {
		margin-bottom: 60px;
	}
}
@media only screen and (min-width: 767px) {
	/*footer*/
	.footer {
		margin: 60px 120px;
	}
	.footer__list {
		flex-basis: 0;
		flex-grow: 1;
	}
	/*copyright*/
	.copyright__text,
	.copyright__links,
	.copyright__image__wrapper,
	.copyright__links a {
		float: left;
	}
	.copyright {
		width: 400px;
	}
	.copyright__links {
		font-size: 14px;
	}
	.copyright__links a {
		padding: 0 10px;
	}
	.copyright__links a:first-child {
		padding-left: 0;
	}
	.copyright__image {
		margin-right: 5px;
	}
	.copyright__text {
		margin: 6px 0 0;
	}
}

.footer__wrapper--darkmode {
	background: #29323D;
	color: #9fafc1;
}

.footer__wrapper--darkmode .footer__list li a {
	color: #9fafc1;
}

.footer__wrapper--darkmode .footer__list__title {
	color: #9fafc1;
}

.footer__wrapper--darkmode .copyright__links a {
	color: #9fafc1;
}

.footer__wrapper--darkmode .copyright__text {
	color: #9fafc1;
}

.footer__wrapper--darkmode svg.copyright__image {
	margin-right: 10px;
	fill: #9fafc1;
}
.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;
}
.dropmenu .menu-item-separator {
	margin: 0;
}

.locale__dropdown {
	display: flex;
	align-items: center;
	justify-content: center;
}

.locale__dropdown__label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.2em 0.75em;
	line-height: 30px;
	border-radius: 0.25em;
	color: #677482;
	font-size: 16px;
}

.locale__dropdown__label svg,
.locale__dropdown svg {
	fill: #677482;
}

.locale__dropdown__label svg {
	transform: rotate(90deg);
	width: 2em;
	height: 2em;
}

.locale__dropdown > div {
	bottom: 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 svg {
	fill: #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;
}

.locale__dropdown--dropdown .locale__dropdown__label {
	color: #9fafc1;
}

.locale__dropdown--dropdown .locale__dropdown__label svg,
.locale__dropdown--dropdown .locale__dropdown svg {
	fill: #9fafc1;
}
.mega-menu__wrapper {
	position: relative;
}

.mega-menu {
	background: #ffffff;
	box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.15);
	border-radius: 4px;

	margin: 0;
	padding: 0;

	box-sizing: border-box;

	min-width: 395px;
	position: absolute;
	display: none;
}

.mega-menu:before {
	content: '';
	position: absolute;
	top: -8px;
	left: 32px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #fff transparent;
}

.mega-menu div ul:last-child {
	padding-bottom: 15px;
}
.mega-menu ul {
	padding: 15px 15px 5px;
}

.mega-menu ul li a {
	font-size: 14px;
	color: #37474f;
	white-space: nowrap;
	padding: 4px 5px 3px;
}

.mega-menu ul li a:hover {
	color: #005eb8;
}

.mega-menu ul li:first-child a {
	font-weight: bold;
	color: #2570ea;
	padding: 3px 5px 2px;
}

@media screen and (min-width: 660px) {
	.mega-menu__wrapper:hover .mega-menu {
		display: flex;
	}
}

.nav__links--mobile {
    background: red;
}
.nav__side {
    background: #333;
    height: 100%;
    z-index: 999;
    overflow-y: auto;
}
.nav__side li {
    float: none;
}
.nav__side li a {
    color: #ccc;
    padding: 10px 15px;
    font-weight: 300;
    font-size: 16px;
    line-height: 40px;
}
.nav__side li a:visited {
    color: #ccc;
}
.nav__side li a:hover {
    background: #404040;
    color: #fff;
    outline: 0;
    opacity: 1;
}

nav {
	background: var(--mq-blue);
	font-family: var(--font-display);
	margin: -10px -25px 0;
	padding: 35px 25px 35px;
	position: relative;
	z-index: 10;
	display: block;
}
nav.menu__wrapper--narrow {
	padding: 15px 5px;
}
/* logo */
.navigation__logo {
	box-sizing: border-box;
	vertical-align: middle;
	height: 40px;
	position: relative;
	cursor: pointer;
	line-height: 40px;
	padding: 0 20px 0 0;
}
.navigation__logo img {
	display: inline-block;
	vertical-align: middle;
	width: 100px;
	cursor: pointer;
}
/* navigation */
.navigation {
	/* float: right */
	display: inline-block;
	vertical-align: middle;
	height: 40px;
}
.navigation__item {
	float: left;
}
.navigation__item__link {
	box-sizing: border-box;
	color: #ffffff;
	display: block;
	font-size: 15px;
	font-weight: 400;
	line-height: 40px;
	padding: 0 15px;
}
.navigation__item__link:visited {
	color: #ffffff;
}

.navigation__item__link:hover {
	color: #ffffff;
	opacity: 1;
	text-decoration: none;
}

.navigation__wrapper--sticky {
	position: fixed;
	background: #1e8cf0 !important;
	display: none;
	width: 95%;
	margin-left: 0;
	top: 0;
	left: 0;
	padding-bottom: 30px;
}

.menu__wrapper svg {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	right: 25px;
}

/* queries */
@media only screen and (max-width: 767px) {
	nav {
		padding: 0;
	}
	.menu__wrapper {
		margin-top: 0;
		padding: 10px 25px;
		background: #255498;
	}
	.menu__wrapper.menu__wrapper--narrow {
		padding: 10px 15px;
	}
	.navigation {
		float: right;
	}
	.navigation__logo {
		vertical-align: top;
		line-height: 45px;
		display: inline-block;
	}
	.navigation__logo img {
		width: 80px;
	}
	.nav__click {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 10;
	}
}

@media only screen and (max-width: 767px) {
	.button.button__signup {
		margin-right: 40px;
		padding: 0.6em 1.5em;
		font-size: 16px;
	}
}

@media only screen and (min-width: 767px) and (max-width: 1023px) {
	nav {
		padding: 35px 5px 35px;
	}
	nav.menu__wrapper--narrow {
		padding: 15px 5px;
	}

	.button.button__signup {
		padding: 1em 0.5em;
		font-size: 12px;
		text-overflow: ellipsis;
	}
}

@media only screen and (max-width: 1023px) {
	.navigation__item__link {
		padding: 0 7px;
	}
}

@media only screen and (min-width: 1024px) {
	.navigation__item__link {
		opacity: 0.8;
	}
	.navigation__wrapper--sticky {
		margin-left: -605px;
		width: 1160px;
		left: 50%;
	}
}

.section__wrapper {
    max-width: 1160px;
    /*min-width: 820px;*/
    width: 100%;
    margin: 0 auto;
}
.section__wrapper.footer__wrapper {
    max-width: 100%!important;
}
.gradient__wrapper {
    padding: 10px 35px 0;
}

@media only screen and (max-width: 767px) {
    .gradient__wrapper {
        padding: 0 25px;
    }
}
.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;
}

.message {
	display: block;
	margin: 0 0 1em 0;
	padding: .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;
}
.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.5em;
	color: #555;
}
.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: 2em;
}
.input__icon {
	position: absolute;
	top: 50%;
	left: 0.6em;
	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: #000000;
}

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

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

.clear {
	background: red;
}
.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-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--solid-white .rc-tooltip-inner {
	background-color: #ffffff !important;
	color: #333;
}
.tooltip--solid-white.rc-tooltip {
	opacity: 100;
}
.tooltip--solid-white.rc-tooltip .rc-tooltip-content .rc-tooltip-arrow{
	display: none;
}

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

.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 !important;
	transition: 0.1s all;
	background: #efefef !important;
	vertical-align: middle;
	border: none !important;
}

.auth-button__wrapper:hover {
	background-color: #006ce5 !important;
	text-decoration: none;
	color: #fff;
}
.auth-button__wrapper > span {
	display: flex;
	align-items: center;
}
.auth-button__text {
	/*margin: 0 auto;*/
	color: #757575;
	/*padding: 0 0.6em;*/
}
.auth-button__wrapper:hover .auth-button__text {
	color: #fff;
}

.auth-extra-login-options {
	text-decoration: none;
	padding-top: 1.5em;
	display: inline-block;
}

/*.slack-auth__wrapper .auth-button__text {*/
/*text-align: center;*/
/*!*text-decoration: underline;*!*/
/*padding-top: 0.7em;*/
/*display: inline-block;*/
/*}*/

.button.google {
	background-color: #3d8af7 !important;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 4px;
}
.button.google .auth-button__text {
	color: #ffffff !important;
	font-size: 1.3em;
	padding-top: 0.35em;
	padding-bottom: 0.35em;
}
.button.google:hover {
	/*background-color: #006ce5 !important;*/
}

.button.faded {
	opacity: 0.5;
}

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

.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:hover {
	background-color: initial;
	text-decoration: none;
}
.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;
}

.button__back {
	display: flex;
	width: 80px;
	max-height: 2.5em;
	color: #1464f6 !important;
	margin-top: 15px;
	align-items: center;
	cursor: pointer;
	text-align: center;
	font-weight: 400;
	font-size: 15px !important;
	border-radius: 4px;
	box-sizing: border-box;
	justify-content: space-between;
	background: #fff !important;
}

.button__back svg {
	height: 24px;
	width: 16px;
	fill: #1464f6;
	margin-right: 4px;
}

.button__back:hover {
	cursor: pointer;
	background: #f7f6f6 !important;
	color: #1464f6 !important;
}

.current__payment__method {
	display: block;
	margin: 0 0 1em 0;
	padding: 0.75em;
	background-color: rgba(201, 241, 253, 0.5);
	border-radius: 6px;
}

.current__payment__method p {
	margin: 0;
}

.rbibox {
	margin: -30px auto 24px;
	width: 100%;
	max-width: 100%;
	padding: 1em 1.25em;
	background-color: #ffecd7;
	border-radius: 10px;
	font-size: 13px;
}
.rbibox--reactivatesubscription {
	margin: 15px auto -15px;
	width: 500px;
}

.rbibox a {
	text-decoration: underline;
}

.rbibox p {
	margin: 0.5em 0 0;
}

.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;
	background: var(--mq-blue);
	text-align: center;
}
.hero__wrapper h1 {
	color: #fff;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.22;
	margin: 0 auto 60px;
	width: 60%;
	font-feature-settings: 'lnum';
}
.hero__wrapper .billing-type {
	cursor: pointer;
	outline: none;
	color: #badcff;
	display: inline-block;
	padding: 8px 20px 12px;
	font-size: 18px;
	font-weight: 700;
	border: 1px solid #185dcb;
	background: #185dcb;
	border-radius: 4px 4px 0 0;
	margin: 0 2px;
}

.hero__wrapper .billing-type.selected {
	color: #335578;
	background-color: #fff;
	padding-top: 10px;
	border-color: #fff;
}
.billing__switch__wrapper {
	position: relative;
	display: inline-block;
}
.billing__switch__wrapper svg {
	width: 30px;
	position: absolute;
	top: -14px;
	margin-left: 10px;
}

.billing__annual__button {
	font-size: 0.75em;
	background: #fef08a;
	border-radius: 6px;
	margin-left: 8px;
	display: inline-block;
	padding: 0 6px;
	color: #232323;
}

/**
	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 {
	padding-bottom: 1.5em;
}
.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: 1100px;
}
.payment__title {
	color: #335578;
	/*font-weight: 400;*/
	font-size: 28px;
	margin: 50px auto 35px;
	text-align: center;
}

.payment__title.with__back_button {
	margin-top: 0;
}
.payment-form__content {
	--form-padding: 20px;
	padding: var(--form-padding);
}
.payment-form__content p:first-of-type {
	margin-top: 0;
}
.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;
	/*margin: 0 0 30px;*/
	padding-left: 0;
	list-style: none;
}

.payment__methods a {
	flex: 1 0;
	flex-basis: 20%;
	box-sizing: border-box;
	border-right: 1px solid #c0c0c0;
	border-bottom: 1px solid #c0c0c0;
	text-align: center;
	background-color: #f7f6f6;
	position: relative;
	min-height: 5.5em;
}

.payment__methods a:last-child {
	border-right: none;
}

.payment__methods a.active {
	color: #006ce5;
	pointer-events: none;
	border-color: #006ce5;
}

.payment__icon {
	position: absolute;
	left: 1.25em;
	right: 1.25em;
	top: 50%;
	transform: translate(0, -50%);
}

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

.payment__icon--paypal svg {
	height: 1.7em;
}

.payment__icon--bankorder svg {
	height: 1.8em;
}

.payment__icon--applepay svg {
	height: 3.3em;
}

.payment__icon--googlepay svg {
	height: 5.5em;
}

.method--active {
	background-color: #fff !important;
	border-bottom: none !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;
}
.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: 1px solid #c0c0c0;
	border-radius: 4px;
}
.payment__content {
	border: 1px solid #c0c0c0;
}
/*.payment__methods a {*/
/*display: flex;*/
/*align-items: center;*/
/*position: relative;*/
/*}*/

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

.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: 468px) {
	.billing__switch__wrapper svg {
		margin-left: -60px !important;
		top: -30px;
		width: auto;
		height: 25px;
	}
	.already__subscribed,
	.already__free,
	.subscription__success,
	.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;
	}

	.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: 767px) {
	.hero__wrapper h1 {
		padding-top: 30px;
	}
}

@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;
	}
}
.payment__discount {
	font-size: 14px;
	padding-top: 16px;
}
.payment__discount .payment__discount__apply {
	text-align: start;
	color: #303030;
}

.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.39em;
	text-align: center;
	margin-top: 1em;
}

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

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

.paypal__text {
	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='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;
}

/*
	Support box
 */

.method__bordered .message--error {
	margin: 0;
	/*padding-bottom: 0.25em;*/
}

.support-box {
	padding: 0.25em 0.75em;
	margin-top: 0;
	background: #f7f6f6;
}

.support-box .button-link {
	/*font-weight: bold;*/
}

.support-box-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/*
	Voucher box
*/

.voucher-box {
	font-size: 0.9em;
	padding: calc(0.5 * var(--form-padding)) var(--form-padding);
	/*border-top: 1px solid rgba(0,0,0,0.1);*/
	margin: calc(-1 * var(--form-padding));
	margin-top: 0;
	background: #f7f6f6;
}

.voucher-box-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.voucher-form label {
	font-weight: bold;
	display: block;
}

.voucher-form input {
	width: 100%;
	box-sizing: border-box;
	border-radius: 0;
	border-color: #ccc;
}

.voucher-form div {
	margin-top: 0.5rem;
}

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

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

.billing-address select {
	width: 100%;
}

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

.vat-indicator {
	color: blue;
	margin-left: 0.2em;
	cursor: pointer;
}
@media only screen and (max-width: 660px) {
	.billing__method,
	.billing-address .payment__footer .layout {
		flex-direction: column!important;
	}
	.billing-address .payment__footer .layout--item {
		flex-basis: 100%!important;
	}
	.billing-address .payment__footer {
		padding-top: 0;
	}
}
@media only screen and (max-width: 820px) {
	.flex__column--medium {
		flex-direction: column;
	}

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

.plancard__voucher--editing {
	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;
}

.two-column-row {
	height: 3.5em;
}
.two-column-row-last {
	height: 2.7em;
}
.two-column-row--height-75 {
	height: 2.625em;
}
.two-column-two-rows--height-75 {
	height: 5.25em;
}

.left-column {
	color: #a9a9a9;
	font-weight: bold;
}
.right-column {
	color: #424242;
	font-weight: 600;
	padding-left: 30px;
}
.right-column a {
	color: #006ce4;
	font-weight: 400;
	text-decoration: underline;
	text-transform: initial;
}

.left-column-expired {
	color: #db3b26;
	font-weight: bold;
}

.subscription-summary__divider {
	border-top: 1px solid #f0f0f0;
}
.payment-provider-alert__divider {
	font-weight: 400;
	color: #000000;
}
.subscription-summary__text {
	text-transform: capitalize;
}
.reactivatesubscription h2 {
	margin: 40px auto 10px;
}
.reactivatesubscription__details {
	padding-left: 6.4em;
}
.reactivatesubscription__details ul {
	padding: 1em 1.25em 1em 0;
	color: #636363;
	font-size: 14px;
}

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

.reactivatesubscription__body {
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 0.5em;
	padding-left: 1em;
	min-width: 600px;
}

.reactivatesubscription__body p.info__message {
	color: #667482;
	font-size: 1em;
	text-align: center;
	max-width: 600px;
	margin-bottom: 0;
}

.reactivatesubscription__header h2 {
	margin: 20px auto 10px;
}

.dropin-spinner .spinner {
	padding: 1em;
}

.reactivatesubscription #dropin-container {
	margin-top: 1em;
}

/*! 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--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: 16em;
}
.layout__item--height-small {
    flex-basis: 3.5em;
    max-height: 3.5em;
}

.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-50 {
    flex-basis: 50%;
}
.layout__item--width-40 {
    flex-basis: 40%;
}
.layout__item--width-45 {
    flex-basis: 45%;
}
.layout__item--width-475 {
    flex-basis: 47.5%;
}
.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%;
}

/*
    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://payment.moqups.com/fonts/Figtree-VariableFont_wght.woff2) format('woff2');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

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

/* https://github.com/googlefonts/NunitoSans */

@font-face {
	font-family: 'Nunito Sans';
	src: url(https://payment.moqups.com/fonts/NunitoSansVF.woff2) format('woff2');
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito Sans';
	src: url(https://payment.moqups.com/fonts/NunitoSans-ItalicVF.woff2) format('woff2');
	font-weight: 200 1000;
	font-style: italic;
	font-display: swap;
}

/* https://github.com/adobe-fonts/source-code-pro */

@font-face {
	font-family: 'Source Code Pro';
	src: url(https://payment.moqups.com/fonts/SourceCodeVF-Upright.otf.woff2) format('woff2');
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Source Code Pro';
	src: url(https://payment.moqups.com/fonts/SourceCodeVF-Italic.otf.woff2) format('woff2');
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

* {
	box-sizing: border-box;
}

body {
	font-family: var(--font-body);
	line-height: 1.5;
	color: #222222;
	font-feature-settings: 'lnum';

	/*
		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;
	--font-body: 'Nunito Sans', system-ui, sans-serif;
	--mq-blue: #1071f2;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
}

button {
	font: inherit;
	letter-spacing: inherit;
	font-family: var(--font-display);
}

input,
select,
textarea {
	font: inherit;
	letter-spacing: inherit;
	font-family: var(--font-display);
	box-shadow: none;
	transition: border-color 0.15s;
}

input,
textarea {
	border: 1px solid #ddd;
	border-radius: 0.2em;
	padding: 0.5em;
	color: #555;
}
ul {
	margin: 0;
	padding: 0;
}
ul,
ul li {
	list-style: none;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border: 1px solid #006be5 !important;
}
img {
	max-width: 100%;
}
select {
	display: block;
	border-radius: 0.2em;
	border: 1px solid #ddd;
	-webkit-appearance: none;
	appearance: none;

	padding: 8px 5px;
	font-size: 1em;
	width: 100%;

	background-size: 12px 6px !important;
	background: transparent
		url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 15.94 7.97%27%3E%3Ctitle%3Esageata_dropdown%3C/title%3E%3Cg id=%27Layer_2%27 data-name=%27Layer 2%27%3E%3Cg id=%27Layer_1-2%27 data-name=%27Layer 1%27%3E%3Cpolygon points=%2715.94 0 7.97 7.97 0 0 15.94 0%27 style=%27fill:%23335578%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
		no-repeat right 6px top 12px;
	outline: none;
}

label input[type='text'],
label input[type='password'] {
	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;
}

.react-container {
	min-width: 820px;
}

.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: 1.8em;
	padding: 0.2em 0;
	border-radius: 0.17em;
	border: 1px solid transparent;
}
.box-action svg {
	-webkit-user-select: none;
	user-select: none;
	fill: #727272;
	width: 28px;
	height: 28px;
}
.box-action:hover {
	background: #006be5;
}
.box-action:hover svg {
	fill: #fff;
}
/*.box-action:hover {*/
/*border-color: #424242;*/
/*}*/
/* Separators */
.billing-separator,
.integrations-separator,
.menu-item-separator {
	display: block;
	height: 1px;
	background: #e0e0e0;
	margin: 0.5em 0;
	box-sizing: content-box;
}

.billing-separator,
.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--uppercase {
	text-transform: uppercase;
}

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

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

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

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

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

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

/*
	Utility
	------------------------
 */
.text--underlined {
	text-decoration: underline;
}
.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;
}

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

.content-padding {
	padding: 1em;
}

.pos--relative {
	position: relative;
}
/*
	visibility helpers
 */
.visible--small,
.visible--medium,
.visible--large {
	display: none;
}
.visible__inline--large,
.visible__inline--small,
.visible__inline--medium {
	display: none;
}
@media screen and (min-width: 469px) {
}
@media screen and (max-width: 468px) {
	.hidden--small,
	.hidden__inline--small {
		display: none;
	}
	.visible--small {
		display: block;
	}
	.visible__inline--small {
		display: inline-block;
	}
	body {
		overflow-x: hidden;
	}
}
@media screen and (min-width: 469px) and (max-width: 767px) {
	.visible--medium {
		display: block;
	}
	.visible__inline--medium {
		display: inline-block;
	}
}
@media screen and (min-width: 768px) {
	.visible--large {
		display: block;
	}
	.visible__inline--large {
		display: inline-block;
	}
}


/*# sourceMappingURL=https://payment.moqups.com/css/custom.a3dda2ac1c6eab1e99c5.css.map*/