@charset "UTF-8";/**
 * Descriptor Group Styles
 */

.descriptor-group {
	border-top:1px solid #f4f5f5;

	h4 {
		color:var(--default-mid);
		text-transform: uppercase;
		margin: 15px 0;

		font-weight: bold;
		font-size: 12px;
	}

	.descriptor-form {
		header {
			font-weight: bold;
		}
		.e-form__control-wrapper {
			margin: 0;
		}

		header,
		.descriptor-row {
			display:grid;
			grid-template-columns:165px 1fr 30px;
			grid-gap: 10px;
			margin: 5px 0 0 0;

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

		.c-button--ghost {
			background:none;
			border:none;
			font-size: 12px;
			font-weight:normal;

			&.add-descriptor {
				color:var(--blue-mid);
			}

			&.remove-descriptor {
				height: 40px;
			}
			&.remove-descriptor .ft-ic {
				color:var(--default-mid);
				margin: 0;
			}

			&:active,
			&:focus,
			&:hover {
				box-shadow: none;
				outline: none;
				border: none;
				background: none;

				.add-descriptor{
					color:var(--blue-dark);
				}
				.ft-ic {
					color:var(--default-dark);
				}
			}
		}	/* End .c-button--ghost */

	}
}
/**
 * Advertiser Objectives Styles
 */

.card-wrapper.objectives-card{
	.card-content-wrapper{
		contain: strict;

		.card-content{
			padding: 0;

			.objectives-container{
				.header-section{
					display: flex;
					padding: 10px 20px;

					.info{
						align-content: center;
						font-size: 12px;
					}

					.archived-toggle {
						margin-right: 10px;
					}

					.info{
						flex-grow: 1;
					}
				}

				.grid-container{
					contain: strict;
					height: 300px;

					&.has-grid{
						height: var(--min-grid-height);
					}

					.empty-item {
						box-shadow:none;
						border:none;
					}
				}
			}
		}
	}
}

.spot-group-container .react-select-holder .react-select__indicators:has(.react-select__loading-indicator) {
	width:60px;
}
.redux-form-container.advertiser-form{
	.sub-options .e-form__control-wrapper{
		width: calc(750px - 2rem);
	}

	.checkbox-section{
		.e-form__control-wrapper{
			margin: 0 1rem;
		}
	}

	.advertiser-settings-general{
		width: 500px;
	}

	.advertiser-settings-cookieless{
		.cookieless-table{
			font-size: 12px;

			.header-row{
				font-weight: bold;

				&:not(:first-child){
					border-top: 3px solid #eaebec;

					td{
						padding-top: 10px;
					}
				}

				td{
					height: 30px;
				}
			}

			tr:not(:last-child):not(.header-row){
				border-bottom: 1px solid #eaebec;
			}

			td{
				height: 45px;
			}

			.checkbox-component{
				margin: 0;
			}
		}
	}

	.advertiser-settings-team{
		.contact-selection-group .e-form__control-wrapper{
			margin-left: 0;
			width: calc(500px - 2rem);
		}
	}

	.creative-settings{
		.classification-options.sub-options{
			margin-bottom: 0;
		}

		.checkbox-section.advanced{
			margin-top: 1rem;
		}
	}
}
/**
 * Spot List Styles
 */

.selected-spot-list {
	overflow-y: auto;
}
.spot-group-list {
	margin-left: 1rem;
	margin-bottom: 15px;
	border-bottom:1px solid #d6d8da;
	font-size: 12px;
}
.spot-group-list:last-child {
	border-bottom-color: transparent;
}

.spot-group-header,
.spot-group-list .spot-list .spot-row {
	margin:0;
	display: flex;
	align-items: center;
	transition:0.2s ease;
	padding:3px 0;
}
.spot-group-list .spot-list .spot-row label {
	flex-grow: 1;
}
.spot-group-list .spot-group-header strong {
	flex-grow: 1;
}
.spot-group-list button {
	width: 70px;
	font-weight: normal;
	padding: 0;
	margin: 0;
}
.spot-group-list .view-more {
	width:inherit;
	margin-left: 5px;
}
.spot-group-list button:not(.view-more,.remove-all) {
	color: inherit;
}
.spot-group-list button.remove-all{
	background-color: transparent;
	color: var(--app-blue);
	font-size: 12px;

	&:hover .button-content{
		text-decoration: underline;
	}
}

.selected-spot-list button:hover {
	background-color: transparent !important;
	border-color: transparent !important;
	color: #374047 !important;
}

.spot-group-list .spot-row button.remove-row{
	background-color: transparent;

	&:focus{
		border-color: transparent;
	}

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

.spot-group-list .spot-row:has(button:hover) {
	background-color:#eaebec;
}

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

.spot-group-list .spot-list .spot-row::before {
	content:"\e0c9";
	font-family:"Font Awesome 6 Pro";
	margin-right: 10px;
	font-size: 16px;
}
/**
 * Objective Modal Styles
 */
.objective-modal {
	background-color: #f4f5f5;
}
.objective-modal .c-modal__content.c-modal__content--footer {
	overflow-y: scroll;
}
.objective-modal .ref-holder {
	height: 100%;
}
.objective-modal .objective-form {
	width:50%;
	height: 100%;
}
.objective-modal .objective-form .objective-name,
.objective-modal .objective-form .kpi-select {
	margin-right: 0;
}

.objective-modal .objective-form .spot-list-selector {
	display: flex;
}

.objective-modal .objective-form .spot-group-select-wrapper {
	width:calc(100% - 77px);
}
.objective-modal .objective-form .spot-list-select-wrapper {
	flex-grow: 1;
	margin-top: 0;
}

.objective-modal .objective-form .spot-list-selector .add-spots {
	height: 36px;
}

.objective-modal .conversion-label {
	display: flex;
	align-items: center;
	color: #4a4a4a;
	font-weight: bold;
	font-size: 12px;
	margin-left: 1rem;
	margin-bottom: 10px;
	padding: 16px 0;
	border-bottom: 1px solid #d6d8da;
}

.objective-modal .conversion-label .fa-info-circle { margin-left: 5px; }
/**
 * Base Blade Styles
 */

.ai-base-blade {
	.progress-container-scrollable {
		overflow-y: hidden;
	}

	.layout-container {
		.c-modal__content {
			padding: 10px 30px;
		}
	}

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

	textarea {
		height: 75px;
		resize: vertical;
	}
}
/**
 * MetaCard Styles
 */

.meta-list {
	display: flex;
	padding: 50px;
	flex-wrap: wrap;

	overflow-y: scroll;
	/* TODO: get the variables for these dimensions */
	height:calc(100vh - var(--app-header-height) - var(--advertiser-header-height) - 60px);
}

.meta-item-card {
	width: 300px;
	height: 370px;
	background: #fff;
	border-radius: 3px;
	border: 1px solid #eaebec;
	margin: 10px;
	position: relative;
	display: grid;
	grid-template-rows: 60px 1fr 40px;

	header {
		padding: 20px;
		border-bottom: 1px solid #eaebec;
		display: grid;
		grid-template-columns: 1fr 30px;
		grid-column-gap: 40px;
		align-items: center;

		h3 {
			margin: 0;
			font-size: 12px;
			text-transform: uppercase;
			overflow-y: hidden;
		}
		.archive-icon {
			font-size: 13px;
			text-align: center;
		}
		.action-icon {
			color:var(--default-mid);
		}
	}

	&.is-archived {

		header {
			grid-template-columns: 20px 1fr 20px;
			grid-column-gap: 5px;
		}
	}

	.meta-information {
		padding: 20px 20px 0 20px;
		font-size: 12px;
		width:300px;
	}

	dl { margin-bottom: 0; }

	dt {
		line-height: normal;
	}
	dd {
		color:#858c90;
		line-height: normal;
		margin-bottom: 10px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	footer {
		padding:0 20px;
		font-size: 12px;
		align-content: end;
		padding-bottom: 20px;
		width: 298px;
	}
}
.redux-form-container.campaign-defaults-form{
	.campaign-defaults-general{
		.insert-text-wrapper{
			width: 75%;
		}

		.currency-select{
			width: 150px;
		}
	}

	.campaign-defaults-spot-groups{
		.e-form__control-wrapper{
			width: 500px;
		}
	}

	.campaign-defaults-verification{
		.e-form__control-wrapper{
			width: 300px;
		}

		.sub-options .e-form__control-wrapper{
			width: 500px;
		}

		.pop-up-dimensions-container{
			label{
				color: #4a4a4a;
				font-weight: 700;
				font-size: 12px;
				margin-left: 1rem;
			}
		}

		.inline-controls{
			display: flex;

			span{
				line-height: 32px;
			}

			.e-form__control-wrapper{
				width: 100px;
				margin-top: 0;
			}
		}

		.ad-viewability-container .e-form__control{
			.post-content{
				color: #858c90;
			}
		}
	}
}
/**
 * InitativeAccess Styles
 */
.initiative-access.remove-users {
	.remove-table-container {
		height: 300px;
		overflow-y: scroll;

		th.select-cell {
			z-index: 10;
		}
	}
	.basic-table {
		width:100% !important;
		table-layout: fixed;
	}
}
.c-modal.initiative-blade{
	.progress-container{
		height: 100%;

		.progress-container-scrollable{
			height: 100%;
			overflow-y: auto;
		}
	}

	form{
		height: 100%;
		padding: 1rem;

		div.divider{
			border-top: 1px solid #eaebec;
		}

		.e-form__control-wrapper{
			padding: 1rem 0;

			&:first-child{
				padding-top: 0;
			}

			label > span{
				font-weight: normal;
				margin: 0 2px 0 5px;
			}
		}

		&.details{
			.multi-select-section{
				.clear-list:not(:hover){
					color: var(--app-blue);
				}

				.selected-item{
					font-size: 12px;

					> span{
						align-items: center;
						display: inline-flex;

						&::before{
							color: #858c90;
							font-family: "Font Awesome 6 Pro";
							font-size: 16px;
							margin: 0 6px;
						}
					}

					.ft-ic.remove-icon:hover{
						color: var(--app-black);
					}
				}

				&.objectives .selected-item > span::before{
					content: "\f058";
					font-weight: 900;
				}

				&.campaigns .selected-item > span::before{
					content: "\f135";
				}
			}
		}

		&.access{
			div.divider{
				margin: 20px 0;
			}

			section{
				font-size: 12px;

				&.add-users{
					.ft-ic{
						color: var(--green-success);
					}

					textarea{
						height: 100px;
						resize: none;
					}
				}

				&.remove-users{
					.header .ft-ic{
						color: var(--red-mid);
					}

					.empty-item{
						box-shadow: none;
						height: 200px;
						margin: 10px 0;

						.ft-ic{
							color: var(--gray-dark);
							font-size: 19px;
						}
					}

					.basic-table{
						.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;
										}
									}
								}
							}
						}
					}
				}

				.header{
					font-weight: bold;
					text-transform: uppercase;

					.ft-ic{
						font-size: 13px;
						margin-right: 10px;
					}
				}
			}
		}
	}
}
.content-side.initiatives{
	display: flex;
	flex-direction: column;

	.empty-item{
		h4{
			color: var(--app-black);
			font-size: 16px;
		}

		p{
			font-size: 13px;
			text-align: center;
			width: 430px;
		}
	}
}

.initiatives-button-tooltip {
	max-width: 150px;
}
/**
 * Integrations Toolbar Styles
 */
/**
 * @4. Expand/Collapse All
 */
/* TODO: this is probably also in adv settings & camp defaults, and should be consolidated in App.css */
.integrations-toolbar .controls-side .toggle-card-expand {
	cursor: pointer;
	font-size: 12px;
	color: #2d7ebf;
	margin-left: 20px;
	transition: 0.3s ease;
}

.integrations-toolbar .controls-side .toggle-card-expand .ft-ic {
	font-size: 12px;
	color: #2d7ebf;
	margin-right: 6px;
	transition: 0.3s ease;
}

.integrations-toolbar .controls-side .toggle-card-expand:hover,
.integrations-toolbar .controls-side .toggle-card-expand:hover .ft-ic {
	color:var(--app-black);
}
/**
 * Partner Chiclet Styles
 */

.partner-chiclet {
	position: relative;
	width: 300px;
	height: 300px;
	border-radius: 3px;
	border: solid 1px #d6d8da;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	transition: 0.2s ease-in;
}

.partner-chiclet:hover {
	box-shadow: 0 2px 16px 0 #d6d8da;
}

.partner-chiclet header {
	height: 60px;
	border-bottom: solid 1px #eaebec;
	font-size: 12px;
	padding: 0 20px;
	position: relative;
	font-weight: bold;

	display: grid;
	align-items: center;
	grid-template-columns: 1fr 25px;
	justify-items: left;

	.action-menu-container{
		font-weight: normal;
	}
}

.partner-chiclet figure {
	display: grid;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	flex-grow: 1;
	margin: 0;
	grid-template-areas:
		"logo"
		"archive"
		"name";
	grid-template-rows: 1fr 25px auto;
	padding-bottom: 25px;
}

.partner-chiclet figure img {
	max-height: 140px;
	max-width: 200px;
	grid-area: logo;
	margin: 0 auto;
}
.partner-chiclet .status {
	grid-area: archive;
}
.partner-chiclet figcaption {
	grid-area: name;
}
/**
 * Advertiser Integrations Styles
 */
.advertiser-integration-partners{
	height: 100%;
}

.integrations-container .integrations-content {
	padding: 8px 30px;
	text-align: center;
	flex-grow: 1;
	height: calc(100% - var(--toolbar-height));
	overflow-y: scroll;
}

.integrations-container .chiclet-container.partner-chiclets {
	margin-top: 10px;
	margin-bottom: 40px;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(4, 300px);
	transition: 0.2s ease;
}

@media only screen and (min-width : 300px) {
	.integrations-container .chiclet-container.partner-chiclets {
		grid-template-columns: repeat(1, 300px);
	}
}

@media only screen and (min-width : 890px) {
	.integrations-container .chiclet-container.partner-chiclets {
		grid-template-columns: repeat(2, 300px);
	}
}

@media only screen and (min-width : 1210px) {
	.integrations-container .chiclet-container.partner-chiclets {
		grid-template-columns: repeat(3, 300px);
	}
}

@media only screen and (min-width : 1530px) {
	.integrations-container .chiclet-container.partner-chiclets {
		grid-template-columns: repeat(4, 300px);
	}
}

@media only screen and (min-width : 1850px) {
	.integrations-container .chiclet-container.partner-chiclets {
		grid-template-columns: repeat(5, 300px);
	}
}

@media only screen and (min-width : 2170px) {
	.integrations-container .chiclet-container {
		grid-template-columns: repeat(6, 300px);
	}
}
/**
 * Integrations Table Styles
 */
.basic-table.product-integrations-table{
	margin-bottom: 0;

	tr:last-child td{
		border-bottom: none;
	}

	th,
	td{
		border-width: 0.5px;

		&:first-child{
			border-left: none;
		}

		&:last-child{
			border-right: none;
		}
	}

	.name-col {
		min-width:40%;
		padding-right: 0;

		.overflow-archive {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.archive-icon {
				margin-right: 10px;
				font-size: 14px;
			}
		}
	}

	.actions-col{
		width: 75px;
		padding: 0;
	}

	.notes-col {
		max-width: 30vw;
	}

	.date-col {
		white-space: nowrap;
		width: 140px;
	}
}

.empty-product-integrations-table.empty-item {
	button { pointer-events: all; }
}
.product-info-modal {
	width: 700px;
	height: 365px;

	.layout-container{
		.c-modal__content{
			color: #4a4a4a;
			padding: 30px;

			h5{
				margin-bottom: 0;
				font-size: 13px;
				line-height: 19px;
			}
		}
	}
}
.integration-authorization{
	padding: 0 1rem;

	> a,
	> button,
	> span{
		display: block;
		margin-bottom: 10px;
	}

	> a{
		display: inline-block;
	}

	> span{
		font-size: 12px;
	}
}
.c-modal.u-modal-responsive.fb-pages-modal {
	.c-modal__content{
		height: 263px;
		padding: 0;
		width: 700px;

		ul {
			margin: 0;
		}

		li {
			list-style-type: none;
			border-bottom: 1px solid #d6d8da;
			padding: 5px 20px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			&:first-child {
				font-weight: bold;
				padding-top: 10px;
			}

			&:last-child{
				border-bottom: 0;
				padding-bottom: 10px;
			}
		}
	}
}
.integration-connection-modal .facebook-account-id-section a{
	cursor: pointer;
}
.integration-connection-modal .facebook-account-id-section .account-id-message.warn-message{
	color: #f3824f;
}
.integration-form{
	flex-grow: 1;
	overflow-y:auto;

	.e-form__control-wrapper:not(.text-area-control),
	.additional-fields-section .account-id-message{
		width: 500px;
	}

	.e-form__control-wrapper{
		.e-form__control.is-text-area {
			height: auto;
			width: fit-content;
		}

		textarea {
			min-height: 200px;
			min-width: 500px;
			max-height: 500px;
			max-width: 1000px;
		}
	}
}
.c-modal.integration-connection-modal {
	--form-header-height: 70px;

	.layout-container .c-modal__content{
		background-color: #f4f5f5;
		padding: 0;

		.form-header {
			align-items: center;
			border-bottom: 1px solid #d6d8da;
			display: flex;
			height: var(--form-header-height);
			margin-left: -20px;
			padding: 0 30px;

			.product-logo {
				height: 30px;
				margin-right: 15px;
			}

			.product-title {
				flex-grow: 1;
			}
		}

		.integration-form-container{
			display: flex;
			flex-direction: column;
			padding-top: 2rem;
			height: calc(100% - var(--form-header-height));
		}
	}
}




.integration-connection-modal .additional-fields-section{
	display: flex;
	justify-content: space-around;
	width: fit-content;

	.account-id-message{
		margin: -1rem 1rem 1rem 1rem;
		font-size: 12px;
	}

	.c-button{
		height: fit-content;
		margin-top: 33px;
		position: relative;
	}

	.is-testing.is-disabled{
		background-color: #374047;
	}

	.c-button.is-testing .test-id-text{
		opacity: 0;
	}

	.c-button.is-testing .test-id-icon{
		position: absolute;
		left: calc(50% - 7px);	/* icon font size is 14px */
	}
}
/**
 * Product Integrations Container Styles
 */
.product-integrations-container {
	background-color: #ffffff;
	border: 1px solid #eaebec;
	margin-bottom: 20px;
	position: relative;
}

.product-integrations-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px;

	.c-button.is-disabled{
		pointer-events: all;
	}
}

.product-integrations-header .product-logo {
	max-height: 34px;
	margin-right: 14px;
}

.product-integrations-header .product-title {
	color: #4a4a4a;
}

.product-integrations-header .fa-info-circle {
	margin-left: 8px;
	font-size: 14px;
}

.product-integrations-header .menu-trigger {
	margin-left: 6px;
}

.product-integrations-header .fa-archive {
	margin-left: 15px;
	font-size: 14px;
}

.product-integrations-header .new-integration-button + .menu-trigger {
    padding: 0 2px;
}
/**
 * Partner Integration Settings
 */
.partner-integration-settings {
	height: 100%;

	/**
	 * @2. Header
	 */
	.partner-integration-header{
		.ft-ic.back-button {
			color: #858c90;
			cursor: pointer;
			font-size: 19px;
			margin-right: 8px;
			padding: 0;

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

	/**
	 * @3. Integration List
	 */
	.integration-list {
		padding:30px;
		height: calc(100% - var(--toolbar-height));
		overflow-y: scroll;

		.product-integrations-container{
			.product-integrations-header{
				.controls {
					display: flex;
					white-space: nowrap;
				}
			}

			section.empty-item.empty-product-integrations-table {
				border-top: 1px solid var(--grid-border-color);
				box-shadow: none;
				padding: 38px;
				margin: 0;

				p{
					color: var(--app-black);
					font-size: 16px;
					font-weight: bold;
				}
			}
		}

	}

}
/**
 * Product Chiclet Styles
 */
.product-chiclet {
	width: 200px;
	height: 175px;
	border-radius: 3px;
	border: solid 1px #eaebec;
	background-color: #ffffff;
	margin-right: 20px;
	margin-bottom: 20px;
	cursor: pointer;
	position: relative;
}

.product-chiclet.selected {
	background-color: #e8f5fb;
	border-color: #b8d1e5;
}

.product-chiclet.is-disabled {
	cursor: default;
	background-color: #f4f5f5;
}

.product-chiclet.is-disabled .selected-icon {
	color: #9fdaab;
}

.product-chiclet:hover {
	background-color: #f4f5f5;
	border-color: #b8d1e5;
}

/**
 * Header Section
 */
.product-chiclet header {
	display: grid;
	align-items: center;
	grid-template-areas:
		"info status selected";
	grid-template-columns: auto auto 24px;
	justify-items: left;
	padding: 10px 10px 0 10px;
	height: 30px;
}

.product-chiclet .info-container {
	cursor: pointer;
	grid-area: info;
	transition: 0.2s ease-in;
	opacity: 0;
	pointer-events: none;
	color: #aeb2b5;
}

.product-chiclet:hover .info-container {
	opacity: 1;
	pointer-events: all;
}

.product-chiclet .info-container:hover {
	color: #374047;
}

.product-chiclet .is-archived {
	font-size: 12px;
	color: #aeb2b5;
	justify-self: right;
	line-height: 13px;
}

.product-chiclet .selected-icon {
	color: #52bc68;
	font-size: 19px;
	grid-area: selected;
	justify-self:right;
}

/**
 * Content Section
 */
.product-chiclet figure {
	height: calc(100% - 30px);
	width: 100%;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	display: grid;
	grid-template-areas:
		"logo"
		"name";
	grid-template-rows: 1fr 25px;
	align-items: center;
	justify-items: center;
	padding-bottom: 15px;
}

.product-chiclet .product-logo img {
	max-height: 55%;
	max-width: 45%;
}

.product-chiclet figure figcaption {
	font-size: 12px;
	color: #858c90;
	text-align: center;
}

.product-chiclet:hover figure figcaption,
.product-chiclet.selected figure figcaption {
	color: #374047;
}
/**
 * Select New Integration Styles
 */

.select-new-integration-container{
	height: 100%;
	max-height: 100%;

	.form-action-footer {
		position: absolute;
		bottom: 0;
	}
}

/**
 * @3 Cards Contatiner
 */

.integration-cards-container {
	padding: 20px;
	height:calc(100% - var(--advertiser-header-height) - var(--modal-footer-height));
	overflow-y: scroll;
}

.integration-cards-container .c-cards {
	width: 100%;
	margin-bottom: 20px;
}

/* .integration-cards-container .c-cards label {
	font-size: 12px;
	font-weight: bold;
	margin-left: 10px;
} */

.integration-cards-container .chiclet-container {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	margin-right: -30px;
}
/**
 * Main Integrations Styles
 */
/* AdvertiserIntegrations -> PartnerChiclet */
/* SelectNewIntegration -> ProductChiclet */
.integrations-container .chiclet figure figcaption {
	font-size: 12px;
	color: #858c90;
	padding: 0 20px;
}
.side-nav-disabled{
	position: absolute;
	width: 250px;
	height: calc(100% - var(--app-header-height) - var(--advertiser-header-height));
    background-color: rgba(255, 255, 255, 0.85);
    cursor: wait;
}
.advertiser-nav.side-nav{
	background-color: var(--app-header-color);
	height: 100%;
	max-height: 100%;;
	padding: 15px 0;
	width: 250px;

	a{
		align-items: center;
		color: var(--blue-light);
		display: grid;
		gap: 10px;
		grid-template-columns: 16px 1fr 18px;
		padding: 10px 20px;
		width: 100%;

		&.active{
			background-color: #414bf9;
		}

		&.active,
		&.active i,
		&:hover,
		&:hover i{
			color: #fff;
		}

		&.is-external i[class*=external]{
			font-size: 14px;
		}

		&.disabled,
		&.disabled i{
			color: #858c90;

			&.active{
				background-color: rgba(5, 75, 249, 0.5);
			}
		}

		i{
			color: var(--blue-light);
			font-size: 16px;
		}
	}
}
.dpm-card.card-wrapper{
	margin: 10px 20px;

	&:first-child{
		margin-top: 0;
	}

	.card-header{
		padding: 10px 18px;
	}

	.card-content-wrapper .card-content{
		padding: 0;
	}

	.grid-container{
		contain: unset;

		.rdg{
			border: none;

			.faded:not(.status-cell){
				color: var(--gray-dark);
			}

			.can-edit-cell.is-dirty::before{
				top: -10px;
				left: -10px;
			}
		}
	}
}
.sub-form.dpm-form{
	--controls-height: 40px;

	display: grid;

	&.has-controls{
		grid-template-rows: var(--controls-height) 1fr;
	}

	&.is-edit{
		.config-controls{
			height: var(--controls-height);
			padding: 10px 20px;
		}
	}

	.empty-item{
		margin: 0;
		height: 100%;
	}

	.config-action{
		margin-left: 20px;
	}

	.config-controls{
		justify-content: flex-end;
		padding: 10px 20px;
	}

	.dpm-card-section{
		padding-bottom: 5px;
		overflow-y: auto;
	}
}
.sub-form.pc-form{
	&.is-edit{
		.pc-row.header-row{
			padding-top: 1rem;
		}
	}

	.description{
		font-size: 12px;
		margin: 1rem;
	}

	.pc-row{
		column-gap: 1rem;
		display: grid;
		grid-template-columns: repeat(2, 1fr) 16px;

		&.header-row{
			margin: 0 1rem;
		}

		&:not(.header-row){
			.e-form__control-wrapper{
				margin-bottom: 1rem;
			}
		}

		.e-form__control-wrapper{
			margin: 0;

			&.e-form--has-message{
				margin-bottom: 0.25rem;
			}
		}

		.ft-ic{
			cursor: pointer;
			font-size: 16px;
			margin-top: 9px;
		}
	}

	> .e-form__control-wrapper{
		margin-top: 0;
		margin-bottom: 0;
	}
}
.site-config-form{
	--config-toolbar: 103px;
	--tabs-height: 60px;

	&.is-edit{
		.form-container{
			height: calc(100% - var(--config-toolbar) - var(--tabs-height));
			max-height: calc(100% - var(--config-toolbar) - var(--tabs-height));
		}
	}

	.config-toolbar{
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(2, 1fr) 16px;
		height: var(--config-toolbar);
		padding: 20px;
		padding-bottom: 23px;
		box-shadow: inset 0 -1px 0 0 #d6d8da, inset 0 1px 0 0 #d6d8da;
		background-color: #fff;

		.e-form__control-wrapper{
			margin: 0;

			.e-form__control-react-select .ft-select__control{
				.ft-select__value-container{
					padding-left: 25px;
				}

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

		.config-message{
			font-size: 12px;
			margin-top: 20px;

			.ft-ic.circle-spin{
				font-size: 12px;
				margin-top: 10px;
			}
		}
	}

	.rhombus-tabs{
		height: var(--tabs-height);
		padding: 0;

		.tab-list{
			color: #858c90;
			font-weight: bold;
			height: 60px;
			text-transform: uppercase;
			width: 100%;

			.tab-item{
				height: 55px;
				justify-content: center;
				margin: 0;
				width: 50%;

				&:hover{
					box-shadow: inherit;
					color: inherit;
				}

				&.is-active,
				&.is-active:hover{
					box-shadow: 0 4px 0 0 var(--app-theme);
					color: var(--app-theme);
					cursor: default;
				}
			}
		}
	}

	.form-container{
		.sub-form{
			height: 100%;

			.config-controls{
				background-color: var(--toolbar-background);
				display: flex;

				.config-action {
					cursor: pointer;
					font-size: 12px;
					color: #2d7ebf;

					&.disabled,
					&.disabled .ft-ic{
						color: #aeb2b5;
						cursor: default;
					}

					&:not(.disabled):hover{
						color: var(--app-black);
						cursor: pointer;
						text-decoration: underline;

						.ft-ic{
							color: var(--app-black);
						}
					}

					.ft-ic {
						cursor: pointer;
						font-size: 12px;
						color: var(--app-blue);
						margin-right: 6px;
					}
				}
			}
		}
	}
}
/**
 * Site Configuration Blade
 */
.c-modal.site-config-modal {
	background-color: var(--toolbar-background);
	min-width: 850px;

	.layout-container{
		.c-modal__content{
			padding: 0;
		}
	}
}
/**
 * Site Configuration Grid
 */
.site-configuration{
	.sites-toolbar{
		.dropdown-button{
			padding-right: 0;
		}
	}

	.empty-item {
		color: var(--app-black);
		font-size: 20px;
		font-weight: bold;
	}

	.name-cell{
		display: grid;
		grid-template-columns: 1fr 20px;

		.ft-ic{
			align-self: center;
			font-size: 14px;

			&.circle-spin{
				font-size: 12px;
			}
		}
	}
}
.c-modal.taxonomy-import-modal{
	.layout-container{
		.c-modal__content{
			height: 135px;
			padding: 40px;
			width: 700px;
		}
	}

	&.has-errors{
		.c-modal__content{
			height: auto;
			max-height: 500px;
		}
	}
}

.c-modal.taxonomy-import-modal .c-modal__header{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.c-modal.taxonomy-import-modal .c-modal__header h4{
	max-width: calc(100% - 70px);
}

.c-modal.taxonomy-import-modal .c-modal__content{
	margin: 40px;
	overflow-y: auto;
	padding: 0;
}


/* Errors */
.c-modal.taxonomy-import-modal.has-errors .c-modal__header{
	background-color: var(--red-mid);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.c-modal.taxonomy-import-modal.has-errors .c-modal__header .c-button--close:hover{
	color: var(--red-mid);
}
.c-modal.taxonomy-import-modal.has-errors h4 .ft-ic{
	color: #FFF;
	margin-right:10px;
}

.c-modal.taxonomy-import-modal.has-errors .c-modal__content{
	margin: 0;
}
.c-modal.taxonomy-import-modal.has-errors .error-info{
	margin: 20px;
}
.c-modal.taxonomy-import-modal.has-errors .error-col.sheet-name{
	width: 150px;
}
.c-modal.taxonomy-import-modal.has-errors .error-col.row-number{
	width: 50px;
}
.c-modal.taxonomy-import-modal.has-errors td{
	vertical-align: top;
}
.app-content.advertiser-container{
	.advertiser-header{
		align-items: center;
		display: flex;
		justify-content: flex-start;
		height: var(--advertiser-header-height);
		padding: 0 20px;

		i.ft-ic{
			color: var(--app-black);
			margin-right: 8px;
		}

		h3{
			font-size: 14px;
			line-height: 20px;
			margin: 0 8px 0 0;
		}

		span{
			color: #858c90;
			font-size: 14px;
		}
	}

	.advertiser-content{
		height: calc(100% - var(--advertiser-header-height));
		max-height: calc(100% - var(--advertiser-header-height));

		&.is-edit{
			display: grid;
			grid-template-columns: 250px 1fr;

			.content-side.has-form .progress-container-scrollable{
				grid-template-rows: var(--advertiser-header-height) 1fr var(--modal-footer-height);
			}
		}

		&.is-new{
			.content-side{
				contain: initial;

				&.has-form .progress-container-scrollable{
					grid-template-rows: 1fr var(--modal-footer-height);
				}
			}
		}


		.content-side{
			contain: strict;
			height: 100%;
			max-height: 100%;

			&.has-form .progress-container-scrollable{
				display: grid;
			}

			.empty-item{
				border: none;
				height: 100%;
				margin: 0;
				padding: 0;
			}

			.c-toolbar.page-toolbar{
				box-shadow:inset 0 -1px 0 0 #d6d8da;
				min-height: var(--advertiser-header-height);

				.info-side {
					color: #4a4a4a;
				}

				.controls-side .toggle-card-expand{
					cursor: pointer;
					font-size: 12px;
					color: #2d7ebf;
					margin-left: 20px;
					transition: 0.3s ease;

					&:hover,
					&:hover .ft-ic{
						color: var(--app-black);
					}

					.ft-ic{
						font-size: 12px;
						color: #2d7ebf;
						margin-right: 6px;
						transition: 0.3s ease;
					}
				}
			}

			.progress-container.no-scroll{
				height: 100%;

				.progress-container-scrollable{
					height: 100%;
					max-height: calc(100vh - var(--app-header-height) - var(--advertiser-header-height));
					overflow-y: hidden;
				}

				.redux-form-container{
					overflow-y: auto;
				}

				.grid-container{
					max-height: calc(100% - var(--advertiser-header-height));
				}
			}
		}

		section.empty-item.empty-view {
			/* empty view - no items to display */
			height: 100%;
			margin-top: 0;

			img.item-image {
				width: 205px;
				height: 133px;
				margin-bottom: 11px;
			}

			&.audiences {
				img.item-image {
					width: 295px;
					height: 138px;
				}
			}

			p {
				font-size: 16px;
				font-weight: bold;
				color: #374047;
			}

			/* div tag needed to override rhombus css */
			div.buttons {
				margin-top: 12px;

				button.btn-add {
					height: 36px;
					font-size: 14px;
					font-weight: normal;

					&.brand-kits,
					&.audiences {
						width: 122px;
					}

					&.products {
						width: 113px;
					}
				}
			}
		}
	}
}
/**
 * Access Limits Styles
 */


.limit-types .selected-section {
	margin-top: 0;
	max-height: 300px;
	overflow-y: auto;
	position: relative;
	border: 1px solid #dbdbdb;
	border-radius: 3px;
}
.limit-types .multi-select-section .selected-header {
	font-size: 12px;
	margin-bottom: 1rem;
	position: sticky;
	top: 0;
	width: 100%;
	background-color: #dbdbdb;
	padding: 0.5rem 0 1rem 5px;
}

.limit-types .multi-select-section .no-items {
	margin: 0 auto 10px;
	display: block;
	text-align: center;
}

.limit-types .multi-select-section .selected-item {
	margin-left: 10px;
}

.limit-types .multi-select-section .selected-item .remove-icon { line-height: 1; }

.limit-types .react-select__indicators .ft-ic.rotate-in-a-circle {
	margin-right: 5px;
	margin-left: -20px;
}
/**
 * Access Styles
 */
.priority-slider .rc-slider {
	margin: 20px 10px;
}
.priority-slider .rc-slider-handle {
	margin-left: 0;
	border: 2px solid #84b5dc;
	background-color: #0b436f;
}

.attributes-list-wrapper .e-form__checkbox--label {
	text-transform: capitalize;
}
/**
 * Additional Styles
 */

.additional-properties .checkbox-list.is-grid .checkbox-item .e-form__checkbox--label {
	line-height:2;
}
.additional-properties .e-form__radio--label {
	font-size:inherit;
	margin-left:5px;
}

.additional-properties .type-radio .checkbox-item label {
	display: grid;
	grid-template-columns: 25px 1fr;
	align-items: center;
}

.attributes-list .e-form__control.checkbox-item:last-child { margin-bottom: 10px; }
/**
 * Security Group Styles
 */

.security-group-option {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	border-bottom: 1px solid #d0d0d0;
	padding-left: 10px;
	cursor: pointer;
}
.security-group-option:hover {
	background-color: rgb(222, 235, 255);
}
.security-group-option label {
	width: 100%;
	font-weight: bold;
}
/**
 * User Info
 */
.user-info {
	position: sticky;
	top: 0;
	width:25vw;
	display: grid;
	grid-template-columns: 150px 1fr;
	grid-template-rows: repeat(4, 3rem);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	background: #def4ff;
	border: 1px solid #133658;
	border-radius: 3px;
	padding: 10px;
	height: 225px;
	align-items: center;
}

.user-info span:nth-child(odd){
	text-align: right;
	font-weight: bold;
}

.user-info .ft-ic {
	font-size: 14px;
	margin-right:5px;
}
section.empty-item.not-found,
section.empty-item.no-access{
	color: var(--app-black);
	margin: 0;

	.ft-ic{
		color: var(--app-black);
		font-size: 140px;
	}

	h4{
		font-size: 40px;
	}

	p{
		font-size: 24px;
	}
}
/**
 * User Details Styles
 */
.user-detail {
	display: flex;
	flex-direction: column;
	position: relative;

	.c-page-header{
		height: var(--advertiser-header-height);
	}

	.form-action-footer {
		height: var(--modal-footer-height);
		border-top:1px solid #979797;
	}

	.user-detail-form{
		display: grid;
		grid-template-columns: 1fr 25vw;
		gap: 20px;
		padding: 20px;
		overflow-y: auto;

		.form-holder{
			flex-grow: 1;

			.form-fieldset{
				border: 2px solid;
				border-right: none;
				border-bottom: none;
				margin: 25px 0;

				legend{
					font-size: 18px;
					padding: 0 20px;
				}

				section{
					display: grid;
					grid-template-columns: repeat(2, 1fr);

					.selected-header{
						padding-right: 5px;
					}
				}
			}

			.additional-properties{
				.checkbox-list{
					border: none;
				}

				.encore-check-wrapper{
					margin-left: 24px;
					margin-top: -15px;
					margin-bottom: 20px;
				}
			}
		}
	}
}
/**
 * User List Styles
 */

.user-list{
	.c-toolbar .toggle-filter-icons{
		order: -1;
	}

	.grid-container{
		.action-menu-cell{
			.action-trigger{
				i.ft-ic{
					font-size: 18px;
				}
			}
		}

		.status-cell{
			.status-icon{
				display: inline-block;
				margin-right: 3px;

				.ft-ic{
					font-size: 12px;

					&.status-rejected{
						color: var(--red-mid);
					}
				}
			}
		}
	}
}
/**
 * Icon Styles
 */

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

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

.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.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); }
/**
 * Button
 ********/
button:focus,
button:active,
input:focus,
input:active {
	outline:none !important;
	box-shadow: none !important;
}

.c-button {
	font-weight: bold;
	text-transform: capitalize;
	border: 2px solid transparent;
	border-radius: 3px;
}

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

.c-button--small {
	height: 26px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
	padding: 0 16px;
}
.c-button--small > .ft-ic {
	margin-left: -4px;
	margin-right: 4px;
}

.c-button,
.split-button-container .dropdown-button {
	transition: 0.2s background-color, border-color;
}

.c-button.is-disabled {
	pointer-events: none;
	cursor: not-allowed;
	color: #fff;
}
button.c-button.is-disabled[data-tooltip-content]{
	pointer-events: all;
}


/**
 * in Actions Bar
 ****************/

.c-actions-bar .c-actions-bar__element.c-button {
	display: flex;
}
.c-actions-bar .c-button {
	height: 36px;
	line-height: normal;
	margin: 0;
	padding: 0 15px;
	font-size: 14px;
	font-weight: normal;
}
.c-actions-bar .c-button--small {
	height: 26px;
}


/**
 * Colors
 **********/
/* blue */
.c-button.t-button--blue {
	background-color: var(--blue-mid);
}
.c-button:not(.is-disabled).t-button--blue:active,
.c-button:not(.is-disabled).t-button--blue:focus {
	border-color: transparent;
	background-color: var(--blue-mid);
}
.c-button:not(.is-disabled).t-button--blue:hover {
	background-color: #00447a;
}
 .c-button.is-disabled.t-button--blue {
	background-color: #b8d1e5;
}

/* green */
.c-button.t-button--green {
	background-color: var(--green-mid);
}
.c-button:not(.is-disabled).t-button--green:focus {
	border-color: transparent;
	background-color: var(--green-mid);
}
.c-button.is-disabled.t-button--green {
	background-color: var(--green-light);
}
.c-button:not(.is-disabled).t-button--green:hover {
	background-color:#349448 !important;
	border-color: transparent;
}

/* red */
.c-button:not(.is-disabled).t-button--red:hover {
	background-color: #a1100e;
}

/* default */
.t-button--default {
	background-color: #858c90;
}
.t-button--default:not(:disabled):focus {
	border-color: transparent;
	background-color:#858c90;
}
.t-button--default:not(:disabled).is-hover,
.t-button--default:not(:disabled):hover {
	border-color:transparent;
	background-color: var(--primary-dark);
}
.t-button--default.is-disabled {
	background-color: var(--white-dark);
}
: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{
	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;
}

.action-trigger{
	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;
		}
	}
}
/**
 * Tooltip Styles
 */
.c-tooltip::after {
	background-color: var(--app-black);
	color: #fff;
	padding: 5px;
	border-color:var(--app-black);
	opacity: 1;
}
.c-tooltip--left::before {
	border-left-color: var(--app-black);
	border-left-width: 10px;
}

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

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


/* theme-specific styles */
.c-tooltip.c-tooltip--top.t-tooltip--default::before{
	border-top-color: var(--default-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--default::before{
	border-bottom-color: var(--default-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--default::before{
	border-left-color: var(--default-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--default::before{
	border-right-color: var(--default-mid);
}
.c-tooltip.t-tooltip--default::after {
	background-color: var(--default-mid);
	border-color: var(--default-mid);
}


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


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


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


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


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


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


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


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


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


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


.c-tooltip.c-tooltip--top.t-tooltip--teal::before{
	border-top-color: var(--teal-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--teal::before{
	border-bottom-color: var(--teal-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--teal::before{
	border-left-color: var(--teal-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--teal::before{
	border-right-color: var(--teal-mid);
}
.c-tooltip.t-tooltip--teal::after {
	background-color: var(--teal-mid);
	border-color: var(--teal-mid);
}
/* ***
 * 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);
	pointer-events: none;
 }
.c-modal__header{
	align-items: center;
	background-color: var(--app-theme);
	color: #fff;
	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;
	}

	&.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__content{
			height: 100%;
		}
	}

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

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

}



/**
 * Confirmation Modal
 */
.confirm-modal .c-modal__content{
	padding: 40px;
}
/**
 * General CSS Helpers
 * - Variables
 * - General
 * - Basic Table
 * - Blank Loading
 * - Bounce Circle
 * - Circle Hover (original rhombus version of bounce-circle?)
 * - Common Actions
 * - Cursor / Pointer Events
 * - Firefox Fixes
 * - Inline Notification
 * - Layout
 * - Margin/Padding
 * - Text
 */


:root {
	/** Common Heights  */
	--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:       50px;
	--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;
	--green-success:      #52bc68;  /* rhombus-themes.css: --green-mid */
	--grid-border-color:  #d6d8da;  /* rhombus-themes.css: --white-dark */
	--red-fail:           #d0021b;
	--toolbar-background: #f4f5f5;

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

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



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


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

/**
 * MARGIN / PADDING
 */
.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 .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: #b3b4c6;
	font-size: 12px;
	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; }

.ft-header .ft-ic {
	color: #b3b4c6;
}

.ft-header .ft-user-info .user-icon { padding-left: 5px; }

.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:hover .ft-ic,
.ft-header .ft-nav-item.is-active .ft-ic { color: #fff; }

.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;
}
.ft-header-more-options a { color: inherit; }

.ft-header-more-options:hover { background-color: #d8eafa; }
.ft-header .ft-header-more-options .ft-ic { color: #374047; }
.ft-header-more-options .option-icon { margin-right: 7px; }

.ft-header-more-options .ft-header-option {
	color: #374047;
	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{
	--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;
}
.dropdown-button.caret-only .action-icon{
	margin: 0 0.2rem;
}
.dropdown-button .action-icon{
	margin: 0 0 0 0.5rem;
}
.split-button-container{
	display: flex;
}
.split-button-container .action-button{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.split-button-container .action-trigger .dropdown-button.c-button{
	height: 100%;
}
.split-button-container .action-trigger{
	border-left: 1px solid transparent;
}
.split-button-container .action-trigger .dropdown-button.c-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: 650px;
}
.c-modal.session-modal .c-modal__content {
	max-width: 700px;
	padding: 30px;
}

.session-modal .message {
	width: 75%;
	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.is-sticky{
	position: sticky;
	top: 0;
}
/**
 * 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);
}
/**
 * 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); }
.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; }
		}
	}
}

/* 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);
			}
		}
	}
}
.file-input-control .input-holder,
.file-input-control .csv-name-input{
	width: 100%;
}
.file-input-control .e-form__control-wrapper{
	flex-grow: 1;
}
.file-input-control .e-form__input.file-name-text{
	background-color: #fff;
}
.file-input-control .add-file-button{
	width: 80px;
	margin: 20px 0 0 10px;
	text-align: center;
	line-height: 1;
}
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;
}
.insert-text-wrapper{
	.char-count{
		margin-right: calc(1rem + 25px);
	}
}

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

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

				&: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{
		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;
}
.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;
}
.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;
}
.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;
}
.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;
}


/*
 * 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;
 }
.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;
}
* {
	--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.card-wrapper > .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.card-wrapper > .card-content-wrapper .card-content .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.card-wrapper > .card-content-wrapper .card-content .c-tag .c-tag-remove {
	visibility: hidden;
	position: absolute;
	right: 8px;
}

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

.creative-labels.card-wrapper > .card-content-wrapper .card-content .tag-component: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;

	.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; }
/**
 * 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-disabled{
		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;
}
/****************
 * THEME COLORS *
 ****************/
/* If any themes are added here, be sure to update `SharedPropTypes.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:  #f3753d;

	--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:#589ca3;
	--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;

	--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;
}
.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.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); }
/**
 * Button
 ********/
button:focus,
button:active,
input:focus,
input:active {
	outline:none !important;
	box-shadow: none !important;
}
.c-button {
	font-weight: bold;
	text-transform: capitalize;
	border: 2px solid transparent;
	border-radius: 3px;
}
.c-button:not(:disabled).is-hover,
.c-button:not(:disabled):hover {
	background-color: var(--primary-dark);
}
.c-button--small {
	height: 26px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
	padding: 0 16px;
}
.c-button--small > .ft-ic {
	margin-left: -4px;
	margin-right: 4px;
}
.c-button,
.split-button-container .dropdown-button {
	transition: 0.2s background-color, border-color;
}
.c-button.is-disabled {
	pointer-events: none;
	cursor: not-allowed;
	color: #fff;
}
button.c-button.is-disabled[data-tooltip-content]{
	pointer-events: all;
}
/**
 * in Actions Bar
 ****************/
.c-actions-bar .c-actions-bar__element.c-button {
	display: flex;
}
.c-actions-bar .c-button {
	height: 36px;
	line-height: normal;
	margin: 0;
	padding: 0 15px;
	font-size: 14px;
	font-weight: normal;
}
.c-actions-bar .c-button--small {
	height: 26px;
}
/**
 * Colors
 **********/
/* blue */
.c-button.t-button--blue {
	background-color: var(--blue-mid);
}
.c-button:not(.is-disabled).t-button--blue:active,
.c-button:not(.is-disabled).t-button--blue:focus {
	border-color: transparent;
	background-color: var(--blue-mid);
}
.c-button:not(.is-disabled).t-button--blue:hover {
	background-color: #00447a;
}
.c-button.is-disabled.t-button--blue {
	background-color: #b8d1e5;
}
/* green */
.c-button.t-button--green {
	background-color: var(--green-mid);
}
.c-button:not(.is-disabled).t-button--green:focus {
	border-color: transparent;
	background-color: var(--green-mid);
}
.c-button.is-disabled.t-button--green {
	background-color: var(--green-light);
}
.c-button:not(.is-disabled).t-button--green:hover {
	background-color:#349448 !important;
	border-color: transparent;
}
/* red */
.c-button:not(.is-disabled).t-button--red:hover {
	background-color: #a1100e;
}
/* default */
.t-button--default {
	background-color: #858c90;
}
.t-button--default:not(:disabled):focus {
	border-color: transparent;
	background-color:#858c90;
}
.t-button--default:not(:disabled).is-hover,
.t-button--default:not(:disabled):hover {
	border-color:transparent;
	background-color: var(--primary-dark);
}
.t-button--default.is-disabled {
	background-color: var(--white-dark);
}
: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{
	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;
}
.action-trigger{
	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;
		}
	}
}
/**
 * Tooltip Styles
 */
.c-tooltip::after {
	background-color: var(--app-black);
	color: #fff;
	padding: 5px;
	border-color:var(--app-black);
	opacity: 1;
}
.c-tooltip--left::before {
	border-left-color: var(--app-black);
	border-left-width: 10px;
}
.c-tooltip.c-tooltip--is-visible:after, .c-tooltip.c-tooltip--is-visible:before {
    visibility: visible;
}
.c-tooltip.c-tooltip--is-hidden:hover:after, .c-tooltip.c-tooltip--is-hidden:hover:before {
    visibility: hidden;
}
.c-tooltip--fit::after {
	width: auto;
	height: auto;
}
/* theme-specific styles */
.c-tooltip.c-tooltip--top.t-tooltip--default::before{
	border-top-color: var(--default-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--default::before{
	border-bottom-color: var(--default-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--default::before{
	border-left-color: var(--default-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--default::before{
	border-right-color: var(--default-mid);
}
.c-tooltip.t-tooltip--default::after {
	background-color: var(--default-mid);
	border-color: var(--default-mid);
}
.c-tooltip.c-tooltip--top.t-tooltip--primary::before{
	border-top-color: var(--primary-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--primary::before{
	border-bottom-color: var(--primary-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--primary::before{
	border-left-color: var(--primary-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--primary::before{
	border-right-color: var(--primary-mid);
}
.c-tooltip.t-tooltip--primary::after {
	background-color: var(--primary-mid);
	border-color: var(--primary-mid);
}
.c-tooltip.t-tooltip--white::after{
	color: var(--primary-mid);
}
.c-tooltip.c-tooltip--top.t-tooltip--white::before{
	border-top-color: var(--white-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--white::before{
	border-bottom-color: var(--white-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--white::before{
	border-left-color: var(--white-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--white::before{
	border-right-color: var(--white-mid);
}
.c-tooltip.t-tooltip--white::after {
	background-color: var(--white-mid);
	border-color: var(--white-mid);
}
.c-tooltip.c-tooltip--top.t-tooltip--blue::before{
	border-top-color: var(--blue-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--blue::before{
	border-bottom-color: var(--blue-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--blue::before{
	border-left-color: var(--blue-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--blue::before{
	border-right-color: var(--blue-mid);
}
.c-tooltip.t-tooltip--blue::after {
	background-color: var(--blue-mid);
	border-color: var(--blue-mid);
}
.c-tooltip.c-tooltip--top.t-tooltip--purple::before{
	border-top-color: var(--purple-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--purple::before{
	border-bottom-color: var(--purple-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--purple::before{
	border-left-color: var(--purple-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--purple::before{
	border-right-color: var(--purple-mid);
}
.c-tooltip.t-tooltip--purple::after {
	background-color: var(--purple-mid);
	border-color: var(--purple-mid);
}
.c-tooltip.c-tooltip--top.t-tooltip--pink::before{
	border-top-color: var(--pink-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--pink::before{
	border-bottom-color: var(--pink-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--pink::before{
	border-left-color: var(--pink-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--pink::before{
	border-right-color: var(--pink-mid);
}
.c-tooltip.t-tooltip--pink::after {
	background-color: var(--pink-mid);
	border-color: var(--pink-mid);
}
.c-tooltip.c-tooltip--top.t-tooltip--orange::before{
	border-top-color: var(--orange-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--orange::before{
	border-bottom-color: var(--orange-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--orange::before{
	border-left-color: var(--orange-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--orange::before{
	border-right-color: var(--orange-mid);
}
.c-tooltip.t-tooltip--orange::after {
	background-color: var(--orange-mid);
	border-color: var(--orange-mid);
}
.c-tooltip.c-tooltip--top.t-tooltip--green::before{
	border-top-color: var(--green-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--green::before{
	border-bottom-color: var(--green-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--green::before{
	border-left-color: var(--green-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--green::before{
	border-right-color: var(--green-mid);
}
.c-tooltip.t-tooltip--green::after {
	background-color: var(--green-mid);
	border-color: var(--green-mid);
}
/* red theme */
.c-tooltip.c-tooltip--top.t-tooltip--red::before{
	border-top-color: var(--red-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--red::before{
	border-bottom-color: var(--red-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--red::before{
	border-left-color: var(--red-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--red::before{
	border-right-color: var(--red-mid);
}
.c-tooltip.t-tooltip--red::after {
	background-color: var(--red-mid);
	border-color: var(--red-mid);
}
.c-tooltip.t-tooltip--gray::after,
.c-tooltip.t-tooltip--grey::after{
	color: var(--primary-dark);
}
.c-tooltip.c-tooltip--top.t-tooltip--gray::before,
.c-tooltip.c-tooltip--top.t-tooltip--grey::before{
	border-top-color: var(--grey-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--gray::before,
.c-tooltip.c-tooltip--bottom.t-tooltip--grey::before{
	border-bottom-color: var(--grey-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--gray::before,
.c-tooltip.c-tooltip--left.t-tooltip--grey::before{
	border-left-color: var(--grey-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--gray::before,
.c-tooltip.c-tooltip--right.t-tooltip--grey::before{
	border-right-color: var(--grey-mid);
}
.c-tooltip.t-tooltip--gray::after,
.c-tooltip.t-tooltip--grey::after{
	background-color: var(--grey-mid);
	border-color: var(--grey-mid);
}
.c-tooltip.c-tooltip--top.t-tooltip--yellow::before{
	border-top-color: var(--yellow-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--yellow::before{
	border-bottom-color: var(--yellow-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--yellow::before{
	border-left-color: var(--yellow-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--yellow::before{
	border-right-color: var(--yellow-mid);
}
.c-tooltip.t-tooltip--yellow::after {
	background-color: var(--yellow-mid);
	border-color: var(--yellow-mid);
}
.c-tooltip.c-tooltip--top.t-tooltip--teal::before{
	border-top-color: var(--teal-mid);
}
.c-tooltip.c-tooltip--bottom.t-tooltip--teal::before{
	border-bottom-color: var(--teal-mid);
}
.c-tooltip.c-tooltip--left.t-tooltip--teal::before{
	border-left-color: var(--teal-mid);
}
.c-tooltip.c-tooltip--right.t-tooltip--teal::before{
	border-right-color: var(--teal-mid);
}
.c-tooltip.t-tooltip--teal::after {
	background-color: var(--teal-mid);
	border-color: var(--teal-mid);
}
/* ***
 * 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);
	pointer-events: none;
 }
.c-modal__header{
	align-items: center;
	background-color: var(--app-theme);
	color: #fff;
	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;
	}

	&.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__content{
			height: 100%;
		}
	}

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

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

}
/**
 * Confirmation Modal
 */
.confirm-modal .c-modal__content{
	padding: 40px;
}
/**
 * General CSS Helpers
 * - Variables
 * - General
 * - Basic Table
 * - Blank Loading
 * - Bounce Circle
 * - Circle Hover (original rhombus version of bounce-circle?)
 * - Common Actions
 * - Cursor / Pointer Events
 * - Firefox Fixes
 * - Inline Notification
 * - Layout
 * - Margin/Padding
 * - Text
 */
:root {
	/** Common Heights  */
	--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:       50px;
	--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;
	--green-success:      #52bc68;  /* rhombus-themes.css: --green-mid */
	--grid-border-color:  #d6d8da;  /* rhombus-themes.css: --white-dark */
	--red-fail:           #d0021b;
	--toolbar-background: #f4f5f5;

	/** --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%; }
.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; }
/**
 * 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; }
/**
 * 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;
}
/**
 * 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{ 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-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;
}
/**
 * MARGIN / PADDING
 */
.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 .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: #b3b4c6;
	font-size: 12px;
	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; }
.ft-header .ft-ic {
	color: #b3b4c6;
}
.ft-header .ft-user-info .user-icon { padding-left: 5px; }
.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:hover .ft-ic,
.ft-header .ft-nav-item.is-active .ft-ic { color: #fff; }
.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;
}
.ft-header-more-options a { color: inherit; }
.ft-header-more-options:hover { background-color: #d8eafa; }
.ft-header .ft-header-more-options .ft-ic { color: #374047; }
.ft-header-more-options .option-icon { margin-right: 7px; }
.ft-header-more-options .ft-header-option {
	color: #374047;
	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{
	--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;
}
.dropdown-button.caret-only .action-icon{
	margin: 0 0.2rem;
}
.dropdown-button .action-icon{
	margin: 0 0 0 0.5rem;
}
.split-button-container{
	display: flex;
}
.split-button-container .action-button{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.split-button-container .action-trigger .dropdown-button.c-button{
	height: 100%;
}
.split-button-container .action-trigger{
	border-left: 1px solid transparent;
}
.split-button-container .action-trigger .dropdown-button.c-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: 650px;
}
.c-modal.session-modal .c-modal__content {
	max-width: 700px;
	padding: 30px;
}
.session-modal .message {
	width: 75%;
	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.is-sticky{
	position: sticky;
	top: 0;
}
/**
 * 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);
}
/**
 * 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); }
.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; }
		}
	}
}
/* 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);
			}
		}
	}
}
.file-input-control .input-holder,
.file-input-control .csv-name-input{
	width: 100%;
}
.file-input-control .e-form__control-wrapper{
	flex-grow: 1;
}
.file-input-control .e-form__input.file-name-text{
	background-color: #fff;
}
.file-input-control .add-file-button{
	width: 80px;
	margin: 20px 0 0 10px;
	text-align: center;
	line-height: 1;
}
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;
}
.insert-text-wrapper{
	.char-count{
		margin-right: calc(1rem + 25px);
	}
}
.insert-text{
	display: flex;
	gap: 1rem;

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

				&: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{
		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;
}
.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;
}
.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;
}
.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;
}
.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;
}
/*
 * 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;
 }
.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;
}
* {
	--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.card-wrapper > .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.card-wrapper > .card-content-wrapper .card-content .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.card-wrapper > .card-content-wrapper .card-content .c-tag .c-tag-remove {
	visibility: hidden;
	position: absolute;
	right: 8px;
}
.creative-labels.card-wrapper > .card-content-wrapper .card-content .c-tag .c-tag-remove i.ft-ic {
	color: #fff;
}
.creative-labels.card-wrapper > .card-content-wrapper .card-content .tag-component: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;

	.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; }
/**
 * 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-disabled{
		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;
}
/****************
 * THEME COLORS *
 ****************/
/* If any themes are added here, be sure to update `SharedPropTypes.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:  #f3753d;

	--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:#589ca3;
	--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;
}
/**
 * All Main Application Styles
 */
/**
  * General App styles
  */
:root {
	/* heights/widths should be used to calculate dimensions, ie calc(100% - var(--advertiser-header-height)) */
	--advertiser-header-height: 60px;
 	--breadcrumbs-height: 64px;
 	--modal-header-height: 42px;
	--min-grid-height: 500px;
	--grid-row-height: 28px;

	/* variable colors should be used wherever possible to keep things consistent and easy to update */
 	--app-theme: #37929a;

	/* for additional available variables see `rhombus-themes.css` and `general.css` in the Rhombus project */
	/* example: --{theme}-{light|mid|dark}, --app-black, --toolbar-height */
 }
body{
	overflow: hidden;

	.ft-app.si-app {
		background-color: var(--toolbar-background);

		.u-form__help{
			.react-tooltip{
				font-size: 13px;
				line-height: 1rem;
				max-width: 200px;
				padding: 5px;
				z-index: 1;
			}
		}

		section.main-grid-page{
			height: var(--app-content-height);

			&.has-toolbar{
				.c-toolbar{
					gap: 1.25rem;

					.action-buttons{
						display: flex;
						flex-grow: 1;
						justify-content: flex-end;
					}
				}

				.grid-container{
					height: calc(100% - var(--toolbar-height));
				}
			}

		}

		.action-menu-cell {
			i.ft-ic{
				font-size: 12px;
			}

			&.advertiser-actions .action-trigger i:not(.is-open):not(:hover){
				color: #858c90;
			}
		}

		.page-toolbar{
			justify-content: space-between;

			.action-buttons{
				display: flex;
				gap: 20px;
				margin-right: 20px;
			}
		}

		form{
			padding: 30px;

			.card-wrapper{
				margin: 0;
				margin-bottom: 15px;

				.empty-item p{
					font-size: 14px;
				}

				.card-content > section > .e-form__control-wrapper{
					margin-top: 0;
				}

				.horizontal-radios{
					display: flex;

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

					.checkbox-component .u-form__help{
						margin-left: 0;
					}
				}

				.sub-options{
					background: #f4f5f5;
					border: 1px solid #eaebec;
					border-radius: 3px;
					margin: 1rem;
					padding: 2rem 1rem 1rem;

					> .e-form__control-wrapper{
						margin-top: 0;
					}
				}
			}
		}

		.advertiser-grid-menu {
			.action-menu-item:not(.is-disabled) {
				i::before {
					color: var(--app-black);
				}
			}
		}
	}
}
/**
 * TODO: is the below needed here, or is it in rhombus, or should it be moved to rhombus?
 */
/* styles for ReactTooltip from 'react-tooltip' to match rhombus tooltip styles
 */
.si-app .react-tooltip-icon{
font-size: 14px;
color: #868c90;
margin-left: 10px;
margin-right: 10px;
}
.si-app .app-level-tooltip{
	word-wrap: break-word;
}
.si-app .app-level-tooltip.react-tooltip__show {
	font-weight: 400;
	padding: 5px;
	z-index: 10000000000;
	font-size: 13px;
	color:#fff;
	background-color: var(--app-black);
}
.si-app .app-level-tooltip.place-top::before {
	opacity:0;
}
.si-app .app-level-tooltip.place-top::after {
	background-color: var(--app-black);
}
.si-app .small-enhanced-tooltip {
	max-width:200px;
	line-height: 1.3;
}
/**
 * Flashtalking applications make us of rhombus-react
 * 		Oftentimes there are additional styles which either
 * 			exist in or still need to be ported to rhombus
 * 		Once the app has been updated to use a version of rhombus that has the styles,
 *			remove them here to avoid duplicate CSS
 */
/*************************************************
 * Port(ed) from/to Rhombus version 3.0.0-beta-0
 * Remove when upgraded to Rhombus 3.0.0-beta-0
 */
/* Grids */
/* RRACT-421 */
.name-cell{
	align-items: center;
	display: flex;
	justify-content: space-between;

	a,
	.is-action{
		color: var(--app-black);

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

	.ft-ic{
		font-size: 14px;
	}
}
.c-modal{
	.c-modal__header{
		contain: size;
	}
}
/* TODO: this is set in rhombus, but doesn't work if we just use the rhombus css? */
.e-form__control-react-select{
	.ft-select__menu{ z-index: 2; }
}
.new-input.e-form__control.is-text-area{
	background-color: inherit;
}
/* *** */
/* beta-2 */
.ft-header .logo-side{
	.ft-logo img{
		margin-top: 0;
	}
	.c-environment-badge{
		height: 24px;
	}
}
/* *** */
/**
 * End Port From/To Rhombus
 ****************************/
/**
 * Style Overrides to fix non-style issues in rhombus
 */
/**
 * End Style Overrides
 **********************/
/**
 * General Styles
 * These are catch-all styles that effect many different sections
 * 		Some of this is rhombus placeholder
 *   	Some of this is rhombus reset
 * TODO: most (all?) of this belongs either in rhombus 3 or in App.css
 */

/**
 * TODO: Rhombus this?
 */
.square-button .ft-ic { margin: 0; }

.c-button .circle-spin { animation: rotateInACircle 1.25s infinite linear; }

#notification-container .notifications { height: auto; }

/**
 * info banner
 **/

.info-banner-container{
	margin: 1rem;
	padding: 10px;
	background-color: #d8eafa;
	border-radius: 3px;
	font-size: 12px;
}

.info-banner-container .ft-ic{
	color: #2d7ebf;
	font-size: 14px;
	margin-right: 10px;
}

.info-banner-container .header{
	font-weight: bold;
}



.c-page-header {
	background-color: #fff;
	padding: 15px 20px;
	font-size: 16px;
	color: #4a4a4a;
	border-bottom: 1px solid #d6d8da;
}
.e-form__checkbox .e-form__checkbox--label {
	line-height: 2.5;
	font-size: 12px;
	color: #374047;
	margin-left: 7px;
	margin-bottom: 0 !important;
}
.filter-modal .e-form__checkbox .e-form__checkbox--label {
	display: flex !important;
	align-items: center;
}

 /**
  * @5. Colors
  **/
.c-button--ghost.t-button--ghost-default.c-button:not(:disabled).is-hover,
.c-button--ghost.t-button--ghost-default.c-button:not(:disabled):hover {
	background-color: #0000;
	border-color: transparent;
	color: #374047;
}