.remove-all-styles {
	all: unset
}

.remove-all-styles p,
.remove-all-styles div,
.remove-all-styles img,
.remove-all-styles input,
.remove-all-styles select,
.remove-all-styles textarea,
.remove-all-styles span {
	all: unset
}

@media screen and (max-width: 48em) {
	.hide-xs {
		display: none !important
	}
}

@media screen and (min-width: 48em)and (max-width: 64em) {
	.hide-sm {
		display: none !important
	}
}

@media screen and (min-width: 64em)and (max-width: 75em) {
	.hide-md {
		display: none !important
	}
}

@media screen and (min-width: 75em) {
	.hide-lg {
		display: none !important
	}
}

@media screen and (min-width: 48em)and (max-width: 10000px) {
	.show-xs {
		display: none !important
	}
}

@media screen and (min-width: 0px)and (max-width: 30em) {
	.show-xs {
		display: block !important
	}
}

@media screen and (min-width: 64em)and (max-width: 10000px) {
	.show-sm {
		display: none !important
	}
}

@media screen and (min-width: 0px)and (max-width: 48em) {
	.show-sm {
		display: block !important
	}
}

@media screen and (min-width: 64em)and (max-width: 75em) {
	.show-md {
		display: block !important
	}
}

@media screen and (min-width: 75em) {
	.show-lg {
		display: block !important
	}
}

.display-no {
	display: none !important
}

.height-100-vh {
	height: 100vh !important
}

.height-100-vh-desktop {
	height: 100vh !important
}

@media screen and (max-width: 64em) {
	.height-100-vh-desktop {
		height: auto !important
	}
}

.height-100 {
	height: 100% !important
}

.no-pad {
	padding: 0 !important
}

.no-marg {
	margin: 0 !important
}

.mar-b0 {
	margin-bottom: 0 !important
}

.mar-b5 {
	margin-bottom: 5px !important
}

.mar-b10 {
	margin-bottom: 10px !important
}

.mar-b15 {
	margin-bottom: 15px !important
}

.mar-b20 {
	margin-bottom: 20px !important
}

.mar-b25 {
	margin-bottom: 25px !important
}

.mar-b30 {
	margin-bottom: 30px !important
}

.mar-b40 {
	margin-bottom: 40px !important
}

.mar-b50 {
	margin-bottom: 50px !important
}

.mar-b60 {
	margin-bottom: 60px !important
}

.mar-b90 {
	margin-bottom: 90px !important
}

.mar-b100 {
	margin-bottom: 100px !important
}

.mar-b110 {
	margin-bottom: 110px !important
}

.mar-b120 {
	margin-bottom: 120px !important
}

.mar-t0 {
	margin-top: 0 !important
}

.mar-t5 {
	margin-top: 5px !important
}

.mar-t10 {
	margin-top: 10px !important
}

.mar-t15 {
	margin-top: 15px !important
}

.mar-t20 {
	margin-top: 20px !important
}

.mar-t25 {
	margin-top: 25px !important
}

.mar-t30 {
	margin-top: 30px !important
}

.mar-t40 {
	margin-top: 40px !important
}

.mar-t50 {
	margin-top: 50px !important
}

.mar-t60 {
	margin-top: 60px !important
}

.mar-r5 {
	margin-right: 5px !important
}

.mar-r10 {
	margin-right: 10px !important
}

.mar-r15 {
	margin-right: 15px !important
}

.mar-r20 {
	margin-right: 20px !important
}

.mar-l5 {
	margin-left: 5px !important
}

.mar-l10 {
	margin-left: 10px !important
}

.mar-l-auto {
	margin-left: auto !important
}

@media screen and (max-width: 64em) {
	.m-mar-t0 {
		margin-top: 0px !important
	}
}

@media screen and (max-width: 64em) {
	.m-mar-b10 {
		margin-bottom: 10px !important
	}
}

@media screen and (max-width: 64em) {
	.m-mar-b15 {
		margin-bottom: 15px !important
	}
}

@media screen and (max-width: 48em) {
	.m-mar-b15-sm {
		margin-bottom: 15px
	}
}

@media screen and (max-width: 64em) {
	.m-mar-b20 {
		margin-bottom: 20px !important
	}
}

@media screen and (max-width: 64em) {
	.m-mar-b30 {
		margin-bottom: 30px !important
	}
}

@media screen and (max-width: 64em) {
	.m-mar-b60 {
		margin-bottom: 60px
	}
}

.pad-tb {
	padding: 30px 0
}

.pad-left {
	padding-left: .5rem
}

.pad-right {
	padding-right: .5rem !important
}

.pad-right-1 {
	padding-right: 1rem
}

.pad-left-1 {
	padding-left: 1rem
}

.pad-b0 {
	padding-bottom: 0px !important
}

.pad-b5 {
	padding-bottom: 5px !important
}

.pad-b10 {
	padding-bottom: 10px
}

.pad-b15 {
	padding-bottom: 15px
}

.pad-t0 {
	padding-top: 0px !important
}

.pad-t5 {
	padding-top: 5px !important
}

.pad-t10 {
	padding-top: 10px !important
}

.pad-t15 {
	padding-top: 15px !important
}

.pad-t20 {
	padding-top: 20px !important
}

@media screen and (max-width: 48em) {
	.m-pad-0 {
		padding: 0
	}
}

@media screen and (max-width: 48em) {
	.m-mar-0 {
		margin: 0 !important
	}
}

.marg-auto-left {
	margin-left: auto
}

.width-100 {
	width: 100%
}

.text-center {
	text-align: center
}

.text-left {
	text-align: left
}

.text-right {
	text-align: right
}

.stop-highlight {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.min-h200 {
	min-height: 200px
}

.react-datepicker-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	background: transparent
}

.react-datepicker__input-container {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	width: 100% !important
}

.react-datepicker__input-container input {
	background: transparent
}

.border-bottom-plain {
	border-bottom: 1px solid #d4d7e3;
	padding: 0 0 10px 0
}

.border-bottom-primary {
	border-bottom: 1px solid #fff;
	padding: 0 0 10px 0
}

.border-bottom-secondary {
	border-bottom: 1px solid #fff;
	padding: 0 0 10px 0
}

.border-bottom-white {
	border-bottom: 1px solid #fff;
	padding: 0 0 10px 0
}

.quickFlex {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important
}

@media screen and (max-width: 30em) {
	.quickFlex {
		display: inline-block !important
	}
}

@media screen and (max-width: 30em) {
	.quickFlex.forceFlex {
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important
	}
}

.justify-center {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.full-height {
	height: 100%
}

@media screen and (min-width: 48em) {
	.full-height-not-mob {
		height: 100%
	}
}

.soft-show {
	-webkit-transition: all .75s ease;
	transition: all .75s ease;
	max-width: 1000px;
	overflow-x: hidden
}

.soft-show.hide {
	max-width: 0
}

.soft-show-height {
	-webkit-transition: all .75s ease;
	transition: all .75s ease;
	max-height: 500px;
	overflow-y: hidden
}

.soft-show-height.hide {
	max-height: 0
}

.animate {
	-webkit-transition: all .75s ease;
	transition: all .75s ease
}

.footer {
	position: fixed;
	bottom: 0;
	left: 10px;
	width: 100%;
	-webkit-box-shadow: 0px 0px 30px #e6e6e6;
	box-shadow: 0px 0px 30px #e6e6e6;
	padding: 15px 20px;
	z-index: 3
}

.footer.no-shadow {
	-webkit-box-shadow: none;
	box-shadow: none
}

.no-shadow {
	-webkit-box-shadow: none !important;
	box-shadow: none !important
}

.divider2 {
	width: 100%;
	height: 1px;
	margin: 10px 0;
	background-color: #d4d7e3
}

.divider2.primary {
	background-color: #fff
}

.divider2.secondary {
	background-color: #fff
}

.divider2.light {
	background-color: #e6e6e6
}

.loading:after {
	content: " .";
	-webkit-animation: dots 1s steps(5, end) infinite;
	animation: dots 1s steps(5, end) infinite
}

@-webkit-keyframes dots {

	0%,
	20% {
		color: #a9a9ad;
		text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0)
	}

	40% {
		color: #a9a9ad;
		text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0)
	}

	60% {
		text-shadow: .25em 0 0 #a9a9ad, .5em 0 0 rgba(0, 0, 0, 0)
	}

	80%,
	100% {
		text-shadow: .25em 0 0 #a9a9ad, .5em 0 0 #a9a9ad
	}
}

@keyframes dots {

	0%,
	20% {
		color: #a9a9ad;
		text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0)
	}

	40% {
		color: #a9a9ad;
		text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0)
	}

	60% {
		text-shadow: .25em 0 0 #a9a9ad, .5em 0 0 rgba(0, 0, 0, 0)
	}

	80%,
	100% {
		text-shadow: .25em 0 0 #a9a9ad, .5em 0 0 #a9a9ad
	}
}

.word-wrap {
	word-wrap: break-word
}

.img-corners {
	border-radius: 3px
}

.cursor-pointer {
	cursor: pointer
}

.max-width-420 {
	max-width: 420px
}

.max-width-500 {
	max-width: 500px
}

.max-width-600 {
	max-width: 600px
}

.max-width-768 {
	max-width: 768px
}

.rounded {
	border-radius: 100px
}

iframe.cleanup {
	background: #fff;
	border-radius: 4px
}

.clean-line-height {
	line-height: 0
}

.row-border {
	border-bottom: 1px solid #f2f2f2
}

.simple-border {
	border: 1px solid #f2f2f2
}

.step-circle {
	width: 30px;
	height: 30px;
	border-radius: 100px;
	border: 1px solid #f2f2f2;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.step-circle.primary {
	border: 2px solid #7246B1
}

.floatRight {
	float: right
}

.highlightable {
	cursor: pointer
}

.highlightable:hover {
	background-color: #7246B1;
	color: #fff
}

.end-xs,
.end-lg,
.end-md {
	text-align: right
}

.flexSpaceBetween {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.flexSpaceBetween.verticalAlign {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.noPad {
	padding: 0 !important
}

.rbc-btn-group {
	display: inline-block !important;
	white-space: pre-wrap !important;
	margin-top: 10px !important;
	text-align: center !important;
	margin-bottom: 10px !important
}

.tooltipwrapper {
	max-width: 100%;
	white-space: pre-wrap
}

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

#root {
	height: 100vh
}

html {
	height: 100vh
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px
}

::-webkit-scrollbar-track {
	background: #f1f1f1
}

::-webkit-scrollbar-thumb {
	background: #a9a9ad
}

::-webkit-scrollbar-thumb:hover {
	background: #75757b
}

body {
	font-family: "Inter", sans-serif;
	margin: 0 !important;
	padding: 0;
	height: 100vh;
	background-color: #F8F3F1;
	color: #202432;
	font-size: 16px;
	font-weight: 400;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
	.row {
		width: 100%
	}

	div[class*=col-] {
		width: 100%
	}
}

.noUnderline {
	text-decoration: none
}

a {
	color: #7246B1;
	cursor: pointer;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

a:hover {
	opacity: .8
}

a.secondary {
	color: #33257e
}

.text-13 {
	color: #33257e;
	font-size: 13px;
	font-weight: 600
}

@media screen and (max-width: 64em) {
	.mob-flex-100 {
		width: 100%
	}
}

@media screen and (max-width: 64em) {
	.mob-hide {
		display: none !important
	}
}

.pos-rel {
	position: relative
}

.clear-after:after {
	content: "";
	display: table;
	clear: both
}

.align-right {
	text-align: right
}

.flex-clean-up {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.nav-pageBackLink {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: #999;
	cursor: pointer
}

.nav-pageBackLink p {
	margin: 0 0 0 10px;
	font-size: 14px
}

.bg-status-red {
	background-color: #dd4124 !important
}

.bg-status-yellow {
	background-color: #fedd00 !important
}

.bg-status-green {
	background-color: #7246B1 !important
}

.bg-status-orange {
	background-color: #ff9425 !important
}

.bg-status-purple {
	background-color: #7943b7 !important
}

.bg-status-grey {
	background-color: #a9a9ad !important
}

.bg-status-blue {
	background-color: #0094d5 !important
}

.bg-status-white {
	background-color: #fff !important
}

.bg-status-black {
	background-color: #000 !important
}

.remove-overflow {
	overflow: hidden
}

#contactGateButton {
	width: 40px !important;
	height: 40px !important;
	right: -18px !important;
	bottom: -15px !important
}

.light-hr {
	margin: 5px 0;
	border: none;
	height: 2px;
	background-color: #f2f2f2
}

.mapboxgl-ctrl-logo {
	display: none !important
}

.mapboxgl-ctrl-bottom-right {
	display: none !important
}

.socketUser {
	-webkit-transition: all .2s ease;
	transition: all .2s ease
}

h1,
h2,
h3,
h4 {
	font-weight: 400;
	color: #666;
	margin: 0 0 20px 0
}

h1 {
	font-size: 24px
}

h2 {
	font-size: 18px
}

h3 {
	font-size: 16px
}

p {
	font-size: 14px;
	line-height: 24px;
	color: #666;
	margin: 0 0 20px 0
}

.page-title {
	font-size: 24px;
	font-weight: 400;
	color: #202432;
	margin: 0 0 20px 0
}

.page-title span {
	margin-left: 3px
}

.page-title.no-sub {
	margin: 0
}

.text-primary {
	color: #7246B1 !important
}

.text-secondary {
	color: #33257e !important
}

.text-black {
	color: #000 !important
}

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

.text-grey {
	color: #999 !important
}

.text-light-grey {
	color: #e6e6e6 !important
}

.text-grey-35 {
	color: #67739e !important
}

.text-green {
	color: #7246B1 !important
}

.text-green-auto {
	color: green !important
}

.text-purple {
	color: #33257e !important
}

.text-red {
	color: #dd4124 !important
}

.text-green {
	color: #7246B1 !important
}

.text-blue {
	color: #0094d5 !important
}

.text-yellow {
	color: #fedd00 !important
}

.text-orange {
	color: #ff9425 !important
}

.text-xxsml {
	font-size: 11px !important
}

.text-xsml {
	font-size: 12px !important
}

.text-sml {
	font-size: 14px !important
}

.text-md {
	font-size: 16px !important
}

.text-md2 {
	font-size: 22px
}

.text-lg {
	font-size: 24px !important
}

.text-lg2 {
	font-size: 34px !important
}

.text-xl {
	font-size: 52px !important
}

.text-sxl {
	font-size: 72px !important
}

.text-mxl {
	font-size: 92px !important;
	line-height: 92px !important
}

@media screen and (max-width: 64em) {
	.text-md2-mob {
		font-size: 22px !important
	}
}

.text-light {
	font-weight: 200 !important
}

.text-normal {
	font-weight: 400 !important
}

.text-heavy {
	font-weight: 600 !important
}

.text-underlined {
	text-decoration: underline !important
}

.uppercase {
	text-transform: uppercase !important
}

.capitalize {
	text-transform: capitalize !important
}

.max-length-200 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px
}

.max-length-300 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 300px
}

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

.text-clickable {
	cursor: pointer
}

.fix-font {
	font-family: "Open Sans", sans-serif
}

@-webkit-keyframes pop {
	0% {
		-webkit-transform: scale(0.7);
		transform: scale(0.7)
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes pop {
	0% {
		-webkit-transform: scale(0.7);
		transform: scale(0.7)
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@-webkit-keyframes spinUp {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg)
	}
}

@keyframes spinUp {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg)
	}
}

@-webkit-keyframes spinDown {
	0% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg)
	}

	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

@keyframes spinDown {
	0% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg)
	}

	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

@-webkit-keyframes pop-pulse {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(67, 183, 178, .4);
		box-shadow: 0 0 0 0 rgba(67, 183, 178, .4);
		-webkit-transform: scale(0.8);
		transform: scale(0.8)
	}

	70% {
		-webkit-box-shadow: 0 0 0 10px rgba(67, 183, 178, 0);
		box-shadow: 0 0 0 10px rgba(67, 183, 178, 0)
	}

	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(67, 183, 178, 0);
		box-shadow: 0 0 0 0 rgba(67, 183, 178, 0);
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes pop-pulse {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(67, 183, 178, .4);
		box-shadow: 0 0 0 0 rgba(67, 183, 178, .4);
		-webkit-transform: scale(0.8);
		transform: scale(0.8)
	}

	70% {
		-webkit-box-shadow: 0 0 0 10px rgba(67, 183, 178, 0);
		box-shadow: 0 0 0 10px rgba(67, 183, 178, 0)
	}

	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(67, 183, 178, 0);
		box-shadow: 0 0 0 0 rgba(67, 183, 178, 0);
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

nav.m-nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	background-color: #2a2f42;
	height: 70px;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 0 2rem;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

@media screen and (max-width: 64em) {
	nav.m-nav {
		padding: 0 20px;
		margin-bottom: 10px
	}
}

nav.m-nav .m-nav-start {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	text-align: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

nav.m-nav .m-nav-start .current-company {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-left: 40px
}

nav.m-nav .m-nav-end {
	text-align: right
}

@media screen and (max-width: 64em) {
	nav.m-nav .m-nav-end {
		text-align: left
	}
}

nav.m-nav ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left
}

nav.m-nav ul li {
	height: 70px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-right: 35px
}

nav.m-nav ul li.last {
	margin-right: 0
}

@media screen and (max-width: 64em) {
	nav.m-nav ul li {
		margin-right: 20px
	}
}

nav.m-nav ul li a {
	text-decoration: none
}

nav.m-nav ul li p {
	margin: 0
}

nav.m-nav .notification-wrapper {
	cursor: pointer
}

nav.m-nav .notification-wrapper .notification {
	margin-top: 6px;
	position: relative
}

nav.m-nav .notification-wrapper .notification .notification-num {
	position: absolute;
	top: -10px;
	right: 0;
	width: 20px;
	height: 20px;
	text-align: center;
	background-color: #7246B1;
	border-radius: 100px;
	color: #fff;
	font-size: 12px
}

nav.m-nav .notification-wrapper .notification .notification-num span {
	display: block;
	padding-top: 1px;
	font-family: "Open Sans", sans-serif
}

nav.m-nav .notification-wrapper .notification a:hover {
	text-decoration: none
}

nav.m-nav .dropdown-wrapper {
	cursor: pointer;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

nav.m-nav .dropdown-wrapper .profile-photo {
	width: 30px;
	height: 30px;
	border-radius: 100px;
	margin-right: 10px
}

nav.m-nav .dropdown-wrapper .profile-photo img {
	width: 100%;
	border-radius: 100px
}

nav.m-nav .dropdown-wrapper p {
	color: #b3b3b3;
	font-size: 14px
}

nav.m-nav .dropdown-wrapper p span {
	margin-left: 8px
}

@media screen and (max-width: 64em) {
	nav.m-nav .nav-item-hide {
		display: none
	}
}

nav.m-nav .nav-icon {
	display: none;
	text-decoration: none
}

@media screen and (max-width: 64em) {
	nav.m-nav .nav-icon {
		display: block;
		padding-top: 24px
	}
}

.headerMenuNav {
	padding-left: 40px;
	margin-top: 0px !important;
	margin-bottom: 20px;
	background-color: #fff
}

.headerMenuNav button {
	color: #969ebb;
	margin: 15px 40px 15px 0;
	min-width: 0px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.headerMenuNav button:hover {
	color: #7246B1
}

.headerMenuNav button.selected {
	color: #7246B1
}

.headerMenuNav button div {
	padding: 0
}

.headerMenuNav button div span {
	font-size: 14px;
	font-weight: 600
}

.headerMenuNav button div span:hover {
	color: inherit
}

@media screen and (max-width: 64em) {
	.headerMenuNav {
		display: none
	}
}

.nav-banner {
	width: 100%;
	height: 50px;
	background-color: #dd4124;
	padding: 0 35px;
	color: #fff
}

@media screen and (max-width: 64em) {
	.nav-banner {
		height: auto;
		padding: 15px 25px
	}
}

.nav-banner .row {
	height: 50px
}

@media screen and (max-width: 64em) {
	.nav-banner .row {
		height: auto
	}
}

.nav-banner p {
	margin: 0;
	color: #fff
}

@media screen and (max-width: 64em) {
	.nav-banner p {
		text-align: center
	}
}

.nav-banner .banner-controls i {
	color: #a9a9ad;
	font-size: 40px
}

.nav-banner.primary {
	background-color: #7246B1
}

.nav-banner.orange {
	background-color: #ff9425
}

.nav-banner.yellow {
	background-color: #fedd00;
	color: #000
}

.nav-banner.warning {
	background-color: #dd4124
}

.company-switcher {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.connectionError {
	position: fixed;
	top: -30px;
	width: 100%;
	height: 30px;
	background-color: #dd4124;
	color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-transition: top .3s ease;
	transition: top .3s ease
}

.connectionError.open {
	top: 0
}

section.welcome {
	background-color: #2a2f42;
	padding: 0 2rem 20px 2rem
}

@media screen and (max-width: 64em) {
	section.welcome {
		padding: 0 20px 25px 20px;
		margin-bottom: 30px
	}
}

section.welcome .welcome-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

section.welcome .welcome-wrap .left {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	margin: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

section.welcome .welcome-wrap .left .button {
	margin-top: 4px;
	margin-left: 15px
}

section.welcome .welcome-wrap .left h1 {
	margin: 0;
	color: #fff;
	font-weight: 200;
	font-size: 30px;
	line-height: 0
}

section.welcome .welcome-wrap .right {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	margin: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

.showing {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

@media screen and (max-width: 64em) {
	.showing.mobMiddle {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center
	}
}

.showing.clickable {
	cursor: pointer
}

.showing p {
	margin: 0;
	color: #a9a9ad
}

.showing ul {
	margin: 0;
	padding: 0;
	list-style: none
}

.showing ul li {
	display: inline-block;
	margin-left: 15px;
	color: #a9a9ad;
	cursor: pointer
}

.showing ul li.selected {
	font-weight: 600;
	color: #7246B1;
	border-bottom: 2px solid #7246B1
}

.showing .addButtText {
	margin-right: 10px;
	margin-left: 10px;
	color: #a9a9ad;
	font-size: 12px
}

.fullScreenHolder {
	height: 100vh;
	margin: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}

.fullScreenTop {
	background-color: #202432;
	width: 100%;
	color: #fff;
	padding: 0 30px;
	margin-bottom: 45px
}

@media screen and (max-width: 64em) {
	.fullScreenTop {
		padding: 0
	}
}

.fullScreenTop .close {
	cursor: pointer;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.fullScreenTop .close:hover {
	cursor: pointer;
	color: #ccc
}

.fullScreenMid {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-flex: 1;
	-ms-flex: 1 1;
	flex: 1 1;
	position: relative
}

.fullScreenMid.automationHolder {
	text-align: center;
	overflow: auto;
	padding: 50px
}

@media screen and (max-width: 64em) {
	.fullScreenMid.automationHolder {
		padding: 10px 0
	}
}

.fullScreenBot {
	background-color: #485170;
	padding: 20px;
	width: 100%;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 50px;
	flex: 0 0 50px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

.fullScreen_modal {
	width: 100vw;
	height: 100vh;
	background-color: #000;
	opacity: .2;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1000
}

.form-group {
	margin-bottom: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	color: #202432;
	position: relative
}

.form-group.last {
	margin-bottom: 0
}

.form-group label {
	margin-bottom: 20px;
	width: 100%;
	font-size: 11px;
	text-transform: uppercase
}

.form-group.lg select {
	background-size: 24px auto !important
}

.form-group input,
.form-group select,
.form-group textarea,
.form-group.fakeInput {
	font-family: "Open Sans", sans-serif;
	padding: 0 0 10px 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0;
	border-bottom: 1px solid #d4d7e3;
	font-size: 16px;
	line-height: 20px;
	border-radius: 0px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.form-group input::-webkit-input-placeholder,
.form-group select::-webkit-input-placeholder,
.form-group textarea::-webkit-input-placeholder,
.form-group.fakeInput::-webkit-input-placeholder {
	font-size: 16px;
	color: #bfbfbf
}

.form-group input::-moz-placeholder,
.form-group select::-moz-placeholder,
.form-group textarea::-moz-placeholder,
.form-group.fakeInput::-moz-placeholder {
	font-size: 16px;
	color: #bfbfbf
}

.form-group input:-ms-input-placeholder,
.form-group select:-ms-input-placeholder,
.form-group textarea:-ms-input-placeholder,
.form-group.fakeInput:-ms-input-placeholder {
	font-size: 16px;
	color: #bfbfbf
}

.form-group input::-ms-input-placeholder,
.form-group select::-ms-input-placeholder,
.form-group textarea::-ms-input-placeholder,
.form-group.fakeInput::-ms-input-placeholder {
	font-size: 16px;
	color: #bfbfbf
}

.form-group input::placeholder,
.form-group select::placeholder,
.form-group textarea::placeholder,
.form-group.fakeInput::placeholder {
	font-size: 16px;
	color: #bfbfbf
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-group.fakeInput:focus {
	outline: 0;
	border-bottom: 1px solid #7246B1
}

.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled,
.form-group.fakeInput:disabled {
	border-bottom: 1px solid #d4d7e3;
	color: #d4d7e3;
	border-style: dotted;
	background-color: transparent
}

.form-group input.fakeDisabled,
.form-group select.fakeDisabled,
.form-group textarea.fakeDisabled,
.form-group.fakeInput.fakeDisabled {
	border-bottom: 1px solid #d4d7e3;
	border-style: solid;
	color: #000
}

.form-group input.lg,
.form-group select.lg,
.form-group textarea.lg,
.form-group.fakeInput.lg {
	font-size: 28px;
	line-height: 38px;
	font-weight: 200
}

@media only screen and (max-width: 48em) {

	.form-group input.lg,
	.form-group select.lg,
	.form-group textarea.lg,
	.form-group.fakeInput.lg {
		font-size: 16px;
		line-height: 20px
	}
}

.form-group input.lg::-webkit-input-placeholder,
.form-group select.lg::-webkit-input-placeholder,
.form-group textarea.lg::-webkit-input-placeholder,
.form-group.fakeInput.lg::-webkit-input-placeholder {
	font-size: 28px;
	line-height: 38px;
	font-weight: 200
}

.form-group input.lg::-moz-placeholder,
.form-group select.lg::-moz-placeholder,
.form-group textarea.lg::-moz-placeholder,
.form-group.fakeInput.lg::-moz-placeholder {
	font-size: 28px;
	line-height: 38px;
	font-weight: 200
}

.form-group input.lg:-ms-input-placeholder,
.form-group select.lg:-ms-input-placeholder,
.form-group textarea.lg:-ms-input-placeholder,
.form-group.fakeInput.lg:-ms-input-placeholder {
	font-size: 28px;
	line-height: 38px;
	font-weight: 200
}

.form-group input.lg::-ms-input-placeholder,
.form-group select.lg::-ms-input-placeholder,
.form-group textarea.lg::-ms-input-placeholder,
.form-group.fakeInput.lg::-ms-input-placeholder {
	font-size: 28px;
	line-height: 38px;
	font-weight: 200
}

.form-group input.lg::placeholder,
.form-group select.lg::placeholder,
.form-group textarea.lg::placeholder,
.form-group.fakeInput.lg::placeholder {
	font-size: 28px;
	line-height: 38px;
	font-weight: 200
}

@media only screen and (max-width: 48em) {

	.form-group input.lg::-webkit-input-placeholder,
	.form-group select.lg::-webkit-input-placeholder,
	.form-group textarea.lg::-webkit-input-placeholder,
	.form-group.fakeInput.lg::-webkit-input-placeholder {
		font-size: 16px;
		line-height: 20px
	}

	.form-group input.lg::-moz-placeholder,
	.form-group select.lg::-moz-placeholder,
	.form-group textarea.lg::-moz-placeholder,
	.form-group.fakeInput.lg::-moz-placeholder {
		font-size: 16px;
		line-height: 20px
	}

	.form-group input.lg:-ms-input-placeholder,
	.form-group select.lg:-ms-input-placeholder,
	.form-group textarea.lg:-ms-input-placeholder,
	.form-group.fakeInput.lg:-ms-input-placeholder {
		font-size: 16px;
		line-height: 20px
	}

	.form-group input.lg::-ms-input-placeholder,
	.form-group select.lg::-ms-input-placeholder,
	.form-group textarea.lg::-ms-input-placeholder,
	.form-group.fakeInput.lg::-ms-input-placeholder {
		font-size: 16px;
		line-height: 20px
	}

	.form-group input.lg::placeholder,
	.form-group select.lg::placeholder,
	.form-group textarea.lg::placeholder,
	.form-group.fakeInput.lg::placeholder {
		font-size: 16px;
		line-height: 20px
	}
}

.form-group input.white,
.form-group select.white,
.form-group textarea.white,
.form-group.fakeInput.white {
	background: transparent;
	border-bottom: 1px solid #fff;
	color: #fff
}

.form-group input.white::-webkit-input-placeholder,
.form-group select.white::-webkit-input-placeholder,
.form-group textarea.white::-webkit-input-placeholder,
.form-group.fakeInput.white::-webkit-input-placeholder {
	color: #fff
}

.form-group input.white::-moz-placeholder,
.form-group select.white::-moz-placeholder,
.form-group textarea.white::-moz-placeholder,
.form-group.fakeInput.white::-moz-placeholder {
	color: #fff
}

.form-group input.white:-ms-input-placeholder,
.form-group select.white:-ms-input-placeholder,
.form-group textarea.white:-ms-input-placeholder,
.form-group.fakeInput.white:-ms-input-placeholder {
	color: #fff
}

.form-group input.white::-ms-input-placeholder,
.form-group select.white::-ms-input-placeholder,
.form-group textarea.white::-ms-input-placeholder,
.form-group.fakeInput.white::-ms-input-placeholder {
	color: #fff
}

.form-group input.white::placeholder,
.form-group select.white::placeholder,
.form-group textarea.white::placeholder,
.form-group.fakeInput.white::placeholder {
	color: #fff
}

.form-group input.white option,
.form-group select.white option,
.form-group textarea.white option,
.form-group.fakeInput.white option {
	color: #000
}

.form-group input.stripe,
.form-group select.stripe,
.form-group textarea.stripe,
.form-group.fakeInput.stripe {
	font-family: sans-serif;
	font-size: 14px
}

.form-group input.stripe::-webkit-input-placeholder,
.form-group select.stripe::-webkit-input-placeholder,
.form-group textarea.stripe::-webkit-input-placeholder,
.form-group.fakeInput.stripe::-webkit-input-placeholder {
	font-size: 14px;
	color: #757575
}

.form-group input.stripe::-moz-placeholder,
.form-group select.stripe::-moz-placeholder,
.form-group textarea.stripe::-moz-placeholder,
.form-group.fakeInput.stripe::-moz-placeholder {
	font-size: 14px;
	color: #757575
}

.form-group input.stripe:-ms-input-placeholder,
.form-group select.stripe:-ms-input-placeholder,
.form-group textarea.stripe:-ms-input-placeholder,
.form-group.fakeInput.stripe:-ms-input-placeholder {
	font-size: 14px;
	color: #757575
}

.form-group input.stripe::-ms-input-placeholder,
.form-group select.stripe::-ms-input-placeholder,
.form-group textarea.stripe::-ms-input-placeholder,
.form-group.fakeInput.stripe::-ms-input-placeholder {
	font-size: 14px;
	color: #757575
}

.form-group input.stripe::placeholder,
.form-group select.stripe::placeholder,
.form-group textarea.stripe::placeholder,
.form-group.fakeInput.stripe::placeholder {
	font-size: 14px;
	color: #757575
}

.form-group input.nopad,
.form-group select.nopad,
.form-group textarea.nopad,
.form-group.fakeInput.nopad {
	padding: 0
}

.form-group .intl-tel-input input {
	width: 100%
}

.form-group textarea {
	border: 1px solid #d4d7e3;
	padding: 20px
}

.form-group select {
	position: relative;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent url("/public/images/arrow-down-select.svg") no-repeat !important;
	background-position: right center !important;
	background-size: 16px auto !important
}

.form-group select.no-border {
	border-bottom: none;
	padding-bottom: 0
}

.form-group .explainer {
	margin: 15px 0 0 0;
	font-size: 12px;
	color: #999
}

.form-group .invalid {
	border-bottom: 1px solid #dd4124 !important
}

.form-group .warning {
	border-bottom: 1px solid #7943b7 !important
}

.form-group .errorHolderWarning {
	margin-bottom: 0px
}

.form-group.form-group-icon input,
.form-group.form-group-icon select,
.form-group.form-group-icon textarea {
	padding-right: 20px
}

.form-group.form-group-icon span {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 14px;
	color: #969ebb;
	line-height: 18px
}

.form-group.form-group-icon span.date-picker {
	line-height: 24px
}

.action-row {
	padding: 15px;
	background: #f7f7f7;
	border-radius: 3px
}

.react-datepicker__input-container input,
.react-datepicker-ignore-onclickoutside input {
	width: 100%
}

.dash-panel {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

h4.dash-panel-title {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	color: #7246B1
}

.blog-integration {
	position: relative;
	border-radius: 3px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 230px;
	border-radius: 4px;
	text-align: center;
	padding: 15px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

.blog-integration .p {
	z-index: 10
}

.blog-integration.first:after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	opacity: .75;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-color: #7246B1
}

.blog-integration.overlay {
	position: absolute;
	z-index: 1;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}

.blog-integration.overlay .middle {
	-webkit-box-flex: 2;
	-ms-flex-positive: 2;
	flex-grow: 2;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 0 20px
}

.blog-integration.overlay .middle p {
	line-height: 1.5
}

.campaign-holder {
	color: #a9a9ad;
	margin-bottom: 60px
}

.campaign-holder .paper-class .campaignTimeZone {
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 11px;
	font-weight: bold;
	color: #7246B1
}

.campaign-holder .paper-class .campaignTimeZone span {
	margin-left: 5px
}

.campaign-holder .step1SubsToSend {
	color: #202432;
	font-size: 14px
}

.campaign-holder .step1SubsToSend span {
	color: #7246B1;
	font-size: 20px
}

.campaign-holder .campaignTemplatePreview {
	position: relative;
	background-color: #fff;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
	-webkit-box-shadow: 0px 0px 2px #d4d7e3;
	box-shadow: 0px 0px 2px #d4d7e3
}

.campaign-holder .campaignTemplatePreview .magnifyIcon {
	width: 24px;
	height: 24px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 10;
	opacity: 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.campaign-holder .campaignTemplatePreview:hover .magnifyIcon {
	opacity: 1;
	cursor: pointer
}

.campaign-holder .campaignTemplatePreview:hover::after {
	opacity: .75;
	cursor: pointer
}

.campaign-holder .campaignTemplatePreview:hover .templateImageHolder .templateImageImg {
	-webkit-transform: scale(1.05);
	transform: scale(1.05)
}

.campaign-holder .campaignTemplatePreview::after {
	content: "";
	background: #7246B1;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: .75;
	border-radius: 4px 4px 0 0;
	opacity: 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.campaign-holder .campaignTemplatePreview .templateImage {
	position: relative;
	height: 250px;
	border-radius: 4px 4px 0 0
}

.campaign-holder .campaignTemplatePreview .templateImage .templateImageHolder {
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}

.campaign-holder .campaignTemplatePreview .templateImage .templateImageHolder .templateImageImg {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 1s;
	transition: all 1s;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat
}

.campaign-holder .campaignTemplatePreview .templateImage .templateImageHolder .templateImageImg.phone {
	background-position-y: top
}

.campaign-holder .campaignGoodStuffHolder * {
	color: #7246B1;
	font-size: 14px
}

.campaign-holder .campaignGoodStuffHolder a {
	font-weight: bold;
	text-decoration: underline
}

.campaign-holder .campaignGoodStuffHolder span {
	margin-right: 10px
}

.campaign-holder .campaignGoodStuffHolder div {
	border-bottom: 1px solid #d4d7e3;
	padding-bottom: 10px;
	padding-top: 10px
}

.campaign-holder .campaignGoodStuffHolder div.first {
	padding-top: 0
}

.campaign-holder .campaignGoodStuffHolder div.last {
	padding-bottom: 0;
	border-bottom: none
}

.campaign-holder .campaignErrorHolder * {
	color: #dd4124;
	font-size: 14px
}

.campaign-holder .campaignErrorHolder a {
	font-weight: bold;
	text-decoration: underline
}

.campaign-holder .campaignErrorHolder span {
	margin-right: 10px
}

.campaign-holder .campaignErrorHolder div {
	border-bottom: 1px solid #d4d7e3;
	padding-bottom: 10px;
	padding-top: 10px
}

.campaign-holder .campaignErrorHolder div.first {
	padding-top: 0
}

.campaign-holder .campaignErrorHolder div.last {
	padding-bottom: 0;
	border-bottom: none
}

.campaign-holder .campaignWarningHolder * {
	color: #7943b7;
	font-size: 14px
}

.campaign-holder .campaignWarningHolder a {
	font-weight: bold;
	text-decoration: underline
}

.campaign-holder .campaignWarningHolder span {
	margin-right: 10px
}

.campaign-holder .campaignWarningHolder div {
	border-bottom: 1px solid #d4d7e3;
	padding-bottom: 10px;
	padding-top: 10px
}

.campaign-holder .campaignWarningHolder div.first {
	padding-top: 0
}

.campaign-holder .campaignWarningHolder div.last {
	padding-bottom: 0;
	border-bottom: none
}

.loader {
	clear: both
}

.addGroupsPop.primary * {
	color: #7246B1 !important
}

.addGroupsPop.primary .checkbox :checked {
	background-color: #7246B1
}

.addGroupsPop.secondary * {
	color: #33257e !important
}

.addGroupsPop.secondary .checkbox:checked {
	background-color: #33257e !important
}

.campaign-thumbnail {
	width: 80px;
	height: 48px;
	background: #fff;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid #f2f2f2
}

.campaign-thumbnail img {
	width: 100%
}

.campaign-thumbnail.draft {
	position: relative;
	background: #f2f2f2
}

.campaign-thumbnail.draft span {
	position: absolute;
	top: calc(50% - 6px);
	left: calc(50% - 6px);
	color: #7246B1
}

.campaign-thumbnail .loadingIcon {
	width: 20px;
	height: 20px;
	margin-top: -10px
}

.template-preview-sml {
	position: relative;
	background-color: #fff;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
	-webkit-box-shadow: 0px 0px 2px #d4d7e3;
	box-shadow: 0px 0px 2px #d4d7e3
}

.template-preview-sml .magnifyIcon {
	width: 24px;
	height: 24px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 10;
	opacity: 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.template-preview-sml:hover .magnifyIcon {
	opacity: 1;
	cursor: pointer
}

.template-preview-sml:hover::after {
	opacity: .75;
	cursor: pointer
}

.template-preview-sml:hover .templateImageHolder .templateImageImg {
	-webkit-transform: scale(1.05);
	transform: scale(1.05)
}

.template-preview-sml::after {
	content: "";
	background: #7246B1;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: .75;
	border-radius: 4px 4px 0 0;
	opacity: 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.template-preview-sml .templateImage {
	position: relative;
	height: 200px;
	border-radius: 4px 4px 0 0
}

.template-preview-sml .templateImage .templateImageHolder {
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}

.template-preview-sml .templateImage .templateImageHolder .templateImageImg {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 1s;
	transition: all 1s;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat
}

.template-preview-sml .templateImage .templateImageHolder .templateImageImg.phone {
	background-position-y: top
}

.tooltip.primary {
	background-color: #7246B1 !important;
	color: #fff !important
}

.tooltip.primary.place-top:after {
	border-top-color: #7246B1 !important;
	border-top-style: solid !important;
	border-top-width: 6px !important
}

.tooltip.red {
	background-color: #dd4124 !important;
	color: #fff !important
}

.tooltip.red.place-top:after {
	border-top-color: #dd4124 !important;
	border-top-style: solid !important;
	border-top-width: 6px !important
}

.tooltip.green {
	background-color: #7246B1 !important;
	color: #fff !important
}

.tooltip.green.place-top:after {
	border-top-color: #7246B1 !important;
	border-top-style: solid !important;
	border-top-width: 6px !important
}

.tooltip.yellow {
	background-color: #fedd00 !important;
	color: #000 !important
}

.tooltip.yellow.place-top:after {
	border-top-color: #fedd00 !important;
	border-top-style: solid !important;
	border-top-width: 6px !important
}

.tooltip.grey {
	background-color: #a9a9ad !important;
	color: #fff
}

.tooltip.grey.place-top:after {
	border-top-color: #a9a9ad !important;
	border-top-style: solid !important;
	border-top-width: 6px !important
}

.tooltip.purple {
	background-color: #7943b7 !important;
	color: #fff !important
}

.tooltip.purple.place-top:after {
	border-top-color: #7943b7 !important;
	border-top-style: solid !important;
	border-top-width: 6px !important
}

.tooltip.blue {
	background-color: #0094d5 !important;
	color: #fff !important
}

.tooltip.blue.place-top:after {
	border-top-color: #0094d5 !important;
	border-top-style: solid !important;
	border-top-width: 6px !important
}

.tooltip.black {
	background-color: #000 !important;
	color: #fff !important
}

.tooltip.black.place-top:after {
	border-top-color: #000 !important;
	border-top-style: solid !important;
	border-top-width: 6px !important
}

.svg-fill.primary {
	fill: #7246B1
}

.svg-fill.secondary {
	fill: #33257e
}

.svg-fill.white {
	fill: #fff
}

.stripe .new-card-holder {
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	max-height: 350px;
	overflow-y: hidden
}

.stripe .hide {
	max-height: 0
}

.stripe .credit-card {
	border-bottom: 1px solid #d9d9d9;
	padding: 20px 0
}

.stripe .credit-card .card-number:before {
	content: "xxxx-xxxx-xxxx-"
}

@media screen and (max-width: 48em) {
	.stripe .credit-card .card-number:before {
		content: "...xxxx-"
	}
}

@media screen and (max-width: 30em) {
	.stripe .credit-card .card-number:before {
		content: "..."
	}
}

.stripe .credit-card a,
.stripe .credit-card span {
	white-space: nowrap;
	overflow: hidden
}

.stripe .credit-card .card-brand {
	top: 5px;
	position: relative
}

.stripe .credit-card.default {
	color: #7246B1
}

.stripe .credit-card .cta button {
	margin-left: 10px
}

.secure {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

ul.card-list {
	margin: 0;
	padding: 0
}

ul.card-list li {
	list-style: none;
	display: inline-block;
	margin-left: 5px
}

.featureList .feature {
	padding-bottom: 10px;
	border-bottom: 1px solid #e6e6e6
}

.priceWrap {
	height: 120px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.priceBtnFix {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 20px
}

.simple-link {
	cursor: pointer;
	text-decoration: underline;
	text-transform: uppercase;
	font-size: 12px
}

.recharts-legend-item-text {
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	color: #999;
	font-weight: 600
}

.recharts-tooltip-item-list {
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: capitalize
}

.recharts-tooltip-wrapper {
	border: none;
	-webkit-box-shadow: 0px 0px 10px #e6e6e6;
	box-shadow: 0px 0px 10px #e6e6e6;
	border-radius: 4px
}

.recharts-default-tooltip {
	border: none !important
}

.circle {
	height: 10px;
	width: 10px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block
}

.circle.red {
	background-color: #dd4124
}

.circle.primary {
	background-color: #7246B1
}

.circle.secondary {
	background-color: #33257e
}

.circle.orange {
	background-color: #ff9425
}

.circle.yellow {
	background-color: #fedd00
}

ul.simpleList {
	margin: 0;
	padding: 0
}

ul.simpleList li {
	list-style: none;
	display: inline-block;
	margin-left: 10px
}

ul.simpleList li:first-child {
	margin-left: 0
}

.flash-discount {
	width: 100%;
	height: 60px;
	background: #7246B1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0 30px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

@media screen and (max-width: 64em) {
	.flash-discount {
		height: auto;
		display: inline-block;
		padding: 30px
	}
}

.flash-discount .info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

@media screen and (max-width: 64em) {
	.flash-discount .info {
		height: auto;
		display: inline-block;
		width: 100%;
		padding-right: 20px
	}
}

.flash-discount .discount-code {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: #fff;
	padding: 4px 40px 4px 12px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 100px;
	margin-left: 15px
}

@media screen and (max-width: 64em) {
	.flash-discount .discount-code {
		margin-left: 0
	}
}

.flash-discount .discount-code span {
	position: absolute;
	top: 8px;
	right: 12px;
	cursor: pointer
}

.flash-discount .exit {
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer
}

.integrationsHolder {
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out
}

.integrationsHolder .row {
	margin: 0
}

.integrations-logo-wrapper {
	position: absolute;
	top: 0;
	left: 100px;
	width: 120px;
	height: 44px;
	background: -webkit-gradient(linear, left top, right top, from(#33257E), to(#7246B1));
	background: linear-gradient(to right, #33257E, #7246B1);
	z-index: 1;
	border-radius: 0 0 4px 4px;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: center;
	-webkit-box-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	-webkit-box-align: center;
	align-items: center
}

@media screen and (max-width: 48em) {
	.integrations-logo-wrapper {
		left: 30px
	}
}

.integrations-split-left {
	background-color: #fff;
	min-height: 100vh;
	padding: 100px;
	position: relative
}

@media screen and (max-width: 48em) {
	.integrations-split-left {
		height: auto;
		min-height: 400px;
		padding: 30px
	}
}

.integrations-split-right {
	background-color: #eee;
	min-height: 100vh;
	padding: 100px;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	color: #fff
}

@media screen and (max-width: 48em) {
	.integrations-split-right {
		height: auto;
		min-height: 400px;
		padding: 30px
	}
}

.integrations-split-right:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(51, 37, 126, .85)
}

.integrations-split-right .integrations-split-right-content {
	position: relative
}

.integrations-form-holder input,
.integrations-form-holder select {
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	background-color: #fff;
	border: 0;
	border-radius: 50px;
	padding: 10px;
	outline: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 2px solid #fff
}

.integrations-form-holder input:hover,
.integrations-form-holder select:hover {
	border: 2px solid #7246B1
}

.integration-avatar {
	width: 45px;
	height: 45px;
	background-size: cover;
	overflow: hidden;
	border-radius: 100px
}

.integration-avatar.md {
	width: 65px;
	height: 65px
}

.integration-avatar.simple-border {
	border: 1px solid #f2f2f2
}

.integrationWysiwig h3 {
	font-size: 16px;
	font-weight: 200;
	color: #999
}

.integrationWysiwig p {
	font-size: 14px;
	line-height: 18px
}

.integrationWysiwig ul {
	list-style: none
}

.integrationWysiwig ul li::before {
	content: "•";
	color: #7246B1;
	display: inline-block;
	width: 1em;
	margin-left: -1em
}

.simple-card {
	position: relative;
	padding: 20px;
	border: 1px solid #f2f2f2;
	border-radius: 4px;
	margin-bottom: 20px
}

.simple-card.fixed-230 {
	height: 230px;
	padding: 20px 20px 40px 20px
}

@media screen and (max-width: 48em) {
	.simple-card.fixed-230 {
		height: auto
	}
}

.simple-card.last {
	margin-bottom: 0
}

@media screen and (min-width: 75em) {
	.simple-card {
		margin-bottom: 0px
	}
}

.switch {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

.spinner {
	width: 47px;
	height: 47px;
	border-radius: 50%;
	border: 3px solid #e6e6e6;
	border-top: 3px solid #7246B1;
	-webkit-animation: rotate 950ms ease-in-out infinite;
	animation: rotate 950ms ease-in-out infinite
}

.spinner.xl {
	width: 60px;
	height: 60px
}

@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes rotate {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

.filter-block {
	background: #fff;
	border: 1px solid #e6e6e6;
	padding: 20px;
	margin-bottom: 30px;
	border-radius: 3px
}

.apiDocs .apiDocHeader {
	padding: 20px;
	margin-bottom: 20px;
	height: 70px
}

.apiDocs .apiDocsLeft {
	max-height: calc(100vh - 120px);
	overflow: auto
}

.apiDocs .apiDocsRight {
	max-height: calc(100vh - 120px);
	overflow: auto
}

.apiDocs ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px
}

.apiDocs li {
	padding-top: 5px;
	padding-bottom: 5px
}

.apiDocs .primaryCat {
	font-weight: bold;
	font-size: 16px
}

.apiDocs .secondaryCat {
	padding-left: 10px;
	font-weight: normal;
	font-size: 14px
}

.apiDocs .apiDocs-link-block {
	background-color: #e6e6e6;
	padding: 10px 20px 10px 20px;
	border-radius: 4px;
	margin-bottom: 30px
}

.apiDocs .apiDocs-table {
	margin-bottom: 30px;
	border-bottom: 0;
	display: block;
	width: 100%
}

.apiDocs .apiDocs-table td {
	border-bottom: 1px solid #d9d9d9;
	text-align: left;
	padding: 12px 12px 12px 0;
	vertical-align: middle
}

.apiDocs .apiDocs-required {
	font-size: 12px;
	color: #fff;
	background-color: #dd4124;
	border-radius: 100px;
	padding: 6px 10px;
	display: inline-block;
	position: relative;
	margin: 0 8px 10px 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.accordion-wrap {
	margin-bottom: 20px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 20px #f3f4f7;
	box-shadow: 0px 0px 20px #f3f4f7
}

.accordion-wrap.primary {
	border-bottom: 2px solid #7246B1
}

.accordion-wrap.secondary {
	border-bottom: 2px solid #33257e
}

.accordion-wrap .accordion {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	background-color: #fff;
	padding: 15px;
	border-radius: 4px
}

.accordion-wrap .accordion .name-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.accordion-wrap .accordion .name-wrap .name {
	margin-left: 10px;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 26px
}

.accordion-wrap .accordion .name-wrap .name p {
	margin: 0;
	color: #969ebb
}

.accordion-wrap .accordion .icon {
	color: #7246B1;
	cursor: pointer
}

.accordion-wrap .accordion.expanded {
	border-radius: 4px 4px 0 0
}

.accordion-wrap .accordion-expand {
	border-top: 1px solid #f3f4f7;
	background-color: #fff;
	text-align: left
}

.accordion-wrap .accordion-expand ul {
	margin: 0;
	padding: 0
}

.accordion-wrap .accordion-expand ul li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-item-align: center;
	align-self: center;
	margin: 0;
	padding: 0 15px;
	list-style: none
}

.accordion-wrap .accordion-expand ul li:first-child {
	padding-top: 15px
}

.accordion-wrap .accordion-expand ul li a {
	display: block;
	padding-bottom: 15px;
	margin-left: 10px;
	display: block;
	line-height: 28px
}

.activity-class {
	position: relative;
	margin-bottom: 0
}

.activity-class .paper-class {
	margin-bottom: 0
}

.activity-class .device-icon {
	position: absolute;
	top: 8px;
	right: 8px;
	color: #33257e
}

.activity-class .title {
	margin-bottom: 10px !important
}

.activity-class .title p {
	margin: 0
}

.activity-class .title p a {
	text-decoration: underline
}

.activity-class .log-time p {
	margin: 0;
	font-size: 14px;
	color: #b5bbcf
}

.activity-log-activator {
	position: relative;
	height: 30px;
	width: 2px;
	margin-left: 30px;
	background-color: #7246B1;
	z-index: 9999
}

.activity-log-activator:after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: -4px;
	width: 10px;
	height: 10px;
	border-radius: 100px;
	background-color: #7246B1
}

.avatarHolder {
	background-size: cover;
	border-radius: 100%;
	display: inline-block;
	position: relative;
	background-position: center
}

.avatarHolderInner {
	position: relative;
	padding-bottom: 100%
}

.avatarGroup .avatarHolder {
	height: 20px;
	width: 20px;
	margin-right: -5px
}

.button {

	border-radius: 20px;
	background: #000000;
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
	color: white;
	padding: 10px 20px;
	border: 0;

	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: -0.2px;

	cursor: pointer;
	outline: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	word-break: break-word;
}

@media screen and (max-width: 64em) {
	.button:not(.fixedwidth) {
		width: 100%
	}
}

.button.secondary {
	background-color: #33257e;
}

.button.secondary:hover:not([disabled]) {
	background-color: #231957;
}

.button.grey {
	background-color: #a9a9ad;
}

.button.grey:hover:not([disabled]) {
	background-color: #8f8f94;
}

.button.white {
	background-color: #fff;
	color: #33257e;
}

.button.white:hover:not([disabled]) {
	background-color: #fff;
}

.button.red {
	background-color: #dd4124;
}

.button.red:hover:not([disabled]) {
	background-color: #b2331c;
}

.button.opac {
	background: #7246B1;
	background: rgba(67, 183, 178, .5)
}

.button.button-xs {
	padding: 5px 10px;
	font-size: 11px
}

.button.button-sml {
	padding: 6px 15px;
	font-size: 12px
}

.button.button-sml span {
	margin-top: -3px
}

.button.button-md {
	padding: 10px 20px
}

.button.button-md.with-icon {
	position: relative;
	text-align: left;
	min-width: 80px;
	padding-right: 35px
}

.button.button-md.with-icon span {
	position: absolute;
	top: 13px !important;
	right: 15px
}

.button.full-width {
	width: 100%
}

.button.plus {
	position: relative;
	width: 37px;
	height: 37px;
	padding: 0
}

.button.plus span {
	position: absolute;
	top: 4px;
	left: 4px
}

.button.plus img {
	width: 16px
}

.button.plus-xs {
	position: relative;
	width: 23px;
	height: 23px;
	padding: 0
}

.button.plus-xs span {
	position: absolute;
	top: 1px;
	left: 2px
}

.button.plus-xs img {
	width: 11px
}

.button.with-icon {
	position: relative;
	text-align: left;
	min-width: 80px;
	padding-right: 35px
}

.button.with-icon span {
	position: absolute;
	top: 10px;
	right: 15px
}

.button.half-width {
	width: 50%
}

.button.outline {
	border: 2px solid #fff;
	background-color: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #fff;
	font-weight: 600
}

.button.outline:hover:not([disabled]) {
	background-color: #fff;
	color: #7246B1 !important;
	border: 2px solid #fff
}

.button.outline.primary {
	border: 2px solid #7246B1;
	color: #7246B1
}

.button.outline.primary:hover:not([disabled]) {
	background-color: #7246B1;
	color: #fff !important;
	border: 2px solid #7246B1
}

.button.outline.primary.with-icon span {
	color: #7246B1
}

.button.outline.primary.with-icon:hover span {
	color: #fff
}

.button.outline.secondary {
	border: 2px solid #33257e;
	color: #33257e
}

.button.outline.secondary:hover:not([disabled]) {
	background-color: #33257e;
	color: #fff !important;
	border: 2px solid #33257e
}

.button.outline.secondary.with-icon span {
	color: #33257e
}

.button.outline.secondary.with-icon:hover span {
	color: #fff
}

.button.outline.secondary-background:hover:not([disabled]) {
	color: #33257e !important;
	border: 2px solid #231957
}

.button.outline.orange {
	border: 2px solid #ff9425;
	color: #ff9425 !important
}

.button.outline.orange:hover:not([disabled]) {
	background-color: #ff9425;
	color: #fff !important;
	border: 2px solid #ff9425
}

.button.outline.red {
	border: 2px solid #dd4124;
	color: #dd4124 !important
}

.button.outline.red:hover:not([disabled]) {
	background-color: #dd4124;
	color: #fff !important;
	border: 2px solid #dd4124
}

.button.outline.grey {
	border: 2px solid #a9a9ad;
	color: #a9a9ad !important
}

.button.outline.grey:hover:not([disabled]) {
	background-color: #a9a9ad;
	color: #fff !important;
	border: 2px solid #a9a9ad
}

.button.outline.white {
	border: 2px solid #fff;
	color: #fff !important
}

.button.outline.white:hover:not([disabled]) {
	background-color: #fff;
	color: #7246B1 !important;
	border: 2px solid #fff
}

.button:disabled {
	opacity: .4;
	cursor: default
}

.button.min-width {
	min-width: 170px
}

@media screen and (max-width: 64em) {
	.button.min-width {
		min-width: 100%
	}
}

.button.min-width-xs {
	min-width: 170px
}

@media screen and (max-width: 30em) {
	.button.min-width-xs {
		min-width: 100%
	}
}

.btnList ul {
	margin: 0;
	padding: 0
}

.btnList ul li {
	list-style: none;
	display: inline-block;
	margin-left: 10px
}

.btnList ul li:first-child {
	margin-left: 0
}

.uiLib-cardHolder {
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 20px;
	text-align: center;
	border-radius: 4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-shadow: 0px 0px 30px #f3f4f7;
	box-shadow: 0px 0px 30px #f3f4f7
}

.uiLib-cardHolder .icon {
	height: 145px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 100px;
	color: #33257e
}

.uiLib-cardHolder .icon svg {
	width: 90px;
	height: 90px;
	color: #33257e
}

.uiLib-cardHolder .title {
	text-transform: uppercase;
	font-size: 13px;
	margin-bottom: 5px;
	color: #33257e;
	font-weight: 600
}

.uiLib-cardHolder .sub-title {
	font-size: 16px;
	font-weight: 200;
	color: #a9a9ad;
	margin-bottom: 40px
}

.uiLib-cardHolder .cta a {
	display: block
}

.checkbox {
	-webkit-appearance: none;
	border: 1px solid #d0d0d2;
	width: 20px;
	height: 20px;
	border-radius: 2px;
	cursor: pointer;
	outline: none;
	margin: 3px 3px -1px 0;
	vertical-align: bottom
}

.checkbox:checked {
	background-color: #7246B1;
	border: 1px solid #7246B1;
	outline: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-animation: pop-pulse .3s ease-in-out;
	animation: pop-pulse .3s ease-in-out
}

.checkbox:checked:after {
	content: url("/public/images/tick.svg")
}

.checkbox:checked.green {
	background-color: #7246B1;
	border: 1px solid #7246B1
}

.checkbox:checked.red {
	background-color: #dd4124;
	border: 1px solid #dd4124
}

.checkbox.disabled,
.checkbox:disabled {
	background-color: #d0d0d2;
	border: 1px solid #d0d0d2;
	cursor: not-allowed;
	content: url("/public/images/tick.svg")
}

.checkbox.disabled:checked,
.checkbox:disabled:checked {
	-webkit-animation: none;
	animation: none
}

.checkbox.disabled:checked:after,
.checkbox:disabled:checked:after {
	content: ""
}

.groupCheckbox {
	margin-bottom: 30px
}

.groupCheckbox input[type=checkbox] {
	margin-right: 10px
}

.groupCheckbox label {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-transform: uppercase;
	font-size: 13px
}

.checkboxFix {
	font-size: 0px !important
}

.chip {
	background-color: #d4d7e3;
	border-radius: 100px;
	padding: 8px 12px;
	display: inline-block;
	position: relative;
	margin: 0 8px 10px 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	min-width: 90px;
	text-align: center
}

.chip .name {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.chip .remove {
	padding: 3px;
	color: #fff;
	width: 20px;
	height: 20px;
	text-align: center;
	position: absolute;
	right: 6px;
	top: 6px;
	cursor: pointer
}

.chip .remove span {
	position: absolute;
	top: 3px;
	left: 3px;
	font-size: 12px
}

.chip.middle {
	margin: 0 8px 0 0
}

.chip.smallChip {
	padding: 4px 16px
}

.chip.smallChip .remove {
	width: 15px;
	height: 15px;
	font-size: 17px;
	top: 1px;
	right: 8px
}

.chip.xsmallChip {
	padding: 2px 4px
}

.chip.xsmallChip .name {
	font-size: 11px
}

.chip.xsmallChip .remove {
	width: 15px;
	height: 15px;
	font-size: 17px;
	top: 1px;
	right: 8px
}

.chip.red {
	background-color: #dd4124;
	color: #fff
}

.chip.red.smallChip {
	border: 2px solid #dd4124
}

.chip.red.outline {
	border: 2px solid #dd4124;
	background-color: transparent
}

.chip.red.outline .name {
	color: #dd4124
}

.chip.green {
	background-color: #319b90;
	color: #fff
}

.chip.green.smallChip {
	border: 2px solid #319b90
}

.chip.green.outline {
	border: 2px solid #319b90;
	background-color: transparent
}

.chip.green.outline .name {
	color: #319b90
}

.chip.yellow {
	background-color: #fedd00;
}

.chip.yellow .name {
	color: #000;
}

.chip.yellow.smallChip {
	border: 2px solid #fedd00;
}

.chip.yellow.outline {
	border: 2px solid #fedd00;
	background-color: transparent;
}

.chip.yellow.outline .name {
	color: #fedd00
}

.chip.grey {
	background-color: #a9a9ad;
	color: #fff
}

.chip.grey.smallChip {
	border: 2px solid #a9a9ad
}

.chip.grey.outline {
	border: 2px solid #a9a9ad;
	background-color: transparent
}

.chip.grey.outline .name {
	color: #a9a9ad
}

.chip.purple {
	background-color: #7943b7;
	color: #fff
}

.chip.purple.smallChip {
	border: 2px solid #7943b7
}

.chip.purple.outline {
	border: 2px solid #7943b7;
	background-color: transparent
}

.chip.purple.outline .name {
	color: #7943b7
}

.chip.blue {
	background-color: #0094d5;
	color: #fff
}

.chip.blue.smallChip {
	border: 2px solid #0094d5
}

.chip.blue.outline {
	border: 2px solid #0094d5;
	background-color: transparent
}

.chip.blue.outline .name {
	color: #0094d5
}

.chip.orange {
	background-color: #ff9425;
	color: #fff
}

.chip.orange.smallChip {
	border: 2px solid #ff9425
}

.chip.orange.outline {
	border: 2px solid #ff9425;
	background-color: transparent
}

.chip.orange.outline .name {
	color: #ff9425
}

.chip.black {
	background-color: #000;
	color: #fff
}

.chip.black.smallChip {
	border: 2px solid #000
}

.chip.black.outline {
	border: 2px solid #000;
	background-color: transparent
}

.chip.black.outline .name {
	color: #000
}

.chip.primary {
	background-color: #7246B1 !important;
	color: #fff !important
}

.chip.primary.hover-red:hover {
	background-color: #33257e !important
}

.chip.primary.outline {
	border: 2px solid #7246B1;
	background-color: transparent !important
}

.chip.primary.outline .name {
	color: #7246B1 !important
}

.chip.secondary {
	background-color: #33257e !important;
	color: #fff !important
}

.chip.secondary.outline {
	border: 2px solid #33257e;
	background-color: transparent !important
}

.chip.secondary.outline .name {
	color: #33257e
}

.chip.clickable {
	cursor: pointer
}

.ui-chip {
	background-color: #8f8f94;
	display: inline-block;
	padding: 5px;
	border-radius: 5px;
	margin-right: 5px;
	margin-bottom: 5px
}

.ui-square-chip {
	display: inline-block;
	padding: 5px 8px;
	border-radius: 4px;
	margin-right: 5px;
	margin-bottom: 5px;
	background-color: #fff
}

.ui-square-chip.small {
	font-size: 13px
}

.ui-square-chip.red {
	background-color: #dd4124 !important;
	color: #fff !important
}

.ui-square-chip.green {
	background-color: #7246B1 !important;
	color: #fff !important
}

.ui-square-chip.yellow {
	background-color: #fedd00 !important;
	color: #000 !important
}

.ui-square-chip.grey {
	background-color: #a9a9ad !important;
	color: #fff
}

.ui-square-chip.purple {
	background-color: #7943b7 !important;
	color: #fff !important
}

.ui-square-chip.blue {
	background-color: #0094d5 !important;
	color: #fff !important
}

.ui-square-chip.black {
	background-color: #000 !important;
	color: #fff !important
}

.ui-square-chip.primary {
	background-color: #7246B1 !important;
	color: #fff !important
}

.ui-square-chip.secondary {
	background-color: #33257e !important;
	color: #fff !important
}

.ui-circular-chip {
	border: 1px solid #a9a9ad;
	color: #a9a9ad;
	border-radius: 100px;
	padding: 10px;
	cursor: pointer
}

.ui-circular-chip:hover {
	border: 1px solid #7246B1 !important;
	color: #7246B1 !important
}

.ui-circular-chip.primary {
	border: 1px solid #7246B1 !important;
	color: #7246B1 !important
}

.ui-circular-chip.secondary {
	border: 1px solid #33257e !important;
	color: #33257e !important
}

.ui-circular-chip.red {
	border: 1px solid #dd4124 !important;
	color: #dd4124 !important
}

.ui-mini-chip {
	position: absolute;
	top: -15px;
	height: 10px;
	width: 10px
}

.ui-mini-chip span {
	border-radius: 50%;
	background-color: #7246B1;
	color: #fff;
	padding: 4px 10px;
	text-align: center;
	font-size: 12px
}

.avatar-cross {
	position: relative;
	margin-right: 5px
}

.avatar-cross img {
	z-index: 0;
	border-radius: 100%
}

.avatar-cross .application {
	z-index: 1;
	width: 20px;
	height: 20px;
	position: absolute;
	right: 25px;
	bottom: -5px
}

.avatar-cross .remove {
	z-index: 1;
	padding: 3px;
	color: #7246B1;
	font-weight: bold;
	border-radius: 100%;
	padding: 2px;
	background-color: #fff;
	width: 20px;
	height: 20px;
	text-align: center;
	position: absolute;
	right: -5px;
	top: -5px;
	cursor: pointer
}

.CircularProgress {
	-webkit-filter: drop-shadow(0 0 20px #e3e5ed);
	filter: drop-shadow(0 0 20px #e3e5ed)
}

.CircularProgress-Fg {
	fill: transparent
}

.CircularProgress-Fg {
	-webkit-transition: stroke-dashoffset .8s ease-in-out;
	transition: stroke-dashoffset .8s ease-in-out
}

.CircularProgress-Fg.secondary {
	fill: #33257e
}

.title {
	font-size: 20px;
	color: #000000;
	font-weight: 600;
}

.result {
	font-size: 44px;
	fill: #7246B1;
	margin-bottom: 5px;
	font-weight: 500;
	line-height: 46px;
	margin-bottom: 10px
}

.result.secondary {
	fill: #dd4124
}

.total {
	font-size: 14px;
	fill: #969ebb;
	margin-bottom: 5px;
	font-weight: 300
}

.circularHover {
	cursor: pointer
}

.circularHover:hover {
	-webkit-filter: drop-shadow(0 0 20px #e3e5ed);
	filter: drop-shadow(0 0 20px #e3e5ed)
}

.rowDeleting {
	-webkit-transition-duration: 2000ms;
	transition-duration: 2000ms;
	-webkit-transform: scale(0, 0);
	transform: scale(0, 0);
	background-color: red
}

.table-filters ul {
	margin: 0;
	padding: 0
}

@media screen and (max-width: 64em) {
	.table-filters ul {
		width: 100%
	}
}

.table-filters ul li {
	display: inline-block;
	margin-left: 10px
}

.table-filters ul li:first-child {
	margin-left: 0
}

@media screen and (max-width: 64em) {
	.table-filters ul li {
		width: 100%;
		margin-bottom: 15px;
		margin-left: 0
	}
}

@media screen and (max-width: 64em) {
	.table-filters ul li .button {
		width: 100%
	}
}

.tableHolder {
	width: 100%;
	overflow: auto;
	position: initial !important
}

.tableHolder .table-edit {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.tableHolder .table-edit span {
	float: right
}

.tableHolder .table-input {
	background: #f2f2f2 !important;
	display: block;
	width: 100%;
	padding: 9px 16px 9px 8px;
	border: 1px solid #f2f2f2;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 3px;
	margin-bottom: 5px;
	font-size: 14px;
	outline-width: 0
}

.table-cont2 {
	background-color: #fff;
	border-radius: 4px;
	width: 100%
}

.table-cont2 th {
	color: #7246B1;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 700;
	text-align: left;
	padding-right: 20px;
	padding-bottom: 15px;
	white-space: nowrap
}

.table-cont2 tbody tr td {
	font-size: 14px;
	color: #a9a9ad;
	padding: 10px 0;
	padding-right: 20px;
	height: 30px;
	white-space: nowrap
}

.table-cont2 tbody tr td a.email {
	font-size: 14px;
	color: #7246B1
}

.table-cont2 tbody tr.bg-green {
	background-color: #8bd5d1
}

.table-cont2 tbody tr.bg-green td {
	color: #fff
}

.table-cont2 tbody tr.bg-grey {
	background-color: #dddddf
}

.table-cont2 tbody tr.bg-grey td {
	color: #000
}

.table-cont2 tbody tr.deleting {
	-webkit-animation-name: pulseRow;
	animation-name: pulseRow;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

.table-cont2 tbody tr.deleting td {
	-webkit-animation-name: pulseTd;
	animation-name: pulseTd;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

@-webkit-keyframes pulseRow {
	0% {
		background-color: #f2f2f3;
		color: #a9a9ad !important
	}

	50% {
		background-color: #dd4124;
		color: #fff !important
	}

	100% {
		background-color: #f2f2f3;
		color: #a9a9ad !important
	}
}

@keyframes pulseRow {
	0% {
		background-color: #f2f2f3;
		color: #a9a9ad !important
	}

	50% {
		background-color: #dd4124;
		color: #fff !important
	}

	100% {
		background-color: #f2f2f3;
		color: #a9a9ad !important
	}
}

@-webkit-keyframes pulseTd {
	0% {
		color: #a9a9ad
	}

	50% {
		color: #fff
	}

	100% {
		color: #a9a9ad
	}
}

@keyframes pulseTd {
	0% {
		color: #a9a9ad
	}

	50% {
		color: #fff
	}

	100% {
		color: #a9a9ad
	}
}

.table-cont2.with-lines td,
.table-cont2.with-lines th {
	border-bottom: 1px solid #e3e5ed
}

.table-cont2 .blankCellPadder {
	width: 100%;
	height: 10px;
	background-color: #eee;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

.table-cont2 .tdFixedCol {
	height: 70px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: top;
	padding: 0px
}

.table-cont2 .fixedCol {
	vertical-align: middle;
	right: -2px;
	height: 69px;
	background-color: #fff;
	position: absolute;
	text-align: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-left: 2px solid #f3f4f7
}

.table-cont2 .fixedCol .table-icon {
	padding: 0 10px
}

.table1Paging {
	margin: 20px 0 45px 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.pagingLnk {
	display: inline-block;
	padding: 0 10px;
	cursor: pointer;
	color: #a9a9ad
}

.pagingLnk:hover {
	color: #7246B1
}

.pagingLnk.pagingLnkSelected {
	font-weight: 600;
	color: #7246B1
}

ul.pagingList {
	margin: 0;
	padding: 0
}

ul.pagingList li {
	list-style: none;
	display: inline-block;
	margin-left: 15px
}

ul.pagingList li:first-child {
	margin-left: 0
}

ul.pagingList li a {
	text-decoration: none;
	color: #999;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	font-weight: 400;
	font-size: 14px
}

ul.pagingList li a:hover,
ul.pagingList li a.selected {
	color: #7246B1;
	font-weight: 600
}

ul.pagingList .disabled-icon {
	cursor: default;
	color: #999;
	opacity: .4
}

ul.pagingList .disabled-icon:hover {
	color: #999;
	font-weight: 400;
	opacity: .4
}

.header-label {
	cursor: pointer
}

.sortActive {
	font-weight: bold
}

.headerIcon {
	margin-top: -1px;
	margin-left: 10px;
	width: 13px
}

.headerIconDown {
	-webkit-animation-name: spinDown;
	animation-name: spinDown;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-play-state: running;
	animation-play-state: running
}

.headerIconUp {
	-webkit-animation-name: spinUp;
	animation-name: spinUp;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-play-state: running;
	animation-play-state: running
}

.divider {
	background-color: #969ebb;
	height: 1px;
	margin: 0;
	border: none;
	-ms-flex-negative: 0;
	flex-shrink: 0
}

.divider.light {
	background-color: #e3e5ed
}

.uiDrawer {
	position: fixed;
	top: 0px;
	right: 0px;
	width: 300px;
	height: 100%;
	overflow: auto;
	padding: 25px;
	background-color: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transform: translateX(110%);
	transform: translateX(110%);
	z-index: 999999;
	overflow-x: hidden;
	border-left: 1px solid #e6e6e6
}

@media only screen and (max-width: 48em) {
	.uiDrawer {
		width: 100vw !important;
		left: 0 !important;
		-webkit-box-sizing: border-box !important;
		box-sizing: border-box !important
	}
}

.uiDrawer.fix-height {
	overflow-y: hidden
}

.uiDrawer .exit {
	margin-bottom: 20px;
	cursor: pointer
}

.uiDrawer.full {
	left: 0;
	height: 100vh;
	width: 100vw;
	padding: 60px
}

@media screen and (max-width: 64em) {
	.uiDrawer.full {
		padding: 30px
	}
}

.uiDrawer.full.center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.uiDrawer.full.center>.uiDrawerInner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

@media screen and (max-width: 64em) {
	.uiDrawer.full.center>.uiDrawerInner {
		display: block
	}
}

.uiDrawer.full>.exit {
	position: absolute;
	top: 60px;
	right: 60px;
	z-index: 1
}

@media screen and (max-width: 64em) {
	.uiDrawer.full>.exit {
		position: fixed;
		right: 25px;
		top: 25px
	}
}

@media screen and (max-width: 48em) {
	.uiDrawer.full>.exit {
		top: 25px
	}
}

.uiDrawer.full>.exit span {
	font-size: 20px
}

.uiDrawer.full .uiDrawerInner {
	height: 100%
}

.uiDrawer.secondary {
	background: #33257e;
	background: rgba(51, 37, 126, .9);
	color: #fff;
	-webkit-box-shadow: none;
	box-shadow: none
}

.uiDrawer.secondary.exit {
	color: #fff
}

.uiDrawer.secondary.exit:hover {
	color: #e6e6e6
}

.uiDrawer.left {
	left: 0;
	right: auto;
	-webkit-box-shadow: 8px 0px 30px #e3e5ed;
	box-shadow: 8px 0px 30px #e3e5ed
}

.uiDrawer .back {
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.uiDrawer .back span {
	font-size: 17px;
	margin-right: 8px;
	color: #8690b2
}

.uiDrawer .back p {
	color: #969ebb
}

.uiDrawer h1 {
	margin-top: 0;
	font-weight: 200;
	color: #7246B1
}

.uiDrawer h2 {
	margin-top: 0;
	font-weight: 200;
	color: #7246B1
}

.uiDrawer h4 {
	margin-top: 0;
	font-weight: 500;
	color: #999;
	line-height: 26px
}

.uiDrawer h5 {
	margin-top: 0;
	color: #999
}

.uiDrawer p {
	color: #999;
	font-size: 14px
}

.uiDrawer ul.list {
	margin: 0;
	padding: 0
}

.uiDrawer ul.list li {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	list-style: none;
	margin-bottom: 15px;
	cursor: pointer
}

.uiDrawer ul.list li p {
	color: #33257e;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0
}

.uiDrawer ul.list.avatar .avatar {
	width: 45px;
	height: 45px;
	border-radius: 100px;
	overflow: hidden;
	margin-right: 15px;
	-webkit-box-shadow: 0px 0px 10px #d4d7e3;
	box-shadow: 0px 0px 10px #d4d7e3
}

.uiDrawer ul.list.avatar .avatar img {
	width: 100%
}

.uiDrawer ul.list.with-lines li {
	margin-bottom: 0;
	padding: 15px 0;
	border-bottom: 1px solid #f3f4f7
}

.uiDrawer ul.list.with-lines li.disabled {
	background-color: #f3f4f7;
	left: -25px;
	right: 25px;
	padding-left: 25px;
	margin-right: -50px;
	cursor: not-allowed
}

.uiDrawer ul.list.with-arrow li .arrow {
	position: absolute;
	right: 0
}

.uiDrawer ul.list.with-arrow li .arrow span {
	font-size: 14px;
	color: #969ebb;
	color: #33257e
}

.uiDrawer ul.list.with-notification .notify {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	background-color: #7246B1;
	border-radius: 100px;
	margin-right: 10px;
	-webkit-box-shadow: 0px 0px 10px #d4d7e3;
	box-shadow: 0px 0px 10px #d4d7e3
}

.uiDrawer ul.list.with-notification .notify span {
	color: #fff;
	font-size: 13px
}

.uiDrawer.slideIn {
	-webkit-animation: slide-in .46s forwards;
	animation: slide-in .46s forwards
}

.uiDrawer.slideOut {
	-webkit-animation: slide-out .46s forwards;
	animation: slide-out .46s forwards
}

@-webkit-keyframes slide-in {
	100% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%)
	}
}

@keyframes slide-in {
	100% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%)
	}
}

@-webkit-keyframes slide-out {
	0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%)
	}

	100% {
		-webkit-transform: translateX(110%);
		transform: translateX(110%)
	}
}

@keyframes slide-out {
	0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%)
	}

	100% {
		-webkit-transform: translateX(110%);
		transform: translateX(110%)
	}
}

.uiDrawer .carousel {
	position: absolute;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.uiDrawer .segments {
	width: 100%
}

.uiDrawer .segments .eachSegment {
	margin: 0 auto;
	width: 540px
}

@media screen and (max-width: 64em) {
	.uiDrawer .segments .eachSegment {
		width: 340px
	}
}

.uiDrawer .segments .eachSegment .stepTitle {
	text-align: center;
	margin-bottom: 45px
}

@media only screen and (max-width: 48em) {
	.uiDrawer .segments .eachSegment .stepTitle {
		margin-bottom: 20px
	}
}

.uiDrawer .segments .eachSegment .stepTitle p {
	color: #fff;
	font-size: 18px;
	font-weight: 200
}

@media only screen and (max-width: 48em) {
	.uiDrawer .segments .eachSegment .stepTitle p {
		font-size: 16px
	}
}

.uiDrawer .segments .eachSegment .stepTitle span {
	color: #7246B1;
	font-weight: 500
}

.uiDrawer .segments .eachSegment .stepSubtext p {
	text-transform: uppercase;
	font-size: 12px
}

.uiDrawer .segments .eachSegment .stepInput {
	margin-bottom: 60px
}

@media only screen and (max-width: 48em) {
	.uiDrawer .segments .eachSegment .stepInput {
		margin-bottom: 30px
	}
}

@media only screen and (max-width: 48em) {
	.uiDrawer .segments .eachSegment .stepInput .form-group {
		margin-bottom: 30px
	}
}

.uiDrawer .segments .eachSegment .stepList {
	margin-bottom: 60px
}

.uiDrawer .segments .eachSegment .stepList .listItem {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
	margin-bottom: 10px
}

.uiDrawer .segments .eachSegment .stepList .listItem p {
	font-size: 18px;
	color: #fff
}

@media only screen and (max-width: 64em) {
	.uiDrawer .segments .eachSegment .stepList .listItem p {
		width: 80%;
		padding-right: 10px
	}
}

.uiDrawer .segments .eachSegment .stepList .listItem ul {
	margin: 0;
	padding: 0
}

@media only screen and (max-width: 64em) {
	.uiDrawer .segments .eachSegment .stepList .listItem ul {
		width: 20%
	}
}

.uiDrawer .segments .eachSegment .stepList .listItem ul li {
	list-style: none;
	display: inline-block;
	cursor: pointer
}

.uiDrawer .segments .eachSegment .stepList .listItem ul li:first-child {
	margin-right: 14px
}

.uiDrawer .segments .eachSegment .stepBtn {
	text-align: center
}

.uiDrawer .segments .eachSegment .stepBtn ul {
	margin: 0;
	padding: 0
}

.uiDrawer .segments .eachSegment .stepBtn ul li {
	list-style: none;
	display: inline-block
}

@media only screen and (max-width: 48em) {
	.uiDrawer .segments .eachSegment .stepBtn ul li {
		width: 100%;
		margin-bottom: 10px
	}

	.uiDrawer .segments .eachSegment .stepBtn ul li:last-child {
		margin-bottom: 0
	}
}

@media only screen and (max-width: 48em) {
	.uiDrawer .segments .eachSegment .stepBtn ul li button {
		width: 100%;
		padding: 12px 8px
	}
}

.uiDrawer .segments .eachSegment .stepBtn ul li:first-child {
	margin-right: 8px
}

.uiDrawer .segments .eachSegment .stepToggle {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.uiDrawer .segments .eachSegment .stepToggle p {
	margin: 0;
	color: #fff;
	font-size: 28px;
	font-weight: 200
}

@media only screen and (max-width: 48em) {
	.uiDrawer .segments .eachSegment .stepToggle p {
		font-size: 16px
	}
}

.uiDrawerLink {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	position: relative;
	padding: 0 30px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	width: 100%
}

.uiDrawerLink:hover {
	background-color: #33257e
}

.uiDrawerLink span.notification {
	display: inline-block;
	margin-left: 10px;
	width: 24px;
	height: 24px;
	padding-top: 3px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #fff;
	color: #33257e;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 400;
	text-align: center;
	-webkit-box-shadow: 0px 0px 8px #5c678f;
	box-shadow: 0px 0px 8px #5c678f
}

.topnav-dropdown {
	text-align: left;
	z-index: 1000;
	position: absolute;
	top: 8px;
	right: 0;
	background-color: #fff;
	border: 0;
	min-width: 200px;
	max-height: 50vh;
	overflow: auto;
	padding: 10px 20px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 30px #999;
	box-shadow: 0px 0px 30px #999;
	-webkit-animation-name: pop;
	animation-name: pop;
	-webkit-animation-duration: .1s;
	animation-duration: .1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
	-webkit-animation-fill-mode: none;
	animation-fill-mode: none;
	-webkit-animation-play-state: running;
	animation-play-state: running
}

.topnav-dropdown.fixedHeight {
	max-height: 240px
}

.topnav-dropdown.left {
	left: -250px;
	top: 0
}

.topnav-dropdown.left-middle {
	left: -130px;
	top: -43px;
	padding: 10px;
	width: 100px
}

.topnav-dropdown.top {
	bottom: 45px;
	top: auto
}

.topnav-dropdown.right {
	right: -250px;
	top: -60
}

.topnav-dropdown.bottom {
	left: 0;
	top: 5px
}

@media screen and (max-width: 64em) {
	.topnav-dropdown.mobile-left {
		right: 45px;
		top: auto
	}
}

@media screen and (max-width: 64em) {
	.topnav-dropdown.mobile-top {
		bottom: 45px;
		top: auto
	}
}

@media screen and (max-width: 64em) {
	.topnav-dropdown.mobile-right {
		left: 45px;
		top: auto
	}
}

.topnav-dropdown.notification {
	width: 380px
}

@media screen and (max-width: 64em) {
	.topnav-dropdown.notification {
		width: 220px
	}
}

.topnav-dropdown.notification p {
	color: #999;
	font-size: 12px;
	margin: 0
}

.topnav-dropdown.notification p span {
	color: #7246B1
}

.topnav-dropdown.notification ul {
	margin: 0;
	padding: 0
}

.topnav-dropdown.notification ul li {
	display: block;
	margin: 0;
	padding-bottom: 15px;
	border-bottom: 1px solid #f3f4f7
}

.topnav-dropdown.notification ul li:last-child {
	border-bottom: 0
}

.topnav-dropdown.notification ul li .headline {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.topnav-dropdown.notification ul li .headline p {
	color: #7246B1;
	font-size: 14px;
	font-weight: 600;
	margin-top: 15px
}

.topnav-dropdown.notification ul li .headline p.date {
	text-transform: uppercase;
	color: #33257e;
	font-size: 12px;
	line-height: 18px
}

.topnav-dropdown.notification ul li .message p {
	font-size: 16px;
	margin-top: 10px
}

.topnav-dropdown.notification ul li .message p a {
	display: inline-block;
	color: #7246B1;
	text-decoration: none;
	padding: 0;
	border-bottom: 1px solid #7246B1
}

.topnav-dropdown.notification ul li .message p a:hover {
	color: #35928e
}

.topnav-dropdown ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block !important
}

.topnav-dropdown ul li {
	height: auto !important;
	display: block;
	margin-left: 0
}

.topnav-dropdown ul li a {
	display: block;
	padding: 8px 0;
	font-size: 14px;
	color: #999;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.topnav-dropdown ul li a.selected {
	color: #7246B1
}

.topnav-dropdown ul li a:hover {
	color: #7246B1
}

.topnav-dropdown ul li a.secondary.selected {
	color: #33257e
}

.topnav-dropdown ul li a.secondary:hover {
	color: #33257e
}

.errorHolderWarning {
	margin: 8px 0;
	color: #dd4124;
	font-size: 12px
}

.errorHolderWarning span {
	margin-right: 6px
}

.warningHolderWarning {
	margin: 8px 0;
	color: #7943b7;
	font-size: 12px
}

.warningHolderWarning span {
	margin-right: 6px
}

.col-margin-bottom {
	margin-bottom: 20px
}

@media only screen and (min-width: 30em) {
	.col-xs-0 {
		-ms-flex-preferred-size: auto;
		flex-basis: auto;
		max-width: 0
	}
}

@media only screen and (min-width: 48em) {
	.col-sm-0 {
		-ms-flex-preferred-size: auto;
		flex-basis: auto;
		max-width: 0
	}
}

@media only screen and (min-width: 64em) {
	.col-md-0 {
		-ms-flex-preferred-size: auto;
		flex-basis: auto;
		max-width: 0
	}
}

@media only screen and (min-width: 75em) {
	.col-lg-0 {
		-ms-flex-preferred-size: auto;
		flex-basis: auto;
		max-width: 0
	}
}

.load-bar {
	position: relative;
	width: calc(100% - 16px);
	height: 6px;
	background-color: #e6e6e6;
	border-radius: 100px;
	margin: 0 auto
}

.bar {
	content: "";
	display: inline-block;
	position: absolute;
	width: 0;
	height: 100%;
	left: 50%;
	text-align: center;
	border-radius: 100px
}

.bar:nth-child(1) {
	background-color: #7246B1;
	-webkit-animation: loading 3s linear infinite;
	animation: loading 3s linear infinite
}

.bar:nth-child(2) {
	background-color: #33257e;
	-webkit-animation: loading 3s linear 1.5s infinite;
	animation: loading 3s linear 1.5s infinite
}

@-webkit-keyframes loading {
	from {
		left: 50%;
		width: 0;
		z-index: 100
	}

	33.3333% {
		left: 0;
		width: 100%;
		z-index: 10
	}

	to {
		left: 0;
		width: 100%
	}
}

@keyframes loading {
	from {
		left: 50%;
		width: 0;
		z-index: 100
	}

	33.3333% {
		left: 0;
		width: 100%;
		z-index: 10
	}

	to {
		left: 0;
		width: 100%
	}
}

.loadingIcon {
	margin: 0 auto;
	display: block;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%)
}

.mobileButtonHolder {
	background-color: #fff;
	padding: 15px;
	-webkit-box-shadow: 0px 0px 2px 1px #e8e8e8;
	box-shadow: 0px 0px 2px 1px #e8e8e8;
	margin-bottom: 20px
}

.mobileButtonHolder:after {
	content: "";
	display: table;
	clear: both
}

.Collapse-Items {
	list-style: none
}

.modalBackgroundHolder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-Index: 99998;
	background: rgba(0, 0, 0, .3)
}

.modalWindowHolder {
	opacity: 1;
	z-index: 99999;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 300px;
	background-color: #fff;
	padding: 20px;
	-webkit-box-shadow: 5px 5px 15px #666;
	box-shadow: 5px 5px 15px #666;
	border: 4px solid #7246B1;
	border-radius: 5px
}

.radio-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.radio-container:hover input~.checkmark {
	background-color: #a9a9ad
}

.radio-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer
}

.radio-container input:checked~.checkmark {
	background-color: #7246B1
}

.radio-container input:checked~.checkmark:after {
	display: block
}

.radio-container .checkmark {
	height: 21px;
	width: 21px;
	background-color: #dddddf;
	border-radius: 50%
}

.radio-container .checkmark:after {
	content: "";
	position: relative;
	display: none;
	top: 7px;
	left: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff
}

.radio-container.disabled:hover input~.checkmark {
	background-color: #dddddf
}

.radio-container.secondary-light input:checked~.checkmark {
	background-color: #4331a5
}

.radio-container.secondary input:checked~.checkmark {
	background-color: #33257e
}

.radio-container.primary-light input:checked~.checkmark {
	background-color: #66c7c3
}

.radio-container.primary input:checked~.checkmark {
	background-color: #7246B1
}

.paper-class {
	margin-bottom: 30px;
	padding: 32px;
	position: relative;
	background-color: #fff;
	border-radius: 12px;
}

.paper-class.dashHeight {
	height: 230px
}

.paper-class.dashHeight.alt {
	height: 160px
}

@media screen and (max-width: 64em) {
	.paper-class.dashHeight {
		height: auto
	}
}

.paper-class.dashHeight.medium {
	height: 300px
}

@media screen and (max-width: 64em) {
	.paper-class.dashHeight.medium {
		height: auto
	}
}

.paper-class.dashHeight.large {
	height: 420px
}

@media screen and (max-width: 64em) {
	.paper-class.dashHeight.large {
		height: auto
	}
}

.paper-class.center-content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.paper-class.center-content.equal {
	-webkit-box-pack: space-evenly;
	-ms-flex-pack: space-evenly;
	justify-content: space-evenly
}

.paper-class.primary {
	background-color: #7246B1;
	color: #fff
}

.paper-class.primary .title {
	color: #fff
}

.paper-class.primary .form-group label {
	color: #fff
}

.paper-class.primary .form-group input,
.paper-class.primary .form-group select,
.paper-class.primary .form-group textarea {
	background: transparent;
	border-bottom: 1px solid #2e7f7c;
	color: #fff
}

.paper-class.primary .form-group input::-webkit-input-placeholder,
.paper-class.primary .form-group select::-webkit-input-placeholder,
.paper-class.primary .form-group textarea::-webkit-input-placeholder {
	color: #2e7f7c
}

.paper-class.primary .form-group input::-moz-placeholder,
.paper-class.primary .form-group select::-moz-placeholder,
.paper-class.primary .form-group textarea::-moz-placeholder {
	color: #2e7f7c
}

.paper-class.primary .form-group input:-ms-input-placeholder,
.paper-class.primary .form-group select:-ms-input-placeholder,
.paper-class.primary .form-group textarea:-ms-input-placeholder {
	color: #2e7f7c
}

.paper-class.primary .form-group input::-ms-input-placeholder,
.paper-class.primary .form-group select::-ms-input-placeholder,
.paper-class.primary .form-group textarea::-ms-input-placeholder {
	color: #2e7f7c
}

.paper-class.primary .form-group input::placeholder,
.paper-class.primary .form-group select::placeholder,
.paper-class.primary .form-group textarea::placeholder {
	color: #2e7f7c
}

.paper-class.primary .form-group input:focus,
.paper-class.primary .form-group select:focus,
.paper-class.primary .form-group textarea:focus {
	outline: 0;
	border-bottom: 1px solid #fff
}

.paper-class.primary .form-group input option,
.paper-class.primary .form-group select option,
.paper-class.primary .form-group textarea option {
	color: #7246B1
}

.paper-class.primary .form-group .explainer {
	color: #d9d9d9
}

.paper-class.secondary {
	background-color: #33257e;
	color: #fff
}

.paper-class.secondary .title {
	color: #fff
}

.paper-class.secondary .form-group label {
	color: #fff
}

.paper-class.secondary .form-group input,
.paper-class.secondary .form-group select,
.paper-class.secondary .form-group textarea {
	background: transparent;
	border-bottom: 1px solid #9d90df;
	color: #fff
}

.paper-class.secondary .form-group input::-webkit-input-placeholder,
.paper-class.secondary .form-group select::-webkit-input-placeholder,
.paper-class.secondary .form-group textarea::-webkit-input-placeholder {
	color: #9d90df
}

.paper-class.secondary .form-group input::-moz-placeholder,
.paper-class.secondary .form-group select::-moz-placeholder,
.paper-class.secondary .form-group textarea::-moz-placeholder {
	color: #9d90df
}

.paper-class.secondary .form-group input:-ms-input-placeholder,
.paper-class.secondary .form-group select:-ms-input-placeholder,
.paper-class.secondary .form-group textarea:-ms-input-placeholder {
	color: #9d90df
}

.paper-class.secondary .form-group input::-ms-input-placeholder,
.paper-class.secondary .form-group select::-ms-input-placeholder,
.paper-class.secondary .form-group textarea::-ms-input-placeholder {
	color: #9d90df
}

.paper-class.secondary .form-group input::placeholder,
.paper-class.secondary .form-group select::placeholder,
.paper-class.secondary .form-group textarea::placeholder {
	color: #9d90df
}

.paper-class.secondary .form-group input:focus,
.paper-class.secondary .form-group select:focus,
.paper-class.secondary .form-group textarea:focus {
	outline: 0;
	border-bottom: 1px solid #fff
}

.paper-class.secondary .form-group input option,
.paper-class.secondary .form-group select option,
.paper-class.secondary .form-group textarea option {
	color: #7246B1
}

.paper-class.secondary .form-group .checkbox:checked.green {
	background-color: #7246B1;
	border: 1px solid #7246B1
}

.paper-class.secondary .form-group .explainer {
	color: #d9d9d9
}

.paper-class.secondary p {
	color: #fff;
	font-weight: 600
}

.paper-class.negative {
	background-color: #dd4124;
	color: #fff
}

.paper-class.negative .title {
	color: #fff
}

.paper-class.negative .form-group label {
	color: #fff
}

.paper-class.negative .form-group input,
.paper-class.negative .form-group select,
.paper-class.negative .form-group textarea {
	background: transparent;
	border-bottom: 1px solid #9d90df;
	color: #fff;
	border-radius: 0px
}

.paper-class.negative .form-group input::-webkit-input-placeholder,
.paper-class.negative .form-group select::-webkit-input-placeholder,
.paper-class.negative .form-group textarea::-webkit-input-placeholder {
	color: #9d90df
}

.paper-class.negative .form-group input::-moz-placeholder,
.paper-class.negative .form-group select::-moz-placeholder,
.paper-class.negative .form-group textarea::-moz-placeholder {
	color: #9d90df
}

.paper-class.negative .form-group input:-ms-input-placeholder,
.paper-class.negative .form-group select:-ms-input-placeholder,
.paper-class.negative .form-group textarea:-ms-input-placeholder {
	color: #9d90df
}

.paper-class.negative .form-group input::-ms-input-placeholder,
.paper-class.negative .form-group select::-ms-input-placeholder,
.paper-class.negative .form-group textarea::-ms-input-placeholder {
	color: #9d90df
}

.paper-class.negative .form-group input::placeholder,
.paper-class.negative .form-group select::placeholder,
.paper-class.negative .form-group textarea::placeholder {
	color: #9d90df
}

.paper-class.negative .form-group input:focus,
.paper-class.negative .form-group select:focus,
.paper-class.negative .form-group textarea:focus {
	outline: 0;
	border-bottom: 1px solid #fff
}

.paper-class.negative.gradient {
	background: -webkit-gradient(linear, left top, left bottom, from(#7246B1), to(#33257E));
	background: linear-gradient(#7246B1, #33257E)
}

.paper-class.negative.gradientRed {
	background: -webkit-gradient(linear, left top, left bottom, from(#DD4124), to(#33257E));
	background: linear-gradient(#DD4124, #33257E)
}

.paper-class .title {
	margin: 0;
	margin-bottom: 15px;
}

.paper-class .normalText {
	font-size: 14px
}

.paper-class.box {
	min-height: 200px;
	min-width: 200px
}

.paper-class.box .title {
	font-size: 40px
}

.paper-class.box .subtitle {
	font-size: 24px
}

.paper-class.box .normalText {
	font-size: 14px
}

.paper-class.height100 {
	height: 100%;
	margin-bottom: 0
}

.showOnMouseover {
	text-align: center;
	margin-bottom: 30px;
	display: none;
	z-index: 1;
	width: inherit;
	position: absolute
}

.showOnMouseover.show {
	display: block;
	height: 175px;
	background-color: rgba(255, 255, 255, .9)
}

.showOnMouseover div {
	margin-top: 20px
}

.showOnMouseover div span {
	margin: 0 10px
}

.paper-overlay {
	position: absolute;
	background: #fff;
	background: rgba(255, 255, 255, .75);
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 1;
	border-radius: 4px
}

.select1 {
	display: block;
	width: 100%;
	padding: 9px 16px;
	border: 1px solid #fff;
	-webkit-box-shadow: 0px 0px 15px #d4d7e3;
	box-shadow: 0px 0px 15px #d4d7e3;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 100px;
	margin-bottom: 5px;
	font-size: 14px;
	outline-width: 0;
	color: #7246B1;
	-webkit-transition: all .2s ease;
	transition: all .2s ease
}

.select1:active,
.select1:focus {
	border: 1px solid #7246B1
}

.select1.invalid {
	border: 1px solid #dd4124
}

.select1::-webkit-input-placeholder {
	color: #7246B1
}

.select1Wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}

.siteLogo {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	color: #b3b3b3;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.siteLogo span {
	margin-left: 8px;
	font-size: 10px
}

.staff-card {
	position: relative;
	background-color: #fff;
	border-radius: 4px;
	padding: 30px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
	-webkit-box-shadow: 0px 0px 10px #d4d7e3;
	box-shadow: 0px 0px 10px #d4d7e3
}

.staff-card.primary {
	border-bottom: 2px solid #7246B1
}

.staff-card.secondary {
	border-bottom: 2px solid #33257e
}

.staff-card .delete {
	cursor: pointer;
	position: absolute;
	top: 25px;
	right: 25px
}

.staff-card .delete span {
	color: #999;
	font-size: 13px
}

.staff-card .avatar {
	margin: 0 auto 15px auto;
	width: 65px;
	height: 65px;
	border-radius: 100px;
	overflow: hidden;
	-webkit-box-shadow: 0px 0px 10px #d4d7e3;
	box-shadow: 0px 0px 10px #d4d7e3
}

.staff-card .name p {
	font-size: 23px;
	color: #5c678f;
	margin-bottom: 5px;
	font-weight: 200;
	word-break: break-word
}

.staff-card .email p,
.staff-card .role p {
	margin-top: 0;
	color: #7246B1;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 600;
	word-break: break-word
}

.staff-card .role p {
	margin-bottom: 0
}

.staff-card .user-type p {
	font-size: 20px;
	color: #33257e
}

.staff-card.secondary .radioLabel {
	color: #33257e !important
}

.staff-card.roles {
	text-align: center
}

.staff-card.roles .name p {
	margin-top: 0
}

.staff-card.roles .cta {
	margin-top: 20px
}

.staff-card.roles .cta ul {
	margin: 0;
	padding: 0
}

.staff-card.roles .cta ul li {
	cursor: pointer;
	margin-left: 8px;
	display: inline-block;
	width: 70px;
	height: 70px;
	background: #fff;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 10px #d4d7e3;
	box-shadow: 0px 0px 10px #d4d7e3
}

.staff-card.roles .cta ul li:first-child {
	margin-left: 0
}

.staff-card.roles .cta ul li p.radioLabel {
	text-transform: uppercase;
	font-size: 12px;
	color: #7246B1;
	margin: 14px 0 5px 0;
	font-weight: 600
}

.staff-card.roles .cta ul li.readSelected {
	background: #5742c7
}

.staff-card.roles .cta ul li.readSelected p.radioLabel {
	color: #fff !important
}

.staff-card.roles .cta ul li.writeSelected {
	background: #79ceca
}

.staff-card.roles .cta ul li.writeSelected p.radioLabel {
	color: #fff !important
}

.staff-card.roles .cta ul li.noneSelected {
	background: #7246B1
}

.staff-card.roles .cta ul li.noneSelected p.radioLabel {
	color: #fff !important
}

.staff-card.roles.primary,
.staff-card.roles.secondary {
	background: #7246B1
}

.staff-card.roles.primary .name p,
.staff-card.roles.secondary .name p {
	color: #fff
}

.staff-card.roles.primary .explain p,
.staff-card.roles.secondary .explain p {
	color: #fff
}

.staff-card.roles.primary .cta ul li,
.staff-card.roles.secondary .cta ul li {
	-webkit-box-shadow: none;
	box-shadow: none
}

.staff-card.roles.secondary {
	background: #33257e
}

.staff-card.roles.secondary .cta ul li {
	-webkit-box-shadow: none;
	box-shadow: none
}

.smallLineGraph {
	background-color: #eaeaeb;
	border-radius: 100px
}

.smallLineGraph rect {
	-webkit-transition: width 1s;
	transition: width 1s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out
}

.uiSubHeaderText {
	font-size: 20px;
	margin-bottom: 20px
}

.subNavChip {
	background-color: none;
	padding: 6px 15px;
	text-align: center;
	color: #a9a9ad;
	border: 0px;
	cursor: pointer;
	font-size: 12px;
	outline: none;
	display: inline-block;
	border-radius: 100px;
	margin: 0 10px 20px 0;
	border: 2px solid transparent;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

@media screen and (max-width: 48em) {
	.subNavChip {
		margin: 0 10px 10px 0
	}
}

.subNavChip:hover {
	background-color: #33257e;
	color: #fff
}

.subNavChip:disabled {
	opacity: .6;
	cursor: not-allowed
}

.subNavChip.subNavSelected {
	background-color: #33257e;
	color: #fff;
	border: 2px solid #33257e;
	-webkit-box-shadow: 0px 0px 12px #a5acc5;
	box-shadow: 0px 0px 12px #a5acc5
}

.subNavChip.highlighted {
	background-color: transparent;
	color: #7246B1;
	border: 2px solid #7246B1
}

.subNavChip.highlighted:hover,
.subNavChip.highlighted.subNavSelected {
	background-color: #7246B1;
	color: #fff;
	border-color: #7246B1
}

.uiTabs {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background-color: #fff;
	padding: 0 2rem;
	position: relative;
	margin-bottom: 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

.uiTab {
	margin-left: 0px;
	margin-right: 40px;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 65px;
	display: inline-block;
	font-weight: 600;
	color: #a9a9ad;
	cursor: pointer;
	position: relative;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.uiTab.selected {
	color: #7246B1
}

.uiTab:hover,
.uiTab:active {
	color: #7246B1
}

.uiTab .uiTabSub {
	opacity: 0;
	z-index: -1;
	margin-left: -5px;
	margin-right: 0;
	padding: 0 0 10px 0;
	line-height: 1.5;
	width: 200px;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;
	position: absolute;
	top: calc(100% - 3px);
	background-color: #fff;
	border-radius: 0 0 8px 8px;
	font-size: 12px
}

.uiTab .uiTabSub.open {
	z-index: 999999;
	opacity: 1
}

.uiTab .uiTabSub .uiTabSubItem {
	color: #7246B1;
	padding: 8px 10px;
	margin: 10px 10px 0 10px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-color: #fff;
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.uiTab .uiTabSub .uiTabSubItem .uiTabSubIcon {
	margin-right: 10px;
	font-size: 16px
}

.uiTab .uiTabSub .uiTabSubItem .uiTabSubText {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1
}

.uiTab .uiTabSub .uiTabSubItem:hover {
	color: #66c7c3;
	border-color: #66c7c3
}

.tabsIndicator {
	background-color: #7246B1;
	height: 3px;
	width: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.multilineError {
	border: 2px solid red !important
}

.textSelector {
	display: inline-block;
	cursor: pointer
}

.textSelector.primary .textIcon {
	color: #7246B1
}

.textSelector.secondary .textIcon {
	color: #33257e
}

.textSelector.small-text {
	font-size: 12px
}

.textSelector .textIcon {
	margin-left: 10px;
	display: inline-block
}

.textSelector .textIconDown {
	-webkit-animation-name: spinDown;
	animation-name: spinDown;
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-play-state: running;
	animation-play-state: running
}

.textSelector .textIconUp {
	-webkit-animation-name: spinUp;
	animation-name: spinUp;
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-play-state: running;
	animation-play-state: running
}

.txtInput {

	border-radius: 8px;
	border: 1px solid #DEE3EA;
	background: #FFFFFF;
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
	padding: 10px 12px;

	display: block;
	width: 100%;

	color: #000000;
	font-family: "Inter";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;

	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 5px;
	outline-width: 0;

}


.txtInput:active,
.txtInput:focus {
	border: 1px solid #7246B1
}

.txtInput.invalid {
	border: 1px solid #dd4124
}

.txtInput::-webkit-input-placeholder {
	color: #a9a9ad
}

.txtInput.lg {
	padding: 12px 19px
}

.txtInput.editor {
	background: transparent !important;
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	margin: 0;
	padding: 5px;
	color: #fff;
	opacity: .6;
	font-weight: 300;
	border-radius: 0;
	border-bottom: 1px solid #fff;
	width: 100%;
	max-width: 500px
}

.txtInput.editor:active,
.txtInput.editor:focus {
	border: 0
}

.txtInput.editor::-webkit-input-placeholder {
	color: #b5bbcf;
	opacity: .6
}

.txtInput.search {
	border: 2px solid #fff
}

.txtInput.search:active,
.txtInput.search:focus {
	border: 2px solid #7246B1
}

.txtInput.search.invalid {
	border: 2px solid #dd4124
}

.txtInput.noShadow {
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 2px solid #e6e6e6;
	outline: none
}

.txtInput.black {
	color: #000
}

.txtInput.black::-webkit-input-placeholder {
	color: #75757b
}

.txtInput.withIcon {
	padding: 9px 45px 9px 16px
}

.txtInput.withIcon.lg {
	padding: 12px 45px 12px 19px
}

.textInputWrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.textInputLabel {

	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	margin-bottom: 6px;
}

.textInputWrapper .textInputIcon {
	position: absolute;
	right: 15px;
	color: #7246B1;
	cursor: pointer
}

.textInputWrapper .textInputIcon.lg {
	top: 11px
}

.textInputWrapper .textInputIcon.leftMore {
	right: 35px
}

@media screen and (max-width: 64em) {
	.textInputWrapper .textInputIcon.leftMore {
		right: 45px
	}
}

.textInputWrapper .textInputIcon.icon-cross2,
.textInputWrapper .textInputIcon.icon-magnifier {
	top: 11px
}

@media screen and (max-width: 64em) {
	.textInputWrapper .textInputIcon {
		font-size: 24px
	}
}

.textInputWrapper .txtInput {
	margin-bottom: 0px
}

.textInputWrapper .smileyInputIcon {
	position: absolute;
	right: 0px;
	top: 0px;
	cursor: pointer;
	width: 20px;
	height: 20px;
	background-size: 20px 20px
}

.datePicker {
	width: 100%
}

.SingleDatePicker {
	background-color: inherit !important
}

.SingleDatePicker .SingleDatePickerInput {
	background-color: inherit !important;
	width: 100%;
	display: block !important
}

.SingleDatePicker .SingleDatePickerInput .DateInput {
	width: 100% !important;
	display: inline-block !important;
	background-color: inherit !important
}

.SingleDatePicker .SingleDatePickerInput__withBorder {
	border: none !important
}

.DateRangePicker {
	width: 100% !important;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border-radius: 100px !important;
	background: #fff !important;
	-webkit-box-shadow: 0px 0px 25px #e6e6e6;
	box-shadow: 0px 0px 25px #e6e6e6;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.DateRangePicker .DateRangePickerInput {
	-webkit-box-flex: 1;
	-ms-flex: 1 0;
	flex: 1 0;
	padding: 10px !important;
	border: 0px !important;
	text-align: center;
	border-radius: 100px !important
}

.DateRangePicker .DateRangeDivider {
	-webkit-box-flex: 0;
	-ms-flex: 0 0;
	flex: 0 0
}

.DateRangePicker .DateRangeDivider .DateRangeArrow {
	border: solid #000;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg)
}

.search-fetch-dropdown {
	padding: 0;
	-webkit-box-shadow: -2px 2px 10px rgba(0, 0, 0, .16);
	box-shadow: -2px 2px 10px rgba(0, 0, 0, .16);
	position: absolute;
	z-index: 10;
	width: 85%;
	margin-top: 0
}

.search-fetch-dropdown>li {
	cursor: pointer;
	padding: 0;
	width: 100%;
	text-transform: none;
	margin: 0;
	padding: 0;
	background: #fff;
	color: #6f212a;
	padding: 10px 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.search-fetch-dropdown>li .avatar {
	background-position: center;
	background-size: cover;
	height: 25px;
	width: 25px;
	display: inline-block;
	border-radius: 50px;
	margin-right: 10px
}

.search-fetch-dropdown>li:hover {
	background-color: #7246B1;
	color: #fff
}

.search-fetch-dropdown>li.highlight {
	background-color: #7246B1;
	color: #fff
}

.warningGlow {
	-webkit-animation: glow 800ms ease-out infinite alternate;
	animation: glow 800ms ease-out infinite alternate
}

@-webkit-keyframes glow {
	0% {
		border: 1px solid #dd4124
	}

	100% {
		border: 1px solid #eb8e7c
	}
}

@keyframes glow {
	0% {
		border: 1px solid #dd4124
	}

	100% {
		border: 1px solid #eb8e7c
	}
}

.DateInput_input {
	text-align: center
}

.uiWhiteBox {
	background-color: #fff;
	margin-bottom: 20px;
	display: inline-block
}

.uiWhiteBox:after {
	content: "";
	display: table;
	clear: both
}

.squareBox {
	height: 180px;
	width: 180px;
	padding: 20px
}

.squareBox:hover {
	background-color: #f3f3f3;
	cursor: pointer
}

.squareBox.headImage {
	width: auto !important;
	height: 60px !important;
	display: block !important;
	margin-bottom: 10px;
	color: #7246B1
}

.squareBox.title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px
}

.squareBox.desc {
	font-size: 14px;
	margin-bottom: 10px;
	color: #888
}

.formBox div {
	padding: 15px
}

.uiWhiteBoxHeader {
	color: #7246B1;
	font-size: 20px
}

.domain-card {
	position: relative;
	background-color: #fff;
	border-radius: 4px;
	padding: 30px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
	-webkit-box-shadow: 0px 0px 10px #d4d7e3;
	box-shadow: 0px 0px 10px #d4d7e3
}

.domain-card.primary {
	border-bottom: 2px solid #7246B1
}

.domain-card.secondary {
	border-bottom: 2px solid #33257e
}

.domain-card.warning {
	border-bottom: 2px solid #dd4124
}

.domain-card.add {
	background: #7246B1;
	color: #fff
}

.domain-card.min-height {
	min-height: 300px
}

.domain-card .delete {
	cursor: pointer;
	position: absolute;
	top: 25px;
	right: 25px
}

.domain-card .delete span {
	color: #999;
	font-size: 13px
}

.domain-card .name p {
	font-size: 23px;
	color: #666;
	margin-bottom: 5px;
	font-weight: 200;
	word-break: break-word
}

.domain-card .domainStatus {
	font-size: 14px
}

.domain-card .fixed-cta {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30px
}

.templateHolder {
	margin: 10px 0 30px 0
}

.templateCard {
	position: relative;
	background-color: #fff;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
	-webkit-box-shadow: 0px 0px 10px #d4d7e3;
	box-shadow: 0px 0px 10px #d4d7e3
}

.templateCard.campaign:hover {
	-webkit-box-shadow: 0px 0px 10px #7246B1;
	box-shadow: 0px 0px 10px #7246B1
}

.templateCard .templateDeleting {
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 999;
	opacity: .7;
	background-color: #dd4124;
	border-radius: 4px;
	position: absolute;
	-webkit-animation-name: pulseDelete;
	animation-name: pulseDelete;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

@-webkit-keyframes pulseDelete {
	0% {
		background-color: #3f3f3f
	}

	50% {
		background-color: #dd4124
	}

	100% {
		background-color: #3f3f3f
	}
}

@keyframes pulseDelete {
	0% {
		background-color: #3f3f3f
	}

	50% {
		background-color: #dd4124
	}

	100% {
		background-color: #3f3f3f
	}
}

.templateCard .tcImage {
	position: relative;
	height: 200px;
	border-radius: 4px 4px 0 0
}

.templateCard .tcImage:hover .tcImageImgHolder .tcImageImg {
	-webkit-transform: scale(1.05);
	transform: scale(1.05)
}

.templateCard .tcImage:hover::after {
	opacity: .8
}

.templateCard .tcImage:hover .toolbar {
	opacity: 1
}

.templateCard .tcImage:hover .toolbar .avatar {
	opacity: 1
}

.templateCard .tcImage:hover .toolbar .moreOptions {
	opacity: 1
}

.templateCard .tcImage .tcImageImgHolder {
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 4px 4px 0 0
}

.templateCard .tcImage .tcImageImgHolder .tcImageImg {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 1s;
	transition: all 1s;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position-x: center;
	background-position-y: top;
	background-repeat: no-repeat;
	border-radius: 4px 4px 0 0
}

@media screen and (min-width: 75em) {
	.templateCard .tcImage {
		height: 250px
	}
}

.templateCard .tcImage::after {
	content: "";
	background: -webkit-gradient(linear, left top, right bottom, from(#7246B1), to(#33257E));
	background: linear-gradient(to bottom right, #7246B1, #33257E);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: .4;
	border-radius: 4px 4px 0 0;
	-webkit-transition: all .2s ease;
	transition: all .2s ease
}

.templateCard .tcImage .toolbar {
	width: 100%;
	position: absolute;
	top: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	z-index: 1;
	padding: 0 20px;
	background: #fff;
	border-radius: 4px 4px 0 0;
	height: 60px;
	opacity: 0;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease
}

.templateCard .tcImage .toolbar .avatar {
	width: 40px;
	height: 40px;
	opacity: 0;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease
}

.templateCard .tcImage .toolbar .avatar img {
	height: 100%;
	border-radius: 100px;
	-webkit-box-shadow: 0px 0px 14px #485170;
	box-shadow: 0px 0px 14px #485170
}

.templateCard .tcImage .toolbar .moreOptions {
	cursor: pointer;
	opacity: 0;
	-webkit-transition: opacity .5s ease;
	transition: opacity .5s ease;
	width: 20px;
	text-align: center
}

.templateCard .tcImage .groups {
	position: absolute;
	bottom: 20px;
	left: 25px;
	z-index: 1
}

.templateCard .tcImage .groups p {
	margin: 0;
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold
}

.templateCard .tcContent {
	border-top: 1px solid #e6e6e6;
	padding: 25px
}

.templateCard .tcContent h4 {
	margin: 0 0 10px 0;
	font-size: 20px;
	color: #7246B1;
	font-weight: 300
}

.templateCard .tcContent p.edit {
	color: #999;
	margin: 0 0 25px 0;
	font-size: 14px;
	font-weight: 300
}

.templateCard .tcContent p.edit span {
	color: #7246B1;
	font-weight: 600
}

.templateCard .tcContent .typeWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.templateCard .tcContent .typeWrap p.type {
	text-transform: uppercase;
	font-size: 13px;
	margin: 0;
	color: #33257e;
	font-weight: 600
}

.templateCard .tcContent .templateCode {
	font-size: 11px
}

.templateCard .tcContent .templateCode a {
	color: #a9a9ad
}

.toggleWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.toggleWrap span {
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 400;
	color: #999
}

.toggleWrap span.left {
	margin-right: 8px
}

.toggleWrap span.right {
	margin-left: 8px
}

.toggleWrap.white span {
	color: #fff
}

.toggleWrap.white .react-toggle-track {
	background-color: rgba(255, 255, 255, .7)
}

.toggleWrap.white .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
	background-color: rgba(255, 255, 255, .6)
}

.toggleWrap.white .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
	background-color: #7246B1
}

.toggleWrap.white .react-toggle--checked .react-toggle-track {
	background-color: #7246B1
}

.toggleWrap.white .react-toggle-thumb {
	-webkit-box-shadow: none;
	box-shadow: none
}

.toggleWrap.white .react-toggle--focus .react-toggle-thumb {
	-webkit-box-shadow: none;
	box-shadow: none
}

.toggleWrap.white .react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
	-webkit-box-shadow: none;
	box-shadow: none
}

.react-toggle {
	-ms-touch-action: pan-x;
	touch-action: pan-x;
	display: inline-block;
	position: relative;
	cursor: pointer;
	background-color: transparent;
	border: 0;
	padding: 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent
}

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

.react-toggle--disabled {
	cursor: not-allowed;
	opacity: .5;
	-webkit-transition: opacity .25s;
	transition: opacity .25s
}

.react-toggle-track {
	width: 50px;
	height: 14px;
	padding: 0;
	border-radius: 30px;
	background-color: #a9a9ad;
	-webkit-transition: all .2s ease;
	transition: all .2s ease
}

.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
	background-color: #999
}

.react-toggle--checked .react-toggle-track {
	background-color: #7246B1
}

.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
	background-color: #7246B1
}

.react-toggle-track-check {
	position: absolute;
	width: 14px;
	height: 10px;
	top: 0px;
	bottom: 0px;
	margin-top: auto;
	margin-bottom: auto;
	line-height: 0;
	left: 8px;
	opacity: 0;
	-webkit-transition: opacity .25s ease;
	transition: opacity .25s ease
}

.react-toggle--checked .react-toggle-track-check {
	opacity: 1;
	-webkit-transition: opacity .25s ease;
	transition: opacity .25s ease
}

.react-toggle-track-x {
	position: absolute;
	width: 10px;
	height: 10px;
	top: 0px;
	bottom: 0px;
	margin-top: auto;
	margin-bottom: auto;
	line-height: 0;
	right: 10px;
	opacity: 1;
	-webkit-transition: opacity .25s ease;
	transition: opacity .25s ease
}

.react-toggle--checked .react-toggle-track-x {
	opacity: 0
}

.react-toggle-thumb {
	-webkit-transition: all .5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
	transition: all .5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
	position: absolute;
	top: -5px;
	left: 0px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #fff;
	-webkit-box-shadow: 0px 2px 7px #b5bbcf;
	box-shadow: 0px 2px 7px #b5bbcf;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .25s ease;
	transition: all .25s ease
}

.react-toggle--checked .react-toggle-thumb {
	left: 28px
}

.react-toggle--focus .react-toggle-thumb {
	-webkit-box-shadow: 0px 2px 7px #b5bbcf;
	box-shadow: 0px 2px 7px #b5bbcf
}

.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
	-webkit-box-shadow: 0px 2px 7px #b5bbcf;
	box-shadow: 0px 2px 7px #b5bbcf
}

.snackbar {
	min-width: 250px;
	background-color: #333;
	color: #fff;
	position: fixed;
	text-align: center;
	border-radius: 2px;
	padding: 16px;
	position: fixed;
	z-index: 99;
	left: 30px;
	bottom: -60px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.snackbar.show {
	bottom: 30px
}

.snackbar.hide {
	height: 0;
	padding: 0
}

.datepicker .SingleDatePicker {
	width: 100%
}

.datepicker.dpTransparent .SingleDatePicker {
	background: transparent
}

.datepicker.dpTransparent .SingleDatePicker .SingleDatePickerInput {
	background: transparent
}

.datepicker.dpTransparent .SingleDatePicker .SingleDatePickerInput .DateInput {
	background: transparent
}

.datepicker.dpTransparent .SingleDatePicker .SingleDatePickerInput .DateInput input.DateInput_input {
	background: transparent
}

.datepicker.dpWhite input.DateInput_input {
	color: #fff
}

.datepicker.dpLarge input.DateInput_input {
	font-size: 28px;
	line-height: 38px;
	font-weight: 200
}

@media only screen and (max-width: 48em) {
	.datepicker.dpLarge input.DateInput_input {
		font-size: 16px;
		line-height: 20px
	}
}

.datepicker.dpLarge input.DateInput_input::-webkit-input-placeholder {
	font-size: 28px;
	line-height: 38px;
	font-weight: 200
}

.datepicker.dpLarge input.DateInput_input::-moz-placeholder {
	font-size: 28px;
	line-height: 38px;
	font-weight: 200
}

.datepicker.dpLarge input.DateInput_input:-ms-input-placeholder {
	font-size: 28px;
	line-height: 38px;
	font-weight: 200
}

.datepicker.dpLarge input.DateInput_input::-ms-input-placeholder {
	font-size: 28px;
	line-height: 38px;
	font-weight: 200
}

.datepicker.dpLarge input.DateInput_input::placeholder {
	font-size: 28px;
	line-height: 38px;
	font-weight: 200
}

@media only screen and (max-width: 48em) {
	.datepicker.dpLarge input.DateInput_input::-webkit-input-placeholder {
		font-size: 16px;
		line-height: 20px
	}

	.datepicker.dpLarge input.DateInput_input::-moz-placeholder {
		font-size: 16px;
		line-height: 20px
	}

	.datepicker.dpLarge input.DateInput_input:-ms-input-placeholder {
		font-size: 16px;
		line-height: 20px
	}

	.datepicker.dpLarge input.DateInput_input::-ms-input-placeholder {
		font-size: 16px;
		line-height: 20px
	}

	.datepicker.dpLarge input.DateInput_input::placeholder {
		font-size: 16px;
		line-height: 20px
	}
}

.SingleDatePicker_picker__fullScreenPortal {
	z-index: 999 !important
}

.DateRangePickerInput_1 {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important
}

.DateRangePickerInput_1 .DateInput_1 {
	-webkit-box-flex: 1 !important;
	-ms-flex-positive: 1 !important;
	flex-grow: 1 !important
}

.ui_sliderOuter {
	position: relative;
	padding: 4px
}

.ui_sliderOuter .ui_sliderBar {
	width: 100%;
	height: 6px;
	background-color: #fff
}

.ui_sliderOuter .ui_sliderKnob {
	background-color: #7246B1;
	width: 15px;
	height: 15px;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 100px;
	cursor: pointer;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .16);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, .16)
}

.calendar .clickable {
	cursor: pointer
}

.calendar .dayContainer {
	padding: 0;
	width: 14.2857142857%
}

@media screen and (max-width: 64em) {
	.calendar .dayContainer {
		width: 100%
	}
}

.calendar .dayContainer .day {
	position: relative;
	height: 180px;
	border-bottom: 2px solid #a9a9ad;
	border-right: 2px solid #a9a9ad;
	-webkit-transition: background-color .2s ease;
	transition: background-color .2s ease;
	padding-bottom: 24px
}

@media screen and (max-width: 64em) {
	.calendar .dayContainer .day {
		border: 1px solid #a9a9ad !important
	}
}

.calendar .dayContainer .day.borTop {
	border-top: 2px solid #a9a9ad
}

.calendar .dayContainer .day.borLeft {
	border-left: 2px solid #a9a9ad
}

.calendar .dayContainer .day.noBottom {
	border-bottom: none
}

.calendar .dayContainer .day.first {
	margin-left: -1px
}

@media screen and (max-width: 64em) {
	.calendar .dayContainer .day.first {
		margin-left: 0
	}
}

.calendar .dayContainer .day.weekend {
	background-color: #eaeaeb
}

.calendar .dayContainer .day.today {
	background-color: #dddddf
}

.calendar .dayContainer .day .dayInfo {
	position: absolute;
	top: 0;
	right: 5px;
	font-size: 12px;
	color: gray
}

.calendar .dayContainer .day .eventContainer {
	height: 136px;
	overflow-y: auto;
	overflow-x: hidden
}

.calendar .dayContainer .day .eventContainer .event {
	width: 100%;
	max-width: 100%;
	color: #fff;
	background-color: #a9a9ad;
	padding: 0 5px;
	cursor: pointer;
	margin-bottom: 2px;
	word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	-webkit-transition: background-color .3s ease;
	transition: background-color .3s ease
}

.calendar .dayContainer .day .eventContainer .event .icon {
	margin: auto 0
}

.calendar .dayContainer .day .eventContainer .event .name {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1
}

.calendar .dayContainer .day .eventContainer .event.primary {
	background-color: #7246B1;
	color: #fff
}

.calendar .dayContainer .day .eventContainer .event.secondary {
	background-color: #33257e;
	color: #fff
}

.calendar .dayContainer .day .eventContainer .event.red {
	background-color: #dd4124;
	color: #fff
}

.calendar .dayContainer .day .eventContainer .event.yellow {
	background-color: #fedd00;
	color: #000
}

.calendar .dayContainer .day .eventContainer .event.purple {
	background-color: #7943b7;
	color: #fff
}

.calendar .dayContainer .day .eventContainer .event.blue {
	background-color: #0094d5;
	color: #fff
}

.calendar .dayContainer .day .eventContainer .event.black {
	background-color: #000;
	color: #fff
}

.calendar .dayContainer .day .eventContainer .event.highlight.primary {
	background-color: #66c7c3
}

.calendar .dayContainer .day .eventContainer .event.highlight.secondary {
	background-color: #4331a5
}

.calendar .dayContainer .day .eventContainer .event.highlight.red {
	background-color: #e46750
}

.calendar .dayContainer .day .eventContainer .event.highlight.yellow {
	background-color: #ffe432
}

.calendar .dayContainer .day .eventContainer .event.highlight.purple {
	background-color: #9366c7
}

.calendar .dayContainer .day .eventContainer .event.highlight.blue {
	background-color: #09b4ff
}

.calendar .dayContainer .day .eventContainer .event.highlight.black {
	background-color: #1a1a1a
}

.calendar .dayContainer .day .addEvent {
	position: absolute;
	bottom: 0;
	width: 100%;
	cursor: pointer;
	text-align: center;
	-webkit-transition: color .3s ease;
	transition: color .3s ease
}

.calendar .dayContainer .day .addEvent .icon-plus {
	-webkit-transition: font-weight .3s ease;
	transition: font-weight .3s ease
}

.calendar .dayContainer .day .addEvent:hover {
	color: #7246B1
}

.calendar .dayContainer .day .addEvent:hover .icon-plus {
	font-weight: bold
}

.smsView {
	width: 320px;
	height: 600px;
	padding: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	border: 1px solid #a9a9ad;
	border-radius: 20px;
	background-color: #fff;
	margin-top: 10px
}

.smsView .smsHeader {
	position: relative
}

.smsView .smsHeader .back {
	position: absolute;
	font-size: 16px
}

.smsView .smsHeader .title {
	width: 100%;
	color: #7246B1;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	word-break: break-word
}

.smsView.small {
	width: 250px;
	padding: 8px
}

.smsView.small .smsHeader .back {
	display: none
}

.smsView.tiny {
	zoom: .5;
	-ms-zoom: .5;
	-webkit-zoom: .5;
	-moz-transform: scale(0.5, 0.5);
	-moz-transform-origin: left center;
	-moz-transform-origin: top
}

.smsView .smsMessageHolder {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	position: relative
}

.smsView .smsMessageHolder .smsMessage {
	bottom: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	position: relative;
	max-height: 500px;
	overflow: hidden
}

.smsView .smsMessageHolder .smsMessage .smsAvatar {
	border-radius: 100%;
	margin-top: 10px;
	background-color: #7246B1;
	margin-right: 10px;
	color: #fff;
	font-size: 16px;
	height: 30px;
	width: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.smsView .smsMessageHolder .smsMessage .smsContent {
	text-align: left;
	margin-top: 10px;
	padding: 10px;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	background-color: #f0f0f0;
	word-break: break-word;
	color: #000;
	width: 235px;
	font-size: 12px;
	border-top-left-radius: 0;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px
}

.smsView .smsMessageHolder .smsMessage .smsContent.small {
	width: 190px
}

.smsView .smsMessageHolder .smsMessage .smsTimestamp {
	position: absolute;
	bottom: -15px;
	color: #1a1a1a;
	font-size: 11px;
	margin-left: 50px
}

.smsView .smsMessageHolder .smsInput {
	position: absolute;
	bottom: 0;
	height: 35px;
	width: 100%;
	border-radius: 20px;
	border: 1px solid #a9a9ad;
	color: #a9a9ad;
	padding: 7px 10px;
	font-size: 13px
}

.smsInfo {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.smsPreview {
	height: 200px;
	overflow: hidden;
	border-radius: 8px;
	cursor: pointer
}

.smsPreview::after {
	content: "";
	background: #fff;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	border-radius: 8px;
	-webkit-transition: all .2s ease;
	transition: all .2s ease
}

.smsPreview:hover::after {
	opacity: .4;
	background: #7246B1
}

.tagsHolderOuter .addLink {
	font-size: 12px
}

.tagsHolderOuter .tagHolder {
	background-color: purple;
	padding: 5px 10px;
	font-size: 11px;
	border-radius: 5px;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 5px;
	color: #fff
}

.tagsHolderOuter .tagHolder.disabled {
	opacity: .5
}

.tagsHolderOuter .tagHolder.large {
	padding: 8px 12px;
	font-size: 13px
}

.tagsHolderOuter .tagsAddHolder {
	position: absolute;
	max-width: 400px;
	width: 100%;
	height: 200px;
	bottom: -200px;
	background-color: #fff;
	z-index: 999999;
	-webkit-box-shadow: 0px 0px 5px #ddd;
	box-shadow: 0px 0px 5px #ddd;
	padding: 10px
}

.tagsHolderOuter .tagsAddHolder .tagsHolderClose {
	cursor: pointer;
	position: absolute;
	right: -8px;
	top: -8px;
	font-size: 18px;
	border-radius: 100px;
	background-color: #fff
}

.tagsHolderOuter .tagsAddHolder .tagsInnerHolder {
	height: 110px;
	overflow: auto
}

.tagsHolderOuter .tagsAddHolder .addTagInput {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.linkChecker {
	padding: 10px;
	border: 2px solid #fff;
	border-radius: 8px;
	-webkit-transition: border .3s ease;
	transition: border .3s ease;
	margin-bottom: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative
}

.linkChecker .linkImage {
	height: 36px;
	margin-right: 10px;
	max-width: 80px
}

.linkChecker .linkImage.dark {
	background-color: #000;
	border-radius: 100%;
	border: 1px solid #000
}

.linkChecker .error {
	position: absolute;
	font-size: 13px;
	font-weight: bold;
	right: 0;
	border-radius: 10px;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	background-color: rgba(255, 255, 255, .6);
	padding: 10px;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.linkChecker .linkTextHolder {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	overflow: hidden
}

.linkChecker .linkTextHolder .linkCheckerText {
	font-size: 14px;
	color: #7246B1;
	font-weight: bold;
	word-wrap: break-word
}

.linkChecker .linkTextHolder .linkCheckerUrl {
	font-size: 12px;
	color: #a9a9ad;
	word-wrap: break-word
}

.linkChecker.grey {
	border: 2px solid #a9a9ad
}

.linkChecker.grey .linkCheckerUrl,
.linkChecker.grey .linkCheckerText,
.linkChecker.grey .error {
	color: #a9a9ad
}

.linkChecker.red {
	border: 2px solid #dd4124
}

.linkChecker.red .error,
.linkChecker.red .linkCheckerText,
.linkChecker.red .linkCheckerUrl {
	color: #dd4124
}

.linkChecker.green {
	border: 2px solid #7246B1
}

.linkChecker.green .linkCheckerUrl,
.linkChecker.green .linkCheckerText,
.linkChecker.green .error {
	color: #7246B1
}

.autocomplete {
	position: absolute;
	max-height: 400px;
	background-color: #fff;
	border-radius: 8px;
	border: 1px solid #a9a9ad;
	overflow: auto;
	z-index: 999999
}

.autocomplete .item {
	width: 100%;
	font-size: 13px;
	cursor: pointer;
	background-color: #fff;
	color: #7246B1;
	padding: 8px 4px
}

.autocomplete .item:hover {
	background-color: #7246B1;
	color: #fff
}

.campaign-body .campaign-header {
	height: 60px;
	padding: 20px 30px 0 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	color: #b5bbcf
}

@media screen and (max-width: 64em) {
	.campaign-body .campaign-header {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		display: block;
		text-align: center
	}
}

.campaign-body .campaign-header .back {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.campaign-body .campaign-header .back p {
	margin-left: 10px;
	font-size: 14px
}

.campaign-body .campaign-header .exit .icon {
	font-size: 26px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.campaign-body .campaign-header .exit .icon:hover {
	cursor: pointer;
	color: #33257e
}

@media screen and (max-width: 64em) {
	.campaign-body .campaign-header .exit {
		margin-bottom: 45px
	}
}

.campaign-body .uiLib-cardHolder {
	background: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	cursor: pointer
}

@media screen and (max-width: 64em) {
	.campaign-body .uiLib-cardHolder {
		background-color: #fff;
		-webkit-box-shadow: 0px 0px 30px #f3f4f7;
		box-shadow: 0px 0px 30px #f3f4f7
	}

	.campaign-body .uiLib-cardHolder:hover {
		background-color: inherit;
		-webkit-box-sizing: inherit;
		box-sizing: inherit
	}
}

.campaign-body .uiLib-cardHolder:hover {
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 30px #f3f4f7;
	box-shadow: 0px 0px 30px #f3f4f7
}

ul.campaignSteps {
	padding: 0;
	margin: 0;
	position: relative
}

ul.campaignSteps li {
	list-style: none;
	display: inline-block;
	text-align: center
}

ul.campaignSteps li:not(.vertical) {
	width: 136px
}

@media screen and (max-width: 64em) {
	ul.campaignSteps li:not(.vertical) {
		text-align: left;
		width: 100%;
		border-bottom: 1px solid #e6e6e6;
		padding: 10px 0
	}
}

ul.campaignSteps li .stepCircle {
	position: relative;
	margin: 0 auto 5px auto;
	width: 30px;
	height: 30px;
	border: 2px solid #a9a9ad;
	border-radius: 100px;
	text-align: center;
	padding-top: 1px;
	cursor: default
}

@media screen and (max-width: 64em) {
	ul.campaignSteps li .stepCircle {
		display: inline-block;
		margin: 0 10px 0px 0
	}
}

ul.campaignSteps li .stepCircle.fill {
	background: #fff !important
}

ul.campaignSteps li .stepCircle:after {
	content: "";
	width: 100px;
	height: 5px;
	background: url("/public/images/step-dotted-line.svg") no-repeat;
	position: absolute;
	top: 12px;
	left: 31px;
	cursor: default
}

@media screen and (max-width: 64em) {
	ul.campaignSteps li .stepCircle:after {
		display: none
	}
}

ul.campaignSteps li .stepCircle span {
	color: #a9a9ad;
	font-size: 14px
}

@media screen and (max-width: 64em) {
	ul.campaignSteps li .stepCircle span {
		display: inline-block
	}
}

ul.campaignSteps li span.stepName {
	color: #999;
	font-size: 12px;
	font-weight: 600
}

@media screen and (max-width: 64em) {
	ul.campaignSteps li span.stepName {
		font-size: 16px
	}
}

ul.campaignSteps li.last .stepCircle:after {
	content: "";
	background: none
}

ul.campaignSteps li .vertical {
	z-index: -1;
	content: "";
	background: url("/public/images/step-dotted-line.svg") no-repeat;
	left: calc(50% - 68px);
	width: 91px;
	top: 55px;
	height: 50px;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	text-align: center;
	position: absolute
}

@media screen and (max-width: 64em) {
	ul.campaignSteps li .vertical {
		width: 80px;
		top: 50px
	}
}

ul.campaignSteps li .vertical.above {
	top: -40px
}

ul.campaignSteps li.selected .stepCircle {
	background: none;
	border: 2px solid #7246B1
}

ul.campaignSteps li.selected .stepCircle span {
	color: #7246B1
}

ul.campaignSteps li.selected span.stepName {
	color: #7246B1
}

ul.campaignSteps li.complete .stepCircle {
	cursor: pointer;
	border: 2px solid #7246B1;
	background: #7246B1
}

ul.campaignSteps li.complete .stepCircle span {
	color: #fff
}

ul.campaignSteps li.complete .stepCircle:after {
	cursor: default
}

ul.campaignSteps li.complete .stepCircle:hover {
	opacity: .8
}

ul.campaignSteps li.complete span.stepName {
	cursor: pointer;
	color: #7246B1
}

.controls {
	position: absolute
}

.controls.topRight {
	top: 20px;
	right: 20px
}

.dropDownResults {
	display: none;
	position: absolute;
	background-color: #fff;
	top: 70px;
	border: 1px solid #d9d9d9;
	border-radius: 5px;
	z-index: 99
}

.dropDownResults.show {
	display: block
}

.dropDownResults .dropDownResult {
	padding: 5px
}

.dropDownResults .dropDownResult:hover {
	background-color: #7246B1;
	color: #fff
}

.subscriber-name p {
	margin: 0 0 5px 0;
	font-size: 20px;
	font-weight: 600
}

.date-added {
	margin: 0;
	text-transform: uppercase;
	font-size: 13px;
	color: #33257e
}

.dragAndDropCanvas {
	position: relative
}

.dragAndDropCanvas a:hover {
	opacity: 1 !important
}

.dragAndDropCanvas .elementHolder {
	width: 100%;
	position: relative;
	cursor: pointer
}

.dragAndDropCanvas .elementHolder .elementHolderTools {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%
}

.dragAndDropCanvas .elementHolder .elementHolderTools.dd-element-selected {
	outline: 2px solid #7246B1 !important;
	border-radius: 3px;
	z-index: 5
}

.dragAndDropCanvas .elementHolder .elementHolderTools.showGuideLines {
	outline: 1px dotted gray
}

.dragAndDropCanvas .elementHolder .element {
	position: relative;
	cursor: pointer
}

.dragAndDropCanvas .elementHolder .element .elementHolderTools {
	position: absolute;
	width: 100%;
	height: 100%
}

.dragAndDropCanvas .elementHolder .element .elementHolderTools.dd-element-selected {
	outline: 2px solid #7246B1 !important;
	border-radius: 2px;
	z-index: 5
}

.dragAndDropCanvas .elementHolder .element .elementHolderTools.showGuideLines {
	outline: 1px dotted gray
}

.ui-dd-tools {
	background-color: #7246B1;
	position: absolute;
	z-index: 4;
	overflow: hidden;
	white-space: nowrap
}

.ui-dd-tools.ui-dd-tools-left {
	top: -3px;
	left: 0px;
	border-radius: 0px 0px 4px 0px
}

.ui-dd-tools.ui-dd-tools-top {
	top: -3px;
	right: 0px;
	border-radius: 0px 0px 0px 4px
}

.ui-dd-tools.ui-dd-tools-bottom {
	border-radius: 0 0 3px 3px;
	bottom: -28px;
	right: 0px
}

.ui-dd-tools-icon {
	pointer-events: auto;
	cursor: pointer;
	display: inline-block;
	color: #fff;
	text-align: center;
	padding: 6px
}

.ui-dd-tools-icon:hover {
	background-color: ligthen(#7246B1, 10%)
}

.elementPickerOuter {
	padding: 20px 0 20px 20px
}

.newElementObject {
	width: 100%;
	height: 100%;
	border-radius: 3px;
	background-color: #fff;
	cursor: move;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.newElementObject img {
	max-width: 50px;
	max-height: 50px
}

.newElementObject .newElementCloseButt {
	z-index: 999999;
	position: absolute;
	right: 5px;
	top: 2px
}

.newElementObject .icon {
	height: 90px;
	background: #f3f4f7;
	border-radius: 3px 3px 0 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.newElementObject .icon span {
	color: #7246B1;
	font-size: 46px
}

.newElementObject .title {
	border-radius: 0 0 3px 3px;
	height: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.newElementObject .title p {
	margin: 0;
	text-transform: none;
	font-size: 12px;
	color: #b5bbcf
}

.marketPlace {
	padding: 0px;
	position: relative
}

.marketPlace .marketPlaceHolder {
	padding: 20px;
	border-bottom: 1px solid #a5acc5
}

.marketPlace h1 {
	font-size: 20px;
	margin: 0px;
	padding: 0px;
	margin-bottom: 10px
}

.marketPlace h2 {
	font-size: 14px;
	margin: 0px;
	padding: 0px
}

.marketPlace .marketPlaceClose {
	position: absolute;
	right: 10px;
	top: 10px;
	color: gray;
	font-size: 20px;
	cursor: pointer
}

.marketPlace .marketPlaceItemHolder {
	width: 100%;
	height: 150px;
	border-radius: 5px;
	position: relative;
	border: 1px solid #a5acc5;
	overflow: hidden
}

.marketPlace .marketPlaceItemHolder .appImage {
	width: 100%;
	height: 50px;
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 1px solid #a5acc5
}

.marketPlace .marketPlaceItemHolder .appTitle {
	font-size: 14px;
	text-align: center;
	padding: 10px
}

.marketPlace .marketPlaceItemHolder .appButton {
	position: absolute;
	width: 100%;
	bottom: 10px;
	text-align: center
}

.dragDropToolBar {
	background-color: #2a2f42;
	padding: 0px 10px 0px 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	z-index: 10;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	height: 50px
}

.dragDropToolBar .templateTitle {
	-webkit-box-flex: 1;
	-ms-flex: 1 1;
	flex: 1 1
}

.dragDropToolBar .templateTitle p {
	color: #fff;
	opacity: .6;
	font-weight: 300;
	font-size: 14px
}

.dragDropToolBar .device ul,
.dragDropToolBar .actions ul {
	margin: 0;
	padding: 0
}

.dragDropToolBar .device ul li,
.dragDropToolBar .actions ul li {
	list-style: none;
	display: inline-block;
	margin-left: 15px
}

.dragDropToolBar .device ul li:first-child,
.dragDropToolBar .actions ul li:first-child {
	margin-left: 0
}

.dragDropToolBar .device ul li a,
.dragDropToolBar .actions ul li a {
	color: #fff;
	opacity: .6;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.dragDropToolBar .device ul li a:hover,
.dragDropToolBar .actions ul li a:hover {
	opacity: 1;
	color: #7246B1
}

.dragDropToolBar .device ul li a.selected,
.dragDropToolBar .actions ul li a.selected {
	opacity: 1;
	color: #7246B1
}

@media only screen and (max-width: 64em) {
	.dragDropToolBar .device {
		display: none
	}
}

.dragDropToolBar .actions ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.dragDropToolBar .actions ul li a {
	font-size: 14px;
	opacity: 1;
	color: #fff;
	opacity: .6
}

.dragDropToolBar .actions ul li a:hover,
.dragDropToolBar .actions ul li a:focus,
.dragDropToolBar .actions ul li a:active,
.dragDropToolBar .actions ul li a.selected {
	color: #66c7c3
}

.dragDropToolBar .actions ul li a span.actionIcon {
	margin-left: 8px
}

@media only screen and (max-width: 48em) {
	.dragDropToolBar .actions ul li a span.actionName {
		display: none
	}
}

.dragDropToolBar .actions ul li a.button {
	font-size: 11px
}

.eContainer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: calc(100vh - 50px)
}

.eContainer .animatedPanel {
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.eContainer .elementsPanel {
	background-color: #f2f2f3;
	border-right: 1px solid #a5acc5;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 200px
}

@media only screen and (max-width: 48em) {
	.eContainer .elementsPanel {
		display: none
	}
}

.eContainer .elementsPanel .logoIcon {
	background-color: #343a51;
	height: 50px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.eContainer .elementsPanel .dd-leftTools-topTools {
	padding: 20px 10px 20px 10px;
	border-bottom: 1px solid #a5acc5
}

.eContainer .elementsPanel .dd-leftTools-categorySelect {
	padding: 10px 10px 10px 10px;
	border-bottom: 1px solid #a5acc5
}

.eContainer .elementsPanel .tools {
	height: calc(100vh - 220px);
	overflow: auto;
	padding: 20px
}

.eContainer .elementsPanel .tools .lElementHolder {
	width: 100%;
	height: 50px;
	border: 1px solid #a5acc5;
	border-radius: 5px;
	margin-bottom: 10px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.eContainer .elementsPanel .tools .lElementHolder:hover {
	background-color: #343a51
}

.eContainer .elementsPanel .tools .lElementHolder.selected {
	background-color: #7246B1
}

.eContainer .elementsPanel .avatar {
	position: absolute;
	bottom: 10px;
	left: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.eContainer .elementsPanel .avatar .avatarImage {
	width: 40px;
	height: 40px;
	border-radius: 100px;
	overflow: hidden;
	margin-right: 10px
}

.eContainer .elementsPanel .avatar .avatarImage img {
	width: 100%
}

.eContainer .contentArea {
	padding: 0px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: auto;
	background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
	-webkit-box-flex: 1;
	-ms-flex: 1 1;
	flex: 1 1
}

.eContainer .contentArea p {
	color: inherit
}

.eContainer .contentArea .canvas {
	background-color: transparent;
	height: auto;
	width: 100%;
	margin: 0 auto;
	padding: 0 auto;
	border-radius: 3px
}

.eContainer .contentArea .canvas .blockElement {
	padding: 20px
}

.eContainer .contentArea .canvas .blockElement p {
	margin: 0
}

.eContainer .blocksPanel {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-flex: 0;
	-ms-flex: 0 1 320px;
	flex: 0 1 320px;
	background-color: #f2f2f3;
	border-left: 1px solid #a5acc5
}

.eContainer .blocksPanel.expanded {
	-webkit-box-flex: 0;
	-ms-flex: 0 1 580px;
	flex: 0 1 580px
}

.eContainer .blocksPanel .blocks {
	height: calc(100% - 50px);
	overflow: auto
}

@media only screen and (max-width: 48em) {
	.eContainer .blocksPanel {
		display: none
	}
}

.eContainer .blocksPanel .navigateAway {
	position: relative;
	height: 50px;
	padding: 0 20px;
	width: 100%;
	color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.eContainer .blocksPanel .navigateAway .arrowBack a {
	color: #fff;
	opacity: .6;
	font-size: 14px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.eContainer .blocksPanel .navigateAway .arrowBack a span {
	margin-right: 8px;
	font-size: 16px
}

.eContainer .blocksPanel .navigateAway .arrowBack a:hover {
	opacity: 1;
	color: #7246B1
}

.eContainer .blocksPanel .navigateAway .exit {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.eContainer .blocksPanel .navigateAway .exit p {
	font-size: 13px;
	font-weight: 300;
	opacity: .6;
	margin-right: 8px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	cursor: pointer
}

.eContainer .blocksPanel .navigateAway .exit p:hover {
	opacity: 1;
	color: #7246B1
}

.eContainer .blocksPanel .navigateAway .exit .exitCircle {
	width: 24px;
	height: 24px;
	border-radius: 100px;
	border: 1px solid #fff;
	background-color: transparent;
	color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	cursor: pointer;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.eContainer .blocksPanel .navigateAway .exit .exitCircle span {
	font-size: 13px
}

.eContainer .blocksPanel .navigateAway .exit .exitCircle:hover {
	background-color: #7246B1;
	border-color: #7246B1
}

.eContainer .blocksPanel .editorBlockTitle {
	font-size: 20px;
	text-align: center;
	padding: 10px;
	height: 47px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

.eContainer .blocksPanel .editorTabs ul {
	margin: 0;
	padding: 0;
	background-color: #343a51;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.eContainer .blocksPanel .editorTabs ul li {
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%
}

.eContainer .blocksPanel .editorTabs ul li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	color: #fff;
	font-size: 14px;
	opacity: .6;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.eContainer .blocksPanel .editorTabs ul li a:hover,
.eContainer .blocksPanel .editorTabs ul li a:focus,
.eContainer .blocksPanel .editorTabs ul li a:active,
.eContainer .blocksPanel .editorTabs ul li a.selected {
	background-color: #3e4661;
	opacity: 1
}

.eContainer .blocksPanel .blocksContent {
	position: relative;
	height: calc(100vh - 207px);
	overflow: auto;
	padding: 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 14px;
	color: #2a2f42
}

.eContainer .blocksPanel .blocksContent .blocks {
	padding: 20px;
	color: #fff
}

.eContainer .blocksPanel .rightToolsBreaker {
	width: 100%;
	height: 1px;
	background-color: #b5bbcf;
	margin-bottom: 20px
}

.icon16 {
	font-size: 16px
}

.icon18 {
	font-size: 18px
}

.icon20 {
	font-size: 20px
}

.icon22 {
	font-size: 22px
}

.icon24 {
	font-size: 24px
}

.icon26 {
	font-size: 26px
}

.icon28 {
	font-size: 28px
}

.icon30 {
	font-size: 30px
}

.contentEditable {
	outline: none
}

.wysiEditor {
	white-space: nowrap;
	position: absolute;
	top: -40px;
	background-color: #343a51;
	border-radius: 3px;
	color: #fff;
	z-index: 100;
	-webkit-transition: none;
	transition: none;
	font-size: 16px !important;
	line-height: normal;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: normal
}

.wysiEditor .wysiIconHolder {
	position: relative;
	margin: 0;
	padding: 0;
	display: inline-block;
	text-align: center;
	line-height: 14px;
	padding: 8px;
	cursor: pointer;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.wysiEditor .wysiIconHolder:hover,
.wysiEditor .wysiIconHolder:focus,
.wysiEditor .wysiIconHolder:active,
.wysiEditor .wysiIconHolder.selected {
	background-color: #7246B1
}

.wysiEditor .wysiIconHolder span[class*=icon-] {
	line-height: 14px
}

.wysiDropDown {
	background: #7246B1;
	position: absolute;
	top: 30px;
	left: 0;
	min-width: 160px;
	width: auto;
	height: 200px;
	overflow: auto;
	border-radius: 0 3px 3px 3px;
	z-index: 10000;
	-webkit-transition: none;
	transition: none
}

.wysiDropDownOpt {
	padding: 8px 12px;
	font-size: 12px;
	text-align: left;
	text-transform: uppercase;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.wysiDropDownOpt:hover,
.wysiDropDownOpt:focus,
.wysiDropDownOpt:active,
.wysiDropDownOpt.selected {
	background-color: #53c0bb
}

.wysiLinkHolder {
	background-color: #343a51;
	position: absolute;
	bottom: -52px;
	left: -130px;
	width: auto;
	height: 52px;
	overflow: auto;
	border-radius: 0 3px 3px 3px;
	z-index: 10000;
	padding: 2px
}

.wysiLinkHolder .wysiLinkFile {
	font-size: 11px;
	color: #b3b3b3;
	padding: 4px;
	text-align: left
}

.wysiLinkHolder .wysiLinkInput {
	border-radius: 2px;
	background: rgba(32, 36, 50, .8);
	width: 60px;
	height: 28px;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0;
	outline: none;
	color: #fff;
	padding: 7px 7px 7px 7px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 12px;
	width: 200px
}

.wysiLinkHolder .wysiLinkButton {
	background: #7246B1;
	color: #fff;
	border: 0;
	outline: none;
	padding: 6px 7px 6px 7px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 12px;
	border-radius: 2px;
	cursor: pointer
}

.wysiFloatTool {
	position: absolute;
	top: 30px;
	left: 0;
	width: auto;
	height: auto;
	z-index: 5
}

.dd_toolHolder {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	-webkit-box-flex: 50%;
	-ms-flex: 50%;
	flex: 50%
}

.ddToolsBtn {
	margin: 0;
	border-radius: 100px;
	padding: 7px 10px;
	border: 0;
	background: #7246B1;
	color: #fff;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	outline: none;
	text-transform: uppercase;
	cursor: pointer
}

.ddToolsBtn:hover,
.ddToolsBtn:focus,
.ddToolsBtn:active {
	background: #66c7c3
}

.dd_subToolOptionHolder {
	padding: 5px;
	border: 1px solid #999;
	margin-bottom: 10px
}

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

.dragDrop_element_imageSelect {
	background-color: #7246B1;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	position: absolute;
	left: 50%;
	margin-left: -45px;
	width: 90px;
	bottom: 50%;
	height: 22px;
	margin-bottom: 14px;
	border-radius: 10px;
	opacity: .7;
	padding: 3px 0;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center !important
}

.dragDrop_element_imageSelect.imageEdit {
	margin-bottom: -14px
}

.dragDrop_element_imageSelect:hover {
	opacity: 1
}

.rightEditorBack {
	padding: 10px 20px;
	background: #3e4661;
	color: #fff;
	cursor: pointer
}

.rightEditorBack span {
	margin-right: 8px;
	opacity: .6
}

.rightEditorBack p {
	opacity: .6;
	font-size: 12px;
	text-transform: uppercase
}

.wizardOverlay {
	height: 100vh;
	width: 100vw;
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #000;
	opacity: .3;
	z-index: 99998
}

.dragDropWizardPop {
	opacity: 1;
	z-index: 99999;
	position: absolute;
	width: 300px;
	background-color: #fff;
	padding: 20px;
	-webkit-box-shadow: 5px 5px 15px #666;
	box-shadow: 5px 5px 15px #666;
	border: 4px solid #7246B1;
	border-radius: 5px
}

.dragDropWizardPop .ddWArrowRight {
	position: absolute;
	width: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 30px solid #7246B1
}

.dragDropWizardPop .ddWArrowLeft {
	position: absolute;
	width: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-right: 30px solid #7246B1
}

.dragDropWizardPop .title {
	font-size: 20px;
	margin-bottom: 10px
}

.dragDropWizardPop .text {
	font-size: 14px;
	margin-bottom: 20px
}

.expandChildren {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}

.clusterHolder {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.clusterHolder .clusterIcon {
	overflow: hidden;
	position: relative;
	border-radius: 2px;
	border: 1px solid #969ebb;
	width: 24px;
	height: 24px;
	display: inline-block;
	cursor: pointer;
	margin-right: 20px
}

.clusterHolder .clusterTitle {
	display: inline-block;
	cursor: pointer
}

.clusterPopupHolder {
	position: fixed;
	left: 0px;
	top: 0px;
	background-color: #fff;
	border: 1px solid #969ebb;
	z-index: 99999;
	-webkit-box-shadow: 0px 0px 4px #aaa;
	box-shadow: 0px 0px 4px #aaa;
	min-width: 350px
}

.clusterPopupHolder .clusterPopTitle {
	padding: 20px;
	border-bottom: 1px solid #969ebb
}

.clusterPopupHolder .clusterPopContent {
	padding: 20px
}

.clusterPopupHolder .clusterPopFooter {
	padding: 10px;
	border-top: 1px solid #969ebb
}

.modal {
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 999999;
	background-color: rgba(0, 0, 0, .6)
}

.modal .content {
	position: relative;
	padding: 20px;
	background-color: #fff;
	border-radius: 10px
}

.modal .content .modalClose {
	position: absolute;
	top: 6px;
	right: 10px;
	cursor: pointer
}

.modal .modalCampaign {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 10px
}

.modal .modalCampaign .campaignName {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1
}

.mobileNavBG {
	background: -webkit-gradient(linear, left top, left bottom, from(#7246B1), to(#33257E));
	background: linear-gradient(#7246B1 0%, #33257E 100%);
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 999;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 30px
}

.mobileNavClose {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 30px;
	right: 30px;
	color: #fff;
	cursor: pointer;
	font-size: 24px
}

.mobileNavLink {
	position: relative;
	color: #fff;
	font-size: 22px;
	font-weight: 600;
	display: block;
	margin-top: 30px;
	text-transform: uppercase;
	cursor: pointer
}

.mobileNavLink:hover {
	text-decoration: none
}

.mobileNavLink span {
	position: absolute;
	top: 5px;
	right: 0
}

.agency-branding .colour {
	width: 100%;
	height: 30px;
	line-height: 30px;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	margin-bottom: 10px
}

.elementsEdit .toolHolder .elementHolder {
	background-color: #eee
}

.elementsEdit .toolHolder .elementHolder .element {
	background-color: #ddd;
	padding: 20px
}

.elementsEdit .toolHolder .elementHolder .elementChildren .props .prop .propTitle {
	background-color: #ccc
}

.billing-plan {
	min-height: 200px;
	border: 1px solid #a9a9ad;
	border-bottom: 5px solid #7246B1;
	border-radius: 3px;
	padding: 30px
}

.billing-plan.unavailable {
	border-bottom: 5px solid #a9a9ad
}

.billing-plan.current {
	border-bottom: 5px solid #33257e
}

.billing-plan .name {
	font-size: 24px
}

.subscription-plan {
	position: relative;
	border-radius: 3px;
	padding: 20px;
	border: 1px solid #e6e6e6;
	height: 490px
}

.subscription-plan.grey {
	color: #a9a9ad
}

.subscription-plan.primary {
	color: #7246B1
}

.subscription-plan.primary.current {
	border: 1px solid #7246B1
}

.subscription-plan.secondary {
	color: #33257e
}

.subscription-plan.secondary.current {
	border: 1px solid #33257e
}

.subscription-plan .subtitle {
	min-height: 50px
}

.subscription-plan.comingsoon span {
	opacity: .4
}

.subscription-plan.comingsoon .text-heavy {
	opacity: .4
}

.subscription-detail {
	width: 100%;
	margin: 10px 0;
	padding: 15px;
	background-color: #fff;
	border-radius: 3px
}

.subscription-detail.primary {
	border-left: 3px solid #7246B1
}

.subscription-detail.secondary {
	border-left: 3px solid #33257e
}

.subscription-detail.grey {
	border-left: 3px solid #a9a9ad
}

.plan-preview {
	-webkit-transition: all .75s ease;
	transition: all .75s ease;
	max-height: 350px;
	overflow-y: hidden
}

.plan-preview.hide {
	max-height: 0
}

.currencyCircle {
	border: 1px solid #d3d3d3;
	color: #d3d3d3;
	border-radius: 100px;
	padding: 5px 10px 5px 10px;
	display: inline-block;
	font-size: 12px;
	cursor: pointer
}

.currencyCircle.selected {
	color: #7246B1;
	border: 1px solid #7246B1
}

.form-preview {
	height: 300px;
	background-size: cover;
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.form-preview .cta {
	display: none;
	position: absolute;
	z-index: 2
}

.form-preview:hover .cta {
	display: block
}

.form-preview:hover::after {
	content: "";
	z-index: 1;
	background: #7246B1;
	display: block;
	height: 100%;
	width: 100%;
	opacity: .6;
	border-radius: 4px 4px 0 0
}

.report-container {
	float: left;
	width: 595px;
	padding: 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #fff
}

.report-container .header {
	width: 100%;
	float: left;
	height: 40px
}

.report-container .header .logo {
	float: left
}

.report-container .header .logo img {
	max-width: 90px
}

.report-container .header .business-name {
	float: right
}

.report-container .header .business-name p {
	text-transform: uppercase;
	font-size: 12px
}

.report-container .report-divider {
	float: left;
	width: 100%;
	height: 1px;
	background-color: #a9a9ad;
	margin-bottom: 30px
}

.report-container .content .details-wrapper {
	float: left;
	margin-top: 30px;
	margin-bottom: 30px
}

.report-container .content .details-wrapper .details {
	float: left;
	width: 100%
}

.report-container .content .details-wrapper .details p {
	margin-bottom: 0px
}

.report-container .content .details-wrapper .details .value {
	float: left
}

.report-container .content .details-wrapper .details .result {
	float: right;
	margin-bottom: 0
}

.report-container .content .stats-wrapper {
	width: 100%;
	float: left;
	margin-bottom: 30px
}

.report-container .content .stats-wrapper .stat {
	position: relative;
	float: left;
	width: 127px;
	height: 140px;
	margin-left: 15px;
	background-color: #7246B1;
	border-radius: 3px;
	padding: 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

.report-container .content .stats-wrapper .stat.alt {
	background-color: #33257e
}

.report-container .content .stats-wrapper .stat.negative {
	background-color: #dd4124
}

.report-container .content .stats-wrapper .stat.first {
	margin-left: 0
}

.report-container .content .stats-wrapper .stat .name {
	font-size: 12px;
	text-transform: uppercase;
	margin-bottom: 20px;
	color: #fff
}

.report-container .content .stats-wrapper .stat .value {
	font-size: 30px;
	font-weight: 600;
	color: #fff
}

.report-container .content .stats-wrapper .stat .percentage {
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 0;
	margin-bottom: 0
}

.report-container .content .stats-wrapper .stat .percentage p {
	margin-bottom: 0;
	color: #fff
}

.register {
	color: #fff;
	line-height: 1.45
}

.register .mobile-register-background {
	z-index: 1;
	background-size: cover;
	width: 100%;
	min-height: 100vh;
	position: fixed
}

@supports(-webkit-appearance: none) {
	.register .mobile-register-background {
		min-height: calc(100vh + 56px)
	}
}

.register .mobile-register-background:before {
	content: "";
	position: fixed;
	right: 0;
	left: 0;
	background-color: rgba(51, 37, 126, .8)
}

@supports(-webkit-appearance: none) {
	.register .mobile-register-background:before {
		min-height: calc(100vh + 56px)
	}
}

.register .mobile-register {
	height: 100vh;
	z-index: 2;
	padding: 25px;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	line-height: 1.45
}

.register .footer {
	z-index: 3;
	bottom: 0;
	position: fixed;
	width: 100vw;
	padding: 0 25px 35px 25px
}

.login-left-panel {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: relative;
	color: #fff;
	padding: 25px;
	background-size: cover;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .5s;
	transition: all .5s;
	-webkit-box-shadow: 0px 7px 20px #485170;
	box-shadow: 0px 7px 20px #485170
}

.login-left-panel:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(51, 37, 126, .5);
	-webkit-transition: background-color .3s ease;
	transition: background-color .3s ease
}

.login-left-panel .row {
	z-index: 2
}

.login-left-panel:hover:before {
	background-color: rgba(51, 37, 126, .7)
}

.login-left-panel .logo {
	margin-bottom: 40px
}

.login-left-panel .strap {
	margin-bottom: 20px
}

.login-left-panel .strap h1 {
	color: #fff
}

.login-left-panel .message {
	margin-bottom: 40px
}

.login-left-panel .voucher {
	margin-bottom: 45px;
	font-size: 16px;
	font-weight: 300;
	line-height: 28px
}

.login-left-panel .voucher p {
	color: #fff
}

.login-left-panel .voucher .scream {
	font-size: 24px;
	line-height: 36px;
	color: #fff
}

.login-left-panel .voucher .scream span {
	font-size: 28px;
	font-weight: 600
}

.login-left-panel .copyright {
	position: absolute;
	bottom: 20px;
	color: #fff
}

.login-right-panel {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

@media screen and (max-width: 64em) {
	.login-right-panel {
		padding: 30px 0
	}
}

.login-right-panel .row-100 {
	width: 100%
}

.login-right-panel .sign-up {
	margin-bottom: 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

@media screen and (min-width: 64em) {
	.login-right-panel .sign-up {
		position: absolute;
		top: 20px;
		right: 20px;
		margin-bottom: 120px
	}
}

@media screen and (max-width: 48em) {
	.login-right-panel .sign-up {
		display: block;
		width: 100%
	}
}

.login-right-panel .sign-up p {
	margin-right: 10px;
	font-size: 14px;
	color: #999
}

@media screen and (max-width: 48em) {
	.login-right-panel .sign-up p {
		display: block;
		width: 100%;
		text-align: center
	}
}

@media screen and (max-width: 48em) {
	.login-right-panel .sign-up button {
		display: block;
		max-width: 180px;
		margin: 0 auto 40px auto
	}
}

.login-right-panel .title {
	margin-bottom: 5px;
	font-size: 24px;
	text-align: center;
	text-transform: initial !important
}

.login-right-panel .title span {
	font-weight: 600;
	color: #7246B1
}

.login-right-panel .sub-title {
	margin-bottom: 40px;
	font-size: 14px;
	color: #999;
	text-align: center
}

.login-right-panel p.password {
	margin: 0;
	text-align: center
}

.login-right-panel p.password a {
	font-size: 12px
}

.fromCodeLeft {
	padding: 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: auto;
	height: 100%
}

.fromCodeRight {
	background-color: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: calc(100vh - 50px)
}

.fullScreenTitle {
	padding: 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom: 2px solid #7246B1
}

.react-codemirror2 {
	height: 100%;
	width: 100%
}

.CodeMirror {
	height: 100% !important
}

.Resizer {
	background: #000;
	opacity: .2;
	z-index: 1;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-moz-background-clip: padding;
	-webkit-background-clip: padding;
	background-clip: padding-box
}

.Resizer:hover {
	-webkit-transition: all 2s ease;
	transition: all 2s ease
}

.Resizer.horizontal {
	height: 11px;
	margin: -5px 0;
	border-top: 5px solid rgba(255, 255, 255, 0);
	border-bottom: 5px solid rgba(255, 255, 255, 0);
	cursor: row-resize;
	width: 100%
}

.Resizer.horizontal:hover {
	border-top: 5px solid rgba(0, 0, 0, .5);
	border-bottom: 5px solid rgba(0, 0, 0, .5)
}

.Resizer.vertical {
	width: 4px;
	margin: 0 -5px;
	border-left: 5px solid rgba(255, 255, 255, 0);
	border-right: 5px solid rgba(255, 255, 255, 0);
	cursor: col-resize
}

.Resizer.vertical:hover {
	border-left: 5px solid rgba(0, 0, 0, .5);
	border-right: 5px solid rgba(0, 0, 0, .5)
}

.Resizer.disabled {
	cursor: not-allowed
}

.Resizer.disabled:hover {
	border-color: transparent
}

.fromCodeLeft {
	padding: 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: auto;
	height: 100%;
	word-break: break-all
}

.fromCodeRight {
	background-color: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: calc(100vh - 50px)
}

.fullScreenTitle {
	padding: 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom: 2px solid #7246B1
}

.react-codemirror2 {
	height: 100%;
	width: 100%
}

.CodeMirror {
	height: 100% !important
}

.Resizer {
	background: #000;
	opacity: .2;
	z-index: 1;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-moz-background-clip: padding;
	-webkit-background-clip: padding;
	background-clip: padding-box
}

.Resizer:hover {
	-webkit-transition: all 2s ease;
	transition: all 2s ease
}

.Resizer.horizontal {
	height: 11px;
	margin: -5px 0;
	border-top: 5px solid rgba(255, 255, 255, 0);
	border-bottom: 5px solid rgba(255, 255, 255, 0);
	cursor: row-resize;
	width: 100%
}

.Resizer.horizontal:hover {
	border-top: 5px solid rgba(0, 0, 0, .5);
	border-bottom: 5px solid rgba(0, 0, 0, .5)
}

.Resizer.vertical {
	width: 4px;
	margin: 0 -5px;
	border-left: 5px solid rgba(255, 255, 255, 0);
	border-right: 5px solid rgba(255, 255, 255, 0);
	cursor: col-resize
}

.Resizer.vertical:hover {
	border-left: 5px solid rgba(0, 0, 0, .5);
	border-right: 5px solid rgba(0, 0, 0, .5)
}

.Resizer.disabled {
	cursor: not-allowed
}

.Resizer.disabled:hover {
	border-color: transparent
}

.fullScreenTitle {
	padding: 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom: 2px solid #7246B1
}

.mce-panel {
	background-color: transparent !important;
	border: 0px !important
}

.mce-stack-layout {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100% !important
}

.mce-toolbar-grp {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-flex: 30p;
	-ms-flex: 30p 1;
	flex: 30p 1
}

.mce-edit-area {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-flex: 1;
	-ms-flex: 1 1;
	flex: 1 1
}

.mce-edit-area iframe {
	height: auto !important
}

.mce-floatpanel {
	background-color: #fff !important
}

.dd_colorPicker {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 20px
}

.dd_colorPicker p {
	color: rgba(255, 255, 255, .6);
	margin: 0 10px 0 0;
	font-size: 12px
}

.dd_colorPicker .colorHolder {
	width: 24px;
	height: 24px;
	border-radius: 2px;
	background: #3e4661;
	cursor: pointer;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	position: relative
}

.dd_colorPicker .dd_colorPickerPop {
	position: absolute;
	z-index: 999999;
	left: 0;
	top: 0;
	background-color: #fff;
	width: 140px;
	border-radius: 5px;
	padding: 10px
}

.dd_colorPicker .dd_colorPickerPop_arrow {
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid #fff;
	position: absolute;
	top: 12px;
	left: -10px
}

.dd_colorPicker .topToolsHolder {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 5px
}

.dd_colorPicker .topToolsHolder .saturation {
	width: 100px;
	height: 92px;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	position: relative;
	border-radius: 5px;
	overflow: hidden;
	margin-right: 10px
}

.dd_colorPicker .topToolsHolder .hue {
	height: 92px;
	width: 14px;
	position: relative;
	border-radius: 30px;
	overflow: hidden
}

.dd_colorPicker .hexInput input {
	height: 19px;
	border: 0px;
	border-bottom: 2px solid #7246B1;
	width: 100%;
	outline: none;
	padding: 0px;
	padding-Bottom: 5px;
	font-size: 12px;
	margin-bottom: 5px
}

.dd_colorPicker .colorTitle {
	color: #4d4d4d;
	opacity: .6;
	font-size: 12px;
	margin-bottom: 5px
}

.dd_colorPicker .colorHolderSmall {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: #3e4661;
	cursor: pointer;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	margin-right: 6px
}

.dd_inputTool {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 20px;
	margin-left: 20px;
	width: 100%
}

.dd_inputTool p.placement {
	margin: 0;
	color: #202432;
	opacity: .6;
	font-size: 12px;
	-webkit-box-flex: 100px;
	-ms-flex: 100px 0;
	flex: 100px 0;
	text-transform: uppercase;
	-ms-flex-item-align: start;
	align-self: flex-start
}

.dd_inputTool .inputWrapper {
	-webkit-box-flex: 1;
	-ms-flex: 1 1;
	flex: 1 1;
	position: relative
}

.dd_inputTool .inputWrapper.fullWidth {
	width: 100%
}

.dd_inputTool .inputWrapper.fullWidth input {
	width: 100%;
	padding-right: 7px
}

.dd_inputTool .inputWrapper input {
	border: 1px solid #3e4661;
	color: #202432;
	border-radius: 2px;
	padding: 0 10px;
	height: 27px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff;
	width: 100%;
	outline: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 12px
}

.dd_inputTool .inputWrapper input::-webkit-input-placeholder {
	color: rgba(0, 0, 0, .6) !important
}

.dd_inputTool .inputWrapper select {
	border: 1px solid #3e4661;
	color: #202432;
	border-radius: 2px;
	padding: 0 10px;
	height: 27px;
	background: #fff;
	background-position: right 10px center !important;
	background-size: 14px auto !important;
	width: 100%;
	outline: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 12px
}

.dd_inputTool .inputWrapper .colorHolder {
	width: 24px;
	height: 24px;
	border-radius: 2px;
	background: #fff;
	border: 1px solid #3e4661;
	cursor: pointer;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	position: relative
}

.dd_inputTool .inputWrapper .imgPickerHolder {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.dd_inputTool .inputWrapper .imgPickerHolder .imgPreview {
	width: 75px;
	height: 75px;
	border-radius: 2px;
	background: #3e4661;
	cursor: pointer;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.dd_inputTool .inputWrapper .imgPickerHolder .imgPreview img {
	width: 77px;
	height: 77px;
	border-radius: 3px
}

.dd_inputTool .inputWrapper .imgPickerHolder a {
	font-size: 11px
}

.dd_inputTool .inputWrapper .pxText {
	position: absolute;
	top: 3px;
	right: 8px
}

.dd_inputTool .inputWrapper .pxText p {
	margin: 0 0 0 10px;
	color: rgba(0, 0, 0, .6);
	font-size: 12px
}

.inlineTinyMce {
	height: calc(100vh - 247px);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #969ebb !important;
	border-radius: 4px
}

.inlineTinyMce .mce-path,
.inlineTinyMce .mce-branding {
	display: none !important
}

.inlineTinyMce .mce-tinymce,
.inlineTinyMce .mce-edit-area.mce-container,
.inlineTinyMce .mce-container-body.mce-stack-layout {
	height: 100% !important;
	box-shadow: none;
	-webkit-box-shadow: none
}

.inlineTinyMce .mce-stack-layout {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	height: 100% !important
}

.inlineTinyMce .mce-edit-area {
	border: none;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	height: 100% !important;
	overflow: hidden
}

.inlineTinyMce .mce-top-part {
	padding: 3px;
	-webkit-box-flex: 0;
	-ms-flex: 0;
	flex: 0;
	border-bottom: 1px solid #969ebb !important
}

.inlineTinyMce .mce-toolbar-grp {
	margin: 0 auto
}

.inlineTinyMce .mce-container * {
	white-space: normal !important;
	text-align: center !important
}

.inlineTinyMce .mce-top-part::before {
	box-shadow: none;
	-webkit-box-shadow: none
}

.inlineTinyMce .mce-flow-layout {
	text-align: center
}

.inlineTinyMce .mce-btn-group:not(:first-child) {
	border: 0px
}

.inlineTinyMce .mce-btn {
	-webkit-box-shadow: 0px 1px 3px #ddd;
	box-shadow: 0px 1px 3px #ddd;
	margin-left: 4px !important;
	margin-bottom: 4px !important;
	border-radius: 5px
}

.inlineTinyMce .mce-btn:hover {
	border: 1px solid #202432
}

.inlineTinyMce .mce-btn.mce-active {
	background-color: #202432;
	border: 1px solid #202432
}

p.editorTitle {
	text-transform: uppercase;
	font-size: 12px;
	color: #202432;
	opacity: .6;
	margin: 0 0 20px 20px
}

ul.alignHolder {
	margin: 0;
	padding: 0
}

ul.alignHolder li {
	list-style: none;
	display: inline-block;
	margin-left: 8px
}

ul.alignHolder li:first-child {
	margin-left: 0
}

ul.alignHolder li span {
	width: 30px;
	height: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-color: #3e4661;
	color: #fff;
	border-radius: 2px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	font-size: 18px
}

ul.alignHolder li span:hover,
ul.alignHolder li span:focus,
ul.alignHolder li span:active,
ul.alignHolder li span.selected {
	background-color: #7246B1
}

ul.verticalAlignHolder {
	margin: 0;
	padding: 0
}

ul.verticalAlignHolder li {
	list-style: none;
	display: inline-block;
	margin-left: 8px
}

ul.verticalAlignHolder li:first-child {
	margin-left: 0
}

ul.verticalAlignHolder li span {
	width: 30px;
	height: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-color: #3e4661;
	color: #fff;
	border-radius: 2px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	font-size: 18px
}

ul.verticalAlignHolder li span:hover,
ul.verticalAlignHolder li span:focus,
ul.verticalAlignHolder li span:active,
ul.verticalAlignHolder li span.selected {
	background-color: #7246B1
}

.dd_dragDropTool {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 20px
}

.dd_dragDropTool p.placement {
	margin: 0;
	color: #fff;
	opacity: .6;
	font-size: 12px;
	margin: 0 10px 0 0;
	width: 100px
}

.dd_dragDropTool div {
	width: 100%
}

.dd_dragDrop {
	border: 0px;
	color: #202432;
	border-radius: 3px;
	padding: 0 10px;
	height: 27px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff url("/public/images/arrow-down-select.svg") no-repeat !important;
	background-position: right 10px center !important;
	background-size: 14px auto !important;
	width: 100%
}

.dd_dragDrop option {
	color: #000
}

.dd_dragDrop option:disabled {
	color: #ccc
}

.expand {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding-bottom: 10px;
	border-bottom: 1px solid #2a2f42;
	margin-bottom: 15px;
	cursor: pointer;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.expand p {
	text-transform: uppercase;
	font-size: 12px;
	color: #202432;
	opacity: .6;
	margin: 0
}

.expand span {
	font-size: 12px;
	color: #202432
}

.expand.selected {
	border-bottom: 1px solid #7246B1
}

.expand.selected p {
	color: #7246B1;
	opacity: 1
}

.expand.selected span {
	color: #7246B1
}

.mpzLinkPicker {
	position: absolute;
	z-index: 999999;
	right: 0;
	top: 0;
	background-color: #fff;
	width: 400px;
	max-width: 400px;
	border-radius: 5px;
	padding: 10px;
	white-space: normal;
	color: #555;
	font-size: initial;
	text-align: initial;
	line-height: initial;
	-webkit-box-shadow: 0px 0px 5px #aaa;
	box-shadow: 0px 0px 5px #aaa
}

.mpzColorPicker {
	position: absolute;
	z-index: 999999;
	left: 0;
	top: 0;
	background-color: #fff;
	width: 140px;
	max-width: 140px;
	border-radius: 5px;
	padding: 10px;
	white-space: normal;
	color: #555;
	font-size: initial;
	text-align: initial;
	line-height: initial;
	-webkit-box-shadow: 0px 0px 5px #aaa;
	box-shadow: 0px 0px 5px #aaa
}

.mpzColorPicker .dd_colorPickerPop_arrow {
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid #fff;
	position: absolute;
	top: 12px;
	left: -10px
}

.mpzColorPicker .topToolsHolder {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 5px
}

.mpzColorPicker .topToolsHolder .saturation {
	width: 100px;
	height: 92px;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	position: relative;
	border-radius: 5px;
	overflow: hidden;
	margin-right: 10px
}

.mpzColorPicker .topToolsHolder .hue {
	height: 92px;
	width: 14px;
	position: relative;
	border-radius: 30px;
	overflow: hidden
}

.mpzColorPicker .hexInput {
	position: relative
}

.mpzColorPicker .hexInput input {
	height: 19px;
	border: 0px;
	border-bottom: 2px solid #7246B1;
	width: 100%;
	outline: none;
	padding: 0px;
	padding-Bottom: 5px;
	font-size: 12px;
	margin-bottom: 5px;
	background-color: transparent !important;
	color: #555
}

.mpzColorPicker .hexInput .addFaveColor {
	position: absolute;
	right: 0px;
	top: 4px;
	cursor: pointer;
	font-size: 14px;
	color: #555
}

.mpzColorPicker .colorTitle {
	color: #4d4d4d;
	opacity: .6;
	font-size: 12px;
	margin-bottom: 5px
}

.mpzColorPicker .colorHolderSmall {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: #3e4661;
	cursor: pointer;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	margin-right: 6px
}

.mpzColorPicker .saveButton {
	display: block;
	margin-top: 10px
}

.emailPreviewHolder {
	height: 100%
}

.emailPreviewHolder .device ul {
	margin: 0;
	padding: 0
}

.emailPreviewHolder .device ul li {
	list-style: none;
	display: inline-block;
	margin-left: 15px
}

.emailPreviewHolder .device ul li:first-child {
	margin-left: 0
}

.emailPreviewHolder .device ul li a {
	color: #a9a9ad;
	opacity: .6;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.emailPreviewHolder .device ul li a:hover {
	opacity: 1;
	color: #7246B1
}

.emailPreviewHolder .device ul li a.selected {
	opacity: 1;
	color: #7246B1
}

.emailPreviewHolder .innerPreviewHolder {
	border-radius: 5px;
	overflow: hidden;
	height: calc(100vh - 170px);
	margin: 0 auto;
	border: 1px solid #f3f4f7
}

.emailPreviewHolder .emailPreviewOptions {
	padding-left: 20px
}

@media only screen and (max-width: 48em) {
	.emailPreviewHolder .emailPreviewOptions {
		padding-left: 0px
	}
}

.campaign-holder .basic-theme {
	height: 300px;
	width: 250px;
	margin: 5px 15px
}

.campaign-holder .theme-group {
	margin-bottom: 12px;
	border-bottom: 1px solid #e6e6e6;
	padding-bottom: 10px;
	font-size: 14px;
	color: #a9a9ad;
	cursor: pointer
}

.campaign-holder .theme-group.selected {
	color: #7246B1
}

.campaign-holder .theme-group.last {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0
}

.campaign-holder .themes-advanced .theme-holder:hover {
	-webkit-box-shadow: 0px 0px 15px #f2f2f2;
	box-shadow: 0px 0px 15px #f2f2f2;
	border: 1px solid #7246B1;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.campaign-holder .themes-advanced .theme-holder:hover .toolbar-expand {
	height: 35px
}

.campaign-holder .theme-holder {
	position: relative;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 3px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.campaign-holder .theme-holder img {
	border-radius: 3px
}

.campaign-holder .theme-holder .theme {
	margin: 0 0 8px 0
}

.campaign-holder .theme-holder .theme.extraSpace {
	margin: 0 0 12px 0
}

.campaign-holder .theme-holder .theme .svg-holder .outer {
	fill: rgba(0, 0, 0, .05);
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.campaign-holder .theme-holder .theme .svg-holder .inner {
	fill: rgba(0, 0, 0, .2);
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.campaign-holder .theme-holder .theme .svg-holder:hover .inner,
.campaign-holder .theme-holder .theme .svg-holder:hover .outer {
	fill: #7246B1
}

.campaign-holder .theme-holder .theme-name {
	color: #7246B1;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 13px;
	word-break: break-all
}

.campaign-holder .theme-holder .theme-date {
	color: #a9a9ad;
	font-size: 11px;
	margin-top: 5px
}

.campaign-holder .theme-holder .toolbar-expand {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 0px;
	padding: 0 15px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-transition: height .2s ease;
	transition: height .2s ease;
	overflow: hidden;
	border-bottom: 1px solid #e6e6e6;
	border-radius: 3px 3px 0 0
}

.campaign-holder .theme-holder .toolbar-expand .inside {
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.file-manager {
	height: 100vh
}

.file-manager .__react_component_tooltip {
	font-family: "Open Sans", sans-serif
}

.file-manager .right-controls {
	float: right;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.file-manager .right-controls .views {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	color: #33257e;
	cursor: pointer
}

.file-manager .right-controls .views>span {
	margin: 0 5px;
	background-color: #fff;
	border-radius: 50%;
	padding: 10px
}

.file-manager .right-controls .views .selected {
	color: #fff;
	background-color: #33257e
}

.file-manager .folders-container {
	position: relative;
	background-color: #f7f7f8;
	height: calc(100% - 60px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	border-radius: 4px
}

.file-manager .files-container {
	min-height: 0px;
	margin-bottom: 60px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

.file-manager .infinite-holder {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 75vh;
	padding: 0 10px;
	overflow-x: hidden;
	overflow-y: auto
}

@media screen and (max-width: 64em) {
	.file-manager .infinite-holder {
		height: 65vh
	}
}

@media screen and (max-width: 30em) {
	.file-manager .infinite-holder {
		height: 55vh
	}
}

.file-manager .folders {
	width: 100%;
	border-radius: 5px;
	padding-top: 20px;
	overflow-y: hidden;
	overflow-x: hidden;
	min-height: 0px
}

.file-manager .folders .folder {
	width: 100%;
	padding-left: 20px;
	cursor: pointer
}

.file-manager .folders .folder>span {
	line-height: 40px;
	font-size: 14px;
	font-weight: 600;
	color: #999;
	-webkit-transition: all .2s;
	transition: all .2s
}

.file-manager .folders .folder>span:hover {
	color: #7246B1
}

.file-manager .folders .folder.selected {
	border-left: 2px solid #7246B1
}

.file-manager .folders .folder.selected span {
	color: #7246B1
}

.file-manager .folders .folder .folder-controls {
	float: right;
	margin: 12px 20px 0 0
}

.file-manager .folders .folder .folder-controls span {
	margin-left: 8px;
	-webkit-transition: all .2s;
	transition: all .2s
}

.file-manager .folders .folder .folder-controls span:hover {
	color: #66c7c3
}

.file-manager .folders .new-folder {
	width: 100%;
	margin-left: 12px;
	color: #7246B1;
	height: 35px
}

.file-manager .folders .new-folder>span {
	line-height: 35px;
	height: 100%;
	width: 100%
}

.file-manager .add-folder {
	position: relative;
	cursor: pointer;
	color: #7246B1;
	font-size: 16px;
	font-weight: bold;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-transition: color .3s ease;
	transition: color .3s ease;
	margin-bottom: 20px
}

.file-manager .add-folder:hover {
	color: #66c7c3
}

.file-manager .add-folder.disabled {
	cursor: default;
	color: #8bd5d1
}

.file-manager .tiles .tile-holder {
	height: 250px
}

.file-manager .tiles .tile-holder .tile {
	-webkit-box-shadow: 0px 0px 30px #f3f4f7;
	box-shadow: 0px 0px 30px #f3f4f7;
	width: 100%;
	height: 100%;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background-color: #e6e6e6
}

.file-manager .tiles .tile-holder .tile .image-holder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	border-radius: 4px
}

.file-manager .tiles .tile-holder .tile.selected:after {
	content: "";
	background: #7246B1;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: .5;
	border-radius: 4px 4px 0 0
}

.file-manager .tiles .tile-controls {
	z-index: 1;
	color: #fff;
	width: 100%;
	height: 100%;
	position: absolute;
	cursor: default
}

.file-manager .tiles .tile-controls .select-folder {
	cursor: pointer;
	z-index: 1;
	top: 0;
	left: 0;
	position: absolute;
	padding: 10px;
	font-size: 19px;
	-webkit-transition: all .2s;
	transition: all .2s
}

.file-manager .tiles .tile-controls .select-folder:hover {
	color: #dddddf
}

.file-manager .tiles .tile-controls .select-copy {
	cursor: pointer;
	z-index: 1;
	top: 0;
	left: 30px;
	position: absolute;
	padding: 10px;
	font-size: 19px;
	-webkit-transition: all .2s;
	transition: all .2s
}

.file-manager .tiles .tile-controls .select-copy:hover {
	color: #dddddf
}

.file-manager .tiles .tile-controls .select-edit {
	cursor: pointer;
	z-index: 1;
	top: 0;
	right: 30px;
	position: absolute;
	padding: 10px;
	font-size: 19px;
	-webkit-transition: all .2s;
	transition: all .2s
}

.file-manager .tiles .tile-controls .select-edit:hover {
	color: #dddddf
}

.file-manager .tiles .tile-controls .delete {
	cursor: pointer;
	top: 0;
	right: 0;
	position: absolute;
	padding: 10px;
	z-index: 1;
	font-size: 19px;
	-webkit-transition: all .2s;
	transition: all .2s
}

.file-manager .tiles .tile-controls .delete:hover {
	color: #dddddf
}

.file-manager .tiles .tile-controls .tile-select {
	position: absolute;
	height: 100%;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.file-manager .tiles .tile-controls .tile-select span {
	cursor: pointer;
	text-align: center;
	width: 100%;
	font-size: 26px;
	-webkit-transition: all .2s;
	transition: all .2s
}

.file-manager .tiles .tile-controls .tile-select span:hover {
	color: #e6e6e6
}

.file-manager .tiles .tile-controls .file-name {
	cursor: pointer;
	z-index: 1;
	bottom: 0;
	width: 100%;
	text-align: center;
	position: absolute;
	padding: 10px;
	font-size: 14px
}

.file-manager .tiles .tile-controls .file-name:hover {
	color: #dddddf
}

.file-manager .details .detail-holder {
	border-top: 1px solid #dddddf;
	padding: 15px 0
}

.file-manager .details .detail-holder .detail {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.file-manager .details .detail-holder .detail .detail-tickBox {
	line-height: 30px;
	margin-right: 10px
}

.file-manager .details .detail-holder .detail .image-holder {
	border-radius: 2px;
	position: relative;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	background-size: cover;
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat
}

.file-manager .details .detail-holder .detail .detail-details {
	margin-left: 10px
}

.file-manager .details .detail-holder .detail .detail-details .name {
	color: #7246B1;
	white-space: nowrap
}

.file-manager .details .detail-holder .detail .detail-details .created {
	color: #a9a9ad;
	font-size: 12px;
	white-space: nowrap
}

.file-manager .details .detail-holder .detail .detail-controls {
	float: right;
	position: relative;
	margin-left: auto
}

.file-manager .details .detail-holder .detail .detail-controls>span {
	color: #7246B1;
	line-height: 40px;
	margin: 0 0 0 15px;
	cursor: pointer
}

.file-manager .file-manager-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0 30px;
	background: #fff;
	-webkit-box-shadow: 0px 0px 2px #d4d7e3;
	box-shadow: 0px 0px 2px #d4d7e3
}

image-editor toolbar {
	background-color: #7246B1 !important
}

#popImageEditor {
	position: fixed;
	z-index: 999999;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh
}

#popImageEditorOverlay {
	position: fixed;
	z-index: 1000001;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	opacity: .7;
	display: none
}

.import-panel {
	width: 300px;
	height: 485px;
	border-radius: 8px;
	margin: 25px 25px 25px 0;
	background-color: #fff;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto
}

.import-panel .import-field {
	padding: 20px
}

.import-panel .import-field .form-group {
	height: 31px
}

.import-panel .sample-line {
	padding: 20px;
	color: #fff;
	background-color: #c3c3c6;
	border-bottom: 1px solid #f7f7f8
}

.import-panel .sample-line.pending {
	background-color: #66c7c3
}

.import-panel .sample-line.header {
	padding: 10px 20px;
	background-color: #a9a9ad
}

.import-panel .sample-line.header.pending {
	background-color: #7246B1
}

.import-panel .sample-line:last-child {
	border-radius: 0 0 8px 8px
}

.template-link-count {
	opacity: .8;
	cursor: pointer;
	position: absolute;
	left: 0px;
	top: 20px;
	background-color: #fff;
	color: #ebdede;
	border: 1px solid #ddd
}

.fpNewsHolder {
	width: 100%;
	height: 100%;
	position: relative
}

.fpNewsHolder .newsItem {
	height: 100%;
	width: 100%
}

.fpNewsHolder .fpNewsPicker {
	position: absolute;
	bottom: -15px;
	right: 0px
}

.fpNewsHolder .fpNewsPicker .fpNewsDot {
	cursor: pointer;
	width: 12px;
	height: 12px;
	background-color: #eee;
	display: inline-block;
	margin-left: 10px;
	border-radius: 100px
}

.fpNewsHolder .fpNewsPicker .selectedDot {
	background-color: #ddd
}

.automationOuter {
	margin: 0 auto;
	padding: 0;
	position: relative;
	list-style-type: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

.automationOuter .automationWizardInitialStep {
	background-color: #7246B1;
	padding: 10px;
	border-radius: 20px;
	position: relative;
	color: #fff;
	font-size: 14px;
	width: 200px;
	margin: 0 auto;
	margin-top: 20px
}

.automationOuter .automationWizardInitialStep:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(240, 240, 240, 0);
	border-bottom-color: #7246B1;
	border-width: 10px;
	margin-left: -10px
}

.automationOuter .wizardToDo {
	width: 200px;
	background-color: #7246B1;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
	top: 20%;
	left: 105%;
	cursor: pointer;
	-webkit-transition: background-color .3s ease;
	transition: background-color .3s ease
}

.automationOuter .wizardToDo:hover {
	background-color: #66c7c3
}

.automationOuter .wizardToDo:after {
	content: " ";
	position: absolute;
	top: 50%;
	right: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent #7246B1 transparent transparent
}

.automationOuter .automationYesNo {
	background-color: #7246B1;
	padding: 10px;
	margin: 0 auto;
	width: 100px;
	color: #fff;
	border-radius: 100px
}

.automationOuter .automationYesNo.isNo {
	background-color: #dd4124
}

.automationOuter .automationAddStep {
	margin-left: auto;
	margin-right: auto;
	pointer-events: auto;
	padding-top: 30px;
	position: relative;
	width: 30px
}

.automationOuter .automationAddStep.lineBelow {
	padding-top: 0px;
	padding-bottom: 30px
}

.automationOuter .automationAddStep .automationAddStepButton {
	padding: 0px;
	margin: 0 auto;
	border: 1px solid #a9a9ad;
	line-height: 22px;
	font-size: 16px;
	width: 25px;
	border-radius: 100px;
	cursor: pointer;
	padding-left: 1px
}

.automationOuter .automationAddStep .automationAddStepButton:hover:not(.disabled) {
	border: 1px solid #7246B1;
	-webkit-box-shadow: 0px 0px 15px #d4d7e3;
	box-shadow: 0px 0px 15px #d4d7e3;
	color: #fff;
	background-color: #7246B1
}

.automationOuter .automationAddStep .automationAddStepButton.disabled {
	cursor: not-allowed;
	opacity: .6
}

.automationOuter .automationLine {
	padding-top: 30px;
	position: relative
}

.automationOuter .automationLine.automationDisabled {
	opacity: .2;
	cursor: not-allowed
}

.automationOuter .automationSplitHolder {
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding-top: 30px;
	position: relative
}

.automationOuter .automationSplitHolder:before {
	border-left: 2px solid #a9a9ad;
	content: "";
	height: 30px;
	left: 50%;
	margin-left: -1px;
	position: absolute;
	top: 0;
	width: 0;
	z-index: -1
}

.automationOuter .lineAbove:before {
	border-left: 2px solid #a9a9ad;
	content: "";
	height: 30px;
	left: 50%;
	position: absolute;
	top: 0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}

.automationOuter .lineBelow:after {
	border-left: 2px solid #a9a9ad;
	content: "";
	height: 30px;
	left: 50%;
	position: absolute;
	bottom: 0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}

.automationOuter .automationSplit {
	float: left;
	padding: 30px 0 0;
	position: relative;
	text-align: center;
	min-width: 260px
}

.automationOuter .automationSplit:before {
	border-top: 2px solid #a9a9ad;
	content: "";
	height: 30px;
	position: absolute;
	right: 50%;
	top: 0;
	width: 50%
}

.automationOuter .automationSplit:after {
	border-top-left-radius: 5px;
	border-left: 2px solid #a9a9ad;
	left: 50%;
	right: auto;
	border-top: 2px solid #a9a9ad;
	content: "";
	height: 30px;
	position: absolute;
	right: 50%;
	top: 0;
	width: 50%
}

.automationOuter .automationSplit:first-child:before {
	border: none
}

.automationOuter .automationSplit:last-child:after {
	border: none
}

.automationOuter .automationSplit:last-child:before {
	border-right: 2px solid #a9a9ad;
	border-top-right-radius: 5px
}

.automationOuter .stepStatsHolder {
	position: absolute;
	color: #fff;
	border-radius: 10px;
	padding: 2px 5px 2px 5px;
	min-width: 50px;
	font-size: 11px
}

.automationOuter .stepStatsHolder.queued {
	top: -18px;
	left: 20px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	padding-bottom: 0px;
	background-color: #0094d5;
	-webkit-box-shadow: inset 0px -10px 5px -10px #888;
	box-shadow: inset 0px -10px 5px -10px #888
}

.automationOuter .stepStatsHolder.processed {
	right: 20px;
	bottom: -18px;
	padding-top: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	background-color: #7246B1;
	-webkit-box-shadow: inset 0px 10px 5px -10px #888;
	box-shadow: inset 0px 10px 5px -10px #888
}

.automationOption {
	background-color: #fff;
	margin: 0 auto;
	width: 240px;
	position: relative;
	border-radius: 5px;
	border: 1px solid #a9a9ad;
	cursor: pointer;
	padding: 20px;
	font-size: 14px;
	word-break: break-word;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.automationOption.incomplete {
	border: 1px solid #dd4124
}

.automationOption.green {
	border: 1px solid #08a741
}

.automationOption.green.incomplete {
	border: 1px solid #0ad854
}

.automationOption.automationDisabled::after {
	content: "";
	position: absolute;
	border-radius: 5px;
	cursor: not-allowed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%
}

.automationOption:hover {
	border: 1px solid #fff;
	-webkit-box-shadow: 0px 0px 15px #d4d7e3;
	box-shadow: 0px 0px 15px #d4d7e3
}

.automationOption:hover .automationRemoveStep {
	display: block
}

.automationOption .automationRemoveStep {
	position: absolute;
	right: 5px;
	top: 5px;
	width: 25px;
	line-height: 25px;
	cursor: pointer;
	display: none;
	background-color: #fff;
	border-radius: 100px;
	color: #a9a9ad
}

.automationOption .automationRemoveStep:hover {
	color: #000
}

.automationOption.autoEmail {
	padding: 0px
}

.automationOption.autoEmail .autoEmailPreview {
	width: 100%;
	height: 200px;
	background-color: #f2f2f3;
	border-bottom: 1px solid #a9a9ad
}

.automationOption.autoEmail .autoEmailSubject {
	padding: 15px
}

.automationOption.autoDelay {
	padding: 10px;
	border-radius: 100px
}

.automationOption.autoWait {
	padding: 10px;
	border-radius: 100px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px
}

.automationOption.autoSms {
	border: 1px solid indigo
}

.automationOption.autoSms .phone {
	height: 70px;
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.automationOption.autoSms .iconMedalHolder {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 40px;
	color: indigo
}

.automationOption.autoAction {
	border: 1px solid green
}

.automationOption.autoAction .iconCogHolder {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 40px;
	color: green
}

.automationOption.autoGoal {
	border: 1px solid orange
}

.automationOption.autoGoal .iconMedalHolder {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 40px;
	color: orange
}

.automationOption.autoNotification {
	border: 1px solid purple
}

.automationOption.autoNotification .iconMedalHolder {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 40px;
	color: purple
}

.automationOption.autoCondition {
	padding-top: 25px
}

.automationOption.autoCondition .iconArrowsSplitHolder {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	position: absolute;
	left: 50%;
	margin-left: -15px;
	top: -15px;
	font-size: 20px;
	background-color: #a9a9ad;
	color: #fff;
	padding: 5px;
	border-radius: 20px
}

.automationOption .automationToDoHolder {
	border: 1px dashed #a9a9ad;
	padding: 10px;
	border-radius: 5px;
	color: #a9a9ad
}

.autoZoomHolder {
	position: absolute;
	right: 20px;
	top: 60px;
	z-index: 999
}

.autoZoomHolder.lower {
	top: 110px
}

.autoZoomHolder .zoomPlus {
	background-color: #fff;
	border: 2px solid #7246B1;
	border-radius: 50px;
	padding: 5px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	cursor: pointer
}

.autoZoomHolder .zoomMinus {
	background-color: #fff;
	border: 2px solid #7246B1;
	border-top: 0px;
	border-radius: 50px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	padding: 5px;
	cursor: pointer
}

.automationTextWarning {
	border: 1px solid #dddddf;
	background-color: #f7f7f8;
	padding: 20px;
	text-align: center;
	border-radius: 5px;
	font-size: 14px
}

.automationStepSaveButtonHolder {
	width: 100%;
	position: absolute;
	bottom: 20px;
	background-color: #fff
}

.automationStepSaveButtonHolder button {
	width: auto
}

.automationStepContentHolder {
	padding-right: 10px;
	height: calc(100vh - 150px);
	overflow: auto
}

.templateImageImg {
	-webkit-transition: all 1s;
	transition: all 1s;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat
}

.templateImageImg.phone {
	background-position-y: top
}

.automationQueuedHolder {
	padding: 0px 5px 0px 5px;
	height: 25px;
	margin: 0 auto;
	border: 1px solid #a9a9ad;
	line-height: 22px;
	font-size: 10px;
	border-radius: 100px;
	cursor: initial;
	display: inline-block;
	background-color: #7246B1;
	color: #fff
}

.headerTextInput {
	width: 100%;
	background-color: transparent;
	color: #fff;
	max-width: 400px
}

.abSlider {
	overflow: hidden;
	position: relative;
	height: 70px;
	background-color: #a9a9ad;
	border-radius: 10px;
	margin-bottom: 15px
}

.abSlider .abSliderTitle {
	font-size: 12px;
	margin-bottom: 2px
}

.abSlider .abSliderStat {
	font-size: 18px
}

.abSlider .abSliderInner {
	float: left;
	position: relative;
	height: 100%;
	background-color: #7246B1
}

.abSlider .abSliderCampaign {
	text-align: center;
	color: #fff;
	float: left;
	height: 100%;
	border-right: 1px solid #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.abSlider .abSliderFinal {
	float: left;
	position: relative;
	height: 100%;
	background-color: #33257e;
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	color: #fff
}

.abSlider .abSliderHandle {
	display: inline-block;
	position: absolute;
	height: 100%;
	width: 11px;
	right: 0px;
	top: 0px;
	background-color: #333;
	z-index: 999999;
	cursor: move;
	border-right: 1px solid #555;
	border-left: 1px solid #555
}

.abSlider .abSliderHandle .theIcon {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	position: absolute;
	top: 27px;
	left: -4px;
	font-size: 17px;
	color: #999
}

.admin-login-holder {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
}

.admin-login-innerHolder {
	width: 100%;
	max-width: 600px;

	.buttonSimple {
		padding: 4px 8px;
		border-radius: 6px;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		font-size: 14px;
		cursor: pointer;
		color: #171819;
		font-weight: 500;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-transition: all .3s ease;
		transition: all .3s ease
	}

	.buttonSimple.buttonSimple-selected {
		background-color: #e6e0f7;
		color: #5934c2
	}

	.buttonSimple:hover:not(.buttonSimple-selected) {
		background: #f7f3f0
	}

	.buttonSimple .icons-holder {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center
	}

	.buttonSimple .icons-icon path {
		fill: #000
	}

	.buttonSimple .buttonsimple-iconLeft .icons-icon path {
		fill: #000
	}

	.buttonSimple .buttonsimple-iconRight .icons-icon path {
		fill: #000
	}

	.buttonSimple .buttonsimple-iconLeft .icons-icon path {
		fill: #7c8086
	}

	.buttonSimple.buttonSimple-selected .buttonsimple-iconLeft .icons-icon path {
		fill: #5934c2
	}

	.button-simple-fullsize {
		padding: 5px 12px;
		min-height: 40px
	}

	.button-simple-grey {
		background-color: #a9a9ad;
		color: #fff
	}

	.button-simple-grey:hover,
	.button-simple-grey.buttonSimple-selected {
		background-color: #dddddf
	}

	.button-simple-lightgrey {
		background-color: #fff;
		color: #fff
	}

	.button-simple-lightgrey:hover,
	.button-simple-lightgrey.buttonSimple-selected {
		background-color: #f7f7f8
	}

	.button-simple-lightred {
		background-color: #fcedeb;
		color: #dd4124
	}

	.button-simple-lightred:hover,
	.button-simple-lightred.buttonSimple-selected {
		background-color: #f8dad5 !important
	}

	.button-simple-lightgreen {
		background-color: #e9f7f6;
		color: #43b7b2
	}

	.button-simple-lightgreen:hover,
	.button-simple-lightgreen.buttonSimple-selected {
		background-color: #d6f0ef !important
	}

	.button-simple-lightyellow {
		background-color: #fffce5;
		color: #fedd00
	}

	.button-simple-lightyellow:hover,
	.button-simple-lightyellow.buttonSimple-selected {
		background-color: #fff8cb !important
	}

	.button-simple-lightorange {
		background-color: #ffa13f;
		color: #fff
	}

	.button-simple-lightorange:hover,
	.button-simple-lightorange.buttonSimple-selected {
		background-color: #ffad58 !important
	}

	.button-simple-lightorange .icons-icon path {
		fill: #fff
	}

	.button-simple-lightorange .buttonsimple-iconLeft .icons-icon path {
		fill: #fff
	}

	.button-simple-lightorange .buttonsimple-iconRight .icons-icon path {
		fill: #fff
	}

	.button-simple-lightpurple {
		background-color: #efe9f7;
		color: #7943b7
	}

	.button-simple-lightpurple:hover,
	.button-simple-lightpurple.buttonSimple-selected {
		background-color: #e2d6f0 !important
	}

	.button-simple-black {
		background-color: #000;
		color: #fff
	}

	.button-simple-black:hover,
	.button-simple-black.buttonSimple-selected {
		background-color: #000
	}

	.button-simple-black .buttonsimple-iconLeft .icons-icon path {
		fill: #fff
	}

	.button-simple-black .buttonsimple-iconRight .icons-icon path {
		fill: #fff
	}