@charset "UTF-8";
.app-row {
	display: grid;
	grid-template-columns: 72px 1fr;
	grid-column-gap: 16px;
	margin-bottom: 32px;

	.app-icon {
		border-radius: 8px;
		width: 72px;
		height: 72px;

		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		background-color:var(--current-secondary);
		transition: 0.3s ease background-color;

		.ft-ic {
			font-size: 32px;
		}
	}

	.app-info {
		color:var(--app-grey);
		align-self: center;
	}

	.app-name {
		font-size: 20px;
		line-height: 28px;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;

		.is-new {
			/*TODO - change to var(--gree-hover) when beta-3*/
			background-color: #3B9636;
			color:#fff;
			font-weight: 600;
			margin-left: 4px;
			line-height: 15px;
			font-size: 10px;
			padding: 1px 4px;
			border-radius: 2px;
		}
	}
	.app-desc {
		font-size: 14px;
		line-height: 20px;
		padding: 0;
		margin: 0;
	}

	&:hover {
		.app-icon {
			background-color: var(--current-primary);

			.ft-ic {
				color:#fff;
				/* Change to solid style on hover */
				font-weight: 900;
			}
			svg path {
				fill:#fff;
			}
		}
	}

	&.disabled {
		.app-icon {
			background-color:#F5F5F5;
		}
		.ft-ic {
			color:#8C8C8C;
		}
		path {
			fill:#8C8C8C;
		}
		.is-new {
			background-color: #bfbfbf;
		}
	}
}



.action-card {
	/*width:475px;*/
	height: 656px;
	padding: 32px;
	background-color: #fff;
	border-radius: 16px;

	.ft-ic {
		color:var(--current-primary);
	}
	.upper-section {
		text-align: center;

		.ft-ic {
			color:var(--current-primary);
			margin-bottom: 8px;
			font-size: 60px;
		}
	}

	.actions-container {
		border-top:1px solid #F0F0F0;
		padding-top: 32px;
	}


	.desc-container {
		.group {
			font-size: 24px;
			font-weight: bold;
			margin-bottom:8px;
		}
		.description {
			font-size: 16px;
			line-height: 1.5;
		}
	}
}
.home-screen {
	background-image: url(/images/shapes-bg.png);
	background-color: #D9D9D9;
	background-repeat: no-repeat;
	background-size: cover;

	height: calc(100vh - 64px); /* minus AppHeader height */
	display: grid;
	position: relative;
	grid-template-rows: 1fr 60px;

	.action-cards {
		display: grid;
		grid-template-columns: repeat(3, 475px);
		justify-content: center;
		column-gap: 32px;
		align-self: center;
	}
}

.home-screen .empty-item {
	grid-template-columns: none;
	background: inherit;
	box-shadow: none;
	border: none;

}

.home-screen .empty-item h4 {
	color: #374047;
}

.home-screen .year {
	color: var(--app-grey);
	text-align: center;
	width: 100%;
	position: relative;
	padding-top: 3px;

	a {
		color:#262626;
		text-decoration: underline;
	}
}
.ft-app-select {
	display: flex;
	align-items: center;
}

.ft-header .ft-app-select.ft-nav-item:hover {
	background: inherit; /* override rhombus */
}

.ft-app-select .e-form__control-wrapper {
	width: 300px;
}

.ft-app-select.ft-nav-item .e-form__control-wrapper .react-select__control {
	background: rgba(255, 255, 255, 0.2);
	border: #5e666b;
	box-shadow: none;
}

.ft-app-select.ft-nav-item .e-form__control-wrapper .react-select__placeholder,
.ft-app-select.ft-nav-item .e-form__control-wrapper .react-select__single-value,
.ft-app-select.ft-nav-item .e-form__control-wrapper .react-select__input {
	color: #b3b4c6;
}

.ft-app-select.ft-nav-item .e-form__control-wrapper .react-select__menu {
	color: #374047;
}.ft-header .logo-side a.ft-logo {
	border: none;
}

.ft-header .logo-side .ft-logo img {
	height: 35px;
}

.hub-app .ft-header .ft-nav-item:first-child {
	/* override rhombus far left nav item border */
	box-shadow: 1px 0 0 0 #333668;
}

.ft-header .ft-nav-item:not(.ft-app-select):hover {
	background: #151852;
	box-shadow: 0 0 0 0 var(--app-blue), -1px 0 0 0 #333668, 1px 0 0 0 #333668;
}

.ft-header .ft-nav-item:not(.ft-app-select).is-open {
	box-shadow: 0 4px 0 0 var(--app-blue), 0 0 0 0 #333668, 1px 0 0 0 #333668;
}

.ft-header .ft-nav-item:not(.ft-app-select).is-open:hover {
	box-shadow: 0 4px 0 0 var(--app-blue), -1px 0 0 0 #333668, 0 0 0 0 #333668;
}

.ft-header .has-more-options.click-to-open.is-open .ft-header-more-options {
	/* override rhombus covering box-shadow on active account settings ft-nav-item */
	top: 105%;
}

.ft-header .ft-nav-item span.welcome-who {
	color: #b3b4c6;
}.rc-slider {
  position: relative;
  width: 100%;
  height: 14px;
  padding: 5px 0;
  border-radius: 6px;
  touch-action: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #e9e9e9;
  border-radius: 6px;
}
.rc-slider-track,
.rc-slider-tracks {
  position: absolute;
  height: 4px;
  background-color: #abe2fb;
  border-radius: 6px;
}
.rc-slider-track-draggable {
  z-index: 1;
  box-sizing: content-box;
  background-clip: content-box;
  border-top: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid rgba(0, 0, 0, 0);
  transform: translateY(-5px);
}
.rc-slider-handle {
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background-color: #fff;
  border: solid 2px #96dbfa;
  border-radius: 50%;
  cursor: pointer;
  cursor: -webkit-grab;
  cursor: grab;
  opacity: 0.8;
  touch-action: pan-x;
}
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
  border-color: #57c5f7;
  box-shadow: 0 0 0 5px #96dbfa;
}
.rc-slider-handle:focus {
  outline: none;
  box-shadow: none;
}
.rc-slider-handle:focus-visible {
  border-color: #2db7f5;
  box-shadow: 0 0 0 3px #96dbfa;
}
.rc-slider-handle-click-focused:focus {
  border-color: #96dbfa;
  box-shadow: unset;
}
.rc-slider-handle:hover {
  border-color: #57c5f7;
}
.rc-slider-handle:active {
  border-color: #57c5f7;
  box-shadow: 0 0 5px #57c5f7;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.rc-slider-mark {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  font-size: 12px;
}
.rc-slider-mark-text {
  position: absolute;
  display: inline-block;
  color: #999;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.rc-slider-mark-text-active {
  color: #666;
}
.rc-slider-step {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
}
.rc-slider-dot {
  position: absolute;
  bottom: -2px;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  background-color: #fff;
  border: 2px solid #e9e9e9;
  border-radius: 50%;
  cursor: pointer;
}
.rc-slider-dot-active {
  border-color: #96dbfa;
}
.rc-slider-dot-reverse {
  margin-right: -4px;
}
.rc-slider-disabled {
  background-color: #e9e9e9;
}
.rc-slider-disabled .rc-slider-track {
  background-color: #ccc;
}
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
  background-color: #fff;
  border-color: #ccc;
  box-shadow: none;
  cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
  cursor: not-allowed !important;
}
.rc-slider-vertical {
  width: 14px;
  height: 100%;
  padding: 0 5px;
}
.rc-slider-vertical .rc-slider-rail {
  width: 4px;
  height: 100%;
}
.rc-slider-vertical .rc-slider-track {
  bottom: 0;
  left: 5px;
  width: 4px;
}
.rc-slider-vertical .rc-slider-track-draggable {
  border-top: 0;
  border-bottom: 0;
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-left: 5px solid rgba(0, 0, 0, 0);
  transform: translateX(-5px);
}
.rc-slider-vertical .rc-slider-handle {
  position: absolute;
  z-index: 1;
  margin-top: 0;
  margin-left: -5px;
  touch-action: pan-y;
}
.rc-slider-vertical .rc-slider-mark {
  top: 0;
  left: 18px;
  height: 100%;
}
.rc-slider-vertical .rc-slider-step {
  width: 4px;
  height: 100%;
}
.rc-slider-vertical .rc-slider-dot {
  margin-left: -2px;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  display: block !important;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-leave {
  display: block !important;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
  animation-name: rcSliderTooltipZoomDownIn;
  animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
  animation-name: rcSliderTooltipZoomDownOut;
  animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  transform: scale(0, 0);
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.rc-slider-tooltip-zoom-down-leave {
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@keyframes rcSliderTooltipZoomDownIn {
  0% {
    transform: scale(0, 0);
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: 50% 100%;
  }
}
@keyframes rcSliderTooltipZoomDownOut {
  0% {
    transform: scale(1, 1);
    transform-origin: 50% 100%;
  }
  100% {
    transform: scale(0, 0);
    transform-origin: 50% 100%;
    opacity: 0;
  }
}
.rc-slider-tooltip {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: visible;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip-hidden {
  display: none;
}
.rc-slider-tooltip-placement-top {
  padding: 4px 0 8px 0;
}
.rc-slider-tooltip-inner {
  min-width: 24px;
  height: 24px;
  padding: 6px 2px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background-color: #6c6c6c;
  border-radius: 6px;
  box-shadow: 0 0 4px #d9d9d9;
}
.rc-slider-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
  bottom: 4px;
  left: 50%;
  margin-left: -4px;
  border-width: 4px 4px 0;
  border-top-color: #6c6c6c;
}
/**
 * Animations
 * Various animations in use throughout Rhombus + The Applications
 */
.blink{ animation: 1s blink step-end infinite; }
@keyframes blink {
	from, to { opacity: 0; }
	50% { opacity: 1; }
}
/**
 * bounceIn
 * 	- used in action-kebabs
 * 	- used in hover on certain icons
 */
.bounce-in:hover{ animation: bounceIn 0.4s linear; }
@keyframes bounceIn {
	0%, 100%, 20%, 40%, 60%, 80% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		transform: scale3d(0.9, 0.9, 0.9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
 	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}
	100% {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}
.marching-ants{
	position: relative;
	height: 10px;
}
.marching-ants::after{
	animation: marchingAnts 7s linear infinite;
	background-image: linear-gradient(to right, var(--app-theme) 50%, transparent 50%);
	background-repeat: repeat-x;
	background-size: 10px 2px;
	content: "";
	height: 50%;
	left: 0;
	position: absolute;
	top: 50%;
	width: 100%;
}
@keyframes marchingAnts {
	0% { background-position:0 0; }
	to { background-position:100% 0; }
}
.rotate-in-a-circle,
.generating-circle,
.circle-spin{
	animation: rotateInACircle 2s linear infinite;
}
@keyframes rotateInACircle {
	to { transform: rotate(360deg); }
}
.rotate-y-3d{ animation: rotateY3D 1s ease-out infinite; }
@keyframes rotateY3D {
	to { transform:rotateY(360deg); }
}
.wiggle{ animation: wiggle 0.35s linear infinite; }
.wiggle-hover:hover{ animation: wiggle 0.35s linear; }
@keyframes wiggle {
	0% { transform:rotateX(30deg); }
	30% { transform:rotate(-30deg);	}
	50% { transform:rotate(0); }
	70% { transform:rotate(30deg); }
	100% { transform:rotate(0);	}
}
.reverse-animation { animation-direction: reverse; }
/**
 * BASIC TABLE
 */
.basic-table {
	background-color: #ffffff;
	color: #374047;
	font-size: 12px;
	line-height: 3;
	text-align: left;

	tr, th, td{
		height: var(--grid-row-height);
	}

	.date-col {
		width: 90px;
	}

	.id-col {
		width: 70px;
	}

	.name-col {
		width: auto;
	}

	.select-col{
		padding: 0 8px;
		width: 33px;

		> div{
			padding: 0;

			input[type=checkbox]:checked ~ span:after{
				border-width: 0 1px 1px 0;
				height: 9px;
				left: 4px;
				top: 0;
				width: 5px;
			}

			input:focus + span{
				box-shadow: none;
			}

			span{
				border-width: 1px;
				height: 14px;
				margin: 0;
				width: 14px;
			}
		}
	}

	.select-col.select-cell,
	.select-cell{
		padding: 0 8px;
		width: 33px;

		> div{
			padding: 0;

			label{
				align-items: center;
				display: flex;

				input{
					display: none;

					&[type=checkbox]:checked ~ span:after{
						border: none;
						color: var(--app-blue);
						content: "\f14a";
						font-weight: 600;
						width: inherit;
						transform: none;
						position: inherit;
						top: 0;
						left: inherit;
					}
				}

				span{
					border: none;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto;
					width: 16px;
					height: 16px;

					&:after{
						content: "\f0c8";
						color: #5e666b;
						font-family: "Font Awesome 6 Pro";
						font-size: 16px;
						font-weight: 100;
						height: unset;
						margin-top: -1px;
						margin-left: -1px;
					}
				}
			}
		}
	}

	.status-col {
		width: 130px;
	}
}
.basic-table th {
	background-color: #fff;
	border: 1px solid var(--grid-border-color);
	/* collapsed borders behave weirdly with `position: sticky` elements, so sidestep with box-shadow */
	border-top: none;
	border-bottom: none;
	box-shadow: inset 0px 1px var(--grid-border-color), inset 0px -1px var(--grid-border-color);
	padding-left: 10px;
	position: sticky;
	top: 0;
}
.basic-table td {
	border: 1px solid var(--grid-border-color);
	border-top: none;
	padding-left: 10px;
}
/**
 * The 32px padding is to get things aligned within modals
 * Nearly every <BasicTable /> in used is within a modal and the title bar, and content of the modal has this padding
 */
.c-modal__content .basic-table th:first-child,
.c-modal__content .basic-table td:first-child {
	padding-left:20px;
}
.basic-table th:first-child,
.basic-table td:first-child {
	padding: 0 32px;
}
.basic-table th:last-child,
.basic-table td:last-child {
	padding-right: 20px;
}
/**
 * Form Styles
 */
.redux-form-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.form-content {
	height: calc(100% - 44px);
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
}
.form-content .c-cards { margin: 1rem 0; }
.redux-form-container .e-form__control-wrapper {
	margin: 1rem;
}
.e-form__control.with-icon {
	display: flex;
	align-items: center;
	border: 1px solid #aeb2b5;
	border-radius: 3px;
}
.e-form__control.with-icon .ft-ic,
.e-form__control.with-icon input:first-child{
	margin-left: 5px;
}
.e-form__control.with-icon .inline-content {
	margin-left: 5px;
	margin-right: 5px;
	line-height: 2.125rem;
	white-space: nowrap;
}
.e-form__control.with-icon .e-form__input {
	border: none;
	padding-left: 3px;
}
.e-form__control-wrapper.text-area-control,
.e-form__control.is-text-area {	height: 100%; }
.e-form__control.is-text-area { position:relative; }
/**
 * Checkbox Form Styles
 */
.e-form__control-wrapper.has-label.checkbox-component .e-form__control,
.e-form__control-wrapper.no-label.checkbox-component{
	display: flex;
}
.e-form__control-wrapper.has-label.checkbox-component .e-form__control .u-form__help,
.e-form__control-wrapper.no-label.checkbox-component .e-form__control-header{
	order: 2;
	margin-left: 10px;
}
.e-form__control-wrapper.checkbox-component .e-form__checkbox .e-form__checkbox--label{
	font-size: 12px;
	color: #374047;
	margin-left: 7px;
}
.e-form__control-wrapper.checkbox-component .e-form__control.is-disabled .e-form__checkbox{
	cursor: not-allowed;
}
.e-form__control-wrapper.checkbox-component .e-form__control.is-disabled .e-form__checkbox .e-form__checkbox--label{
	color: #858c90;
}
.e-form__control-wrapper.no-label.checkbox-component .e-form__checkbox .e-form__checkbox--label{
	line-height: 2.5;
}
/**
 * Form Label
 */
.e-form__control-wrapper .e-form__control-label {
	display:flex;
	align-items:center;
	color: #4a4a4a;
	font-weight: bold;
	font-size: 12px;
}
/**
 * Form Messages
 */
.e-form--error .e-form__control-label {
	color: #db6662;
}
.e-form--has-message .warning-message {
	color: #db6662;
	font-size: 12px;
}
.e-form--has-message .warning-message.has-warning {
	color: #f3824f;
}
.e-form--has-message .warning-message.has-error {
	color: #db6662;
}
.e-form--has-message .e-form__control {
	margin-bottom: 4px;
}
.e-form--warn .e-form__control-label {
	color:#f3824f;
}
.e-form--warn .e-form__input {
	background-color: #fff;
	border-color: #f3824f;
	box-shadow: inset 0 0 0 1px #f3824f;
}
.e-form__control-wrapper.required .e-form__control-label::after{
	content: " *";
}
/**
 * Form Warning/Error/Valid States
 */
input:not([disabled]):active, input:not([disabled]):focus { border-color:#aeb2b5 !important }
.e-form__control-wrapper .e-form__control-label::after {
	font-family: "Font Awesome 6 Pro";
	padding-left: 0.15rem;
	padding-bottom: 0.5rem;
	font-size: 6px;
	transition: 0.25s ease;
}
.e-form__control-wrapper.required .e-form__control-label::after,
.e-form__control-wrapper.required.e-form--pristine .e-form__control-label::after {
	content: "\f005";
	color:#d0021b;
}
.e-form__control-wrapper.required.e-form--valid .e-form__control-label::after,
.e-form__control-wrapper.required.e-form--valid.e-form--pristine .e-form__control-label::after{
	content: "\f00c";
	color: #40b658;
	font-weight: 900;
}
.e-form__control-wrapper .char-count {
	flex-grow: 1;
	text-align: right;
	font-size: 11px;
	color: #858c90;
	opacity: 1;
	transition: 0.25s ease;
}
.e-form__control-wrapper .char-count.invalid {
	color: #d95652;
	opacity: 1;
}
.e-form__control-wrapper .char-count.hidden {
	opacity: 0;
}
.e-form__control-wrapper.required.e-form--error .e-form__control-label::after,
.e-form__control-wrapper.required.e-form--pristine.e-form--error .e-form__control-label::after {
	content: "\f071";
	color: #d95652;
	font-weight: 900;
}
.e-form__control-wrapper.required.e-form--warn .e-form__control-label::after,
.e-form__control-wrapper.required.e-form--pristine.e-form--warn .e-form__control-label::after {
	content: "\f06a";
	color: #f3824f;
	font-weight: 900;
}
.e-form--warn .e-form__input[disabled],
.e-form--warn .e-form__control.rhombus-dates input[disabled]{
	background-color: #e0e5ee;
}
.e-form--error .e-form__control.with-icon {
	border: 1px solid #db6662;
	box-shadow: inset 0 0 0 1px #db6662;
}
.e-form--warn .e-form__control.with-icon {
	border: 1px solid #f3824f;
	box-shadow: inset 0 0 0 1px #f3824f;
}
.e-form--error .e-form__control.with-icon input,
.e-form--warn .e-form__control.with-icon input {
	border: none;
	box-shadow: none;
	margin: 1px; /* Without this margin, the input blocks its container's inset box-shadow */
}
.e-form--error .e-form__control.with-icon:focus-within,
.e-form--warn .e-form__control.with-icon:focus-within {
	border: 1px solid #aeb2b5;
	box-shadow: none;
}
/**
 * [Multiple Entries] styles
 */
.e-form__control-wrapper.multiple-values .e-form__control:not(.date-range) {
 	font-style: italic;
 }
.e-form__control-wrapper.multiple-values .e-form__control:not(.date-range) .react-datepicker__input-container::after,
.e-form__control-wrapper.multiple-values .e-form__control.date-range > .multiple-values .react-datepicker__input-container::after {
	content: '[Multiple Entries]';
	background-color: #fff;
	font-style: italic;
	position: absolute;
	left: 10px;
	top: 7px;
}
/**
 * Form Footer
 */
footer.form-action-footer {
	position: relative;
	left: inherit;
	bottom: inherit;
	width: 100%;
	/* Reset rhombus padding */
	padding: 0 20px;
}
.form-action-footer .actions {
	margin-left: auto;
	margin-right: 1rem;
}
/**
 * General Form Styles
 */
button:focus,
button:active,
input:focus,
input:active {
	outline:none !important;
	box-shadow: none !important;
}
/**
 * Radio Buttons
 */
.e-form__radio [type=radio].is-checked>.e-form__radio--bg,
.e-form__radio [type=radio].is-checked~.e-form__radio--bg,
.e-form__radio [type=radio]:checked>.e-form__radio--bg,
.e-form__radio [type=radio]:checked~.e-form__radio--bg,
.e-form__control.radio-control.is-checked .e-form__radio--bg{
	background-color:var(--app-blue);
	border-color: #1589ee;
	box-shadow: 0 0 3px #0070d2;
}
.e-form__radio [type=radio].is-checked>.e-form__radio--bg:after,
.e-form__radio [type=radio].is-checked~.e-form__radio--bg:after,
.e-form__radio [type=radio]:checked>.e-form__radio--bg:after,
.e-form__radio [type=radio]:checked~.e-form__radio--bg:after,
.e-form__control.radio-control.is-checked .e-form__radio--bg::after{
	width:6px;
	height:6px;
	background-color:#fff;
	content:"";
	width: 6px;
	height: 6px;
	background-color: #fff;
	position: absolute;
	transform: translate3d(-50%, -50%, 0);
	border-radius: 50em;
	left: 8px;
	top: 8px;
}
.e-form__control.is-disabled .e-form__radio {
	cursor: not-allowed;
	color: #858c90;
}
.e-form__radio [type=radio][disabled]~.e-form__radio--bg {
	border-color: #d6d8da;
	background-color: #f4f5f5;
}
.e-form__radio [type=radio][disabled].is-checked>.e-form__radio--bg,
.e-form__radio [type=radio][disabled].is-checked~.e-form__radio--bg,
.e-form__radio [type=radio][disabled]:checked>.e-form__radio--bg,
.e-form__radio [type=radio][disabled]:checked~.e-form__radio--bg {
	background-color:#b8d1e5;
	border-color:#b8d1e5;
}
/**
 * Disabled Styles
 */
.e-form__checkbox [type=checkbox][disabled]>.e-form__checkbox--bg,
.e-form__checkbox [type=checkbox][disabled]~.e-form__checkbox--bg,
.e-form__input[disabled]:active,
.e-form__input[disabled],
.e-form__control.rhombus-dates input[disabled]{
	border-color: #d6d8da;
	background-color: #f4f5f5;
	color: #858c90;
}
/**
 * Form Tooltips
 */
.e-form__control-wrapper .e-form__control-header {
	display: flex;
	align-items: center;
}
.e-form__control-wrapper .e-form__control-header .u-form__help {
	margin-left: 5px;
	float: none;
}
.e-form__control-wrapper .e-form__control-header .u-form__help i.ft-ic{
	font-size: 0.95rem;	/* ensures v1 and v2 tooltip icons are the same */
}
/* FORM2 */
.new-input.e-form__control{
	background-color: #fff;

	&.is-text-area{
		background-color: inherit;

		&.is-disabled textarea{
			background-color: #f4f5f5;
		}
	}

	&.is-disabled:not(.is-text-area){
		background-color: #f4f5f5;
	}

	textarea.e-form__input{
		&:active,
		&:focus{
			box-shadow: none;
			border-color: var(--gray-dark);
		}

		&:focus-visible{
			outline: none;
		}
	}
}
.new-input.e-form__control.with-icon{
	padding: 0 5px;
}
.new-input.e-form__control.with-icon .ft-ic{
	margin: 0;
}
.new-input.e-form__control.with-icon input{
	padding: 0;
}
.new-input.e-form__control.with-icon .inline-content{
	margin: 0 5px 0 0;
}
.new-input.e-form__control.with-icon.with-post input{
	padding-right: 5px;
}
/* overwrite original rhombus */
input:focus,
input:active {
	outline:none !important;
	box-shadow: none !important;
}
/**
 * General CSS Helpers
 * - Variables
 * - General
 * - Blank Loading
 * - Bounce Circle
 * - Circle Hover (original rhombus version of bounce-circle?)
 * - Common Actions
 * - Cursor / Pointer Events
 * - Firefox Fixes
 * - Inline Notification
 * - Layout
 * - Spacing
 * - Text
 */
/* Note: Please update `stories/docs/CSS.js` when updating css variables and helper classes here. */
:root {
	/*  */
	--inv-font-family: "Proxima Nova", sans-serif;
	--inv-font-size: 16px;

	/** Common Sizes  */
	--app-header-height:         64px;
	--app-content-height:        calc(100vh - var(--app-header-height));
	--grid-row-height:           35px;	/* if this is changed here it should also be changed in `constants.js` */
	--min-grid-height:           500px;
	--modal-displacement:        calc(var(--app-header-height) - 2px);
	--modal-displacement-height: calc(var(--app-content-height) + 2px);
	--modal-footer-height:       60px;
	--modal-header-height:       42px;
	--pager-height:              42px;
	--toolbar-height:            50px;

	/* Common Colors */
	--app-black:          #374047;  /* rhombus-themes.css: --primary-dark */
	--app-blue:           #2d7ebf;  /* rhombus-themes.css: --blue-mid */
	--app-header-color:   #000443;
	--app-gray:           #858c90;
	--app-grey:           #858c90;
	--green-success:      #52bc68;  /* rhombus-themes.css: --green-mid */
	--grid-border-color:  #d6d8da;  /* rhombus-themes.css: --white-dark */
	--red-fail:           #d0021b;
	--toolbar-background: #f4f5f5;

	/* Brand Colors */
	--brand-color-meta:#1877f2;
	--brand-color-facebook: #1877f2;
	--brand-color-instagram: #e1306c;
	--brand-color-youtube: #ff0000;
	--brand-color-linkedin: #2867b2;
	--brand-color-pinterest: #e60023;
	--brand-color-snapchat: black;
	--brand-color-tiktok: #000;
	--brand-color-twitter: #1d9bf0;
	--brand-color-x-twitter: #000;

	/** --app-theme should be declared within your App to be its specific color: **/
	--app-theme: var(--blue-mid);
}
*,
*::before,
*::after,
input[type=search]{ box-sizing: border-box; }
body{
	margin: 0;
	padding: 0;
}
.hidden,
.no-show,
.is-a-download{ display: none; }
.full-height{ height: 100%; }
.inv-app{
	font-family: var(--inv-font-family);
	font-size: var(--inv-font-size);
	height: 100vh;
	width: 100vw;
}
.ft-app{
	color: var(--app-black);
	height: 100vh;
	width: 100vw;
}
.circle-spin, i.circle-spin,
.generating-circle, i.generating-circle{
	color: var(--app-theme);
}
.app-theme-color{ color: var(--app-theme); }
.app-theme-background{ background-color: var(--app-theme); }
.app-content{ height: var(--app-content-height); }
.bold{ font-weight: bold; }
.app-level-tooltip.react-tooltip__show{
	background-color: var(--app-black);
	color: #fff;
	font-size: 13px;
	padding: 5px;
	word-wrap: break-word;
	z-index: 1051;

	&.small-tooltip{ max-width: 200px; }

	&.view-external-tip{
		div{
			padding: 0 5px;
		}
		.ft-ic{
			color: #fff;
			font-size: 10px;
			margin-left: 4px;
		}
	}
}
/**
 * overriding original rhombus
 */
footer {
	background-color: inherit;
	bottom: auto;
	font-size: inherit;
	left: auto;
	line-height: inherit;
	padding: 0;
	position: relative;
	text-align: inherit;
	width: auto;
	z-index: auto;
}
footer span { font-weight: normal; }
/**
 * BLANK LOADING
 * This class will add the psudo grey bars over text when it's loading
 * This gives the illusion that there is something there without having to show a spinner
 */
.blank-load {
	transition: 0.2s ease-in;
	line-height: 1.2;
}
.is-loading .blank-load {
	background-color: var(--grid-border-color);
	height: 14px;
	width: 75px;
	color: transparent !important;
}
/**
 * BOUNCE CIRCLE
 **/
.bounce-circle.ft-ic{
	cursor: pointer;
	transition: 0.2s cubic-bezier(0.29, -0.18, 0.44, 1.48);
	margin: 0;
	width: 1.5rem;
	height: 1.5rem;
	display: grid;
	align-content: center;
	justify-content: center;
	background-color: #0000;
	border-radius: 1px;
}
.bounce-circle.ft-ic.is-disabled{
	color: var(--white-dark);
	cursor: default;
	pointer-events: none;
}
.bounce-circle:hover{
	color: #fff;
	background: var(--app-blue);
	border-radius: 50%;
}
/**
 * CIRCLE HOVER
 */
/*
Used to create a circle that bounces in on hover
TODO: is this the original rhombus version of bounce-circle / used anywhere anymore?
*/
.circle-hover:hover .circle-around::before {
	content: "";
	border-radius: 50%;
	color: white;
	animation: bounceIn 0.4s linear;
}
.circle-hover.theme-red .circle-around::before { background-color: var(--red-dark); }
.circle-hover.theme-pink .circle-around::before { background-color: var(--pink-light); }
.circle-hover.theme-blue .circle-around::before { background-color: var(--blue-light); }
.circle-hover.theme-green .circle-around::before { background-color: var(--green-light); }
.circle-hover.theme-purple .circle-around::before { background-color: var(--purple-light); }
.circle-hover.theme-orange .circle-around::before { background-color: var(--orange-light); }
.circle-hover.theme-yellow .circle-around::before { background-color: var(--yellow-light); }
/**
 * COMMON ACTIONS
 */
.ft-ic.remove-icon {
	font-size: 16px;
	line-height:1.75;
	color: #858c90;
	cursor: pointer;
	margin-left: 3px;
	transition: 0.2s ease color;
}
.ft-ic.remove-icon:hover {
	color: var(--app-black);
}
/**
 * CURSOR / POINTER EVENTS
 */
.cursor-default{ cursor: default; }
.cursor-pointer{ cursor: pointer; }
.cursor-help{ cursor: help; }
.cursor-not-allowed,
.disabled-link{ cursor: not-allowed; }
.disabled-link a,
a.disabled,
a.is-disabled{ pointer-events: none; }
/**
 * FIREFOX
 */
.is-ff .e-form__select {
	appearance: none;
	padding-top: 5px;
}
/**
 * INLINE NOTIFICATION
 */
.inline-notification-section{
	border-radius: 3px;
	font-size: 12px;
	padding: 10px;
}
.inline-notification-section:not(td){ display: flex; }
.inline-notification-section .notification-icon{
	font-size: inherit;
	margin-top: 4px;
	margin-right: 10px;
}
.inline-notification-section.info{ background-color: #d8eafa; }
.inline-notification-section.info .notification-icon{ color: #2d7ebf; }
.inline-notification-section.error .notification-icon{ color: #db6561; }
.inline-notification-section.success .notification-icon{ color: #52bc68; }
.inline-notification-section.warning .notification-icon{ color: #f3824f; }
/**
 * LAYOUT
 */
.flex,
.flex-only {
	display: flex;
}
/* justify-content */
.flex-around {
	display: flex;
	justify-content: space-around;
}
.flex-end{
	display: flex;
	justify-content: flex-end;
}
.flex-evenly{
	display: flex;
	justify-content: space-evenly;
}
.flex-between {
	display: flex;
	justify-content: space-between;
}
.flex-start {
	display: flex;
	justify-content: flex-start;
}
/* align-items */
.flex-center {
	display: flex;
	align-items: center;
}
/* flex-direction */
.flex-column{
	display: flex;
	flex-direction: column;
}
/**
 * SPACING
 */
.margin-right-5{ margin-right: 5px; }
/**
 * TEXT
 */
.monospace,
.text-monospace { font-family: monospace; }
.capitalize,
.text-capitalize{ text-transform: capitalize; }
.uppercase,
.text-uppercase{ text-transform: uppercase; }
.text-center { text-align: center; }
/** When using this you MUST include a width on the element you want overflow */
.name-overflow,
.text-overflow-ellipse{
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.name-overflow{
	display: block;
}
.text-break-word{
	word-break: break-word;
}
/****************
 * THEME COLORS *
 ****************/
/* If any themes are added here, be sure to update `SharedPropTypes.js` and `stories/docs/CSS.js`. */
:root {
	--blue-light: #8ab7db;
	--blue-mid:   #2d7ebf;
	--blue-dark:  #1771b9;

	--default-light: var(--grey-dark);
	--default-mid:   #868c90;
	--default-dark:  #5e666b;

	--grey-light: var(--white-mid);
	--gray-light: var(--grey-light);
	--grey-mid:   var(--white-dark);
	--gray-mid:   var(--grey-mid);
	--grey-dark:  #aeb2b5;
	--gray-dark:  var(--grey-dark);

	--green-light: #9fdaab;
	--green-mid:   #52bc68;
	--green-dark:  #40b658;

	--orange-light: #f8b99d;
	--orange-mid:   #f3824f;
	--orange-dark:  #ef682e;

	--pink-light: #ea8daf;
	--pink-mid:   #d52f6f;		/* CreativeLabels.css: --category-group-advertiser */
	--pink-dark:  #d11560;

	/* adjusted for rhombus-react */
	--primary-light: var(--default-dark);
	--primary-mid:   #4a5258;
	--primary-dark:  #374047;

	--purple-light: #c6bad9;
	--purple-mid:   #9883bb;	/* CreativeLabels.css: --category-group-general-content */
	--purple-dark:  #8e76b5;

	--red-light: #ebaaa8;
	--red-mid:   #db6662;
	--red-dark:  #d95652;

	/* added for rhombus-react */
	--teal-light:#67a7ae;
	--teal-mid: #37929a;	/* CreativeLabels.css: category-group-vertical */
	--teal-dark:#16818b;

	/* adjusted for rhombus-react */
	--white-light: #ffffff;
	--white-mid:   #f4f5f5;
	--white-dark:  #d6d8da;

	--yellow-light: #ecdd93;
	--yellow-mid:   #e3cc3b;
	--yellow-dark:  #e1c921;
}
/**
 * Icon Styles
 */

i.ft-ic {
	color: rgba(0,0,0,0.5);
	font-size: 18px;
}

.nav-bar-link a .ft-ic {
	color: inherit;
}

.c-button .ft-ic {
	color: inherit;
	margin-right: 0.5rem;
	font-size: 14px;
}
.u-form__help .ft-ic{
	color: inherit;
	font-size: inherit;
}

/**
 * RRACT-78
 * We should default in colors for the platforms
 * 	This way they are always the same throughout our applications
 */
.ft-ic.meta-logo { color:var(--brand-color-meta); }
.ft-ic.facebook-logo { color: var(--brand-color-facebook); }
.ft-ic.instagram-logo { color: var(--brand-color-instagram); }
.ft-ic.youtube-logo { color: var(--brand-color-youtube); }
.ft-ic.linkedin-logo { color: var(--brand-color-linkedin); }
.ft-ic.pinterest-logo { color: var(--brand-color-pinterest); }
.ft-ic.snapchat-logo { color: var(--brand-color-snapchat); }
.ft-ic.tiktok-logo { color: var(--brand-color-tiktok); }
.ft-ic.twitter-logo { color: var(--brand-color-twitter); }
.ft-ic.x-twitter-logo { color:var(--brand-color-x-twitter); }
/***
 * - theme vars
 * - base button styles
 * - sizes
 * - "rounded", "rounded-ghost"
 * - "link"
 *	- "link" themes
 * - "ghost", "rounded-ghost" themes
 * - "standard", "rounded" themes
 * - buttons in "c-actions-bar"
 * - overwriting original rhombus
 */
.c-button{
	/* theme vars */
	--blue-main: var(--blue-mid);
	--blue-hover: #00447a;
	--blue-disabled: #b8d1e5;

	--default-main: var(--default-mid);
	--default-hover: var(--default-dark);
	--default-disabled: var(--gray-mid);

	--gray-main: var(--gray-dark);
	--gray-hover: var(--default-mid);
	--gray-disabled: var(--gray-mid);

	--green-main: var(--green-mid);
	--green-hover: #349448;
	--green-disabled: var(--green-light);

	--orange-main: var(--orange-mid);
	--orange-hover: var(--orange-dark);
	--orange-disabled: var(--orange-light);

	--pink-main: var(--pink-mid);
	--pink-hover: #d0105d;
	--pink-disabled: var(--pink-light);

	--primary-main: var(--primary-light);
	--primary-hover: var(--primary-dark);
	--primary-disabled: var(--default-light);

	--purple-main: var(--purple-mid);
	--purple-hover: var(--purple-dark);
	--purple-disabled: var(--purple-light);

	--red-main: var(--red-dark);
	--red-hover: #a1100e;
	--red-disabled: var(--red-light);

	--teal-main: var(--teal-mid);
	--teal-hover: var(--teal-dark);
	--teal-disabled: var(--teal-light);

	--white-main: var(--white-mid);
	--white-hover: var(--white-dark);
	--white-disabled: var(--white-light);

	--yellow-main: var(--yellow-mid);
	--yellow-hover: var(--yellow-dark);
	--yellow-disabled: var(--yellow-light);


	/* base button styles */
	align-items: center;
    background-color: #aeb2b5;
	border: 2px solid transparent;
	border-radius: 3px;
    color: #fff;
	display: flex;
	flex-wrap: nowrap;
	font-weight: bold;
	justify-content: center;
	line-height: inherit;
	margin: 0;
	max-width: 100%;
	outline: 0;
	padding: 0;
	text-decoration: none;
	text-transform: capitalize;
	transition: 0.2s background-color, border-color;
	white-space: nowrap;

	> .ft-ic{
		color: inherit;
		font-size: 14px;
		margin: 0;
	}

	&:not(.icon-only) > .ft-ic{
		margin-right: 0.5rem;
	}

	&.is-disabled{
		cursor: not-allowed;
		pointer-events: none;
	}
	&.is-disabled[data-tooltip-content]{
		pointer-events: all;
	}


	/********
	 * SIZE
	 */
	&.c-button--small:not(.c-button--link){
		font-size: 12px;
		font-weight: 600;
		height: 26px;
		padding: 2px 16px 0;
	}

	&.c-button--medium:not(.c-button--link){
		font-size: 0.83rem;
		padding: 0.5rem 0.75rem;
	}

	&.c-button--large:not(.c-button--link){
		font-size: 0.93rem;
		padding: 0.75rem 0.95rem;
	}

	&.c-button--xlarge:not(.c-button--link){
		font-size: 1rem;
		padding: 0.95rem 1rem;
	}

	/* "rounded", "rounded-ghost" styles */
	&.c-button--rounded,
	&.c-button--rounded-ghost{
		border-radius: 30rem;
	}

	/* "link" styles */
	&.c-button--link{
		background-color: transparent;
		font-size: 12px;
		font-weight: normal;
		padding: 0;

		&.is-disabled:disabled{
			color: var(--gray-dark);
			.ft-ic{ color: inherit; }
		}

		&:not(.is-disabled){
			&:active, &:focus{
				border-color: transparent;
			}

			&:hover{
				color: var(--app-black);
				.ft-ic{ color: inherit; }
				.button-content{ text-decoration: underline; }
			}
		}

		.ft-ic{
			font-size: inherit;
			margin: 0 6px;
		}

		/* "link" themes */
		&.c-button--blue{ color: var(--blue-main); }
		&.c-button--default{ color: var(--default-main); }
		&.c-button--gray, &.c-button--grey{ color: var(--gray-main); }
		&.c-button--green{ color: var(--green-main); }
		&.c-button--orange{ color: var(--orange-main); }
		&.c-button--pink{ color: var(--pink-main); }
		&.c-button--primary{ color: var(--primary-main); }
		&.c-button--purple{ color: var(--purple-main); }
		&.c-button--red{ color: var(--red-main); }
		&.c-button--teal{ color: var(--teal-main); }
		&.c-button--white{ color: var(--white-main); }
		&.c-button--yellow{ color: var(--yellow-main); }
	}

	/* "ghost", "rounded-ghost" themes */
	&.c-button--ghost, &.c-button--rounded-ghost{
		background-color: transparent;

		&.c-button--blue{
			border-color: var(--blue-main);
			color: var(--blue-main);
			&:not(.is-disabled):hover{
				border-color: var(--blue-hover);
				color: var(--blue-hover);
			}
			&.is-disabled{
				border-color: var(--blue-disabled);
				color: var(--blue-disabled);
			}
		}

		&.c-button--default{
			border-color: var(--default-main);
			color: var(--default-main);
			&:not(.is-disabled):hover{
				border-color: var(--default-hover);
				color: var(--default-hover);
			}
			&.is-disabled{
				border-color: var(--default-disabled);
				color: var(--default-disabled);
			}
		}

		&.c-button--gray, &.c-button--grey{
			border-color: var(--gray-main);
			color: var(--gray-main);
			&:not(.is-disabled):hover{
				border-color: var(--gray-hover);
				color: var(--gray-hover);
			}
			&.is-disabled{
				border-color: var(--bray-disabled);
				color: var(--bray-disabled);
			}
		}

		&.c-button--green{
			border-color: var(--green-main);
			color: var(--green-main);
			&:not(.is-disabled):hover{
				border-color: var(--green-hover);
				color: var(--green-hover);
			}
			&.is-disabled{
				border-color: var(--green-disabled);
				color: var(--green-disabled);
			}
		}

		&.c-button--orange{
			border-color: var(--orange-main);
			color: var(--orange-main);
			&:not(.is-disabled):hover{
				border-color: var(--orange-hover);
				color: var(--orange-hover);
			}
			&.is-disabled{
				border-color: var(--orange-disabled);
				color: var(--orange-disabled);
			}
		}

		&.c-button--pink{
			border-color: var(--pink-main);
			color: var(--pink-main);
			&:not(.is-disabled):hover{
				border-color: var(--pink-hover);
				color: var(--pink-hover);
			}
			&.is-disabled{
				border-color: var(--pink-disabled);
				color: var(--pink-disabled);
			}
		}

		&.c-button--primary{
			border-color: var(--primary-main);
			color: var(--primary-main);
			&:not(.is-disabled):hover{
				border-color: var(--primary-hover);
				color: var(--primary-hover);
			}
			&.is-disabled{
				border-color: var(--primary-disabled);
				color: var(--primary-disabled);
			}
		}

		&.c-button--purple{
			border-color: var(--purple-main);
			color: var(--purple-main);
			&:not(.is-disabled):hover{
				border-color: var(--purple-hover);
				color: var(--purple-hover);
			}
			&.is-disabled{
				border-color: var(--purple-disabled);
				color: var(--purple-disabled);
			}
		}

		&.c-button--red{
			border-color: var(--red-main);
			color: var(--red-main);
			&:not(.is-disabled):hover{
				border-color: var(--red-hover);
				color: var(--red-hover);
			}
			&.is-disabled{
				border-color: var(--red-disabled);
				color: var(--red-disabled);
			}
		}

		&.c-button--teal{
			border-color: var(--teal-main);
			color: var(--teal-main);
			&:not(.is-disabled):hover{
				border-color: var(--teal-hover);
				color: var(--teal-hover);
			}
			&.is-disabled{
				border-color: var(--teal-disabled);
				color: var(--teal-disabled);
			}
		}

		&.c-button--white{
			border-color: var(--white-main);
			color: var(--white-main);
			&:not(.is-disabled):hover{
				border-color: var(--white-hover);
				color: var(--white-hover);
			}
			&.is-disabled{
				border-color: var(--white-disabled);
				color: var(--white-disabled);
			}
		}

		&.c-button--yellow{
			border-color: var(--yellow-main);
			color: var(--yellow-main);
			&:not(.is-disabled):hover{
				border-color: var(--yellow-hover);
				color: var(--yellow-hover);
			}
			&.is-disabled{
				border-color: var(--yellow-disabled);
				color: var(--yellow-disabled);
			}
		}
	}

	/* "standard", "rounded" themes */
	&.c-button--standard, &.c-button--rounded{
		&.c-button--blue{
			background-color: var(--blue-main);
			&:not(.is-disabled):hover{ background-color: var(--blue-hover); }
			&.is-disabled{ background-color: var(--blue-disabled); }
		}

		&.c-button--default{
			background-color: var(--default-main);
			&:not(.is-disabled):hover{ background-color: var(--default-hover); }
			&.is-disabled{ background-color: var(--default-disabled); }
		}

		&.c-button--gray, &.c-button--grey{
			background-color: var(--gray-main);
			&:not(.is-disabled):hover{ background-color: var(--gray-hover); }
			&.is-disabled{ background-color: var(--gray-disabled); }
		}

		&.c-button--green{
			background-color: var(--green-main);
			&:not(.is-disabled):hover{ background-color: var(--green-hover); }
			&.is-disabled{ background-color: var(--green-disabled); }
		}

		&.c-button--orange{
			background-color: var(--orange-main);
			&:not(.is-disabled):hover{ background-color: var(--orange-hover); }
			&.is-disabled{ background-color: var(--orange-disabled); }
		}

		&.c-button--pink{
			background-color: var(--pink-main);
			&:not(.is-disabled):hover{ background-color: var(--pink-hover); }
			&.is-disabled{ background-color: var(--pink-disabled); }
		}

		&.c-button--primary{
			background-color: var(--primary-main);
			&:not(.is-disabled):hover{ background-color: var(--primary-hover); }
			&.is-disabled{ background-color: var(--primary-disabled); }
		}

		&.c-button--purple{
			background-color: var(--purple-main);
			&:not(.is-disabled):hover{ background-color: var(--purple-hover); }
			&.is-disabled{ background-color: var(--purple-disabled); }
		}

		&.c-button--red{
			background-color: var(--red-main);
			&:not(.is-disabled):hover{ background-color: var(--red-hover); }
			&.is-disabled{ background-color: var(--red-disabled); }
		}

		&.c-button--teal{
			background-color: var(--teal-main);
			&:not(.is-disabled):hover{ background-color: var(--teal-hover); }
			&.is-disabled{ background-color: var(--teal-disabled); }
		}

		&.c-button--white{
			background-color: var(--white-main);
			color: var(--white-main);
			&:not(.is-disabled):hover{ background-color: var(--white-hover); }
			&.is-disabled{ background-color: var(--white-disabled); }
		}

		&.c-button--yellow{
			background-color: var(--yellow-main);
			&:not(.is-disabled):hover{ background-color: var(--yellow-hover); }
			&.is-disabled{ background-color: var(--yellow-disabled); }
		}
	}
}



/* buttons in "c-actions-bar" */
.c-actions-bar{
	.c-button{
		font-size: 14px;
		font-weight: normal;
		height: 36px;
		padding: 0 15px;
	}
}



/** overwriting original rhombus */
.c-button.is-disabled,
.c-button:disabled{
	color: #fff;
}
button:focus,
button:active{
	outline:none !important;
	box-shadow: none !important;
}
:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s}.core-styles-module_tooltip__3vRRp{left:0;opacity:0;pointer-events:none;position:absolute;top:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{background:inherit;position:absolute}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay) ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay) ease-in}.styles-module_tooltip__mnnfp{border-radius:3px;font-size:90%;padding:8px 16px;width:max-content}.styles-module_arrow__K0L3T{height:8px;width:8px}[class*=react-tooltip__place-top]>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*=react-tooltip__place-right]>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*=react-tooltip__place-bottom]>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*=react-tooltip__place-left]>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}@keyframes szh-menu-show-slide-left {
  from {
    opacity: 0;
    transform: translateX(0.75rem);
  }
}
@keyframes szh-menu-hide-slide-left {
  to {
    opacity: 0;
    transform: translateX(0.75rem);
  }
}
@keyframes szh-menu-show-slide-right {
  from {
    opacity: 0;
    transform: translateX(-0.75rem);
  }
}
@keyframes szh-menu-hide-slide-right {
  to {
    opacity: 0;
    transform: translateX(-0.75rem);
  }
}
@keyframes szh-menu-show-slide-top {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}
@keyframes szh-menu-hide-slide-top {
  to {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}
@keyframes szh-menu-show-slide-bottom {
  from {
    opacity: 0;
    transform: translateY(-0.75rem);
  }
}
@keyframes szh-menu-hide-slide-bottom {
  to {
    opacity: 0;
    transform: translateY(-0.75rem);
  }
}
.szh-menu--state-opening.szh-menu--dir-left {
  animation: szh-menu-show-slide-left 0.15s ease-out;
}

.szh-menu--state-closing.szh-menu--dir-left {
  animation: szh-menu-hide-slide-left 0.15s ease-in forwards;
}

.szh-menu--state-opening.szh-menu--dir-right {
  animation: szh-menu-show-slide-right 0.15s ease-out;
}

.szh-menu--state-closing.szh-menu--dir-right {
  animation: szh-menu-hide-slide-right 0.15s ease-in forwards;
}

.szh-menu--state-opening.szh-menu--dir-top {
  animation: szh-menu-show-slide-top 0.15s ease-out;
}

.szh-menu--state-closing.szh-menu--dir-top {
  animation: szh-menu-hide-slide-top 0.15s ease-in forwards;
}

.szh-menu--state-opening.szh-menu--dir-bottom {
  animation: szh-menu-show-slide-bottom 0.15s ease-out;
}

.szh-menu--state-closing.szh-menu--dir-bottom {
  animation: szh-menu-hide-slide-bottom 0.15s ease-in forwards;
}
.action-trigger{
	&.is-disabled{
		pointer-events: none;
	}

	button .action-icon{
		color: unset;

		&:hover,
		&.is-open{
			background-color: unset;
		}
	}

	.action-icon{
		align-items: center;
		color: var(--app-theme);
		display: flex;
		height: 25px;
		justify-content: center;
		margin: 0;
		width: 25px;

		&:hover,
		&.is-open{
			background-color: var(--app-theme);
			border-radius: 50%;
			color: #fff;
		}
	}
}

.action-menu-container .action-menu{
	background-color: #fff;
	border: 1px solid #d4d6d8;
	border-radius: 3px;
	box-shadow: 2px 2px 5px 0 #bfbfbf;
	min-width: 160px;
	max-width: 300px;
	outline: none;
	list-style-type: none;
}

.action-menu-container .action-menu .action-menu-item{
	align-items: center;
	background-color: #FFF;
	color: var(--primary-dark);
	cursor: pointer;
	display: flex;
	height: 40px;
	justify-content: left;
	padding: 0 10px;
	font-size: 12px;
}
.action-menu-container .action-menu .action-menu-item a{
	align-content: center;
	color: var(--primary-dark);
	height: 100%;
	width: 100%;
}
.action-menu-container .action-menu .szh-menu__item--submenu:focus-visible,
.action-menu-container .action-menu .szh-menu__item--submenu:hover,
.action-menu-container .action-menu .action-menu-item:not(.is-header):focus-visible,
.action-menu-container .action-menu .action-menu-item:not(.is-header):hover{
	background-color: #d8eafa;
	outline: none;
}
.action-menu-container .action-menu .action-menu-item.is-disabled,
.action-menu-container .action-menu .action-menu-item.is-disabled .ft-ic,
.action-menu-container .action-menu .action-menu-item.is-disabled a,
.action-menu-container .action-menu .action-menu-item.is-disabled span{
	color: var(--white-dark);
	pointer-events: none;
}
.action-menu-container .action-menu .action-menu-item.is-header{
	font-weight: bold;
	cursor: default;
}

.action-menu-container .action-menu .action-menu-item .ft-ic{
	color: var(--default-dark);
	font-size: 13px;
	margin-right: 7px;
}
.action-menu-container .action-menu .action-menu-item .ft-ic:first-child{
	margin-left: 0;
}
.action-menu-container .action-menu .action-menu-item .ft-ic:last-child:not(:first-child){
	margin-left: 7px;
}

.action-menu-container .action-menu .action-menu-item.is-input .action-menu-input{
	align-items: center;
	display: flex;
	height: 100%;
	width: 100%;
}
.action-menu-container .action-menu .action-menu-item.is-input .action-menu-input--bg{
	margin-right: 7px;
}

.action-menu-container .action-menu .szh-menu__divider{
	border-bottom: 1px solid var(--grid-border-color);
	margin-bottom: 3px;
	padding: 2px 0;
	cursor: inherit;
}

.action-menu-container .action-menu .szh-menu__group:not(.divider-before),
.action-menu-container .action-menu .szh-menu__radio-group:not(.divider-before){
	border-top: 1px solid var(--grid-border-color);
}
.action-menu-container .action-menu .szh-menu__group,
.action-menu-container .action-menu .szh-menu__radio-group{
	border-bottom: 1px solid var(--grid-border-color);
	margin: 0;
}
/**
 * Tooltip Styles
 */
.c-tooltip{
	position: relative;
	overflow: visible;

	&:hover::before,
	&:hover::after{
		visibility: visible;
	}

	&.c-tooltip--is-visible::before,
	&.c-tooltip--is-visible::after{
		visibility: visible;
	}

	&.c-tooltip--is-hidden::before,
	&.c-tooltip--is-hidden::after{
		visibility: hidden;
	}

	&::before,
	&::after{
		visibility: hidden;
		z-index: 8;
	}

	&::before{
		border: 0.6rem solid transparent;
		content: "";
		position: absolute;
	}

	&::after{
		background-color: var(--app-black);
		border: 1px solid var(--app-black);
		border-radius: 3px;
		color: #fff;
		content: attr(aria-label);
		font-size: 0.85rem;
		font-weight: 400;
		line-height: 1rem;
		opacity: 1;
		padding: 5px;
		position: absolute;
		text-transform: none;
	}

	/* POSITIONS */

	&.c-tooltip--top{
		&::before,
		&::after{
			bottom: 100%;
			left: 50%;
			transform: translate(-50%);
		}

		&::after{
			margin-bottom: 15px;
		}
	}

	&.c-tooltip--right{
		&::before{
			border-right-width: 10px;
			left: 95%;
			top: 50%;
			transform: translateY(-50%);
		}

		&::after{
			left: 100%;
			top: 50%;
			transform: translate(1rem, -50%);
		}
	}

	&.c-tooltip--bottom{
		&::before,
		&::after{
			left: 50%;
			top: 100%;
			transform: translate(-50%);
		}

		&::after{
			margin-top: 15px;
		}
	}

	&.c-tooltip--left{
		&::before{
			border-left-width: 10px;
			right: 95%;
			top: 50%;
			transform: translateY(-50%);
		}

		&::after{
			top: 50%;
			right: 100%;
			transform: translate(-1rem, -50%);
		}
	}

	/* SIZES */

	&.c-tooltip--::after{
		white-space: nowrap;
	}

	&.c-tooltip--fit::after{
		height: auto;
		width: auto;
	}

	&.c-tooltip--small::after{
		width: 80px;
	}

	&.c-tooltip--medium::after{
		width: 120px;
	}

	&.c-tooltip--large::after{
		width: 200px;
	}

	&.c-tooltip--xlarge::after{
		width: 80vw;
	}


	/* THEMES */
	&.t-tooltip--blue{
		&.c-tooltip--top::before{
			border-top-color: var(--blue-mid);
		}
		&.c-tooltip--right::before{
			border-right-color: var(--blue-mid);
		}
		&.c-tooltip--bottom::before{
			border-bottom-color: var(--blue-mid);
		}
		&.c-tooltip--left::before{
			border-left-color: var(--blue-mid);
		}
		&::after{
			background-color: var(--blue-mid);
			border-color: var(--blue-mid);
		}
	}

	&.t-tooltip--default{
		&.c-tooltip--top::before{
			border-top-color: var(--default-mid);
		}
		&.c-tooltip--right::before{
			border-right-color: var(--default-mid);
		}
		&.c-tooltip--bottom::before{
			border-bottom-color: var(--default-mid);
		}
		&.c-tooltip--left::before{
			border-left-color: var(--default-mid);
		}
		&::after{
			background-color: var(--default-mid);
			border-color: var(--default-mid);
		}
	}

	&.t-tooltip--gray,
	&.t-tooltip--grey{
		&.c-tooltip--top::before{
			border-top-color: var(--gray-mid);
		}
		&.c-tooltip--right::before{
			border-right-color: var(--gray-mid);
		}
		&.c-tooltip--bottom::before{
			border-bottom-color: var(--gray-mid);
		}
		&.c-tooltip--left::before{
			border-left-color: var(--gray-mid);
		}
		&::after{
			background-color: var(--gray-mid);
			border-color: var(--gray-mid);
		}
	}

	&.t-tooltip--green{
		&.c-tooltip--top::before{
			border-top-color: var(--green-mid);
		}
		&.c-tooltip--right::before{
			border-right-color: var(--green-mid);
		}
		&.c-tooltip--bottom::before{
			border-bottom-color: var(--green-mid);
		}
		&.c-tooltip--left::before{
			border-left-color: var(--green-mid);
		}
		&::after{
			background-color: var(--green-mid);
			border-color: var(--green-mid);
		}
	}

	&.t-tooltip--orange{
		&.c-tooltip--top::before{
			border-top-color: var(--orange-mid);
		}
		&.c-tooltip--right::before{
			border-right-color: var(--orange-mid);
		}
		&.c-tooltip--bottom::before{
			border-bottom-color: var(--orange-mid);
		}
		&.c-tooltip--left::before{
			border-left-color: var(--orange-mid);
		}
		&::after{
			background-color: var(--orange-mid);
			border-color: var(--orange-mid);
		}
	}

	&.t-tooltip--pink{
		&.c-tooltip--top::before{
			border-top-color: var(--pink-mid);
		}
		&.c-tooltip--right::before{
			border-right-color: var(--pink-mid);
		}
		&.c-tooltip--bottom::before{
			border-bottom-color: var(--pink-mid);
		}
		&.c-tooltip--left::before{
			border-left-color: var(--pink-mid);
		}
		&::after{
			background-color: var(--pink-mid);
			border-color: var(--pink-mid);
		}
	}

	&.t-tooltip--primary{
		&.c-tooltip--top::before{
			border-top-color: var(--primary-mid);
		}
		&.c-tooltip--right::before{
			border-right-color: var(--primary-mid);
		}
		&.c-tooltip--bottom::before{
			border-bottom-color: var(--primary-mid);
		}
		&.c-tooltip--left::before{
			border-left-color: var(--primary-mid);
		}
		&::after{
			background-color: var(--primary-mid);
			border-color: var(--primary-mid);
		}
	}

	&.t-tooltip--purple{
		&.c-tooltip--top::before{
			border-top-color: var(--purple-mid);
		}
		&.c-tooltip--right::before{
			border-right-color: var(--purple-mid);
		}
		&.c-tooltip--bottom::before{
			border-bottom-color: var(--purple-mid);
		}
		&.c-tooltip--left::before{
			border-left-color: var(--purple-mid);
		}
		&::after{
			background-color: var(--purple-mid);
			border-color: var(--purple-mid);
		}
	}

	&.t-tooltip--red{
		&.c-tooltip--top::before{
			border-top-color: var(--red-mid);
		}
		&.c-tooltip--right::before{
			border-right-color: var(--red-mid);
		}
		&.c-tooltip--bottom::before{
			border-bottom-color: var(--red-mid);
		}
		&.c-tooltip--left::before{
			border-left-color: var(--red-mid);
		}
		&::after{
			background-color: var(--red-mid);
			border-color: var(--red-mid);
		}
	}

	&.t-tooltip--teal{
		&.c-tooltip--top::before{
			border-top-color: var(--teal-mid);
		}
		&.c-tooltip--right::before{
			border-right-color: var(--teal-mid);
		}
		&.c-tooltip--bottom::before{
			border-bottom-color: var(--teal-mid);
		}
		&.c-tooltip--left::before{
			border-left-color: var(--teal-mid);
		}
		&::after{
			background-color: var(--teal-mid);
			border-color: var(--teal-mid);
		}
	}

	&.t-tooltip--white{
		&::after{
			color: var(--primary-mid);
		}

		&.c-tooltip--top::before{
			border-top-color: var(--white-mid);
		}
		&.c-tooltip--right::before{
			border-right-color: var(--white-mid);
		}
		&.c-tooltip--bottom::before{
			border-bottom-color: var(--white-mid);
		}
		&.c-tooltip--left::before{
			border-left-color: var(--white-mid);
		}
		&::after{
			background-color: var(--white-mid);
			border-color: var(--white-mid);
		}
	}

	&.t-tooltip--yellow{
		&.c-tooltip--top::before{
			border-top-color: var(--yellow-mid);
		}
		&.c-tooltip--right::before{
			border-right-color: var(--yellow-mid);
		}
		&.c-tooltip--bottom::before{
			border-bottom-color: var(--yellow-mid);
		}
		&.c-tooltip--left::before{
			border-left-color: var(--yellow-mid);
		}
		&::after{
			background-color: var(--yellow-mid);
			border-color: var(--yellow-mid);
		}
	}
}

@media screen and (min-width: 768px) {
	.c-tooltip--xlarge::after{
		width: 380px;
	}
}
/* ***
 * ActionMenuCell styles
 */
.action-menu-cell > i,
.action-menu-cell > div i{
	font-size: 14px;
	margin: 0 3px;
}
.action-menu-cell > div{
	line-height: 14px;
}
.action-menu-cell .ft-ic{
	cursor: pointer;
	margin: 0;
	width: 1.5rem;
	height: 1.5rem;
	display: grid;
	align-content: center;
	justify-content: center;
}
.action-menu-cell .ft-ic:hover{
	color: #fff;
	background: var(--app-theme);
	border-radius: 50%;
}
.action-menu-cell .ft-ic.is-disabled{
	color: var(--white-dark);
}
.action-menu-cell{
	.is-disabled,
	a.is-disabled,
	.ft-ic.is-disabled{
		pointer-events: none;
	}
}
.c-modal__header{
	align-items: center;
	background-color: var(--app-theme);
	color: #fff;
	contain: size;
	display: flex;
	height: var(--modal-header-height);
	justify-content: space-between;
	padding-right: 15px;

	&:has(.has-full-screen):not(:has(.has-close)),
	&:has(.has-close):not(:has(.has-full-screen)){
		h4.c-heading-descriptive{
			max-width: calc(100% - 60px);
		}
	}

	&:has(.has-full-screen.has-close){
		h4.c-heading-descriptive{
			max-width: calc(100% - 90px);
		}
	}

	h4.c-heading-descriptive{
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		display: flex;
		align-items: center;

		.ft-ic{
			color: #fff;
		}

		.u-form__help{
			margin-left: 5px;

			i{
				color: var(--white-dark);
				font-size: 0.95rem;
			}
		}
	}

	.c-header-buttons {
		display: flex;
		align-items: center;
		justify-content: center;

		button[class^="c-button--"]{
			background-color: transparent;
			border: 1px solid transparent;
			border-radius: 14px;
			color: #FFF;
			font-size: 1.8rem;
			height: 27px;
			line-height: 1;
			margin-right: 5px;
			opacity: 1;
			position: inherit;
			width: 27px;

			.ft-ic{
				color: #FFF;
			}

			&.c-button--full-screen{
				align-items: center;
				display: flex;
				font-size: 1.3rem;
				justify-content: center;
			}

			&:focus{
				border-color: transparent;
			}

			&:hover {
				background-color: #fff;
				color: var(--app-theme);

				.ft-ic{ color: var(--app-theme); }
			}
		}
	}
}
.c-modal__footer{
	height: var(--modal-footer-height);
	background-color: #f9f9f9;
	border: solid 1px #979797;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	position: relative;

	.c-actions-bar {
		margin: 0 20px;
		width: 100%;
	}
}
/**
 * Blade/Modal
 */
.c-modal{
	position: initial;
	max-height: 100vh;

	&.full-screen{
		height: 100vh;
		width: 100vw;

		.c-modal__header{
			border-radius: 0;
		}
	}

	&.show-app-header{
		max-height: var(--modal-displacement-height);

		&.is-blade,
		&.is-modal.full-screen{
			height: var(--modal-displacement-height);
			top: var(--modal-displacement) !important;
		}

		&.is-modal{
			position: relative;
		}

		.layout-container .c-modal__content{
			max-height: calc(100vh - var(--app-header-height) - var(--modal-header-height));
		}

		&.has-footer .layout-container .c-modal__content{
			max-height: calc(100vh - var(--app-header-height) - var(--modal-header-height) - var(--modal-footer-height));
		}
	}

	.layout-container{
		display: grid;
		grid-template-rows: var(--modal-header-height) 1fr;
		height: 100%;
		max-height: 100%;

		.c-modal__content{
			contain: inline-size;
			color: var(--app-black);
			height: auto;
			margin: 0;
			max-height: calc(100vh - var(--modal-header-height));
			min-height: 100px;
			overflow-y: auto;
			padding: 20px;
			position: relative;

			.progress-indicator{
				top: 0;
				left: 0;
			}
		}
	}

	&.has-footer .layout-container{
		grid-template-rows: var(--modal-header-height) 1fr var(--modal-footer-height);

		.c-modal__content{
			max-height: calc(100vh - var(--modal-header-height) - var(--modal-footer-height));
		}
	}

	/* Blade Only */
	&.is-blade{
		height: 100vh;
		position: absolute;
		right: 0;
		transition: 0.3s ease-out width;

		&:not(.full-screen){
			width: 50vw;
		}

		.c-modal__header{
			border-radius: 0;
		}

		.c-modal__content{
			height: 100%;
		}
	}

	/* Modal Only */
	&.is-modal{
		&.full-screen.show-app-header{
			top: var(--modal-displacement) !important;
		}

		&:not(.full-screen){
			height: auto;
			max-height: var(--modal-displacement-height);
			min-width: 550px;
			width: auto;
		}
	}

}



/**
 * Confirmation Modal
 */
.confirm-modal .c-modal__content{
	padding: 40px;
}
/**
 * General CSS Helpers
 * - Variables
 * - General
 * - Blank Loading
 * - Bounce Circle
 * - Circle Hover (original rhombus version of bounce-circle?)
 * - Common Actions
 * - Cursor / Pointer Events
 * - Firefox Fixes
 * - Inline Notification
 * - Layout
 * - Spacing
 * - Text
 */
/* Note: Please update `stories/docs/CSS.js` when updating css variables and helper classes here. */


:root {
	/*  */
	--inv-font-family: "Proxima Nova", sans-serif;
	--inv-font-size: 16px;

	/** Common Sizes  */
	--app-header-height:         64px;
	--app-content-height:        calc(100vh - var(--app-header-height));
	--grid-row-height:           35px;	/* if this is changed here it should also be changed in `constants.js` */
	--min-grid-height:           500px;
	--modal-displacement:        calc(var(--app-header-height) - 2px);
	--modal-displacement-height: calc(var(--app-content-height) + 2px);
	--modal-footer-height:       60px;
	--modal-header-height:       42px;
	--pager-height:              42px;
	--toolbar-height:            50px;

	/* Common Colors */
	--app-black:          #374047;  /* rhombus-themes.css: --primary-dark */
	--app-blue:           #2d7ebf;  /* rhombus-themes.css: --blue-mid */
	--app-header-color:   #000443;
	--app-gray:           #858c90;
	--app-grey:           #858c90;
	--green-success:      #52bc68;  /* rhombus-themes.css: --green-mid */
	--grid-border-color:  #d6d8da;  /* rhombus-themes.css: --white-dark */
	--red-fail:           #d0021b;
	--toolbar-background: #f4f5f5;

	/* Brand Colors */
	--brand-color-meta:#1877f2;
	--brand-color-facebook: #1877f2;
	--brand-color-instagram: #e1306c;
	--brand-color-youtube: #ff0000;
	--brand-color-linkedin: #2867b2;
	--brand-color-pinterest: #e60023;
	--brand-color-snapchat: black;
	--brand-color-tiktok: #000;
	--brand-color-twitter: #1d9bf0;
	--brand-color-x-twitter: #000;

	/** --app-theme should be declared within your App to be its specific color: **/
	--app-theme: var(--blue-mid);
}


*,
*::before,
*::after,
input[type=search]{ box-sizing: border-box; }
body{
	margin: 0;
	padding: 0;
}
.hidden,
.no-show,
.is-a-download{ display: none; }
.full-height{ height: 100%; }
.inv-app{
	font-family: var(--inv-font-family);
	font-size: var(--inv-font-size);
	height: 100vh;
	width: 100vw;
}
.ft-app{
	color: var(--app-black);
	height: 100vh;
	width: 100vw;
}
.circle-spin, i.circle-spin,
.generating-circle, i.generating-circle{
	color: var(--app-theme);
}
.app-theme-color{ color: var(--app-theme); }
.app-theme-background{ background-color: var(--app-theme); }
.app-content{ height: var(--app-content-height); }
.bold{ font-weight: bold; }

.app-level-tooltip.react-tooltip__show{
	background-color: var(--app-black);
	color: #fff;
	font-size: 13px;
	padding: 5px;
	word-wrap: break-word;
	z-index: 1051;

	&.small-tooltip{ max-width: 200px; }

	&.view-external-tip{
		div{
			padding: 0 5px;
		}
		.ft-ic{
			color: #fff;
			font-size: 10px;
			margin-left: 4px;
		}
	}
}

/**
 * overriding original rhombus
 */
footer {
	background-color: inherit;
	bottom: auto;
	font-size: inherit;
	left: auto;
	line-height: inherit;
	padding: 0;
	position: relative;
	text-align: inherit;
	width: auto;
	z-index: auto;
}
footer span { font-weight: normal; }


/**
 * BLANK LOADING
 * This class will add the psudo grey bars over text when it's loading
 * This gives the illusion that there is something there without having to show a spinner
 */
.blank-load {
	transition: 0.2s ease-in;
	line-height: 1.2;
}
.is-loading .blank-load {
	background-color: var(--grid-border-color);
	height: 14px;
	width: 75px;
	color: transparent !important;
}


/**
 * BOUNCE CIRCLE
 **/
.bounce-circle.ft-ic{
	cursor: pointer;
	transition: 0.2s cubic-bezier(0.29, -0.18, 0.44, 1.48);
	margin: 0;
	width: 1.5rem;
	height: 1.5rem;
	display: grid;
	align-content: center;
	justify-content: center;
	background-color: #0000;
	border-radius: 1px;
}
.bounce-circle.ft-ic.is-disabled{
	color: var(--white-dark);
	cursor: default;
	pointer-events: none;
}
.bounce-circle:hover{
	color: #fff;
	background: var(--app-blue);
	border-radius: 50%;
}


/**
 * CIRCLE HOVER
 */
/*
Used to create a circle that bounces in on hover
TODO: is this the original rhombus version of bounce-circle / used anywhere anymore?
*/
.circle-hover:hover .circle-around::before {
	content: "";
	border-radius: 50%;
	color: white;
	animation: bounceIn 0.4s linear;
}
.circle-hover.theme-red .circle-around::before { background-color: var(--red-dark); }
.circle-hover.theme-pink .circle-around::before { background-color: var(--pink-light); }
.circle-hover.theme-blue .circle-around::before { background-color: var(--blue-light); }
.circle-hover.theme-green .circle-around::before { background-color: var(--green-light); }
.circle-hover.theme-purple .circle-around::before { background-color: var(--purple-light); }
.circle-hover.theme-orange .circle-around::before { background-color: var(--orange-light); }
.circle-hover.theme-yellow .circle-around::before { background-color: var(--yellow-light); }


/**
 * COMMON ACTIONS
 */
.ft-ic.remove-icon {
	font-size: 16px;
	line-height:1.75;
	color: #858c90;
	cursor: pointer;
	margin-left: 3px;
	transition: 0.2s ease color;
}
.ft-ic.remove-icon:hover {
	color: var(--app-black);
}


/**
 * CURSOR / POINTER EVENTS
 */
.cursor-default{ cursor: default; }
.cursor-pointer{ cursor: pointer; }
.cursor-help{ cursor: help; }
.cursor-not-allowed,
.disabled-link{ cursor: not-allowed; }
.disabled-link a,
a.disabled,
a.is-disabled{ pointer-events: none; }


 /**
 * FIREFOX
 */
.is-ff .e-form__select {
	appearance: none;
	padding-top: 5px;
}


/**
 * INLINE NOTIFICATION
 */
.inline-notification-section{
	border-radius: 3px;
	font-size: 12px;
	padding: 10px;
}
.inline-notification-section:not(td){ display: flex; }
.inline-notification-section .notification-icon{
	font-size: inherit;
	margin-top: 4px;
	margin-right: 10px;
}
.inline-notification-section.info{ background-color: #d8eafa; }
.inline-notification-section.info .notification-icon{ color: #2d7ebf; }
.inline-notification-section.error .notification-icon{ color: #db6561; }
.inline-notification-section.success .notification-icon{ color: #52bc68; }
.inline-notification-section.warning .notification-icon{ color: #f3824f; }


/**
 * LAYOUT
 */
.flex,
.flex-only {
	display: flex;
}
/* justify-content */
.flex-around {
	display: flex;
	justify-content: space-around;
}
.flex-end{
	display: flex;
	justify-content: flex-end;
}
.flex-evenly{
	display: flex;
	justify-content: space-evenly;
}
.flex-between {
	display: flex;
	justify-content: space-between;
}
.flex-start {
	display: flex;
	justify-content: flex-start;
}

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

/* flex-direction */
.flex-column{
	display: flex;
	flex-direction: column;
}

/**
 * SPACING
 */
.margin-right-5{ margin-right: 5px; }


/**
 * TEXT
 */
.monospace,
.text-monospace { font-family: monospace; }
.capitalize,
.text-capitalize{ text-transform: capitalize; }
.uppercase,
.text-uppercase{ text-transform: uppercase; }
.text-center { text-align: center; }
/** When using this you MUST include a width on the element you want overflow */
.name-overflow,
.text-overflow-ellipse{
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.name-overflow{
	display: block;
}
.text-break-word{
	word-break: break-word;
}
/**
 * Animations
 * Various animations in use throughout Rhombus + The Applications
 */

.blink{ animation: 1s blink step-end infinite; }
@keyframes blink {
	from, to { opacity: 0; }
	50% { opacity: 1; }
}

/**
 * bounceIn
 * 	- used in action-kebabs
 * 	- used in hover on certain icons
 */
.bounce-in:hover{ animation: bounceIn 0.4s linear; }
@keyframes bounceIn {
	0%, 100%, 20%, 40%, 60%, 80% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		transform: scale3d(0.9, 0.9, 0.9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
 	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}
	100% {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

.marching-ants{
	position: relative;
	height: 10px;
}
.marching-ants::after{
	animation: marchingAnts 7s linear infinite;
	background-image: linear-gradient(to right, var(--app-theme) 50%, transparent 50%);
	background-repeat: repeat-x;
	background-size: 10px 2px;
	content: "";
	height: 50%;
	left: 0;
	position: absolute;
	top: 50%;
	width: 100%;
}
@keyframes marchingAnts {
	0% { background-position:0 0; }
	to { background-position:100% 0; }
}

.rotate-in-a-circle,
.generating-circle,
.circle-spin{
	animation: rotateInACircle 2s linear infinite;
}

@keyframes rotateInACircle {
	to { transform: rotate(360deg); }
}

.rotate-y-3d{ animation: rotateY3D 1s ease-out infinite; }
@keyframes rotateY3D {
	to { transform:rotateY(360deg); }
}

.wiggle{ animation: wiggle 0.35s linear infinite; }
.wiggle-hover:hover{ animation: wiggle 0.35s linear; }
@keyframes wiggle {
	0% { transform:rotateX(30deg); }
	30% { transform:rotate(-30deg);	}
	50% { transform:rotate(0); }
	70% { transform:rotate(30deg); }
	100% { transform:rotate(0);	}
}

.reverse-animation { animation-direction: reverse; }
.progress-indicator {
	position: absolute;
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background-color:rgba(255,255,255,0.85);
	pointer-events: all;
	cursor: wait;
}
.progress-indicator.is-opaque{
	background-color:rgba(255,255,255,1);
}
.progress-indicator .generating-circle {
	color: var(--app-theme);
	font-size: 36px;
}
.progress-indicator .description {
	font-size: 12px;
	font-family: Open Sans;
	color: var(--app-black);
}
/**
 * Account Modal Styles
 */
.account-modal {
	width:500px;
	--app-theme:#d52f6f;
}

.account-modal .c-modal__header {
	background-color:var(--app-theme);
}
.account-modal .c-modal__header h4 {
	color:#fff;
}

.account-modal .c-modal__header .c-button--close {
	border-radius: 14px;
	width: 27px;
	height: 27px;
	color: #fff;
	opacity: 1;
	background-color: transparent;
}
.account-modal .c-modal__header .c-button--close:focus {
	border: transparent;
}
.account-modal h3 {
	background-color: #f4f5f5;
	text-transform: uppercase;
	padding: 12px 20px;
	font-size: 12px;
	border-bottom: 1px solid #d6d8da;
}
.account-modal .password-section h3 {
	border-top:1px solid #d6d8da;
}
.c-modal.account-modal .c-modal__content {
	padding: 0;
}
.account-modal .e-form__control-wrapper {
	margin: 12px 20px;
}
.account-modal .account-grouping {
	margin-bottom: 30px;
}

.account-modal .password-info {
	margin:0 20px;
	font-size: 12px;
}

.account-modal .password-rules {
	color:#858c90;
	list-style: none;
	margin:0;
	margin-left: 7px;
	padding:0;
}

.account-modal .password-rules li {
	list-style-type: " - ";
}

.account-modal input.password-input[type=password]{
	font-size: 20px;
}

.account-modal .e-form__control input.password-input:placeholder-shown,
.account-modal .e-form__control input.password-input::placeholder {
	font-size: 12px;
}

.account-modal .e-form__control i.ft-ic.toggle-password {
	cursor: pointer;
	font-size: 13px;
	padding-right: 5px;
}
/**
 * App Header
 *************/
 .ft-header{
	font-family: var(--inv-font-family);
 }

.ft-header .ft-nav-item.is-active {
	box-shadow: 0 4px 0 0 var(--app-theme), -1px 0 0 0 #333668, 1px 0 0 0 #333668;
}

/* General App Header Styles */
.ft-header {
	height: var(--app-header-height);
	background-color: var(--app-header-color);
	width: 100%;
	border-bottom: 3px solid #d6d8db;
	display: flex;
	justify-content: space-between;
}

.ft-header .logo-side,
.ft-header .nav-side {
	display: flex;
	flex-direction: row;
}

.ft-header .logo-side .ft-logo {
	padding-right: 10px;
	border-right: 1px solid #333668;
	margin-left: 20px;
}
.ft-header .logo-side .ft-logo img {
	height: 32px;
	margin-top: -5px;
}

.ft-header .ft-product-name {
	color: #fff;
	font-size: 19px;
	font-weight: normal;
	margin: 0 0 0 10px;
	text-transform: capitalize;
}
.ft-header .ft-product-name a {
	color: inherit;
	text-transform: capitalize;
}

.ft-header .c-environment-badge {
	border-width: 2px;
	font-weight: bold;
	text-transform: none;
}

.ft-header .ft-nav-item,
.ft-header .ft-user-info {
	padding: 0 14px;
	color: #fff;
	font-size: 14px;
	display: flex;
	align-items: center;
	transition: 0.2s ease-in;
}
.ft-header .ft-nav-item { cursor: pointer; }

.ft-header .ft-user-info {
	padding-right: 20px;

	.welcome-who{ margin-right: 8px; }
	.user-icon{ color: #fff; }
}

.ft-header .ft-nav-item > .ft-ic {
	color: #fff;
}

.ft-header .ft-nav-item:not(.is-active) {
	box-shadow: 1px 0 0 0 #333668;
}

.ft-header .ft-nav-item:not(.is-active):first-child {
	box-shadow: -1px -1px 0px 0px #333668
		, 1px 0 0 0 #333668;
}

.ft-header .ft-nav-item:not(.is-disabled):hover,
.ft-header .ft-nav-item.is-active {
	color: #fff;
	background-color:#151852;
}

.ft-header .ft-nav-item .ft-ic {
	font-size: 16px;
	transition: 0.2s ease-in;
}
.ft-header .ft-nav-item .ft-nav-label {
	margin-left: 5px;
	line-height: 1.5;
	transition: 0.2s ease-in;
}

.ft-header .ft-nav-item.is-disabled { cursor: default; }
.ft-header .ft-nav-item.is-disabled .ft-ic { color: #595c84; }

/*AppHeader NavItem active/hover styles*/

.ft-header .ft-nav-item:not(.is-active):hover,
.ft-header .ft-nav-item:not(.is-open):hover {
	box-shadow: 0 0 0 0 var(--app-theme), -1px 0 0 0 #333668, 1px 0 0 0 #333668;
}

.ft-header .ft-nav-item:last-child,
.ft-header .ft-nav-item:last-child,
.ft-header .ft-nav-item:last-child:hover,
.ft-header .ft-nav-item:last-child:hover {
	box-shadow: 0 0 0 0 var(--app-theme), 0 0 0 0 #333668, 1px 0 0 0 #333668;
}

.ft-header .ft-nav-item.is-active:last-child,
.ft-header .ft-nav-item.is-open:last-child {
	box-shadow: 0 4px 0 0 var(--app-theme), 0 0 0 0 #333668, 1px 0 0 0 #333668;
}

.ft-header .ft-nav-item.is-active:last-child:hover,
.ft-header .ft-nav-item.is-open:last-child:hover {
	box-shadow: 0 4px 0 0 var(--app-theme), -1px 0 0 0 #333668, 1px 0 0 0 #333668;
}

.ft-header .ft-nav-item.is-active,
.ft-header .ft-nav-item.is-open,
.ft-header .ft-nav-item.is-active:hover,
.ft-header .ft-nav-item.is-open:hover {
	box-shadow: 0 4px 0 0 var(--app-theme), -1px 0 0 0 #333668, 1px 0 0 0 #333668;
}

/*End AppHeader NavItem active/hover styles*/

/**
 * Header More Options
 */

.has-more-options {
	position: relative;
}
.ft-header-more-options {
	position: absolute;
	top: 100%;
	min-width: 200px;
	z-index: 100;
	margin: 0;
	padding: 0;
	list-style-type: none;
	box-shadow: 2px 2px 5px 0 #bfbfbf;
	border-radius: 3px;
	border: 1px solid #d4d6d8;
	font-size: 12px;
}
.ft-header-more-options a { color: inherit; }

.ft-header-more-options:hover { background-color: #d8eafa; }
.ft-header .ft-header-more-options .ft-ic { color: var(--app-black); }
.ft-header-more-options .option-icon { margin-right: 7px; }

.ft-header-more-options .ft-header-option {
	color: var(--app-black);
	background-color: #fff;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: left;
	padding-left: 10px;
}

.ft-header .has-more-options:hover .ft-header-more-options .ft-ic { color: inherit; }

.ft-header .has-more-options .ft-header-more-options {
	top: inherit;
	bottom: 0;
	transform: translateY(-10px) rotateX(90deg);
}

.ft-header .has-more-options:not(.click-to-open):hover .ft-header-more-options,
.ft-header .has-more-options.click-to-open.is-open .ft-header-more-options {
	top: calc(100% + 4px);
	bottom: inherit;
	transform: translateY(0);
}
.ft-header .has-more-options .ft-header-option { border-bottom:1px solid #d6d8da; }
.ft-header .has-more-options .ft-header-option:last-child { border-bottom:none; }
.ft-header .has-more-options .ft-header-option:hover { background-color: #d8eafa; }
/**
 * Specific styles for the user section
 */
.ft-user-info .ft-header-more-options {
	right: 0;
	width: 180px;
	min-width: 180px;
}
.ft-help-item .ft-header-more-options { left: 0; }

/**
 * Styles for <button /> drop down elements
 */
.ft-header .ft-header-option.button-actions {
	margin:0;
	padding: 0;
}
.ft-header .action-header-button {
	appearance: none;
	border: none;
	background: none;
	width: 100%;
	height: 100%;
	text-align: left;
	margin: 0;
	padding: 0;
	padding-left: 10px;
	display: flex;
	align-items: center;
}

.ft-header .ft-user-info .ft-header-more-options { width:100%; }
.ft-header .ft-user-info .ft-header-option { padding: 0; }
:root{
	/* If variables are added/updated here, be sure to update `stories/docs/CSS.js` */
	--breadcrumb-bar-height: 45px;
	--breadcrumb-bar-active-color: #9b0649;	/* ncm color */
}

.breadcrumb-bar{
	height: var(--breadcrumb-bar-height);
	--default-color: #aeb2b5;

	color: white;

	display: flex;
	justify-content: stretch;
	align-items: center;

	font-size: 13px;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
}

.breadcrumb-bar .step{
	height: 45px;
	flex-grow: 1;
	background-color: var(--default-color);
	text-align: center;

	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
}

.breadcrumb-bar .step:last-of-type{
	border-right: none;
}

.breadcrumb-bar .step.active{
	background-color: var(--breadcrumb-bar-active-color);
}

.breadcrumb-bar .step-number{
	display: inline-block;

	/*
		line-height and padding-bottom are used to get the circled number positioned correctly
		inside the circle, and aligning the number with the step name.
	*/
	line-height: 20px;
	padding-bottom: 2px;

	width: 25px;
	height: 25px;

	margin-top: 1px;
	margin-right: 7px;

	border: solid 2px;
	border-radius: 13px;
}

.breadcrumb-bar .step.done .step-number{
	color: var(--default-color);
	background-color: white;
}

.breadcrumb-bar svg{
	height: 100%;
}

.breadcrumb-bar .transition{
	stroke: var(--default-color);
	fill: var(--default-color);
}

.breadcrumb-bar .transition.active{
	stroke: var(--breadcrumb-bar-active-color);
	fill: var(--breadcrumb-bar-active-color);
}

.breadcrumb-bar .transition-chevron{
	stroke: white;
	stroke-width: 3px;
	fill: none;
}
.action-trigger.menu-trigger:has(> .c-button.is-disabled){
	pointer-events: none;
}

.dropdown-button.caret-only{
	.action-icon{
		margin: 0 0.2rem;
	}

	&.c-button--small{
		padding: 0;

		.ft-ic.action-icon{
			margin: 0;
		}
	}
}
.dropdown-button .action-icon{
	margin: 0 0 0 0.5rem;

	&:hover{
		color: inherit;
	}
}
.split-button-container{
	display: flex;

	&:has(.action-trigger) .action-button{
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.action-trigger{
		border-left: 1px solid transparent;
	}

	&:has(.action-button) .dropdown-button{
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}
/**
 * EmptyItem.css
 */
.empty-item {
	border-radius: 3px;
	box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);
	background-color: #ffffff;
	border: solid 1px #eaebec;
	padding: 20px;
	margin: 20px 0;
	flex-direction: column;
	color: #858c90;
	font-size: 18px;
	/* 26px for the header + 20px for the margin */
	height: calc(100% - 46px);
	justify-content: center;

	&.fill-space{
		border: none;
		box-shadow: none;
		height: 100%;
		margin: 0;
		width: 100%;
	}
}

.empty-item .item-icon {
	font-size: 60px;
	color: #858c90;
	margin-bottom: 15px;
}
.empty-item .item-image{
	margin-bottom: 15px;
}
.empty-item h4{
	margin-bottom: 0;
}
.empty-item p{
	margin: 0;
}
.empty-item .buttons{
	margin-top: 15px;
}
.empty-item .buttons a:nth-child(n+2),
.empty-item .buttons button:nth-child(n+2){
	margin-left: 10px;
}
/**
 * Error Banner
 */
.error-banner-container{
	background-color: #f5d5d4;
	border-radius: 3px;
	margin: 10px 20px;

	&.info{
		background-color: #b8d1e5;

		.header{
			background-color: var(--app-blue);
		}
	}

	&.success{
		background-color: #cfecd5;

		.header{
			background-color: var(--green-success);
		}
	}

	&.warn{
		background-color: #ffddce;

		.header{
			background-color: #f3824f;
		}
	}

	&.no-messages{
		.header{
			border-radius: 3px;
		}

		.content{
			padding: 0;
		}
	}

	> div{
		padding: 10px;
	}

	.header{
		color: #fff;
		background-color: var(--red-mid);
		border-radius: 3px 3px 0 0;
		font-weight: bold;

		.ft-ic{
			color: #fff;
			margin-right: 10px;
		}
	}

	.content{
		padding: 10px;
		padding-left: 12px;

		ul{
			margin-bottom: 0;

			li{
				color: var(--app-black);
				font-size: 13px;
				padding-left: 4px;
			}
		}
	}
}
.c-modal.u-modal-responsive.session-modal{
	width: 675px;
}
.c-modal.session-modal .c-modal__content {
	max-width: 700px;
	padding: 30px;
}

.session-modal .message {
	width: 80%;
	text-align: center;
	margin: 0 auto 27px;
}
.session-modal.is-expired .message { margin-bottom: 0; }

.countdown-container {
	border-radius: 3px;
	background-color: #eaebec;
	font-size: 14px;
	color: #374047;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 130px;
}
.countdown-container p { margin: 0; }
.countdown-container .time-remaining { font-size: 36px; }

.session-modal .session-buttons .c-actions-bar { justify-content: flex-end; }
.c-page-header{
	align-items: center;
	background-color: #fff;
	border-bottom: 1px solid var(--white-dark);
	color: #4a4a4a;
	display: flex;
	font-size: 16px;
	height: var(--toolbar-height);
	padding: 0 20px;

	&.is-sticky{
		position: sticky;
		top: 0;
	}

	aside{
		align-items: center;
		display: flex;
	}
}
/**
 * Pager.css
 */
.c-pagination {
	height: var(--pager-height);
	background-color: #f9f9f9;
}
.individual-pages {
	padding: 3px 8px;
	margin: 9px 0 0;
	border-radius: 50%;
	color:  #374047;
	font-size: 12px;
}

.c-pagination ul.pager-list {
	padding-bottom: 4px;
}
.c-pagination.has-item-count.pager:not(.has-row-counter) ul.pager-list,
.c-pagination.has-row-counter.pager:not(.has-item-count) ul.pager-list{
	flex-grow: 2;
}
.c-pagination.has-item-count.has-row-counter ul.pager-list{
	flex-grow: 4;
}

.individual-pages,
.individual-pages a,
.individual-pages:focus,
.individual-pages:focus a,
.individual-pages:active,
.individual-pages:active a { outline: none; }

.individual-pages a { color:  #5e666b; }

.individual-pages.selected {
	background-color: #5e666b;
	color:#fff;
	font-weight: bold;
}
.individual-pages.selected a {
	cursor: default;
}
.individual-pages.selected a { color: #fff; }

.individual-pages a:hover {
	color: #4a5258;
	font-weight: bold;
}
.individual-pages.selected a:hover { color: #fff; }

.pager .pager-list .previous.is-disabled,
.pager .pager-list .previous.is-disabled a,
.pager .pager-list .next.is-disabled,
.pager .pager-list .next.is-disabled a {
	cursor: default;
	color: #aeb2b5;
	border-color: #aeb2b5;
}
.pager .pager-list .previous a:focus,
.pager .pager-list .next a:focus {
	outline: none;
}
.pager-list .break {
	margin: 0 4px;
}

.pager.has-row-counter {
	display: flex;
}
.pager.has-row-counter .pager-list {
	margin-left: 200px; /* this keeps it centered on screen when it gets pushed left by a row count */
}
.pager.has-row-counter .row-count-fieldset {
	margin-right: 20px;
	margin-bottom: 0;
	align-items: flex-end;
}

.pager.has-row-counter .row-count-fieldset .e-form__control {
	display: flex;
	align-items: center;
}
.pager.has-row-counter .row-count-fieldset label {
	margin-right: 1rem;
	color: #5e666b;
	font-size: 12px;
}

.pager.has-row-counter .row-count-selector {
	margin-top: 2px;
	width: 75px;
	cursor: pointer;
}

.pager.no-counters .pager-list{
	width: 100%;
}

.pager:not(.has-row-counter) .item-count {
	border-right: none;
	margin-right: 0;
}
.pager.no-counters .row-count-fieldset,
.pager.no-counters .item-count {
	/* if neither itemCount or rowCount are displayed,
	center paginator */
	display: none;
}

.pager:not(.has-row-counter) .row-count-fieldset {
	/* remove .row-count-fieldset from dom so .pager-list
	isnt off-centered when row count is hidden */
	display: none;
}

/**
 * Next/Previous Buttons
 */
.pager .previous,
.pager .next {
	height: 24px;
	padding: 12px;
	display: inline-block;
	padding: 14px 20px 0 20px;
}
.c-pagination.pager .c-pagination__previous,
.c-pagination.pager .c-pagination__next{
	float: none;
	top: 0;
}
/* If there is no theme (nothing after 't-paginagion--'), set the arrow to the app theme */
.pager.t-pagination-- a[class^="c-pagination__"]{ border-color: var(--app-theme); }
/* base rhombus doesn't have teal */
.t-pagination--teal.pager .c-pagination__previous,
.t-pagination--teal.pager .c-pagination__next{ border-color: var(--teal-dark); }

/**
 * Item Count
 */
.item-count {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-right: 10px;
	padding-right: 10px;
	font-size: 12px;
	line-height: 1.2;
	color: #5e666b;
	border-right: 1px solid #5e666b;
}
/*
	We use a flex layout because it's difficult to get the exact right behavior any other way.
	Attempting to use height: 100% for the scrollable container only works if you set a height
	in scalar units on its containing element, which then makes it difficult to make it grow to fit
	the content and behave properly with max-height.

	Instead, we just make a flex container with a single child element that grows/shrinks to fit,
	with overflow-y: scroll.
*/

.progress-container{
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
}

.progress-container-scrollable{
	overflow-y: scroll;
}
/**
 * Search Styles
 */

.search-component {
	display:flex;
	align-items: center;
/* 	box-shadow:
		inset 3px 0px 0px #fff
		, inset -5px 0 0 #fff
		, inset 0 -2px 0 rgba(0,0,0,.3)
		; */
	/*box-shadow: 0 2px 0 rgba(100,122,137,0.2);*/
	transition: 0.35s ease-out;
}
/*.search-component.is-focused {
	box-shadow: 0 2px 0 #647a89;
	width: 500px;
	max-width: 100%;
}*/
.search-component .search-input-wrapper{
	border-bottom: 1px solid #d6d8da;
	width: 100%;
}
.search-component .search-input-wrapper input{
	width: calc(100% - 30px);
}
.search-component.is-focused .search-input-wrapper{
	border-bottom: 1px solid #858c90;
}
.search-component .search-field { transition: 0.3s; }
/*.search-component.is-focused .search-field { width:100%; }*/

.search-component .ft-ic {
	-webkit-user-select: none;
	user-select: none;
	font-size: 14px;
	color: #647a89;
}

.search-component input {
	border: none;
	margin: 2px 0;
	padding-left: 5px;
	font-size: 12px;
	line-height: 1.5;
	background-color: transparent;
}

.search-component .clear-search {
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: 0.25s ease;
}
.search-component .clear-search:hover {
	color: #364047;
}

.search-component.is-searching .clear-search {
	opacity: 1;
	pointer-events: all;
}

.search-component.is-disabled .clear-search{
	pointer-events: none;
}
/**
 * Status Icon Styles
 */
/* .status-icon {} */

.campaign-name-cell .status-icon .ft-ic,
.name-cell .status-icon .ft-ic { font-size: 10px; }

.status-icon .status-generating,
.status-icon .status-in-queue {
	color: #909090;
	animation: rotateInACircle 2s linear infinite;
}

.status-icon .status-approved,
.status-icon .status-active,
.status-icon .status-live { color: #52bc68; }

.status-icon .status-unsubmitted { color:#f69d00 }

.status-icon .status-available { color: #52bc68; }

.status-icon .status-draft { color: #9b9b9b; }

.status-icon .status-is-closed { color: #000; }

.status-icon .status-stopped { color: #858c90; }

.status-icon .status-failed,
.status-icon .status-error { color: #d0021b; }

.status-icon .status-unpublished{ color: #2faf92; }

.status-icon .status-pending_approval {
	animation: pendingPulse 1s ease-in-out infinite alternate;
}

@keyframes pendingPulse {
	0% {
		color:#cc9a09;
	}
	to {
		color:#6f3206;
	}
}
/**
 * Tag Component
 */
.c-tag {
	height: 27px;
	border-radius: 13px;
	background-color: var(--default-dark);
	color: #fff;
	padding: 0 10px;
	font-size: 11px;
	font-weight: bold;
	padding-right: 5px;
}

.c-tag .c-tag-label {
	padding: 2px 5px;
}

.c-tag .c-tag-remove{
	cursor: pointer;
	padding: 0 3px;
	padding: 0 3px;
	font-weight: bold;
	text-transform: uppercase;
	background-color: transparent;
}
.c-tag .c-tag-remove i.ft-ic{
	font-size: 14px;
	color: var(--grey-dark);
}
.c-tag .c-tag-remove:hover i.ft-ic{
	color: #fff;
}
.c-tag.c-tag--clickable{
	cursor: pointer;
}
.c-tag.c-tag--clickable:hover{
	background-color: var(--app-black);
}

.c-tag .c-tag-remove:hover{
	color: #fff;
}

/* theme-specific styles */
.c-tag.t-badge--default{
	background-color: var(--default-dark);
}

.c-tag.t-badge--primary{
	background-color: var(--primary-dark);
}

.c-tag.t-badge--white{
	background-color: var(--white-light);
	color: var(--default-dark);
}
.c-tag.t-badge--white.c-tag--clickable:hover{
	background-color: var(--grey-light)
}
.c-tag.t-badge--white .c-tag-remove:hover i.ft-ic{
	color: var(--primary-dark);
}

.c-tag.t-badge--blue{
	background-color: var(--blue-dark);
}

.c-tag.t-badge--purple{
	background-color: var(--purple-dark);
}

.c-tag.t-badge--pink{
	background-color: var(--pink-dark);
}

.c-tag.t-badge--orange{
	background-color: var(--orange-dark);
}

.c-tag.t-badge--green{
	background-color: var(--green-dark);
}

.c-tag.t-badge--red{
	background-color: var(--red-dark);
}

.c-tag.t-badge--gray,
.c-tag.t-badge--grey{
	background-color: var(--grey-dark);
}
.c-tag.t-badge--gray .c-tag-remove i.ft-ic,
.c-tag.t-badge--grey .c-tag-remove i.ft-ic{
	color: var(--white-dark);
}

.c-tag.t-badge--yellow{
	background-color: var(--yellow-dark);
}

.c-tag.t-badge--teal{
	background-color: var(--teal-dark);
}
.text-overflow{
	&.is-action:hover{
		cursor: pointer;
		text-decoration: underline;
	}
}

.toggle-filter-icons .view-changer {
	display: inline-flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
.toggle-filter-icons .view-changer li {
	border-radius: 0;
	height: 26px;
	background-color: #fff;
	border: solid 1px #d6d8da;
	color: #5e666b;
	padding: 0 7px;
	font-size: 12px;
	font-weight: 600;
	transition: 0.35s ease;
}
.toggle-filter-icons .view-changer .is-disabled {
	cursor: not-allowed;
	opacity: 0.5;
}
.toggle-filter-icons .toggle-icon .ft-ic {
	color: #5e666b;
	font-size: 13px;
}
.toggle-filter-icons .view-changer li.is-active {
	background-color: #5e666b;
	color: #fff;
}
.toggle-filter-icons .view-changer li:not(.is-disabled):hover {
	background-color: rgba(100, 122, 137, 0.5);
	color: #5e666b;
	background-color: #d6d8da;
}
.toggle-filter-icons .view-changer li.is-active .ft-ic { color: #fff; }

.toggle-filter-icons .view-changer li:first-child {
	border-radius: 3px 0 0 3px;
}
.toggle-filter-icons .view-changer li:last-child {
	border-radius: 0 3px 3px 0;
}
.toggle-filter-icons .view-changer li:only-child {
	border-radius:3px;
	border:1px solid #d6d8da;
}
.toggle-filter-icons .view-changer .view-name { margin-left: 5px; }

.toggle-filter-icons .view-changer li:not(:last-child){ border-right: 0; }.c-toolbar{
	background-color: var(--toolbar-background);
	box-shadow: inset 0 -1px 0 0 #d6d8da, inset 0 1px 0 0 #d6d8da;
	border-radius: 0;
	border-bottom: 0;
	height: var(--toolbar-height);
}

.c-toolbar .e-form--search .e-form__input {
	box-shadow: 0 2px 0 -1px hsla(206,5%,70%,.6);
}
.e-form__control-react-select{
	&.has-icon{
		> .ft-ic{
			font-size: 16px;
			margin-left: 10px;
			z-index: 1;
		}

		.ft-select__control .ft-select__value-container{
			padding-left: 30px;
		}
	}

	&.short-select{
		&.has-icon > .ft-ic{ font-size: 10px; }

		.ft-select__control{
			min-height: 28px;
			height: 28px;
			font-size: 12px;

			.ft-select__indicators{
				height: 28px;

				.ft-select__dropdown-indicator .ft-ic{ font-size: 16px; }
			}
		}
	}

	.ft-select__control{
		border-color: #adb2b5;
		padding: 2px 4px;

		.ft-select__value-container{
			padding: 0 4px 0 0;
		}

		.ft-select__indicators{
			padding: 0 8px;
			gap: 8px;

			.ft-select__indicator{
				padding: 0;

				&.ft-select__clear-indicator .ft-ic{
					font-size: 14px;
				}

				.ft-ic{
					cursor: pointer;
				}
			}

			.ft-select__indicator-separator{ display: none; }
		}
	}

	/* for some reason the z-index doesn't always work if it's just in the css outside of e-form__control */
	.ft-select__menu{
		z-index: 2;
	}
}

/* select menu stuff needs to be outside of the e-form__control in case the menu is portaled */
.ft-select__menu{
	border: 1px solid var(--grid-border-color);
	border-radius: 3px;
	box-shadow: 2px 2px 5px 0 #bfbfbf;
	color: var(--app-black);
	z-index: 2;

	/* options */
	.ft-select__option,
	.ft-select__group-heading{
		cursor: pointer;
		font-size: 12px;
		overflow: hidden;
		padding: 4px 10px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.ft-select__option--is-selected{
		background: transparent;
		color: var(--app-black);

		&:hover{
			background-color: #d8eafa;
			color: var(--app-black);
		}
	}

	.ft-select__option:has(.is-loading-item){
		display: flex;
		place-content: center;
		pointer-events: none;
	}

	/* groups */
	.ft-select__group{
		border-top: 1px solid var(--grid-border-color);
		border-bottom: 1px solid var(--grid-border-color);
		padding: 0;

		&:first-child{
			border-top: none;
		}
		&:last-child{
			border-bottom: none;
		}

		.ft-select__option{
			padding-left: 20px;
		}

		.ft-select__group-heading{
			color: #4a4a4a;
			cursor: default;
			font-weight: bold;
			margin: 0;
			text-transform: none;
		}
	}
}

/* multi-select */
/* current ncm styles */
.e-form__control-react-select .ft-select__multi-value{
	background-color: var(--white-mid);
	border: 1px solid var(--grid-border-color);
	color: #3f4951;
	font-size: 12px;
	border-radius: 3px;

	.ft-select__multi-value__label,
	.ft-select__multi-value__remove .ft-ic{
		color: #3f4951;
		font-size: 12px;
	}

	.ft-select__multi-value__remove{
		cursor: pointer;
	}
}

/* themed tags styles */
.e-form__control-react-select.primary .ft-select__multi-value,
.e-form__control-react-select.has-theme .ft-select__multi-value{
	background-color: var(--app-black);
	border-radius: 30rem;
	border: 1px solid transparent;
	line-height: 0.9375rem;
	padding: 0.1875rem 0.4375rem;
}
.e-form__control-react-select.has-theme .ft-select__multi-value__label{
	color: #fff;
}
.e-form__control-react-select.has-theme .ft-select__multi-value__remove:hover{
	background-color: transparent;
}
.e-form__control-react-select.has-theme .ft-select__multi-value__remove .ft-ic{
	background-color: inherit;
	cursor: pointer;
	color: #fff;
	font-size: 14px;
	border: 2px solid transparent;
	border-radius: 50%;
}
.e-form__control-react-select.has-theme .ft-select__multi-value__remove:hover .ft-ic{
	color: var(--app-black);
	background-color: #fff;
	border-color: #fff;
}

.e-form__control-react-select.blue .ft-select__multi-value{ background-color: var(--blue-dark); }
.e-form__control-react-select.blue .ft-select__multi-value__remove:hover .ft-ic{ color: var(--blue-dark); }

.e-form__control-react-select.purple .ft-select__multi-value{ background-color: var(--purple-dark); }
.e-form__control-react-select.purple .ft-select__multi-value__remove:hover .ft-ic{ color: var(--purple-dark); }

.e-form__control-react-select.pink .ft-select__multi-value{ background-color: var(--pink-dark); }
.e-form__control-react-select.pink .ft-select__multi-value__remove:hover .ft-ic{ color: var(--pink-dark); }

.e-form__control-react-select.orange .ft-select__multi-value{ background-color: var(--orange-dark); }
.e-form__control-react-select.orange .ft-select__multi-value__remove:hover .ft-ic{ color: var(--orange-dark); }

.e-form__control-react-select.green .ft-select__multi-value{ background-color: var(--green-dark); }
.e-form__control-react-select.green .ft-select__multi-value__remove:hover .ft-ic{ color: var(--green-dark); }

.e-form__control-react-select.red .ft-select__multi-value{ background-color: var(--red-dark); }
.e-form__control-react-select.red .ft-select__multi-value__remove:hover .ft-ic{ color: var(--red-dark); }

.e-form__control-react-select.yellow .ft-select__multi-value{ background-color: var(--yellow-dark); }
.e-form__control-react-select.yellow .ft-select__multi-value__remove:hover .ft-ic{ color: var(--yellow-dark); }

.e-form__control-react-select.white .ft-select__multi-value{ background-color: var(--white-dark); }
.e-form__control-react-select.white .ft-select__multi-value__label{ color: var(--default-dark); }
.e-form__control-react-select.white .ft-select__multi-value__remove .ft-ic{ color: var(--default-dark); }
.e-form__control-react-select.white .ft-select__multi-value__remove:hover .ft-ic{
	background-color: var(--default-dark);
	border-color: var(--default-dark);
	color: var(--white-dark);
}

.e-form__control-react-select.grey .ft-select__multi-value{ background-color: var(--grey-dark); }
.e-form__control-react-select.grey .ft-select__multi-value__remove:hover .ft-ic{ color: var(--grey-dark); }

.e-form__control-react-select.default .ft-select__multi-value{ background-color: var(--default-dark); }
.e-form__control-react-select.default .ft-select__multi-value__remove:hover .ft-ic{ color: var(--default-dark); }

.e-form__control-react-select.teal .ft-select__multi-value{ background-color: var(--teal-dark); }
.e-form__control-react-select.teal .ft-select__multi-value__remove:hover .ft-ic{ color: var(--teal-dark); }
.row-selector .row-item,
.row-item{
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 1rem;

	.e-form__control-wrapper{
		margin: 0;
		margin-right: 9px;
	}

	.row-action{
		margin: 0;

		&.ft-ic,
		.ft-ic{
			font-size: 16px;
			color: #4a4a4a;

			&:hover{
				color: var(--app-black);
			}
		}
	}
}
footer.form-action-footer{
	border-top: 1px solid #979797;
	bottom: inherit;
	left: inherit;
	padding: 0 20px;
	position: relative;
	width: 100%;

	.actions{
		margin-left: auto;
		margin-right: 1rem;
	}
}

/* `FormFooter` and the `ModalFooter` have the same styles, so remove them from the innermost one so we don't get extra margin/padding */
.c-modal .layout-container .c-modal__footer .c-actions-bar .form-action-footer{
	padding: 0;
	margin: 0;
}
/**
 * Checkbox
 * Radio
 * Toggle
 */
.e-form__control.checkbox-control .display-label,
.e-form__control.radio-control .display-label,
.e-form__control.toggle-control .display-label{
	font-size: 0.95rem;
	color: var(--app-black);
	margin: 0 0.5rem;
}
.e-form__control.checkbox-control .pre-label,
.e-form__control.radio-control .pre-label,
.e-form__control.toggle-control .pre-label{
	margin-left: 0;
}
.e-form__control.checkbox-control .post-label,
.e-form__control.radio-control .post-label,
.e-form__control.toggle-control .post-label{
	margin-right: 0;
}



/**
 * Toggle
 */
.e-form__control.toggle-control .e-form__toggle--positive{
	background-color: #52bc68;
    width: 3.25em;
    height: 1.5em;
    border-radius: 30em;
    display: inline-block;
    top: 7px;
	position: relative;
}

.e-form__control.toggle-control .display-label{
	cursor: pointer;
}

.e-form__control.toggle-control .e-form__toggle--bg{
	height: 20px;
}
.e-form__control.toggle-control.is-checked .e-form__toggle--bg{
	background-color: inherit;
}
.e-form__control.toggle-control.is-checked .e-form__toggle--bg .e-form__toggle--handle{
	transform: translate3d(100%, 0, 0);
}

.e-form__control .e-form__toggle--handle{
	box-shadow: 0 1px 3px rgba(0,0,0,0.75);
}

/* FireFox Fixes  */
.is-ff .e-form__control .e-form__toggle--bg{
	top: -4px;
}
/**
 * Checkboxlist CSS
 */

.checkbox-list {
	width: 500px;
	border: 1px solid #adadad;
}

.checkbox-list .search-header input {
	box-sizing: border-box;
	border: none;
	border-radius: 0;
}

.checkbox-list .search-header {
	border-bottom: 1px solid #d6d8da;
	padding: 12px 20px;
	background-color: #f4f5f5;
}

.checkbox-list .list-items {
	margin: 10px;
}

/**
 *  @2 Items
 **/
.checkbox-list .checkbox-item label {
	display: grid;
	grid-template-columns: 20px 1fr;
	align-content: center;
	align-self: center;
	align-items: center;
	justify-content: center;
	height: 25px;
	grid-column-gap: 5px;
}
.checkbox-list .checkbox-item .e-form__checkbox--label {
	margin-left: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.checkbox-list.is-grid {
	width: 100%;
}
.checkbox-list.is-grid .list-items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.checkbox-list.is-grid .checkbox-item .e-form__checkbox--label {
	line-height: 1;
	display: flex;
	align-self: center;
	width: auto;
	max-width: calc(100% - 40px);
	height: auto !important;
}

.checkbox-list .checkbox-item.is-disabled .e-form__checkbox,
.checkbox-list .checkbox-item .e-form__checkbox--label.is-disabled {
	color: #858c90;
	cursor: not-allowed;
}
.checkbox-list .u-form__help{
	display: inline-block;
	float: none;
	margin-left: 10px;
}

.checkbox-list .select-all-wrapper {
	font-size: 12px;
	color: #858c90;
	margin: 10px;
	margin-bottom: 0;
}
.checkbox-list .select-all-wrapper span.select-all-link {
	cursor: pointer;
}
.checkbox-list .select-all-wrapper .select-all-separator {
	margin: 0 6px;
}
.checkbox-list .select-all-wrapper span.select-all-link:hover {
	color: #374047;
	text-decoration: underline;
}
.checkbox-list .select-all-wrapper span.select-all-link.is-disabled:hover {
	color: #858c90;
	text-decoration: none;
	cursor: not-allowed;
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

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

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: #a6a6a6;
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 1.7rem / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,
.react-datepicker__week-number--keyboard-selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: #1d5d90;
}
.react-datepicker__week-number--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}
.react-datepicker__week-number--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day-names {
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover,
.react-datepicker__year-text--highlighted:hover {
  background-color: #32be3f;
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:hover,
.react-datepicker__month-text--holidays:hover,
.react-datepicker__quarter-text--holidays:hover,
.react-datepicker__year-text--holidays:hover {
  background-color: #cf5300;
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #bad9f1;
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover,
.react-datepicker__year-text--disabled:hover {
  background-color: transparent;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.5rem;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__children-container {
  width: 13.8rem;
  margin: 0.4rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}
:root{
	--popper-month-width: 212px;
}


.rhombus-dates{
	align-items: center;
}

.rhombus-dates .rhombus-date-wrapper.has-icon-click .rhombus-dates-icon{
	cursor: pointer;
}

.rhombus-dates .rhombus-date-wrapper .rhombus-dates-input{
	color: var(--app-black);
	background-color: #FFF;
	border: 1px solid var(--grey-dark);
	border-radius: 3px;
	height: 34px;
	line-height: 2.125rem;
	padding-left: 8px;
	transition: border .1s linear, background-color .1s linear;
	width: 173px;
}
.rhombus-dates .rhombus-date-wrapper.selects-range .rhombus-dates-input{
	width: 220px;
}
.rhombus-dates .rhombus-date-wrapper.has-icon .rhombus-dates-input{
	padding-left: 30px;
}

.rhombus-dates .rhombus-dates-clear::after{
	/* match i.ft-ic color */
	background-color: rgba(0, 0, 0, 0.5);
	font-size: 12px;
	top: 50%;
	right: 0.5rem;
}

.rhombus-dates .dates-separator{
	margin: 0 10px;
}


/**
 * MULTIPLE_ENTRIES
 **/
.rhombus-dates .rhombus-date-wrapper.has-multiple-values .rhombus-dates-input::placeholder{
	font-style: italic;
	color: var(--app-black);
}


/**
 * Popper
 **/
.rhombus-dates.months-shown-1 .react-datepicker-popper.rhombus-dates-popper{
	width: var(--popper-month-width);
}
.rhombus-dates .react-datepicker-popper.rhombus-dates-popper{
	width: calc(var(--popper-month-width) * 2);
}
.rhombus-dates .rhombus-date-wrapper.has-part-picker .rhombus-dates-popper .react-datepicker__header{
	height: 68px;
}
.rhombus-dates .rhombus-date-wrapper.has-part-picker .rhombus-dates-popper .react-datepicker__month-container:not(:first-of-type) .react-datepicker__header .react-datepicker__day-names{
	margin-top: 1rem;
}
.rhombus-dates .rhombus-date-wrapper{
	.react-datepicker__year-option{
		.react-datepicker__navigation--years{
			&::before{
				border-color: #ccc;
				border-style: solid;
				border-width: 3px 3px 0 0;
				content: "";
				display: block;
				height: 9px;
				position: absolute;
				width: 9px;
			}

			&::before{
				left: 10px;
			}

			&.react-datepicker__navigation--years-upcoming::before{
				transform: rotate(-45deg);
				top: 13px;
			}

			&.react-datepicker__navigation--years-previous::before{
				transform: rotate(135deg);
				top: 5px;
			}
		}

		&:hover .react-datepicker__navigation--years::before{
			border-color: #a6a6a6;
		}
	}
}


/**
 * Themes
 */
.rhombus-dates.rr-blue .ft-ic{ color: var(--blue-dark); }
.rhombus-dates.rr-blue .rhombus-dates-clear::after{ background-color: var(--blue-dark); }

.rhombus-dates.rr-purple .ft-ic{ color: var(--purple-dark); }
.rhombus-dates.rr-purple .rhombus-dates-clear::after{ background-color: var(--purple-dark); }

.rhombus-dates.rr-pink .ft-ic{ color: var(--pink-dark); }
.rhombus-dates.rr-pink .rhombus-dates-clear::after{ background-color: var(--pink-dark); }

.rhombus-dates.rr-orange .ft-ic{ color: var(--orange-dark); }
.rhombus-dates.rr-orange .rhombus-dates-clear::after{ background-color: var(--orange-dark); }

.rhombus-dates.rr-green .ft-ic{ color: var(--green-dark); }
.rhombus-dates.rr-green .rhombus-dates-clear::after{ background-color: var(--green-dark); }

.rhombus-dates.rr-red .ft-ic{ color: var(--red-dark); }
.rhombus-dates.rr-red .rhombus-dates-clear::after{ background-color: var(--red-dark); }

.rhombus-dates.rr-yellow .ft-ic{ color: var(--yellow-dark); }
.rhombus-dates.rr-yellow .rhombus-dates-clear::after{ background-color: var(--yellow-dark); }

.rhombus-dates.rr-white .ft-ic{ color: var(--white-dark); }
.rhombus-dates.rr-white .rhombus-dates-clear::after{
	background-color: var(--white-dark);
	color: var(--app-black);
}

.rhombus-dates.rr-grey .ft-ic,
.rhombus-dates.rr-gray{
	color: var(--grey-dark);
}
.rhombus-dates.rr-grey .rhombus-dates-clear::after,
.rhombus-dates.rr-gray .rhombus-dates-clear::after{
	background-color: var(--grey-dark);
}

.rhombus-dates.rr-primary .ft-ic{ color: var(--primary-dark); }
.rhombus-dates.rr-primary .rhombus-dates-clear::after{ background-color: var(--primary-dark); }

.rhombus-dates.rr-teal .ft-ic{ color: var(--teal-dark); }
.rhombus-dates.rr-teal .rhombus-dates-clear::after{ background-color: var(--teal-dark); }
.file-input-control .input-holder,
.file-input-control .csv-name-input{
	gap: 10px;
	width: 100%;
}
.file-input-control .e-form__control-wrapper,
.file-input-control .e-form__control{
	flex-grow: 1;
}
.file-input-control .new-input.e-form__control{
	margin-bottom: 0;
}
.file-input-control .e-form__input.file-name-text{
	background-color: #fff;
}
.file-input-control .input-holder .c-button.add-file-button{
	width: 80px;
}
.insert-text-wrapper{
	.char-count{
		margin-right: calc(1rem + 25px);
	}
}

.insert-text{
	display: flex;
	gap: 1rem;

	&.is-disabled{
		cursor: not-allowed;

		.action-trigger{
			pointer-events: none;
		}
	}

	&.is-menu-open{
		.e-form__control:not(.input-display){ display: none; }
	}

	.e-form__control{
		flex-grow: 1;

		&.input-display{
			line-height: 0;
			max-width: calc(100% - 1rem - 25px);
			pointer-events: none;

			.e-form__input{
				padding-top: 1px;
				white-space: pre-wrap;

				&:active,
				&:focus{
					border-color: #aeb25b !important;
				}

				.is-selection{
					border: 1px solid var(--blue-light);
				}

				.is-cursor-position::after{
					animation: 1s blink step-end infinite;
					background-color: var(--blue-mid);
					content: "";
					display: inline-block;
					height: 1.3rem;
					margin-right: -0.5px;
					margin-left: -0.5px;
					margin-bottom: -0.25rem;
					width: 1px;
				}
			}
		}
	}

	.action-trigger{
		height: fit-content;
		margin-top: 4px;
	}

	.action-menu-container{
		.action-menu-item.is-submenu{
			flex-direction: row-reverse;
			justify-content: space-between;
		}
	}
}
.multi-select-section .available-section{
	align-items: center;
	gap: 10px;

	button.is-disabled{ pointer-events: all; }
}
.multi-select-section .e-form__control-react-select{
	width: calc(100% - 60px);
	margin: 0;
}
.multi-select-section .selected-section{
	margin-top: 1rem;
}
.multi-select-section .selected-header{
	font-size: 12px;
	margin-bottom: 1rem;
}
.multi-select-section h6.list-header{
	margin-bottom: 0;
}
.multi-select-section .clear-list{
	color: #858c90;
}
.multi-select-section:not(.is-disabled) .clear-list:hover{
	color: var(--app-black);
	text-decoration: underline;
}
.multi-select-section .no-items{
	color: #858c90;
}
.multi-select-section .selected-list{
	list-style: none;
	padding: 0;
	margin: 0;
}
.multi-select-section .selected-item{
	margin: 5px 0;
	display: flex;
	align-items: center;
	gap: 10px;

	> span{
		max-width: calc(100% - 26px);
	}

	.ft-ic{
		font-size: 16px;
	}

	.remove-icon{
		color: #858c90;
		cursor: pointer;
		margin: 0;

		&:hover{
			color: var(--app-black);
		}
	}

	&.center-remove{
		> span{
			max-width: calc(100% - 72px);
		}

		.remove-icon{
			margin-right: 24px;
		}
	}

	&:hover{
		background-color: #e8f5fb;
	}
}
.multi-select-section .selected-item .remove-icon.is-disabled,
.multi-select-section .selected-item .remove-icon.is-disabled:hover,
.multi-select-section.is-disabled .remove-icon,
.multi-select-section.is-disabled .remove-icon:hover{
	color: #d6d8da;
	pointer-events: none;
}
.display-value{
	font-weight: bold;
}

.rc-slider .rc-slider-rail,
.rc-slider .rc-slider-track{
	background-color: var(--white-dark);
	height: 2px;
}

.rc-slider .rc-slider-track{
	background-color: var(--blue-mid);
}

.rc-slider .rc-slider-handle:active,
.rc-slider .rc-slider-handle.rc-slider-handle-dragging{
	box-shadow: none !important;
}

.rc-slider .rc-slider-handle{
	border: 2px solid var(--blue-mid);
	height: 20px;
	margin-top: -8px;
	opacity: 1;
	width: 20px;
}

.rc-slider:not(.rc-slider-disabled) .rc-slider-handle.rc-slider-handle-dragging,
.rc-slider:not(.rc-slider-disabled) .rc-slider-handle:hover{
	background-color: #00447a;
	border-color: var(--blue-mid) !important;
}

.rc-slider .rc-slider-dot-active{
	border-color: var(--blue-mid);
}

.rc-slider.rc-slider-disabled{
	background-color: unset;
}
.filter-modal.checkbox{
	height: inherit;
	max-height: 600px;
}

.filter-modal.checkbox .c-modal__content{
	height: unset;
	overflow: hidden;
	padding: 0 20px 0 0;
}

.filter-modal.checkbox .c-modal__content .checkbox-list{
	border: none;
	height: 100%;
	max-height: 100%;
	max-width: 100%;
}

.filter-modal.checkbox .checkbox-list .select-all-wrapper{
	margin: 10px;
}

.filter-modal.checkbox .checkbox-list .list-items{
	height: calc(100% - 92px);
	overflow-y: auto;
	margin: 0;
	padding: 0 10px;
}
.filter-modal.range .c-modal__content{
	padding: 18px 40px 40px;
}

.filter-modal.range .display-value{
	margin-bottom: 14px;
	text-align: center;
}
/**
 * FilterModal
 **************/

 .filter-modal{
	box-shadow: 0 1px 5px 0 #aeb2b5;
	height: auto;
	min-width: 400px;
}

.filter-modal .c-modal__header{
	background-color: var(--default-dark);
	border-radius: 0;
	color: #fff;
}

.filter-modal .c-modal__header h4{
	color: inherit;
	font-size: 14px;
	font-weight: bold;
}

.filter-modal .c-modal__header button{
	border-radius: 14px;
	width: 1.8rem;
	height: 1.8rem;
}

.filter-modal .c-modal__header button:hover{
	background-color: #fff;
	color: var(--default-dark);
}

.filter-modal .c-modal__content{
	padding: 15px;
}

.filter-modal .c-modal__footer{
	height: 40px;
}
/**
 * FilterHeader
 ***************/

 .data-grid-holder .header-cell.is-filterable{
	display: flex;
	justify-content: space-between;
}

.data-grid-holder .header-cell.is-filterable .filter-icon{
	align-self: center;
	font-size: inherit;
}

/* .data-grid-holder .header-cell.is-filterable .filter-icon.is-open{} */

/* .data-grid-holder .header-cell.is-filterable .filter-icon.is-filtered{} */
.data-grid-holder{
	height: 100%;
	width: 100%;

	&.has-filter-bar{
		height: calc(100% - var(--toolbar-height));
	}

	&.has-pager{
		height: calc(100% - var(--pager-height));
	}

	&.has-filter-bar.has-pager{
		height: calc(100% - var(--toolbar-height) - var(--pager-height));
	}
}

.data-grid-holder .rdg{
	border: none;
	border-top: 1px solid var(--grid-border-color);
	border-left: 1px solid var(--grid-border-color);
	color: var(--app-black);
	font-size: 12px;
	height: 100%;
	overflow: auto;
	width: 100%;
}

.data-grid-holder .no-data{
	color: #858c90;
	font-size: 18px;
	position: relative;
	text-align: center;
	top: 0;
}
.data-grid-holder.show-grid .no-data{
	/* display at the top *below* the header */
	top: calc(-100% + 35px);
}

/********
 * ROWS *
 ********/
.data-grid-holder .rdg .rdg-header-row{
	background-color: #fff;
}

.data-grid-holder .rdg .rdg-row{
	transition: 0.15s ease background-color;
}

.data-grid-holder .rdg .rdg-row:hover{
	background-color: #eff1f3;
}

/* .data-grid-holder .rdg .rdg-row-even{} */

/* .data-grid-holder .rdg .rdg-row-odd{} */

.data-grid-holder .rdg .rdg-row.is-selected{
	background-color: #dbecfa;
}

.data-grid-holder .rdg-row.is-disabled{
	color: var(--white-dark);
}


/*********
 * CELLS *
 *********/
.data-grid-holder .rdg .rdg-header-row .rdg-cell{
	padding: 0;
}

.data-grid-holder .rdg .rdg-header-row .rdg-cell.header-cell{
	padding: 0 8px;
	box-shadow: none;

	&.ASC, &.asc {
		box-shadow: inset 0 3px 0 #647a89;
	}

	&.DESC, &.desc {
		box-shadow: inset 0 -3px 0 #647a89;
	}
}

.data-grid-holder .rdg .rdg-cell{
	border-color: var(--grid-border-color);
}

/* .data-grid-holder .rdg .rdg-cell-frozen{} */

.data-grid-holder .rdg .rdg-cell.center{
	text-align: center;
	justify-content: center;
}

.data-grid-holder .rdg .rdg-cell[aria-selected='true']{
	outline: none;
}

.data-grid-holder .rdg-cell [class*="-cell"]:not([class*="overflow"]){
	display: flex;
}

.data-grid-holder .rdg-cell [class*="-cell"]{
	align-items: center;
	height: 100%;
}

.data-grid-holder .rdg-cell.custom-cell{
	align-content: center;
}

.data-grid-holder .link-cell,
.data-grid-holder .name-cell{
	align-items: center;
	display: flex;
	justify-content: space-between;

	a,
	.is-action{
		align-items: center;
		color: var(--app-black);
		display: flex;
		gap: 10px;

		&:hover{
			cursor: pointer;
			text-decoration: underline;
		}
	}

	.ft-ic{
		font-size: 14px;
	}
}


/*
 * EDITORS
 */
.rdg{
	.rdg-row:hover .dropdown-edit-cell:not(.rdg-editor-container):after{
		position: absolute;
		right: 9px;
		content: "\f0d7";
		font-family: "Font Awesome 6 Pro";
		color: #999;
	}

	.can-edit-cell{
		&:hover{
			background-color: #fff;
			box-shadow: inset 0 0 0 1px var(--app-black);

			&.text-edit-cell{
				cursor: text;
			}

			&.dropdown-edit-cell{
				cursor: pointer;
			}
		}

		&.is-dirty::before{
			color: var(--green-mid);
			content: "\f0d8";
			display: inline-block;
			font-family: "Font Awesome 6 Pro";
			font-size: 18px;
			font-weight: bold;
			height: 10px;
			left: -11px;
			position: absolute;
			top: -11px;
			transform: rotate(-45deg);
		}
	}

	.rdg-editor-container{
		.ft-select__control,
		.ft-select__value-container,
		.e-form__input{
			border: none;
			border-radius: 0;
			height: 100%;
			min-height: unset;
		}

		&.text-edit-cell{
			box-shadow: inset 0 0 0 1px var(--app-black);
			padding: 0 1px;
		}

		&.dropdown-edit-cell{
			overflow-y: visible;

			.ft-select__control{
				box-shadow: inset 0 0 0 1px var(--app-black);

				.ft-select__value-container{
					padding: 0 8px;

					.ft-select__input-container{
						margin: 0 2px;
						padding: 0;
					}
				}

				.ft-select__indicator{
					align-content: center;
					padding-bottom: 0;
					padding-top: 0;

					.ft-ic{
						color: #999;
						font-size: 13px;
					}
				}
			}

			.ft-select__menu{
				margin: 0;

				.ft-select__menu-list{
					padding: 0;

					.ft-select__option{
						height: var(--grid-row-height);
						padding: 0 10px;
					}
				}
			}
		}
	}
}
@layer rdg {
  @layer Defaults,
    FocusSink,
    CheckboxInput,
    CheckboxIcon,
    CheckboxLabel,
    Cell,
    HeaderCell,
    SummaryCell,
    EditCell,
    Row,
    HeaderRow,
    SummaryRow,
    GroupedRow,
    Root;
}

.mlln6zg7-0-0-beta-43 {
  @layer rdg.MeasuringCell {
    contain: strict;
    grid-row: 1;
    visibility: hidden;
  }
}


.cj343x07-0-0-beta-43 {
  @layer rdg.Cell {
    /* max-content does not work with size containment
     * dynamically switching between different containment styles incurs a heavy relayout penalty
     * Chromium bug: at odd zoom levels or subpixel positioning,
     * layout/paint/style containment can make cell borders disappear
     *   https://bugs.chromium.org/p/chromium/issues/detail?id=1326946
     */
    position: relative; /* needed for absolute positioning to work */
    padding-block: 0;
    padding-inline: 8px;
    border-inline-end: 1px solid var(--rdg-border-color);
    border-block-end: 1px solid var(--rdg-border-color);
    grid-row-start: var(--rdg-grid-row-start);
    background-color: inherit;

    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
    outline: none;

    &[aria-selected='true'] {
      outline: 2px solid var(--rdg-selection-color);
      outline-offset: -2px;
    }
  }
}

.csofj7r7-0-0-beta-43 {
  @layer rdg.Cell {
    position: sticky;
    /* Should have a higher value than 0 to show up above unfrozen cells */
    z-index: 1;

    /* Add box-shadow on the last frozen cell */
    &:nth-last-child(1 of &) {
      box-shadow: var(--rdg-cell-frozen-box-shadow);
    }
  }
}


.c1bn88vv7-0-0-beta-43 {
  @layer rdg.CheckboxLabel {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    margin-inline-end: 1px; /* align checkbox in row group cell */
  }
}

.c1qt073l7-0-0-beta-43 {
  @layer rdg.CheckboxInput {
    all: unset;
  }
}

.cf71kmq7-0-0-beta-43 {
  @layer rdg.CheckboxIcon {
    content: '';
    inline-size: 20px;
    block-size: 20px;
    border: 2px solid var(--rdg-border-color);
    background-color: var(--rdg-background-color);

    .c1qt073l7-0-0-beta-43:checked + & {
      background-color: var(--rdg-checkbox-color);
      outline: 4px solid var(--rdg-background-color);
      outline-offset: -6px;
    }

    .c1qt073l7-0-0-beta-43:focus + & {
      border-color: var(--rdg-checkbox-focus-color);
    }
  }
}

.c1lwve4p7-0-0-beta-43 {
  @layer rdg.CheckboxLabel {
    cursor: default;

    .cf71kmq7-0-0-beta-43 {
      border-color: var(--rdg-checkbox-disabled-border-color);
      background-color: var(--rdg-checkbox-disabled-background-color);
    }
  }
}


.g1s9ylgp7-0-0-beta-43 {
  @layer rdg.GroupCellContent {
    outline: none;
  }
}

.cz54e4y7-0-0-beta-43 {
  @layer rdg.GroupCellCaret {
    margin-inline-start: 4px;
    stroke: currentColor;
    stroke-width: 1.5px;
    fill: transparent;
    vertical-align: middle;

    > path {
      transition: d 0.1s;
    }
  }
}


.c1w9bbhr7-0-0-beta-43 {
  @layer rdg.DragHandle {
    --rdg-drag-handle-size: 8px;
    z-index: 0;
    cursor: move;
    inline-size: var(--rdg-drag-handle-size);
    block-size: var(--rdg-drag-handle-size);
    background-color: var(--rdg-selection-color);
    place-self: end;

    &:hover {
      --rdg-drag-handle-size: 16px;
      border: 2px solid var(--rdg-selection-color);
      background-color: var(--rdg-background-color);
    }
  }
}

.c1creorc7-0-0-beta-43 {
  @layer rdg.DragHandle {
    z-index: 1;
    position: sticky;
  }
}


.cis5rrm7-0-0-beta-43 {
  @layer rdg.EditCell {
    padding: 0;
  }
}


.h44jtk67-0-0-beta-43 {
  @layer rdg.SortableHeaderCell {
    display: flex;
  }
}

.hcgkhxz7-0-0-beta-43 {
  @layer rdg.SortableHeaderCellName {
    flex-grow: 1;
    overflow: clip;
    text-overflow: ellipsis;
  }
}


.c6l2wv17-0-0-beta-43 {
  @layer rdg.HeaderCell {
    cursor: pointer;
  }
}

.c1kqdw7y7-0-0-beta-43 {
  @layer rdg.HeaderCell {
    touch-action: none;
  }
}

.r1y6ywlx7-0-0-beta-43 {
  @layer rdg.HeaderCell {
    cursor: col-resize;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    inline-size: 10px;
  }
}

.c1bezg5o7-0-0-beta-43 {
  opacity: 0.5;
}

.c1vc96037-0-0-beta-43 {
  background-color: var(--rdg-header-draggable-background-color);
}


.r1upfr807-0-0-beta-43 {
  @layer rdg.Row {
    display: contents;
    line-height: var(--rdg-row-height);
    background-color: var(--rdg-background-color);

    &:hover {
      background-color: var(--rdg-row-hover-background-color);
    }

    &[aria-selected='true'] {
      background-color: var(--rdg-row-selected-background-color);

      &:hover {
        background-color: var(--rdg-row-selected-hover-background-color);
      }
    }
  }
}

.r190mhd37-0-0-beta-43 {
  @layer rdg.FocusSink {
    outline: 2px solid var(--rdg-selection-color);
    outline-offset: -2px;
  }
}

.r139qu9m7-0-0-beta-43 {
  @layer rdg.FocusSink {
    &::before {
      content: '';
      display: inline-block;
      height: 100%;
      position: sticky;
      inset-inline-start: 0;
      border-inline-start: 2px solid var(--rdg-selection-color);
    }
  }
}


.h10tskcx7-0-0-beta-43 {
  @layer rdg.HeaderRow {
    display: contents;
    line-height: var(--rdg-header-row-height);
    background-color: var(--rdg-header-background-color);
    font-weight: bold;

    & > .cj343x07-0-0-beta-43 {
      /* Should have a higher value than 1 to show up above regular cells and the focus sink */
      z-index: 2;
      position: sticky;
    }

    & > .csofj7r7-0-0-beta-43 {
      z-index: 3;
    }
  }
}


.c6ra8a37-0-0-beta-43 {
  @layer rdg.Cell {
    background-color: #ccccff;
  }
}

.cq910m07-0-0-beta-43 {
  @layer rdg.Cell {
    background-color: #ccccff;

    &.c6ra8a37-0-0-beta-43 {
      background-color: #9999ff;
    }
  }
}


.a3ejtar7-0-0-beta-43 {
  @layer rdg.SortIcon {
    fill: currentColor;

    > path {
      transition: d 0.1s;
    }
  }
}


.rnvodz57-0-0-beta-43 {
  @layer rdg.Defaults {
    *,
    *::before,
    *::after {
      box-sizing: inherit;
    }
  }

  @layer rdg.Root {
    --rdg-color: #000;   --rdg-border-color: #ddd;   --rdg-summary-border-color: #aaa;   --rdg-background-color: hsl(0deg 0% 100%);   --rdg-header-background-color: hsl(0deg 0% 97.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 90.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 96%);   --rdg-row-selected-background-color: hsl(207deg 76% 92%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 88%);   --rdg-checkbox-color: hsl(207deg 100% 29%);   --rdg-checkbox-focus-color: hsl(207deg 100% 69%);   --rdg-checkbox-disabled-border-color: #ccc;   --rdg-checkbox-disabled-background-color: #ddd;
    --rdg-selection-color: #66afe9;
    --rdg-font-size: 14px;
    --rdg-cell-frozen-box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);

    display: grid;

    color-scheme: var(--rdg-color-scheme, light dark);

    /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
    /* We set a stacking context so internal elements don't render on top of external elements. */
    /* size containment is not used as it could break "width: min-content" for example, and the grid would infinitely resize on Chromium browsers */
    contain: content;
    content-visibility: auto;
    block-size: 350px;
    border: 1px solid var(--rdg-border-color);
    box-sizing: border-box;
    overflow: auto;
    background-color: var(--rdg-background-color);
    color: var(--rdg-color);
    font-size: var(--rdg-font-size);

    /* needed on Firefox to fix scrollbars */
    &::before {
      content: '';
      grid-column: 1/-1;
      grid-row: 1/-1;
    }

    &.rdg-dark {
      --rdg-color-scheme: dark;
      --rdg-color: #ddd;   --rdg-border-color: #444;   --rdg-summary-border-color: #555;   --rdg-background-color: hsl(0deg 0% 13%);   --rdg-header-background-color: hsl(0deg 0% 10.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 17.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 9%);   --rdg-row-selected-background-color: hsl(207deg 76% 42%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%);   --rdg-checkbox-color: hsl(207deg 100% 79%);   --rdg-checkbox-focus-color: hsl(207deg 100% 89%);   --rdg-checkbox-disabled-border-color: #000;   --rdg-checkbox-disabled-background-color: #333;
    }

    &.rdg-light {
      --rdg-color-scheme: light;
    }

    @media (prefers-color-scheme: dark) {
      &:not(.rdg-light) {
        --rdg-color: #ddd;   --rdg-border-color: #444;   --rdg-summary-border-color: #555;   --rdg-background-color: hsl(0deg 0% 13%);   --rdg-header-background-color: hsl(0deg 0% 10.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 17.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 9%);   --rdg-row-selected-background-color: hsl(207deg 76% 42%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%);   --rdg-checkbox-color: hsl(207deg 100% 79%);   --rdg-checkbox-focus-color: hsl(207deg 100% 89%);   --rdg-checkbox-disabled-border-color: #000;   --rdg-checkbox-disabled-background-color: #333;
      }
    }

    > :nth-last-child(1 of .rdg-top-summary-row) {
      > .cj343x07-0-0-beta-43 {
        border-block-end: 2px solid var(--rdg-summary-border-color);
      }
    }

    > :nth-child(1 of .rdg-bottom-summary-row) {
      > .cj343x07-0-0-beta-43 {
        border-block-start: 2px solid var(--rdg-summary-border-color);
      }
    }
  }
}

.vlqv91k7-0-0-beta-43 {
  @layer rdg.Root {
    user-select: none;

    & .r1upfr807-0-0-beta-43 {
      cursor: move;
    }
  }
}

.f1lsfrzw7-0-0-beta-43 {
  @layer rdg.FocusSink {
    grid-column: 1/-1;
    pointer-events: none;
    /* Should have a higher value than 1 to show up above regular frozen cells */
    z-index: 1;
  }
}

.f1cte0lg7-0-0-beta-43 {
  @layer rdg.FocusSink {
    /* Should have a higher value than 3 to show up above header and summary rows */
    z-index: 3;
  }
}


.s8wc6fl7-0-0-beta-43 {
  @layer rdg.SummaryCell {
    inset-block-start: var(--rdg-summary-row-top);
    inset-block-end: var(--rdg-summary-row-bottom);
  }
}


.skuhp557-0-0-beta-43 {
  @layer rdg.SummaryRow {
    line-height: var(--rdg-summary-row-height);

    > .cj343x07-0-0-beta-43 {
      position: sticky;
    }
  }
}

.tf8l5ub7-0-0-beta-43 {
  @layer rdg.SummaryRow {
    > .cj343x07-0-0-beta-43 {
      z-index: 2;
    }

    > .csofj7r7-0-0-beta-43 {
      z-index: 3;
    }
  }
}


.g1yxluv37-0-0-beta-43 {
  @layer rdg.GroupedRow {
    &:not([aria-selected='true']) {
      background-color: var(--rdg-header-background-color);
    }

    > .cj343x07-0-0-beta-43:not(:last-child, .csofj7r7-0-0-beta-43),
    > :nth-last-child(n + 2 of .csofj7r7-0-0-beta-43) {
      border-inline-end: none;
    }
  }
}


.t7vyx3i7-0-0-beta-43 {
  @layer rdg.TextEditor {
    appearance: none;

    box-sizing: border-box;
    inline-size: 100%;
    block-size: 100%;
    padding-block: 0;
    padding-inline: 6px;
    border: 2px solid #ccc;
    vertical-align: top;
    color: var(--rdg-color);
    background-color: var(--rdg-background-color);

    font-family: inherit;
    font-size: var(--rdg-font-size);

    &:focus {
      border-color: var(--rdg-selection-color);
      outline: none;
    }

    &::placeholder {
      color: #999;
      opacity: 1;
    }
  }
}

.filter-bar{
	height: 0;
	transition: 0.25s ease-in;
}

.filter-bar.has-tags{
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	height: auto;
	justify-items: flex-start;
	padding: 10px;
}

.filter-bar.has-tags.show-all{
	flex-wrap: wrap;
}


.filter-bar .filter-tag{
	max-width: 400px;
}


.filter-bar .toggle-show-hide .c-tag{
	background-color: #aeb2b5;
}

.filter-bar .toggle-show-hide .c-tag:hover{
	background-color: var(--app-black);
}

.filter-bar .clear-all{
	color: #858c90;
	cursor: pointer;
	font-size: 12px;
}

.filter-bar .clear-all:hover{
	color: var(--app-black);
	text-decoration: underline;
}
.grid-container{
	contain: strict;
	height: 100%;
	width: 100%;
	flex-grow: 1;

	.progress-indicator{
		position: fixed;
	}

	.empty-item{
		height: 100%;
		margin: 0;
	}
}
/**
 * Select Cell Styles
 */
 .rdg-cell.select-cell label.checkbox-select-container{
	align-items: center;
	display: flex;
	height: 100%;
 }
 .select-cell .custom-checkbox { display: none; }
 .select-cell .pretty-checkbox {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 margin: 0 auto;
	 width: 16px;
	 height: 16px;
 }

 .select-cell .pretty-checkbox::after {
	 content: "\f0c8";
	 color: #5e666b;
	 font-family: "Font Awesome 6 Pro";
	 font-size: 16px;
	 margin-top: -1px;
	 margin-left: -1px;
	 cursor: pointer;
	 font-weight: 100;
 }

 .select-cell .custom-checkbox:disabled + .pretty-checkbox {
	 opacity: .3;
 }

 .select-cell .custom-checkbox:disabled + .pretty-checkbox::after {
	 cursor: default;
 }

 .select-cell .custom-checkbox:checked + .pretty-checkbox::after {
	 color: var(--app-blue);
	 content: "\f14a";
	 font-weight: 600;
 }

 .select-all-header {
	 font-weight: bold;
	 margin: 0;
	 padding: 10px;
	 color: var(--app-black);
 }

 .select-all-header,
 .select-all-action {
	 font-size: 12px;
 }
.rdg-cell.status-cell .status-badge{
	margin: 0 auto;
}

.status-badge{
	background-color: #d6d8da;
	border: 1px solid transparent;
	border-radius: 20px;
	color: var(--app-black);
	display: block;
	font-size: 10px;
	font-weight: bold;
	height: 20px;
	line-height: 1.8;
	text-align: center;
	text-transform: uppercase;
	width: 110px;

	&:empty{
		background-color: transparent;
	}

	&.production-incomplete .ft-ic{
		background-color: #d6d8da;
		color: var(--app-black);
	}

	&.approved,
	&.available,
	&.live,
	&.processed,
	&.ready{
		background-color: #cfecd5;
		color: #006b1b;
	}

	&.approving{
		border-color: #9fdaab;
		color: #006b1b;
	}

	&.qa,
	&.updating{
		background-color: #ffddce;
		color: #e35a1c;
	}

	&.error,
	&.expired,
	&.rejected,
	&.rejected-incomplete,
	&.rejected-incomplete .ft-ic,
	&.processing-error,
	&.processing-error.is-social:hover,
	&.transcoding-error,
	&.transcoding-error.is-social:hover{
		background-color: #f5d5d4;
		color: #a1100e;
	}

	&.transcoding-error:hover{
		color:#fff;
		background-color: #db6662;
	}

	.ft-ic{
		font-size: 9px;
		margin-right: 2px;
	}
}
.true-false-cell{
	text-align: center;

}

.ft-ic.true-false-icon.is-true{
	color: var(--green-mid);
}

.ft-ic.true-false-icon.is-false{
	color: var(--red-mid);
}
.card-wrapper {
	margin: 20px;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border: 1px solid #eaebec;
	border-radius: 3px;
}
/* this eliminates the double-border when the card is closed */
.card-wrapper:not(.is-open){
	border-bottom: 0;
}

.card-wrapper > .card-header {
	border-bottom: 1px solid #eaebec;
	padding: 15px 18px;
	display: flex;
}

.card-wrapper .card-header i.card-tip {
	padding: 0 10px;
}

.card-wrapper .card-header.collapsible div.card-title {
	padding-left: 10px;
}

.card-wrapper > .card-header i.fa.fa-caret-square-right {
	font-size: 16px;
	display: flex;
	align-items: center;
}

.card-wrapper > .card-content-wrapper .card-content {
	padding: 20px;
}
* {
	/* If color variables are added/updated here, be sure to update `stories/docs/CSS.js` */
	--category-group-advertiser: #d52f6f;			/* --pink-mid */
	--category-group-vertical: #37929a;			/* --teal-mid */
	--category-group-general-content: #9883bb;		/* --purple-mid */
	--category-group-design: #858c90;
}

.creative-labels.card-wrapper {
	width: inherit;
}

.creative-labels.card-wrapper > .card-header {
	padding: 10px 20px;
}

.creative-labels.card-wrapper > .card-header .card-title {
	font-size: 12px;
	font-weight: bold;
}

.creative-labels.card-wrapper > .card-content-wrapper .card-content {
	padding: 0 15px 20px 15px;
	display: flex;
	flex-wrap: wrap;
}

.creative-labels.card-wrapper > .card-content-wrapper .card-content .tag-component {
	margin: 10px 5px 0;
}

.creative-labels .c-tag {
	margin:5px;
}
.creative-labels .card-content {
	margin-top: 10px;
}

.creative-labels > .card-content-wrapper .card-content .c-tag {
	border-radius: 3px;
	width: fit-content;
	padding: 0 10px;
	font-weight: normal;
	font-size: 12px;
}

.creative-labels.card-wrapper > .card-content-wrapper .card-content .c-tag.t-badge--pink {
	background-color: var(--category-group-advertiser);
}

.creative-labels.card-wrapper > .card-content-wrapper .card-content .c-tag.t-badge--teal {
	background-color: var(--category-group-vertical);
}

.creative-labels.card-wrapper > .card-content-wrapper .card-content .c-tag.t-badge--purple {
	background-color: var(--category-group-general-content);
}

.creative-labels.card-wrapper > .card-content-wrapper .card-content .c-tag.t-badge--gray,
.creative-labels.card-wrapper > .card-content-wrapper .card-content .c-tag.t-badge--grey {
	background-color: var(--category-group-design);
}

.creative-labels .c-tag--removable:hover .c-tag-label {
	max-width: calc(100% - 20px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-right: 5px;
}

.creative-labels .c-tag .c-tag-remove {
	visibility: hidden;
	position: absolute;
	cursor: pointer;
	right: 8px;
}

.creative-labels .c-tag .c-tag-remove i.ft-ic {
	color: #fff;
}

.creative-labels .c-tag:hover .c-tag-remove {
	visibility: visible;
}
/**
 * Notifications
 */
.notifications {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 10000000;
	/*height: calc(100vh - 20px);*/
	overflow-y: auto;
	display: flex;
	flex-direction: column-reverse;
	padding: 0;
	margin: 10px;

	.growl-notification {

		width:340px;
		/*min-height:85px;*/
		height:auto;
		margin: 0;
		padding: 10px;
		border-radius: 3px;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
		color: #fff;

		&.notification-error { background-color: var(--red-fail); }
		&.notification-success { background-color: var(--green-success); }
		&.notification-info { background-color: var(--app-blue); }
		&.notification-warning { background-color: #f3824f; }

		.notification-icon {
			font-size: 32px;
			color: #fff;
			text-align: center;
		}

		.notification-body {
			display: grid;
			grid-template-areas: "icon message clear";
			grid-template-columns: 40px 1fr 20px;
			height: 100%;
			grid-column-gap: 10px;
		}

		.header {
			margin: 0;
			font-size: 14px;
			font-weight: bold;
		}
	}
}
.notifications .c-notification {
	transition: 0.4s box-shadow ease;
}
.notifications .c-notification:hover {
	box-shadow:1px 1px 15px 4px rgba(0, 0, 0, 0.65);
}


.growl-notification .info-side { flex-grow: 2; }
.growl-notification .message {
	font-size: 12px;
	word-break: break-word;
}

.growl-notification .dismiss-notification {
	align-self: flex-start;
}
.growl-notification .dismiss-notification .ft-ic {
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: normal;
	color: rgba(255, 255, 255, 0.5);
}
/**
 * Notification Item Styles
 */
.notification-body {
	position:relative;
}
.growl-notification {
	padding: 20px;
}
.rhombus-tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Subtract 4px for the height of the box-shadow */
	height: calc(var(--toolbar-height) - 4px);
}
.rhombus-tabs .tab-list {
	list-style: none;
	margin: 0;
	display: flex;
	height: 100%;
}
.rhombus-tabs .tab-item {
	height: 100%;
	margin: 0 10px;
	padding: 0 5px;
	font-size: 13px;
	line-height: 2.15;
	color: #858c90;
	transition: 0.25s ease-out;
}

.rhombus-tabs .tab-item.is-active,
.rhombus-tabs .tab-item.is-active:hover {
	color: var(--app-theme);
	box-shadow: 0 4px 0 0 var(--app-theme);
}

.rhombus-tabs .tab-item:hover:not(.is-disabled) {
	color: #374047;
	box-shadow: 0 4px 0 0 #d6d8da;
}

.rhombus-tabs .tab-item.is-disabled {
	color: #d6d8da;
}

/**
 * @4. Tabs
 * 	These styles are used in sub headers of pages:
 * 		Creative List page in Hopi
 * 		Advertiser Settings/Inegrations page in Admin
 ***********/
.info-header-tabs {
	height: 56px;
}
.info-header-tabs .tabs {
	display: flex;
	height: 100%;
}
.info-header-tabs .tabs .tab-item {
	height: 100%;
	cursor: pointer;
	padding-left: 30px;
	padding-right: 30px;
	text-transform: uppercase;
	color: #858c90;
	border-bottom: 4px solid transparent;
	font-weight: bold;
	font-size: 11px;
	display: flex;
	align-items: center;
}
.info-header-tabs .tabs .tab-item .tab-name {
	align-self: center;
}

.info-header-tabs .tabs .tab-item.active-link {
	color: var(--app-theme);
	border-bottom-color: var(--app-theme);
}

.info-header-tabs .tabs .action-menu {
	align-self: center;
	margin-right: 20px;
}

.info-header-tabs .tabs .action-menu .trigger-icon {
	font-size: 20px;
	width: 2rem;
	height: 2rem;
}
.info-header-tabs .tabs .action-menu .trigger-icon:hover { font-weight: 600; }
.preview-missing-media {
	background-color: #eaebec;
	color: #858c90;
	font-size: 12px;
	text-align: center;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.preview-missing-media i.ft-ic {
	color: #858c90;
	font-size: 19px;
	margin-bottom: 8px;
}/** Facebook previews v2 */
.facebook-preview-v2 {
	font-family: Arial;
	width: var(--preview-fb-width);
	height: var(--preview-fb-height);
	background: #fff;

	/* COLORS */
	--fb-light-grey: #eaebec;
	--fb-med-grey: #d6d8da;
	--fb-dark-grey: #374047;
}

.facebook-preview-v2.feeds {
	border: 1px solid var(--fb-med-grey);
}

.facebook-preview-v2 .facebook-header {
	display: grid;
	grid-template-areas:
		'oval header-150'
		'oval header-100';
	grid-template-columns: 0fr auto auto 20px;
	padding: 10px;
	align-items: end;
}

.facebook-preview-v2 .facebook-header .ellipsis {
	padding-top: 10px;
	height: 20px;
}

.facebook-preview-v2 .oval {
	width: 36px;
	height: 36px;
	background-color: var(--fb-light-grey);
	border-radius: 50%;
	grid-area: oval;
	margin-right: 8px;
}

.facebook-preview-v2 .small-oval {
	width: 18px;
	height: 18px;
	background-color: var(--fb-light-grey);
	border-radius: 50%;
	margin-right: 8px;
}

.facebook-preview-v2 .rectangle-50 {
	width: 50px;
	height: 10px;
	background-color: var(--fb-light-grey);
	grid-area: header-150;
	margin-right: 55px;
}

.facebook-preview-v2 .rectangle-150 {
	width: 150px;
	height: 10px;
	background-color: var(--fb-light-grey);
	grid-area: header-150;
}

.facebook-preview-v2 .headline-skeleton {
	width: 200px;
	height: 10px;
	background-color: var(--fb-med-grey);
}

.facebook-preview-v2 .rectangle-100 {
	width: 100px;
	height: 10px;
	background-color: var(--fb-light-grey);
	grid-area: header-100;
}

.facebook-preview-v2 .facebook-header .rectangle-100 {
	margin: 5px 0 4px 0;
}

.facebook-preview-v2 .facebook-header .rectangle-150 {
	margin-top: 3px;
}

.facebook-preview-v2 .headline-skeleton {
	width: 200px;
	height: 10px;
	background-color: var(--fb-med-grey);
}

.facebook-preview-v2 .lower-grey-box {
	width: var(--preview-fb-width);
	padding: 7px 12px 7px 13px;
	background-color: var(--fb-light-grey);
	color: black;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
	display: inline-flex;
	justify-content: space-between;
}

.facebook-preview-v2 .lower-grey-box .grey-text {
	float: left;
	line-height: 1.18rem;
}

.facebook-preview-v2 .lower-grey-box .grey-text > span {
	max-width: 290px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
}

.facebook-preview-v2 .bottom-section {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px 0 0 18px;
}

.facebook-preview-v2 .cta-label {
	font-size: 12px;
	color: #5e666b;
	height: 28px;
	padding: 7px 12px;
	border-radius: 1px;
	border: solid 1px var(--fb-med-grey);
	background-color: var(--fb-light-grey);
	float: right;
	margin-left: 16px;
	text-wrap: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
}

.facebook-preview-v2 .cta-label span {
	text-transform: lowercase;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 17px; /*explicitly set height becuase overflow hidden not working in safari */
}

.facebook-preview-v2 .cta-label span:first-letter {
	text-transform: capitalize;
}

.facebook-preview-v2 .cta-label.title-case span {
	text-transform: capitalize;
}

.facebook-preview-v2 .hero-media {
	margin-top: 12px;
	width: 100%;
	height: 100%;
	background-color: #000;
	overflow: hidden;
	text-align: center;
	position: absolute;
	top: 0;
}

.facebook-preview-v2 img,
.facebook-preview-v2 video {
	object-fit: cover;
}

.facebook-preview-v2 .fb-media-vertical,
.facebook-preview-v2 .fb-media-horizontal,
.facebook-preview-v2 .fb-media-square {
	height: 100%;
	width: 100%;
}

.facebook-preview-v2 .fb-media-horizontal {
	height: 180px;
}

.facebook-preview-v2 .fb-media-square {
	height: 320px;
	width: 318px;
}

/***************
 * VERTICAL V2 *
****************/
.facebook-preview-v2.vertical .primary-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	color: #fff;
	font-size: 13px;
}

.facebook-preview-v2.vertical .preview-missing-media {
	width: 100%;
	height: 100%;
}

/******************
 * SHARED BETWEEN *
 * ASPECTS RATIOS *
 *******************/
.facebook-preview-v2.vertical.story,
.facebook-preview-v2.square.story,
.facebook-preview-v2.vertical.reel,
.facebook-preview-v2.square.reel {
	background: #1f1f1f;
}

.facebook-preview-v2.vertical.story .cta-label,
.facebook-preview-v2.vertical.reel .cta-label {
	text-transform: capitalize;
}

.facebook-preview-v2.vertical .facebook-header .oval,
.facebook-preview-v2.square .facebook-header .oval,
.facebook-preview-v2.horizontal .facebook-header .oval {
	width: 30px;
	height: 30px;
}

/************************
 * VERTICAL + SQUARE V2 *
*************************/
.facebook-preview-v2.vertical,
.facebook-preview-v2.square {
	--preview-fb-width: 320px;
	--preview-fb-height: 570px;
	background: #f4f5f5;
	position: relative;
}

.facebook-preview-v2.vertical .facebook-header,
.facebook-preview-v2.square .facebook-header {
    grid-template-areas: 'oval header-150 ellipsis close'
		'oval header-100 . .';
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.2));
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.facebook-preview-v2.vertical .facebook-header,
.facebook-preview-v2.square .facebook-header {
	grid-template-areas:
		'oval header-150 ellipsis close'
		'oval header-100 . .';
	background: linear-gradient(to top, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.2));
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

.facebook-preview-v2.vertical .facebook-header .ellipsis,
.facebook-preview-v2.square .facebook-header .ellipsis {
	grid-area: ellipsis;
	height: 14px;
	font-size: 16px;
	color: #fff;
	display: grid;
	justify-content: end;
	align-self: center;
	margin-right: 14px;
	padding-top: 9px;
}

.facebook-preview-v2.vertical .facebook-header .close,
.facebook-preview-v2.square .facebook-header .close {
	grid-area: close;
	height: 14px;
	font-size: 21px;
	color: #fff;
	display: grid;
	justify-content: end;
	align-self: start;
	padding: 7px 5px 0 0;
}

.facebook-preview-v2.vertical .hero-media img,
.facebook-preview-v2.vertical .hero-media .preview-missing-media {
	position: absolute;
	top: 0;
	left: 0;
	height: var(--preview-fb-height);
	width: var(--preview-fb-width);
}

.facebook-preview-v2.vertical .preview-body,
.facebook-preview-v2.square .preview-body {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: calc(100% - 56px);
}

.facebook-preview-v2.vertical .preview-missing-media {
	width: 100%;
	height: 100%;
}

/*************************
 * VERTICAL  + SQUARE V2 *
**************************/
.facebook-preview-v2.vertical,
.facebook-preview-v2.square {
	--preview-fb-width: 320px;
	--preview-fb-height: 570px;
	background: #f4f5f5;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

.facebook-preview-v2.vertical:not(.feeds) .cta-label,
.facebook-preview-v2.square:not(.feeds) .cta-label {
	--btn-cta: 133px;
	font-size: 18px;
	font-weight: bold;
	border-radius: 22px;
	border: none;
	padding: 10px 15px;
	height: 44px;
	color: #000;
	line-height: normal;
	background: #fff;
	position: absolute;
	height: 44px;
	width: var(--btn-cta);
	bottom: 30px;
	right: calc(50% - var(--btn-cta)/2);
	text-align: center;
}

.facebook-preview-v2.vertical.story .cta-label,
.facebook-preview-v2.vertical.reel .cta-label {
	text-transform: capitalize;
}

.facebook-preview-v2.vertical .hero-media,
.facebook-preview-v2.square .hero-media {
	position: absolute;
	top: 0;
	margin-top: 0;
	max-height: var(--preview-fb-height);
	height: var(--preview-fb-height);
}

.facebook-preview-v2.vertical.feeds .media-container .fb-media.image,
.facebook-preview-v2.square.reel .hero-media .fb-media.image {
	width: 318px; /* minus border */
	min-height: 320px; /* if invalid img src the img has no height by default */
	max-height: 320px;
}

/***************************
	VERTICAL + SQUARE REELS
****************************/
.facebook-preview-v2.vertical.reel .vertical-icon-container,
.facebook-preview-v2.square.reel .vertical-icon-container {
	position: absolute;
	bottom: 10px;
	right: 14px;
	width: 36px;
	display: flex;
	justify-content: space-between;
	height: 220px;
	flex-direction: column;
	z-index: 1;
}

.facebook-preview-v2.vertical.reel .oval,
.facebook-preview-v2.square.reel .oval {
	background: var(--fb-med-grey);
	opacity: 0.4;
	margin-right: 0;
}

.facebook-preview-v2.vertical.reel .facebook-footer,
.facebook-preview-v2.square.reel .facebook-footer {
	height: 138px;
	width: 100%;
	bottom: 0;
	padding-left: 17px;
	position: absolute;
}

.facebook-preview-v2.vertical.reel .cta-label,
.facebook-preview-v2.square.reel .cta-label {
	width: 250px;
	height: 35px;
	left: 1px;
	bottom: 10px;
	border-radius: 3px;
	font-size: 14px;
	font-weight: normal;
	color: #374047;
	margin-top: 0;
	text-overflow: ellipsis;
	overflow: hidden;
	position: absolute;
}

.facebook-preview-v2.vertical.reel .facebook-footer .footer-placeholder-shapes,
.facebook-preview-v2.square.reel .facebook-footer .footer-placeholder-shapes {
	display: grid;
	grid-template-areas:
		'oval header-150'
		'oval header-100';
	grid-template-columns: 0fr auto auto 20px;
	padding: 5px 10px 32px 0;
	align-items: end;
}

.facebook-preview-v2.vertical.reel .facebook-footer .footer-placeholder-shapes .oval,
.facebook-preview-v2.square.reel .facebook-footer .footer-placeholder-shapes .oval {
	margin-right: 10px;
	width: 30px;
	height: 30px;
	opacity: 1;
	background: var(--fb-light-grey);
}

.facebook-preview-v2.vertical.reel .primary-text,
.facebook-preview-v2.square.reel .primary-text {
	color: #fff;
	max-width: 235px;
	max-height: 14px;
	overflow: hidden;
	margin-bottom: 0px;
	font-size: 13px;
	line-height: 1.15;
	padding-left: 3px;
}

.facebook-preview-v2.vertical .facebook-header .oval,
.facebook-preview-v2.square .facebook-header .oval,
.facebook-preview-v2.horizontal .facebook-header .oval {
	width: 30px;
	height: 30px;
}


/*****************
* VERTICAL REELS *
******************/
.facebook-preview-v2.vertical.reel .vertical-icon-container {
	position: absolute;
	bottom: 10px;
	right: 14px;
	width: 36px;
	display: flex;
	justify-content: space-between;
	height: 220px;
	flex-direction: column;
	z-index: 1;
}

.facebook-preview-v2.vertical.reel .oval {
	background: var(--fb-med-grey);
	opacity: 0.4;
	margin-right: 0;
}

.facebook-preview-v2.vertical.reel .hero-media {
	display: flex;
	align-items: center;
}

.facebook-preview-v2.vertical.reel .hero-media img {
	position: relative;
	height: auto;
}

.facebook-preview-v2.vertical.reel .facebook-footer {
	height: 139px;
	width: 100%;
	bottom: 0;
	padding-left: 17px;
	position: absolute;
}

.facebook-preview-v2.vertical.reel .facebook-footer .footer-placeholder-shapes {
	display: grid;
	grid-template-areas:
		'oval header-150'
		'oval header-100';
	grid-template-columns: 0fr auto auto 20px;
	padding: 10px 10px 26px 0;
	align-items: end;
}

.facebook-preview-v2.vertical.reel .facebook-footer .footer-placeholder-shapes .oval {
	margin-right: 10px;
	width: 30px;
	height: 30px;
	opacity: 1;
	background: var(--fb-light-grey);
}

.facebook-preview-v2.vertical.reel .cta-label {
	width: 250px;
	height: 35px;
	left: 1px;
	bottom: 10px;
	border-radius: 3px;
	font-size: 14px;
	font-weight: normal;
	color: var(--fb-dark-grey);
	margin-top: 0;
	text-overflow: ellipsis;
	overflow: hidden;
}

.facebook-preview-v2.vertical.reel .primary-text {
	max-width: 235px;
	max-height: 14px;
	overflow: hidden;
	margin-bottom: 0px;
	line-height: 1.15;
}

/****************************
	INSTAGRAM VERTICAL REELS
*****************************/
.facebook-preview-v2.vertical.reel.instagram .reel-header {
	z-index: 2;
	position: relative;
	color: #fff;
	font-size: 24px;
	margin: 0;
	left: 22px;
	top: 40px;
	width: calc(var(--preview-fb-width) - 22px);
}

.facebook-preview-v2.vertical.reel.instagram .hero-media img,
.facebook-preview-v2.vertical.reel.instagram .hero-media video,
.facebook-preview-v2.vertical.reel.instagram .hero-media iframe {
	height: var(--preview-fb-height);
	width: var(--preview-fb-width);
}

.facebook-preview-v2.vertical.reel.instagram .facebook-footer {
	padding: 0 15px 16px 17px;
}

.facebook-preview-v2.vertical.reel.instagram .footer-placeholder-shapes {
	padding: 0 0 16px 0;
}

.facebook-preview-v2.vertical.reel.instagram .vertical-icon-container {
	height: 490px;
	width: 32px;
	bottom: 60px;
}

.facebook-preview-v2.vertical.reel.instagram .vertical-icon-container .oval {
	margin: 12px 0;
	width: 32px;
	height: 32px;
}

.facebook-preview-v2.vertical.reel.instagram .vertical-icon-container .lower-ovals .oval:last-of-type {
	margin-bottom: 0;
}

.facebook-preview-v2.vertical.reel.instagram .cta-label {
	bottom: unset;
	width: 240px;
}

.facebook-preview-v2.vertical.reel.instagram .primary-text {
	max-height: 30px;
	height: 30px;
	line-height: 1.25;
	font-size: 12px;
	margin-top: 44px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	max-width: 240px;
}

.facebook-preview-v2.vertical.reel.instagram .lower-footer-container {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.facebook-preview-v2.vertical.reel.instagram .footer-ellipsis {
	font-size: 16px;
	color: #fff;
	align-self: flex-end;
	margin: 0 8px 8px 0;
}

/***************************
 * VERTICAL + SQUARE STORY *
****************************/
.facebook-preview-v2.vertical.story,
.facebook-preview-v2.square.story {
	background: #1f1f1f;
}

/********************
 * VERTICAL STORY *
*********************/
.facebook-preview-v2.vertical.story {
	background: var(--fb-dark-grey);
}

.facebook-preview-v2.vertical.story .progress-bar,
.facebook-preview-v2.square.story .progress-bar {
	background: #aba7a9;
	height: 2px;
	z-index: 1;
	position: relative;
	margin: 7px 5px;
	top: 7px;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 86%, #000);
}

.facebook-preview-v2.vertical.story .facebook-header,
.facebook-preview-v2.square.story .facebook-header {
	position: relative;
	background: none;
	padding-top: 7px;
}

.facebook-preview-v2.vertical.story .hero-media,
.facebook-preview-v2.square.story .hero-media {
	background-color: var(--fb-dark-grey);
}

.facebook-preview-v2.vertical.story .cta-label,
.facebook-preview-v2.square.story .cta-label {
	bottom: 21px;
	font-weight: normal;
	font-size: 16px;
	position: absolute;
}

.facebook-preview-v2.vertical.story .chevron-up,
.facebook-preview-v2.square.story .chevron-up {
	position: absolute;
	top: 490px;
	color: #fff;
	left: 153px;
	font-size: 14px;
}

.facebook-preview-v2.vertical.story .oval,
.facebook-preview-v2.square.story .oval {
	width: 30px;
	height: 30px;
}

.facebook-preview-v2.vertical.story .rectangle-100,
.facebook-preview-v2.square.story .rectangle-100 {
	margin: 5px 0 4px 0;
}

.facebook-preview-v2.vertical.story .hero-media img {
	height: auto;
}

/****************
	SQUARE STORY
*****************/
.facebook-preview-v2.square.story .hero-media,
.facebook-preview-v2.square.story .preview-missing-media {
	height: 320px;
	width: 320px;
	top: 70px;
}

.facebook-preview-v2.square.story .hero-media img,
.facebook-preview-v2.square.story .hero-media video {
	height: 100%;
	width: 100%;
}

.facebook-preview-v2.square.story .facebook-footer {
	height: 50px;
	width: 100%;
	position: absolute;
	/* bottom: 105px; */
}

.facebook-preview-v2.square.story .primary-text {
	bottom: 105px;
	position: absolute;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #fff;
	text-overflow: ellipsis;
	margin: 0 30px;
	height: 30px;
	line-height: 1.15;
	font-size: 13px;
	overflow: hidden;
	width: 260px;
}

/******************************
 * INSTAGRAM HORIZONTAL STORY *
 ******************************/
 .facebook-preview-v2.horizontal-stories.story.vertical.instagram .hero-media {
	height: 180px;
	top: 61px;
	position: absolute;
}

 .facebook-preview-v2.horizontal-stories.story.vertical.instagram .hero-media img {
	height: inherit;
	position: relative;
}

 .facebook-preview-v2.horizontal-stories.story.vertical.instagram.horizontal .primary-text-container {
	overflow: hidden;
	line-height: 1.15;
	margin: 0 30px;
	position: relative;
	top: 280px;
}

 .facebook-preview-v2.horizontal-stories.story.vertical.instagram.horizontal .primary-text {
	height: inherit;
	width: 100%;
	-webkit-line-clamp: 2;
	margin-bottom: 0;
}

/*******************
	VERTICAL FEEDS
********************/
.facebook-preview-v2.vertical.feeds {
	font-family: Arial;
	border: 1px solid var(--fb-med-grey);
	background: #fff;
}

.facebook-preview-v2:not(.square) .hero-media {
	width: 100%;
	height: 100%;
}

/***************************
	VERTICAL + SQUARE FEEDS
****************************/
.facebook-preview-v2.vertical.feeds .facebook-header-container,
.facebook-preview-v2.square.feeds:not(.instagram) .facebook-header-container {
	/* prevent height change in header container if number of
	lines of text changes in header */
	height: 116px;
}
.facebook-preview-v2.vertical.feeds,
.facebook-preview-v2.square.feeds {
	background: #fff;
	--preview-fb-width: 320px;
	--preview-fb-height: 570px;
}

.facebook-preview-v2.vertical.feeds .facebook-header,
.facebook-preview-v2.square.feeds .facebook-header {
	padding: 6px 0 10px 10px;
	grid-template-areas:
		'oval header-150 ellipsis'
		'oval header-100 .';
	grid-template-columns: 0fr auto 0fr 0px;
	background: none;
	position: relative;
	top: unset;
}

.facebook-preview-v2.vertical.feeds .facebook-header .ellipsis,
.facebook-preview-v2.square.feeds .facebook-header .ellipsis {
	font-size: 16px;
	color: var(--fb-dark-grey);
	margin-right: 15px;
}

.facebook-preview-v2.vertical.feeds .media-container,
.facebook-preview-v2.square.feeds .media-container {
	max-height: 320px;
}

.facebook-preview-v2.vertical.feeds .media-container .fb-media.image,
.facebook-preview-v2.square.feeds .media-container .fb-media.image,
.facebook-preview-v2.vertical.feeds .media-container .fb-media.video,
.facebook-preview-v2.square.feeds .media-container .fb-media.video {
	width: 318px; /* minus border */
	min-height: 320px; /* if invalid img src the img has no height by default */
	max-height: 320px;
	border: none;
}

/****************************
 * INSTAGRAM VERTICAL FEEDS *
*****************************/
.facebook-preview-v2.vertical.feeds.instagram .facebook-header-container {
	height: unset;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-header-container .top-bar {
	background: #f9f9f9;
	width: 100%;
	height: 42px;
	border-bottom: 1px solid var(--fb-med-grey);
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-header {
	align-items: start;
	padding: 4px 0 5px 10px;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-header .rectangle-100 {
	margin-top: 0;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-header .ellipsis {
	font-size: 14px;
	padding-top: 6px;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer {
	height: 164px;
	padding: 0 16px;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .cta-label {
	/* minus border and footer container padding */
	width: calc(var(--preview-fb-width) - 34px);
	max-width: calc(var(--preview-fb-width) - 34px);
	padding: 3px 0 0;
	display: flex;
	justify-content: space-between;
	margin: 0;
	margin-bottom: 5px;
	align-items: center;
	border: none;
	background: #fff;
	font-size: 12px;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .cta-name {
	color: var(--fb-dark-grey);
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .chevron-right {
	font-weight: normal;
	font-size: 14px;
	color: var(--fb-dark-grey);
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .oval-container {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 19px 0 5px 0;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .left-side {
	display: flex;
	flex-wrap: nowrap;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .oval {
	width: 24px;
	height: 24px;
	background: var(--fb-med-grey);
	opacity: 0.4;
	margin-right: 16px;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .right-side .oval {
	margin-right: 0;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .facebook-footer-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* minus border and footer container padding */
	width: calc(var(--preview-fb-width) - 34px);
	max-width: calc(var(--preview-fb-width) - 34px);
	line-height: 1.25;
	font-size: 12px;
	color: var(--fb-dark-grey);
	margin-top: 8px;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .missing-cta {
	height: 21px;
}

/*************************
 * VERTICAL + HORIZONTAL *
**************************/
.facebook-preview-v2.vertical,
.facebook-preview-v2.horizontal {
	--preview-fb-width: 320px;
}

.facebook-preview-v2.vertical .facebook-header,
.facebook-preview-v2.horizontal .facebook-header {
	grid-template-areas: 'oval header-150 ellipsis close'
		'oval header-100 . .';
	background: linear-gradient(to top, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.2));
	top: 0;
	width: 100%;
	z-index: 1;
}

.facebook-preview-v2.vertical .facebook-header .ellipsis,
.facebook-preview-v2.horizontal .facebook-header .ellipsis {
	grid-area: ellipsis;
	height: 14px;
	font-size: 16px;
	color: #fff;
	display: grid;
	justify-content: end;
	align-self: center;
	margin-right: 22px;
	padding-top: 9px;
}

.facebook-preview-v2.vertical .facebook-header .close,
.facebook-preview-v2.horizontal .facebook-header .close {
	grid-area: close;
	height: 14px;
	font-size: 21px;
	color: #fff;
	display: grid;
	justify-content: end;
	align-self: start;
	padding: 7px 7px 0 0;
}

.facebook-preview-v2.vertical .facebook-placeholder,
.facebook-preview-v2.horizontal .facebook-placeholder {
	background: #fff;
	align-self: center;
}

.facebook-preview-v2.vertical .hero-media img,
.facebook-preview-v2.horizontal .hero-media .preview-missing-media {
	position: absolute;
	top: 0;
	left: 0;
	height: var(--preview-fb-height);
	width: var(--preview-fb-width);
}

/*********************************
 * VERTICAL V2 FEEDS + SQUARE FEEDS
		+ HORIZONTAL FEEDS
**********************************/
.facebook-preview-v2.vertical.feeds .facebook-header .oval,
.facebook-preview-v2.square.feeds .facebook-header .oval,
.facebook-preview-v2.horizontal.feeds .facebook-header .oval {
	margin-bottom: 2px;
}

.facebook-preview-v2.vertical.feeds .facebook-header-text,
.facebook-preview-v2.square.feeds .facebook-header-text,
.facebook-preview-v2.horizontal.feeds .facebook-header-text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 265px;
	margin: 0 38px 15px 17px;
	line-height: 1.15;
	font-size: 13px;
	color: var(--fb-dark-grey);
}

.facebook-preview-v2.vertical.feeds .lower-grey-box,
.facebook-preview-v2.square.feeds .lower-grey-box,
.facebook-preview-v2.horizontal.feeds .lower-grey-box {
	width: calc(var(--preview-fb-width) - 2px);
	background: #f9f9f9;
	border-bottom: 1px solid var(--fb-med-grey);
	height: 78px;
	padding-left: 10px;
	display: inline-flex;
	justify-content: space-between;
}

.facebook-preview-v2.vertical.feeds .lower-grey-box .grey-text,
.facebook-preview-v2.square.feeds .lower-grey-box .grey-text,
.facebook-preview-v2.horizontal.feeds .lower-grey-box .grey-text {
	width: 185px;
}

.facebook-preview-v2.vertical.feeds .lower-grey-box .display-link,
.facebook-preview-v2.square.feeds .lower-grey-box .display-link,
.facebook-preview-v2.horizontal.feeds .lower-grey-box .display-link,
.facebook-preview-v2.vertical.feeds .lower-grey-box .description,
.facebook-preview-v2.square.feeds .lower-grey-box .description,
.facebook-preview-v2.horizontal.feeds .lower-grey-box .description {
	width: 185px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 15px;
	line-height: normal;
	font-size: 13px;
	margin-top: 5px;
}

.facebook-preview-v2.vertical.feeds .lower-grey-box .description,
.facebook-preview-v2.square.feeds .lower-grey-box .description,
.facebook-preview-v2.horizontal.feeds .lower-grey-box .description {
	margin-top: 0px;
}

.facebook-preview-v2.vertical.feeds .lower-grey-box .headline,
.facebook-preview-v2.square.feeds .lower-grey-box .headline,
.facebook-preview-v2.horizontal.feeds .lower-grey-box .headline {
	font-weight: bold;
	font-size: 14px;
}

.facebook-preview-v2.vertical.feeds .lower-grey-box .display-link,
.facebook-preview-v2.square.feeds .lower-grey-box .display-link,
.facebook-preview-v2.horizontal.feeds .lower-grey-box .display-link {
	text-transform: lowercase;
	font-size: 12px;
	color: #858c90;
}

.facebook-preview-v2.vertical.feeds .lower-grey-box .headline-skeleton,
.facebook-preview-v2.square.feeds .lower-grey-box .headline-skeleton,
.facebook-preview-v2.horizontal.feeds .lower-grey-box .headline-skeleton {
	width: 170px;
	display: inline-block;
	margin-bottom: 0.45rem;
}

.facebook-preview-v2.vertical.feeds .facebook-footer .cta-label,
.facebook-preview-v2.square.feeds .facebook-footer .cta-label,
.facebook-preview-v2.horizontal.feeds .facebook-footer .cta-label {
	--btn-cta: 105px;
	background: var(--fb-light-grey);
	font-size: 14px;
	border-radius: 6px;
	margin: 12px 0 3px 0;
	padding: 11px 14px 10px 11px;
	height: 35px;
	font-weight: bold;
	color: #000;
	max-width: 115px;
	overflow: hidden;
}

.facebook-preview-v2.vertical.feeds .facebook-footer .bottom-section,
.facebook-preview-v2.square.feeds .facebook-footer .bottom-section,
.facebook-preview-v2.horizontal.feeds .facebook-footer .bottom-section {
	background: #fff;
	height: 44px;
	padding: 9px 0 0 18px;
}

.facebook-preview-v2.vertical.feeds .facebook-footer .bottom-section .rectangle-50,
.facebook-preview-v2.square.feeds .facebook-footer .bottom-section .rectangle-50,
.facebook-preview-v2.horizontal.feeds .facebook-footer .bottom-section .rectangle-50 {
	margin-right: 25px;
}

.facebook-preview-v2.vertical.feeds .facebook-footer .bottom-section .facebook-placeholder,
.facebook-preview-v2.square.feeds .facebook-footer .bottom-section .facebook-placeholder,
.facebook-preview-v2.horizontal.feeds .facebook-footer .bottom-section .facebook-placeholder {
	background: var(--fb-light-grey);
}

/*********************
 * HORIZONTAL FEEDS *
**********************/
.facebook-preview-v2.horizontal.feeds {
	--preview-fb-height: 430px;
}

.facebook-preview-v2.horizontal.feeds .hero-media {
	height: 180px;
	position: relative;
}

.facebook-preview-v2.horizontal.feeds .facebook-header {
	background: none;
	grid-template-areas:
		'oval header-150 ellipsis'
		'oval header-100 .';
	grid-template-columns: 0fr auto auto 0;

}

.facebook-preview-v2.horizontal.feeds .facebook-header-text-container {
	height: 57px;
	overflow: hidden;
}

.facebook-preview-v2.horizontal.feeds .facebook-header .ellipsis {
	color: var(--fb-dark-grey);
	margin-right: 6px;
}

/****************************
 * INSTAGRAM FEEDS *
*****************************/
.facebook-preview-v2.vertical.feeds.instagram .facebook-header-container {
	height: unset;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-header-container .top-bar,
.facebook-preview-v2.square.feeds.instagram .facebook-header-container .top-bar {
	background: #f9f9f9;
	width: 100%;
	height: 42px;
	border-bottom: 1px solid var(--fb-med-grey);
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-header,
.facebook-preview-v2.square.feeds.instagram .facebook-header {
	align-items: start;
	padding: 4px 0 5px 10px;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-header .rectangle-100,
.facebook-preview-v2.square.feeds.instagram .facebook-header .rectangle-100 {
	margin-top: 0;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-header .ellipsis,
.facebook-preview-v2.square.feeds.instagram .facebook-header .ellipsis {
	font-size: 14px;
	padding-top: 6px;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer,
.facebook-preview-v2.square.feeds.instagram .facebook-footer {
	height: 164px;
	padding: 0 16px;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .cta-label,
.facebook-preview-v2.square.feeds.instagram .facebook-footer .cta-label {
	/* minus border and footer container padding */
	width: calc(var(--preview-fb-width) - 34px);
	max-width: calc(var(--preview-fb-width) - 34px);
	padding: 3px 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	margin-bottom: 5px;
	border: none;
	background: #fff;
	font-size: 12px;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .cta-name,
.facebook-preview-v2.square.feeds.instagram .facebook-footer .cta-name {
	margin: 7px 0 0 0;
	text-transform: capitalize;
	color: var(--fb-dark-grey);
	margin-right: 0;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .chevron-right,
.facebook-preview-v2.square.feeds.instagram .facebook-footer .chevron-right {
	font-weight: normal;
	font-size: 14px;
	color: var(--fb-dark-grey);
}

.facebook-preview-v2.horizontal.feeds .facebook-footer .bottom-section {
	padding-top: 6px;
}

/*****************************************
 * HORIZONTAL STORIES + HORIZONTAL FEEDS *
******************************************/
/* .horizontal-stories separates horizontal and horizontal story styles
as .horizontal-stories also needs to inherit most .vertical styles */
.facebook-preview-v2.horizontal.feeds.story .hero-media,
.facebook-preview-v2.horizontal-stories.story .hero-media {
	margin-top: 14px;
}

.facebook-preview-v2.horizontal.feeds .hero-media img,
.facebook-preview-v2.horizontal-stories.story .hero-media img,
.facebook-preview-v2.horizontal-stories.story .hero-media,
.facebook-preview-v2.horizontal.feeds .hero-media .preview-missing-media {
	--preview-fb-height: 180px;
	height: 180px;
	width: 100%;
	position: relative;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .oval-container,
.facebook-preview-v2.square.feeds.instagram .facebook-footer .oval-container {
	display: flex;
	justify-content: space-between;
	width: 100%;
	position: relative;
}

.facebook-preview-v2.horizontal-stories.story .primary-text-container {
	width: 260px;
	margin: 0 auto;
	height: 120px;
	top: 85px;
	position: relative;
	line-height: 1.15;
	display: flex;
	overflow: hidden;
}

.facebook-preview-v2.horizontal-stories.story.horizontal.instagram.horizontal .primary-text,
.facebook-preview-v2.horizontal-stories.story.horizontal .primary-text {
	-webkit-line-clamp: 8;
	text-overflow: ellipsis;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .left-side,
.facebook-preview-v2.square.feeds.instagram .facebook-footer .left-side {
	display: flex;
	flex-wrap: nowrap;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .oval,
.facebook-preview-v2.square.feeds.instagram .facebook-footer .oval {
	width: 24px;
	height: 24px;
	background: var(--fb-med-grey);
	opacity: 0.4;
	margin-right: 16px;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .right-side .oval,
.facebook-preview-v2.square.feeds.instagram .facebook-footer .right-side .oval {
	margin-right: 0;
}

.facebook-preview-v2.vertical.feeds.instagram .facebook-footer .facebook-footer-text,
.facebook-preview-v2.square.feeds.instagram .facebook-footer .facebook-footer-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
	margin: 8px 0 0 0;
	/* minus border and footer container padding */
	width: calc(var(--preview-fb-width) - 34px);
	max-width: calc(var(--preview-fb-width) - 34px);
	line-height: 1.25;
	font-size: 12px;
	color: var(--fb-dark-grey);
	height: 32px;
}

/******************************
 * INSTAGRAM FEEDS HORIZONTAL *
*******************************/
.facebook-preview-v2.horizontal-feeds.horizontal.vertical.instagram {
	--preview-fb-height: 410px;
}

.facebook-preview-v2.horizontal-feeds.horizontal.vertical.instagram .media-container,
.facebook-preview-v2.horizontal-feeds.horizontal.vertical.instagram .media-container img.fb-media.image,
.facebook-preview-v2.horizontal-feeds.horizontal.vertical.instagram .media-container video.fb-media.video,
.facebook-preview-v2.horizontal-feeds.horizontal.vertical.instagram .media-container .preview-missing-media {
	height: 180px;
	min-height: unset;
}
.facebook-preview-v2.horizontal-reel.vertical.reel.instagram .hero-media {
	top: 170px;
}

.facebook-preview-v2.horizontal-reel.vertical.reel.instagram .hero-media,
.facebook-preview-v2.horizontal-reel.vertical.reel.instagram .hero-media img,
.facebook-preview-v2.horizontal-reel.vertical.reel.instagram .hero-media .preview-missing-media {
	height: 180px;
	position: relative;
	margin: auto 0;
}

/*****************
* VERTICAL REELS *
******************/
.facebook-preview-v2.vertical.reel .vertical-icon-container,
.facebook-preview-v2.square.reel .vertical-icon-container {
	position: absolute;
	bottom: 10px;
	right: 14px;
	width: 36px;
	display: flex;
	justify-content: space-between;
	height: 220px;
	flex-direction: column;
	z-index: 1;
}

.facebook-preview-v2.vertical.reel .oval,
.facebook-preview-v2.square.reel .oval {
	background: var(--fb-med-grey);
	opacity: 0.4;
	margin-right: 0;
}

.facebook-preview-v2.vertical.reel .facebook-footer,
.facebook-preview-v2.square.reel .facebook-footer {
	height: 139px;
	width: 100%;
	bottom: 0;
	padding-left: 17px;
	position: absolute;
}

.facebook-preview-v2.vertical.reel .facebook-footer .footer-placeholder-shapes,
.facebook-preview-v2.square.reel .facebook-footer .footer-placeholder-shapes {
	display: grid;
	grid-template-areas:
		'oval header-150'
		'oval header-100';
	grid-template-columns: 0fr auto auto 20px;
	padding: 10px 10px 28px 0;
	align-items: end;
}

.facebook-preview-v2.vertical.reel .facebook-footer .footer-placeholder-shapes .oval,
.facebook-preview-v2.square.reel .facebook-footer .footer-placeholder-shapes .oval {
	margin-right: 10px;
	width: 30px;
	height: 30px;
	opacity: 1;
	background: var(--fb-light-grey);
}

.facebook-preview-v2.vertical.reel .cta-label,
.facebook-preview-v2.square.reel .cta-label {
	width: 250px;
	height: 35px;
	left: 1px;
	bottom: 10px;
	border-radius: 3px;
	font-size: 14px;
	font-weight: normal;
	color: var(--fb-dark-grey);
	margin-top: 0;
	text-overflow: ellipsis;
	overflow: hidden;
}

/************************************
	INSTAGRAM VERTICAL + SQUARE REELS
*************************************/
.facebook-preview-v2.vertical.reel.instagram .reel-header,
.facebook-preview-v2.square.reel.instagram .reel-header {
	z-index: 2;
	position: relative;
	color: #fff;
	font-size: 24px;
	margin: 0;
	left: 22px;
	top: 40px;
	width: calc(var(--preview-fb-width) - 22px);
}

.facebook-preview-v2.vertical.reel.instagram .facebook-footer,
.facebook-preview-v2.square.reel.instagram .facebook-footer {
	padding: 0 15px 16px 17px;
}

.facebook-preview-v2.vertical.reel.instagram .footer-placeholder-shapes,
.facebook-preview-v2.square.reel.instagram .footer-placeholder-shapes {
	padding: 0 0 16px 0;
}

.facebook-preview-v2.vertical.reel.instagram .vertical-icon-container,
.facebook-preview-v2.square.reel.instagram .vertical-icon-container {
	height: 490px;
	width: 32px;
	bottom: 60px;
}

.facebook-preview-v2.vertical.reel.instagram .vertical-icon-container .oval,
.facebook-preview-v2.square.reel.instagram .vertical-icon-container .oval {
	margin: 12px 0;
	width: 32px;
	height: 32px;
}

.facebook-preview-v2.vertical.reel.instagram .vertical-icon-container .lower-ovals .oval:last-of-type,
.facebook-preview-v2.square.reel.instagram .vertical-icon-container .lower-ovals .oval:last-of-type {
	margin-bottom: 0;
}

.facebook-preview-v2.vertical.reel.instagram .cta-label,
.facebook-preview-v2.square.reel.instagram .cta-label {
	bottom: unset;
	width: 240px;
}
.facebook-preview-v2.vertical.reel.instagram .primary-text,
.facebook-preview-v2.square.reel.instagram .primary-text {
	max-height: 30px;
	height: 30px;
	line-height: 1.25;
	font-size: 12px;
	margin-top: 44px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	max-width: 240px;
}

.facebook-preview-v2.vertical.reel.instagram .lower-footer-container,
.facebook-preview-v2.square.reel.instagram .lower-footer-container {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.facebook-preview-v2.vertical.reel.instagram .footer-ellipsis,
.facebook-preview-v2.square.reel.instagram .footer-ellipsis {
	font-size: 16px;
	color: #fff;
	align-self: flex-end;
	margin: 0 8px 8px 0;
}

/*************************
	INSTAGRAM SQUARE REEL
**************************/
.facebook-preview-v2.square.reel .hero-media,
.facebook-preview-v2.square.reel .preview-missing-media {
	height: 320px;
	width: 320px;
	top: 130px;
	position: absolute;
}

.facebook-preview-v2.square.reel .hero-media .fb-media.image {
	height: 320px;
	width: 320px;
	top: 0;
}

.facebook-preview-v2.square.reel .hero-media iframe {
	width: 320px;
	height: 320px;
}

.facebook-preview-v2.square.reel .preview-missing-media {
	top: 0px;
}

/*******************
 * HORIZONTAL REEL *
*******************/
.facebook-preview-v2.reel.horizontal-reel .hero-media,
.facebook-preview-v2.reel.horizontal-reel .fb-media.image,
.facebook-preview-v2.reel.horizontal-reel .fb-media.video {
	--preview-fb-height: 180px;
	height: var(--preview-fb-height);
	top: calc(50% - 90px);
}

/**************************
 * INSTAGRAM SQUARE FEEDS *
***************************/
.facebook-preview-v2.square.feeds.instagram .facebook-footer .missing-cta {
	height: 40px;
}

/******************************
 * INSTAGRAM STORIES VERTICAL *
*******************************/
.facebook-preview-v2.story.vertical.instagram .hero-media video {
	height: inherit;
	width: 100%;
}

/********************************
 * INSTAGRAM STORIES HORIZONTAL *
*********************************/
.facebook-preview-v2.story.vertical.instagram.horizontal-stories .hero-media .fb-media-vertical.video,
.facebook-preview-v2.story.vertical.instagram.horizontal-stories .hero-media .preview-missing-media {
	height: 180px;
	width: 320px;
}

.facebook-preview-v2.story.vertical.instagram.horizontal-stories.horizontal .primary-text-container {
	top: 380px;
	height: 30px;
}

.facebook-preview-v2.story.vertical.instagram.horizontal-stories .primary-text-container .primary-text {
	-webkit-line-clamp: 2;
}

/***************
	SQUARE REELS
*****************/
.facebook-preview-v2.square.reel .facebook-footer {
	height: 144px;
}

.facebook-preview-v2.square.reel .facebook-footer .footer-placeholder-shapes {
	padding-bottom: 32px;
}
.facebook-preview-v2.carousel .chevron-right,
.facebook-preview-v2.carousel .chevron-left {
	position: absolute;
	top: calc(50% - 10px);
	cursor: pointer;
	z-index: 1;
	font-size: 30px;
	color: #9B9FA3;
}

.facebook-preview-v2.carousel .chevron-right {
	right: 20px;
}

.facebook-preview-v2.carousel .chevron-left {
	left: 20px;
}

.facebook-preview-v2.carousel .chevron-right.hidden,
.facebook-preview-v2.carousel .chevron-left.hidden {
	display: none;
}

.facebook-preview-v2.carousel {
	overflow: hidden;
}

.facebook-preview-v2.carousel .carousel-container {
	display: inline-flex;
	flex-wrap: nowrap;
	position: relative;
	transition: left 0.3s ease; /*TODO fix animation*/
}
/*FEEDS CAROUSEL*/
.facebook-preview-v2.carousel.feeds.vertical .facebook-header {
	padding: 10px 0 12px 10px;
}

.facebook-preview-v2.carousel .right-border {
	/* right side border of carousel container. this needs to be 
	absolutely positioned outside the carousel-container to mimic 
	a right-side border which the carousel-container would cover
	due to overflow: hidden */
	right: 0;
	width: 10px;
	background: #fff;
	height: 305px;
	bottom: 147px;
	position: absolute;
	z-index: 1;
}

.facebook-preview-v2.carousel.feeds .carousel-container .no-card {
	width: 308px;
	height: 305px;
	left: 10px;
	position: relative;
}

.facebook-preview-v2.carousel.feeds .carousel-card.feeds {
	width: 230px;
	height: 305px;
	background: var(--fb-med-grey);
	margin-left: 10px;
	border-radius: 4px;
}

.facebook-preview-v2.carousel.feeds .carousel-card.feeds .media.square {
	width: inherit;
	height: 230px;
	background: var(--fb-dark-grey);
	border-radius: 4px 4px 0 0;
	margin: 0;
}

.facebook-preview-v2.carousel.feeds .carousel-card.feeds .media.square video,
.facebook-preview-v2.carousel.feeds .carousel-card.feeds .media.square img {
	width: inherit;
	height: inherit;
	border-radius: inherit;
}

.facebook-preview-v2.carousel.feeds .next-card,
.facebook-preview-v2.carousel.feeds .prev-card {
	height: 305px;
	width: 67px;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}

.facebook-preview-v2.carousel.feeds .next-card {
	left: 251px;
}

.facebook-preview-v2.carousel.feeds div[class$="-card hidden"] {
	cursor: default;
}

.facebook-preview-v2.carousel.feeds .lower-content {
	height: 75px;
	display: grid;
	grid-template-columns: 97px 105px;
	grid-template-areas: 
		"headline cta"
		"description cta";
	padding: 20px 10px 20px 8px;
	grid-column-gap: 10px;
	line-height: normal;
}

.facebook-preview-v2.carousel.feeds.vertical .bottom-section {
	padding-top: 3px;
}

.facebook-preview-v2.carousel.feeds .lower-content .headline,
.facebook-preview-v2.carousel.feeds .lower-content .description,
.facebook-preview-v2.carousel.feeds .lower-content .cta {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 90px;
}

.facebook-preview-v2.carousel.feeds .lower-content .headline {
	font-family: ArialMT;
	font-weight: bold;
	grid-area: headline;
}

.facebook-preview-v2.carousel.feeds .lower-content .description {
	grid-area: description;
	font-size: 13px;
	align-self: end;
}

.facebook-preview-v2.carousel.feeds .lower-content .cta-container {
	grid-area: cta;
	font-family: ArialMT;
	font-weight: bold;
	align-self: center;
	justify-self: center;
	width: 105px;
	height: 35px;
	background: var(--fb-light-grey);
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.facebook-preview-v2.carousel.feeds .lower-content .cta:first-letter {
	text-transform: capitalize;
}

.facebook-preview-v2.carousel.feeds .facebook-footer .border-bottom {
	border-bottom: 1px solid var(--fb-med-grey);
	width: 300px;
	margin: 18px auto 0 auto;
}

/*STORIES CAROUSEL*/
.facebook-preview-v2.carousel.story .progress-bar {
	margin-top: 0;
}

.facebook-preview-v2.carousel.story .facebook-header {
	padding-right: 4px;
}

.facebook-preview-v2.carousel.story .facebook-header .ellipsis {
	margin-right: 10px;
}

.facebook-preview-v2.carousel.story .carousel-container {
	height: 570px;
	width: 320px;
	position: absolute;
	top: 0;
	transition: none;
}

.facebook-preview-v2.carousel.story .carousel-container .carousel-card {
	height: inherit;
	/*width property not working*/
	min-width: 320px;
	max-width: 320px;
	position: relative;
}

.facebook-preview-v2.carousel.story .carousel-container .carousel-card img {
	height: inherit;
}

.facebook-preview-v2.carousel.story.vertical .carousel-container .carousel-card img {
	height: auto;
}

/* REELS CAROUSEL */
.facebook-preview-v2.carousel.reels .carousel-container {
	height: 570px;
	transition: none;
}

.facebook-preview-v2.carousel.reels .carousel-container .carousel-card {
	height: inherit;
}

.facebook-preview-v2.carousel.reels .carousel-container .media,
.facebook-preview-v2.carousel.reels .carousel-container .preview-missing-media {
	position: relative;
	top: 130px;
	margin-bottom: 0;
}

.facebook-preview-v2.carousel.reels .carousel-container .carousel-card .preview-missing-media {
	top: 0;
}

.facebook-preview-v2.carousel.reels .carousel-container .carousel-card .media,
.facebook-preview-v2.carousel.reels .carousel-container .carousel-card img,
.facebook-preview-v2.carousel.reels .carousel-container .carousel-card video {
	width: 320px;
	height: 320px;
}


.facebook-preview-v2.carousel.reels .carousel-card .cta-container {
	position: absolute;
	bottom: 10px;
	width: 250px;
	height: 35px;
	background: #fff;
	border-radius: 3px;
	margin-left: 17px;
	align-items: center;
	display: flex;
	padding: 0 10px;
}

.facebook-preview-v2.carousel.reels .carousel-card .cta-container .cta {
	display: inline-block;
	text-align: center;
	text-transform: capitalize;
	width: 250px;
	border-radius: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/*INSTAGRAM FEEDS CAROUSEL*/
.facebook-preview-v2.carousel.feeds.instagram {
	font-family: ArialMT;
}

.facebook-preview-v2.carousel.feeds.instagram .chevron-left,
.facebook-preview-v2.carousel.feeds.instagram .chevron-right {
	top: calc(50% - 58px);
}

.facebook-preview-v2.carousel.feeds.instagram .facebook-footer {
	padding-left: 11px;
	padding-right: 14px;
	/* footer is moving for video carousels - media containers 
	have set height not sure what is growing*/
	position: absolute;
	bottom: 0px;
}

.facebook-preview-v2.carousel.feeds.instagram .chevron-right.cta {
	position: relative;
	top: 3px;
	right: 0;
}

.facebook-preview-v2.carousel.feeds.instagram.square .cta-label {
	float: left;
	height: 28px;
	display: flex;
	align-items: center;
	min-width: 300px;
	border-radius: 0;
}

.facebook-preview-v2.carousel.feeds.instagram.square .cta-name {
	padding-right: 5px;
	margin-top: 0;
}

.facebook-preview-v2.carousel.feeds.instagram.square .missing-cta {
	height: 34px;
}

.facebook-preview-v2.carousel.feeds.instagram .carousel-container {
	width: 320px;
	height: 320px;
}

.facebook-preview-v2.carousel.feeds.instagram .carousel-container .preview-missing-media {
	width: 320px;
	height: 320px;
}

.facebook-preview-v2.carousel.feeds.instagram .carousel-card.feeds {
	width: 320px;
	height: 320px;
	margin: 0;
	border-radius: 0;
}

.facebook-preview-v2.carousel.feeds.instagram .carousel-card.feeds .media.square {
	border-radius: inherit;
	height: inherit;
}

.facebook-preview-v2.carousel.feeds.instagram .carousel-card.feeds .preview-missing-media,
.facebook-preview-v2.carousel.feeds.instagram .carousel-card.feeds video,
.facebook-preview-v2.carousel.feeds.instagram .carousel-card.feeds img {
	height: inherit;
}

.facebook-preview-v2.carousel.feeds.instagram .facebook-footer .oval-container {
	align-items: center;
	width: 300px;
	padding-top: 10px;
}

.facebook-preview-v2.carousel.feeds.instagram .facebook-footer .oval-container.border {
	border-top: 1px solid var(--fb-med-grey);
}

.facebook-preview-v2.carousel.feeds.instagram .facebook-footer .oval-container .paginator {
	display: inline-flex;
	padding-right: 100px;
}

.facebook-preview-v2.carousel.feeds.instagram .facebook-footer .oval-container .paginator .card-indicator {
	width: 7px;
	height: 7px;
	background: var(--fb-light-grey);
	margin-right: 3px;
	border-radius: 50%;
	cursor: pointer;
}

.facebook-preview-v2.carousel.feeds.instagram .facebook-footer .oval-container .paginator .card-indicator.active {
	background: #1877f2;
}
/*INSTAGRAM STORIES CAROUSEL*/
.facebook-preview-v2.carousel.story.instagram .progress-bar-container {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	justify-content: space-evenly;
	height: 5px;
	padding: 7px 5px 0 5px;
}

.facebook-preview-v2.carousel.story.instagram .progress-bar-container .progress-bar {
	margin: 0;
	top: unset;
	position: relative;
}

.facebook-preview-v2.carousel.story.instagram .progress-bar-container .progress-bar.active {
	background: #fff;
}

.facebook-preview-v2.carousel.story.instagram .progress-bar-container .progress-bar:not(:last-of-type) {
	margin-right: 5px;
}

.facebook-preview-v2.carousel.story.instagram .carousel-card .preview-missing-media,
.facebook-preview-v2.carousel.story.instagram .carousel-card img,
.facebook-preview-v2.carousel.story.instagram .carousel-card video {
	height: 570px;
	width: 320px;
}/**
 * LinkedIn Styles
 */

/**
 * LinkedIn Image Styles
 */

/**
 * LinkedIn Video Styles
 */

/**
 * LinkedIn Carousel Styles
 */
.linkedin-preview {
	width: 540px;
	border-radius: 8px;
	font-size: 14px;
	font-family: ArialMT, Arial, sans-serif;
	display: flex;
	justify-content: space-evenly;
}

.linkedin-preview .linkedin-main-content {
	width: inherit;
}

.linkedin-preview .header-container {
	padding: 13px 17px 8px 17px;
	width: inherit;
}

.linkedin-preview .header-container .upper {
	display: flex;
	justify-content: space-between;
}

.linkedin-preview .header-container .upper > div {
	display: flex;
	flex-wrap: nowrap;
}

.linkedin-preview .upper i {
	color: #d6d8da;
	font-size: 14px;
}

.linkedin-preview .upper .right-content {
	margin-left: 9px;
	display: grid;
	align-content: flex-end;
}

.linkedin-preview .upper .right-content > div:last-child {
	margin: 5px 0 2px 0;
}

.linkedin-preview .header-container .article-text {
	margin-top: 10px;
	line-height: 1.43;
	margin-bottom: 0;
	word-wrap: break-word;
}

.linkedin-preview .linkedin-media-container {
	position: relative;
}

.linkedin-preview .linkedin-media-container video,
.linkedin-preview .linkedin-media-container img {
	height: auto;
	width: 540px;
	object-fit: cover;
}

.linkedin-preview .linkedin-media-container iframe {
	margin: unset;
}

.linkedin-preview .lower-container {
	position: relative;
}

.linkedin-preview .link-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 10px 12px 9px 12px;
	background: #eef3f8;
}

.linkedin-preview .headline {
	margin: 0;
	font-weight: bold;
	line-height: 1.43;
}

.linkedin-preview .link-container > span.learn-more {
	border: 1px solid #0a66c2;
	border-radius: 12px;
	min-width: 80px;
	text-align: center;
	padding: 2px 12px;
	color: #0a66c2;
	font-weight: bold;
	line-height: 20px;
}

.linkedin-preview .link-container .landing-page {
	font-size: 12px;
}

.linkedin-preview .action-container {
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 19px 0 19px 65px;
}

.linkedin-preview .action-container .action {
	display: grid;
	grid-template-columns: 18px 1fr;
	align-items: center;
	padding-right: 30px;
	grid-gap: 8px;
}

.linkedin-preview .reactions {
	background: #f2f2f2;
	border-radius: 0 0 8px 8px;
	padding: 9px 12px 10px 12px;
}

.linkedin-preview .reactions .react {
	margin: 0;
	color: #858c90;
	font-size: 12px;
}

.linkedin-preview .lindein-missing-video,
.linkedin-preview .preview-missing-media {
	width: 540px;
	height: 282px;
}

/********************
* LINKEDIN CAROUSEL *
*********************/

.linkedin-preview.carousel {
	overflow: hidden;
}

.linkedin-preview.carousel .header-container .article-text {
	margin-top: 12px;
}

.linkedin-preview.carousel .linkedin-media-container {
	position: relative;
}

.linkedin-preview.carousel .linkedin-media-container .direction-btn {
	position: absolute;
	font-size: 23px;
	color: #fff;
	top: calc(50% - 40px);
	background: rgba(0, 0, 0, 0.5);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	z-index: 1;
}

.linkedin-preview.carousel .linkedin-media-container .direction-btn.hidden {
	display: none;
}

.linkedin-preview.carousel .linkedin-media-container .direction-btn.next {
	right: 9px;
}

.linkedin-preview.carousel .linkedin-media-container .direction-btn.prev {
	left: 9px;
}

.linkedin-preview.carousel .carousel-container {
	display: inline-flex;
	position: relative;
	transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.linkedin-preview.carousel .carousel-container .carousel-card {
	margin: 0 4px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #d6d8da;
	width: 320px;
}

.linkedin-preview.carousel .carousel-container {
	padding-left: 8px;
}

.linkedin-preview.carousel .carousel-container:has(> .preview-missing-media) {
	padding-right: 8px;
	overflow: hidden;
}

.linkedin-preview.carousel .carousel-container .preview-missing-media {
	overflow: hidden;
}

.linkedin-preview.carousel .carousel-container .carousel-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.linkedin-preview.carousel .carousel-container .carousel-card > .card-media-container {
	width: 320px;
	height: 320px;
}

.linkedin-preview.carousel .carousel-container .carousel-card > .preview-missing-media {
	height: 328px;
}

.linkedin-preview.carousel .carousel-container .carousel-card .lower-container .headline {
	padding: 15px;
}

.linkedin-preview.carousel .carousel-container .carousel-card .lower-container .headline::first-letter {
	text-transform: uppercase;
}

.linkedin-preview.carousel .lower-container .action-container {
	padding: 28px 0 19px 65px;
}/**
 * Pinterest General
 */

/**
 * Pinterst Image
 */

/**
 * Pinterest Video
 */

/**
 * Pinterst Carousel
 */

.pinterest-preview {
	font-family: Arial;
	position: relative;
	font-family: Arial;
	overflow: hidden;
}

.pinterest-preview .pinterest-main-content {
	width: 236px;
	max-height: 354px; /*TODO aspect ratio*/
	min-height: 100px;
	background-blend-mode: multiply;
	border-radius: 16px;
	position: relative;
	background: #f4f5f5 no-repeat center/cover;
	transition: 0.3s ease-in-out;
}

.pinterest-preview .pinterest-main-content:hover {
	background-color: #d6d8da;
}

.pinterest-preview .pinterest-main-content > img {
	width: fit-content;
	max-height: inherit;
	border-radius: 16px;
}

.pinterest-preview .pinterest-main-content > video {
	width: inherit;
	max-height: inherit;
	z-index: 1;
	border-radius: 16px;
	object-fit: cover;
}

.pinterest-preview .pinterest-main-content > iframe {
	border-radius: 16px;
}

.pinterest-preview .save {
	position: absolute;
	background: #e60224;
	top: 14px;
	right: 14px;
	padding: 17px;
	opacity: 0.9;
	color: #fff;
	font-size: 15px;
	line-height: 1.07;
	border-radius: 24.5px;
	z-index: 2;
	min-width: 70px;
	min-height: 50px;
}

.pinterest-preview .pinterest-main-content .save,
.pinterest-preview .pinterest-main-content .action-container {
	opacity: 0;
	transition: 0.3s ease-in-out;
}

.pinterest-preview .pinterest-main-content:hover .save,
.pinterest-preview .pinterest-main-content:hover .action-container {
	opacity: 0.9;
}

.pinterest-preview .action-container {
	position: absolute;
	bottom: 14px;
	display: flex;
	justify-content: space-between;
	width: 100%;
	z-index: 3;
}

.pinterest-preview .action-container .landing-page {
	margin-left: 10px;
	background: #fff;
	opacity: 0.9;
	border-radius: 16px;
	padding: 7px 10px 7px 27px;
	font-size: 15px;
	line-height: 18px;
	overflow: hidden;
	white-space: nowrap;
	max-width: 172px;
	text-overflow: ellipsis;
}

.pinterest-preview .action-container .landing-page::before {
	font-family: "Font Awesome 6 Pro";
	content: "\f061";
	font-size: 14px;
	transform: rotate(-45deg);
	position: absolute;
	left: 20px;
}

.pinterest-preview .action-container .download {
	opacity: 0.9;
	background: #fff;
	margin-right: 14px;
}

.pinterest-preview .lower-content {
	margin-top: 8px;
	font-size: 14px;
	padding-left: 5px;
}

.pinterest-preview .lower-content .title {
	margin: 0 0 8px 0;
	max-width: 180px;
	line-height: 16px;
}

.pinterest-preview .lower-content .shape-container {
	display: grid;
	grid-template-columns: 32px auto;
	grid-gap: 6px;
}

.pinterest-preview .lower-content .shape-grid {
	display: grid;
	grid-template-columns: auto 30px;
	justify-content: space-between;
}

.pinterest-preview .shape-grid > i {
	align-self: center;
	font-size: 14px;
	color: #d6d8da;
}

.pinterest-preview .lower-content .shape-container .rectangle {
	margin-top: 5px;
}

.pinterest-preview .preview-missing-media {
	width: 236px;
	height: 354px;
	border-radius: 16px;
}


/******************
* CAROUSEL STYLES *
*******************/
.pinterest-preview.carousel {
	--pinterest-card-width: 236px;
	width: var(--pinterest-card-width);
}

.pinterest-preview.carousel .pinterest-main-content .overlay {
	background: #aeb2b5;
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 16px;
	transition: 0.3s ease-in-out;
}

.pinterest-preview.carousel .pinterest-main-content:hover .overlay {
	opacity: 0.2;
}

.pinterest-preview.carousel .paginator {
	width: var(--pinterest-card-width);
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.pinterest-preview.carousel .paginator span.card-indicator {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #eaebec;
	margin: 0 4px;
}

.pinterest-preview.carousel .paginator span.card-indicator.active {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #374047;
}

.pinterest-preview.carousel .card-container {
	display: inline-flex;
	justify-content: flex-start;
	position: relative;
	transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.pinterest-preview.carousel .numeric-paginator {
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	width: 27px;
	height: 24px;
	border-radius: 12px;
	padding: 5px;
	background: #d8d8d8;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: bold;
	transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.pinterest-preview.carousel:hover .numeric-paginator {
	opacity: 0;
}

.pinterest-preview.carousel .lower-content {
	width: var(--pinterest-card-width);
	margin-top: 0;
}

.pinterest-preview.carousel .pinterest-main-content {
	position: relative;
}

.pinterest-preview.carousel .direction-btn {
	position: absolute;
	width: 13px;
	height: 12px;
	color: #fff;
	font-size: 20px;
	top: calc(50% - 38px);  /*center within parent*/
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	cursor: pointer;
}

.pinterest-preview.carousel:hover .direction-btn {
	opacity: 1;
}

.pinterest-preview.carousel:hover .direction-btn.hidden {
	opacity: 0;
	display: none;
}

.pinterest-preview.carousel .direction-btn.next {
	right: 9px;
}

.pinterest-preview.carousel .direction-btn.prev {
	left: 9px;
}

.pinterest-preview.carousel .action-container .landing-page {
	padding-left: 15px;
}

.pinterest-preview.carousel .action-container .landing-page::before {
	display: none;
}
/**
 * Snapchat General
 */

/**
 * Snapchat Image
 */

/**
 * Snapchat Video
 */
.snapchat-preview {
	width: 315px;
	height: 560px; /* TODO: calculate aspect ratio: what is the aspect ratio wanted?*/
	font-weight: bold;
	font-size: 13px;
	color: #fff;
	font-family: Arial;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.snapchat-preview img {
	width: 315px;
	height: 560px;
	position: absolute;
}

.snapchat-preview iframe {
	position: absolute;
	border: none;
}

.snapchat-preview.is-video {
	background: none;
	width: inherit;
	position: relative;
}

.snapchat-preview.is-video video {
	z-index: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

.snapchat-preview .snapchat-main-content {
	display: grid;
	grid-template-rows: 80px auto;
	align-content: space-between;
	width: 315px;
	position: relative;
}

.snapchat-preview .shadow {
	text-shadow: 0 0 15px #000;
}

.snapchat-preview .snapchat-main-content .snapchat-header p {
	color: #fff;
	margin: 0;
	padding-left: 10px;
}

.snapchat-preview .snapchat-header p.brand-name {
	padding-top: 2px;
}

.snapchat-preview .snapchat-header p.headline {
	font-size: 11px;
	line-height: 1.1em;
}

.snapchat-preview .snapchat-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	width: 100%;
}

.snapchat-preview .snapchat-footer .ad-cta {
	background: #fff;
	height: 30px;
	border-radius: 14px;
	text-align: center;
	vertical-align: middle;
	line-height: 30px;
	margin-bottom: 10px;
	color: #000;
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
	text-shadow: none;
	font-size: 12px;
	cursor: pointer;
	white-space: nowrap;
	padding: 0 15px
}

.snapchat-preview .ad-cta::before {
	font-family: "Font Awesome 6 Pro";
	content: "\f077";
	position: absolute;
	color: #fff;
	bottom: 32px;
	left: 152px;
	font-size: 14px;
	font-weight: 400;
	text-shadow: 0 0 15px #000;
}

.snapchat-preview .snapchat-footer p.footnote {
	position: absolute;
	right: 7px;
	bottom: 3px;
	margin: 0;
}

.snapchat-preview .preview-missing-media {
	width: 315px;
	height: 560px;
	position: absolute;
}
.tiktok-preview {
	width: 315px;
	height: 560px;
	background: #000;
	position: relative;
	font-family: Arial;
}

.tiktok-preview iframe {
	border: none;
}

.tiktok-preview .main-content,
.tiktok-preview video.tiktok {
	width: inherit;
	height: inherit;
	max-width: 315px;
	max-height: 560px;
}

.tiktok-preview .main-content .text-controls {
	position: absolute;
	top: 11px;
	display: flex;
	width: 100%;
	color: #fff;
	justify-content: center;
}

.tiktok-preview .main-content .text-controls p.following {
	padding-right: 5px;
}

.tiktok-preview .main-content .text-controls p.for-you {
	padding-left: 5px;
}

.tiktok-preview .lower-content-container {
	position: absolute;
	left: 0;
	bottom: 46px;
	padding: 0 16px;
	font-size: 12px;
	color: #fff;
}

.tiktok-preview .lower-content-container.missing-media {
	color: #858c90;
}

.tiktok-preview .lower-content-container.missing-media .cta {
	color: #fff;
}

.tiktok-preview .lower-content-container p {
	margin: 0;
}

.tiktok-preview .lower-content-container .primary-text {
	line-height: normal;
	margin-bottom: 4px;
	width: 205px;
}

.tiktok-preview .lower-content-container .sponsored {
	width: 50px;
	height: 13px;
	border-radius: 3px;
	padding: 2px 4px;
	background: rgba(255, 255, 255, 0.5);
	font-size: 8px;
	margin: 8px auto 10px;
}
.tiktok-preview .lower-content-container .promoted-music > i {
	color: #fff;
	font-size: 12px;
	margin: 10px 6px 8px auto;
}

.tiktok-preview .lower-content-container .cta {
	height: 30px;
	width: 220px;
	background: rgba(133, 140, 144, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	color: #fff;
}

.tiktok-preview .circle-icon-bar {
	position: absolute;
	background: #000;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	bottom: 0;
	width: 100%;
}

.tiktok-preview .right-side.circle-icon-bar {
	bottom: unset;
	top: 204px;
	right: 0;
	flex-direction: column;
	height: auto;
	background: transparent;
	width: unset;
}

.tiktok-preview .circle-icon-bar .circle-icon {
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #374047;
}

.tiktok-preview .right-side.circle-icon-bar .circle-icon {
	background: #d6d8da;
	height: 40px;
	width: 40px;
	margin: 0 15px 19px 0;
}

.tiktok-preview .right-side.circle-icon-bar .circle-icon:nth-last-child(2) {
	margin-bottom: 53px;
}

.tiktok-preview .lower.circle-icon-bar .circle-icon:nth-of-type(3) {
	width: 28px;
	height: 28px;
}/**
 * Twitter General
 */

/**
 * Twitter Image
 */

/**
 * Twitter Video
 */
.twitter-preview {
	max-width: 565px;
	grid-template-columns: 60px auto;
	grid-auto-rows: minmax(100px, auto);
	font-size: 14px;
	font-family: Arial;
}

.twitter-preview .twitter-main-content {
	width: inherit;
}

.twitter-preview .twitter-main-content .twitter-header {
	min-height: 50px;
	width: 100%;
	position: relative;
}

.twitter-preview .text-container {
	max-width: 505px;
}

.twitter-preview .text-container > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.twitter-preview .text-container i {
	color: #d6d8da;
	font-size: 14px;
}

.twitter-preview .header-text {
	margin-top: 5px;
	max-width: 505px;
	line-height: 20px;
	margin-bottom: 13px;
}

.twitter-preview .media-container {
	width: 505px;
	border-radius: 16px;
	position: relative;
	overflow: hidden;
}

.twitter-preview .media-container img,
.twitter-preview .media-container video {
	width: 100%;
	min-height: 200px;
	height: auto;
	border-radius: 16px 16px 0 0;
	display: block;
	margin: 0 auto;
}

.twitter-preview .link-container {
	background: #fff;
	padding-bottom: 15px;
}

.twitter-preview .media-container .link-container > p {
	padding: 8px 15px 0;
	margin-bottom: 0;
}

.twitter-preview .media-container .link-container > span {
	padding-left: 15px;
	color: #5e666b;
}

.twitter-preview .link-container > span.link::before {
	font-family: "Font Awesome 6 Pro";
	content: "\f0c1";
	position: relative;
	padding-right: 5px;
}

.twitter-preview .lower-action-container,
.twitter-preview .action {
	display: grid;
}

.twitter-preview .lower-action-container {
	grid-template-columns: repeat(3, 135px) auto;
	width: 505px;
}

.twitter-preview .action {
	grid-template-columns: 18px 1fr;
	align-items: center;
	grid-gap: 8px;
	padding: 15px 0 0 8px;
}

.twitter-preview .action:last-child {
	padding-left: 12px;
}

.twitter-preview .preview-missing-media {
	width: 506px;
	height: 282px;
}
.youtube {
	font-family: "Roboto", "Open Sans", "Arial", sans-serif;
}

/* youtube video aspect ratio is 16:9 */
.youtube .youtube-video-wrapper {
	width: 640px;
	height: 360px;
	background-color: black;
	display: flex;
	/*align-items: center;*/
	justify-content: center;
}

.youtube-video-wrapper video {
	object-fit: contain;
	max-width: 100%;
	max-height: 100%;
}

.youtube-discovery .video-preview {
	margin-top: 26px;
	width: 100%;
}

.youtube-instream .landing-page {
	max-width: 140px; /* judgement call about how wide this can be */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.youtube-discovery .video-label {
	font-size: 12px;
	color: #858c90
}

.youtube-discovery {
	width: calc(640px + var(--preview-padding) + var(--preview-padding));
	display: flex;
	align-items: center;
	position: relative;
	flex-flow: column nowrap;
	width: 640px;
}

.youtube-discovery .video-title {
	font-size: 20px;
}

.youtube-discovery .ad-preview {
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
}
.youtube-discovery .card-label {
	font-size: 12px;
	color: #858c90;
}
.youtube-discovery .card {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}
.youtube-discovery .image-container {
	margin: 0px 8px 0px 0px;
	height: 94px;
	width: 168px;
}
.youtube-discovery img {
	height: 100%;
	width: 100%;
	background: #000;
	object-fit: contain;
}
.youtube-discovery .context {
	line-height: 1.2;
	align-self: flex-start;
	display: flex;
	flex-flow: column nowrap;
	flex: 0 1 auto;
}
.youtube-discovery .headline {
	font-size: 14px;
	font-weight: bold;
	color: #2d7ebf;
	line-height: 1.6;
}

.youtube-discovery .account {
	display: flex;
}

.youtube-discovery .ad {
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	width: 23px;
	height: 18px;
	margin-right: 10px;
	padding: 2px 4px;
	border-radius: 2px;
	background-color: #fbc02d;
}

.youtube-discovery .ft-ic.ad-icon {
	display: inline-block;
	color: #fbc02d;
	font-size: 20px;
	font-weight: bold;
	padding: 0px;
	margin: 0px 5px 0px 0px;
	border-radius: 2px;
}

.youtube-discovery .description-1,
.youtube-discovery .description-2 {
	color: #767676;
	font-size: 13px;
}

.missing-youtube-discovery-image {
	width: 100%;
	height: 100%;
	background-color: #eaebec;
	color: #858c90;
	font-size: 12px;
	text-align: center;
	padding-top: 24px;
}

.missing-youtube-discovery-image i.ft-ic {
	color: #858c90;
	font-size: 19px;
}

.youtube-instream {
	width: calc(640px + var(--preview-padding) + var(--preview-padding));
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex: 0 0 auto;
}

.youtube-instream-container p.thumbnail-message,
.youtube-instream-container p.video-message {
	margin-bottom: 7px;
	font-size: 12px;
	color: #858c90;
}

.youtube-instream-container .thumbnail-container  {
	width: 170px;
	height: 115px;
	margin-bottom: 40px;
	background: #d8d8d8;
	display: flex;
	align-items: center;
	justify-content: center;
}

.youtube-instream-container .thumbnail-container img.thumbnail-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.youtube-instream-container .missing-thumbnail {
	display: flex;
	align-items: center;
	justify-items: center;
	flex-wrap: wrap;
	text-align: center;
}

.youtube-instream-container .missing-thumbnail i {
	margin: 20px auto 0 auto;
	color: #aeb2b5;
}

.youtube-instream-container .missing-thumbnail p.no-thumbnail {
	width: 100%;
	font-size: 12px;
	color: #858c90;
	line-height: 1;
}article[class*="-preview"] {
	display: grid;
}

article[class*="-preview"] .bold {
	font-weight: bold;
}

.circle {
	border-radius: 50%;
}

.rectangle,
.square,
.circle {
	background: #eaebec;
}

/* dimension classes */
.h-10 {
	height: 10px;
}

.h-16 {
	height: 16px;
}

.w-16 {
	width: 16px;
}

.w-18 {
	width: 18px;
}

.h-18 {
	height: 18px;
}

.w-30 {
	width: 30px;
}

.h-30 {
	height: 30px;
}

.w-32 {
	width: 32px;
}

.h-32 {
	height: 32px;
}

.h-44 {
	height: 44px;
}

.w-44 {
	width: 44px;
}

.w-50 {
	width: 50px;
}

.h-50 {
	height: 50px;
}

.w-90 {
	width: 90px;
}

.w-100 {
	width: 100px;
}

.w-100 {
	width: 100px;
}

.w-130 {
	width: 130px;
}

.w-150 {
	width: 150px;
}

/* end dimension classes */
article[class*="-preview border"],
*[class*="media-container border"] {
	border: 1px solid #d6d8da;
}

[class$="-media-container grey"]{
	background: #d6d8da;
}

article[class*="-preview"] .landing-page {
	text-decoration: none;
	color: #5e666b;
}/**
 * General App styles
 */
:root {
	font-family: "Proxima Nova", sans-serif;
	font-size: 16px;

	/**
	 * These are general App specific colors and dimension used
	 * Heights and widths are useful for calculating dimensions via calc(100% - var())
	 * Colors should be used whenever possible to keep things consistent and easy to update
	 */

	--app-header-height: 64px;
	--breadcrumbs-height: 64px;
	--pager-height: 42px;
	--toolbar-height: 50px;
	--app-theme: #2d7ebf;

	--modal-header-height: 42px;
	--modal-footer-height: 60px;

	/* We use these variables to make the top of blade modals butt against the App Header. */
	--blade-modal-displacement: calc(var(--app-header-height) - 3px);
	--blade-height: calc(100% - var(--blade-modal-displacement));
	--blade-content-height: calc(100% - var(--modal-header-height) - var(--modal-footer-height));

	--green-success: #52bc68;
	--red-fail: #d0021b;
	--app-blue: #2d7ebf;
	--app-black: #374047;
	--app-grey: #262626;

	--creative-primary:#414BF9;
	--creative-secondary:#ECEDFE;
	--activation-primary:#8C23D7;
	--activation-secondary: #F3E9FB;
	--analytics-primary: #009CEB;
	--analytics-secondary: #E4F5FE;
}
body {
	margin: 0;
	padding: 0;
}

.creative {
	--current-primary:var(--creative-primary);
	--current-secondary:var(--creative-secondary);
}
.activation {
	--current-primary:var(--activation-primary);
	--current-secondary:var(--activation-secondary);
}
.analytics{
	--current-primary:var(--analytics-primary);
	--current-secondary:var(--analytics-secondary);
}

.space-ship {
	.nav-side {
		.ft-app-select {
			box-shadow: 1px 0 0 0 #333668 !important;

			.ft-ic {
				color:#595959;
			}
		}
	}
}

.ft-header .ft-nav-item.is-active {
	box-shadow: 0 4px 0 0 var(--app-blue);
}

.progress-indicator { cursor: default; }
.progress-indicator .generating-circle { color: var(--app-theme); }

.nav-side {
	.ft-app-select {
		.ft-select__control {
			background-color:#333668;
			border-color: transparent;
		}

		.ft-select__placeholder {
			color:#fff;
			font-size: 14px;
			line-height: 20px;
		}
		.ft-ic {
			color:#fff !important;
		}
		.ft-select__input { color:#fff !important; }
	}

	.ft-user-info {
		.user-icon::before {
			content:"\f2bd";
		}
	}
}
.ft-header .ft-nav-item span.welcome-who {
	color:#fff;
}


/**
 * Enhanced Tooltip Styles
 **/
	.space-ship .app-level-tooltip {
		z-index: 10000000000;
		padding: 2px 5px;
		font-size: 13px;
		color: #fff;
		background-color: var(--app-black);
		 /* margin-top: -3px !important; */
		opacity: 1;
}
/**
 * For some reason, rhombus decides to treat the global <footer /> element stupidly
 * This resets it so we can use it in other places in the code
 */
footer {
	position: relative;
	top: auto;
	bottom: auto;
	z-index: auto;
	background-color: inherit;
	width: auto;
	left: auto;
	padding: 0;
	margin: 0;
	line-height: inherit;
	font-size: inherit;
	text-align: left;
}
footer span { font-weight: normal; }


/* *** */
/* rhombus v3.0.0-beta-2 */
.ft-header .logo-side{
	.ft-logo img{
		margin-top: 0;
	}
	.c-environment-badge{
		height: 24px;
	}
}
/* *** */
/**
 * Global Styles
 */


/**
 * Use Font Awesome Pro
 */
.e-form__control-wrapper .e-form__control-label::after {
	font-family: "Font Awesome 6 Pro";
}


/**
 * Flashtalking applications make us of rhombus-react
 * 		Oftentimes there are additional styles which belong in rhombus-react
 * 		But because we haven't yet released the latest version
 * 		Or we're waiting for other features, we can backport those CSS classes into here to take effect
 * 		Remeber to remove the styles, once project has been updated, or else you'll have duplicate CSS
 */

/*****************************************
 * Ported from Rhombus version 2.5.2
 * Remove when upgraded to Rhombus 2.5.2
 */

/**
 * End Rhombus Port
 *******************/