* {
	font-family: Roboto;
}

body {
	background-color: #f3f8fb;
	width: 100vw;

	/* With limited real estate on the custom page iFrame, 
	can't afford any margins, override any browser margins*/
	margin: 0;
}

/*
	Override aurelia-dialog plugin styles here.

	The default styles used can be found here: 
		https://github.com/aurelia/dialog/blob/master/src/resources/styles/default-styles.less
	When configuring the styles for the plugin in main.ts, 
	there is no easy way to override single style rules easily. Any attempt
	to do this seems to completely discard all default rules. Offical docs
	on the plugin do not explain how to do this in any detail:
		https://aurelia.io/docs/plugins/dialog#styling-the-dialog
	
	The docs seem to recommend we use our own custom CSS file to
	do any overrides, which is strange but I guess we have no other
	choice. Using !important in rules is usually not good practice,
	but it's very convenient for a use case like this.
*/
ux-dialog-container {
	top: 0% !important; /* Adjusted for custom page within Relativity */
}

/* 
	Since the custom page is trapped in an iFrame that cannot take the full screen,
	the overlay is also trapped. Change default background color of overlay to
	blend in with the light blue shade of the rest of Relativity.
*/
ux-dialog-overlay.active {
	background-color: #f3f8fb !important;
	opacity: 0.6 !important;
}

/*
	!!! IMPORTANT !!! DO NOT REMOVE.
	By default, aurelia dialogs will add inline style z-index of 1000
	to both modal and overlay elements. This breaks rwc field tooltips,
	since they are rendered outside of the modal and have a z-index less
	than 1000.

	The z-index value of '2' and not '1' is because '1' will still work,
	but the table lines of the import item list will protrude through
	the modal. '2' seems to be the Goldilocks number where the lines
	will not protrude but the tooltips will still show up.
*/
ux-dialog-container,
ux-dialog-overlay.active {
	z-index: 2 !important;
}

/* stylelint-disable-next-line max-line-length */
/* stylelint-disable-next-line max-line-length */
.rds-button-group > .rds-button:not(:last-child),
.rds-button-group > rds-button:not(:last-child) {
  margin-right: var(--size-xs, 0.25rem);
  margin-left: 0;
}
.login-window {
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background-color: white;
}

.login-window > h1 {
	font-family: "Segoe UI", "Roboto", "Helvetica Neue", "Lucida Grande";
	font-weight: 600;
	font-size: 1.5rem;
	text-indent: 1rem;
}

.job-page-content-container {
	margin-right: 2px;
	/* Setting to 0 will obscure box shadowing*/
	margin-left: 0;
	margin-top: 0;
}

.job-list-container {
	margin-top: 23.5px;
	border-radius: 5px;
	border: 1px solid #e6ecf3;
	box-sizing: border-box;
	box-shadow: 0px 0px 2px rgb(99 107 127 / 14%),
		0px 2px 2px rgb(99 107 127 / 12%), 0px 1px 3px rgb(99 107 127 / 20%);
	background-color: #ffffff;
	padding-left: 20px;
	padding-right: 20px;
}

.message-container,
.job-message-container {
	position: relative;
	width: 100%;
	margin-top: 16px;
	margin-bottom: 16px;
}

#job-list-footer {
	width: 100%;
	background-color: #ffffff;
	height: 2.5rem;
	border-top: 1px solid #e6ecf3;
	padding-top: 15px;
	padding-bottom: 7px;
}

#job-list-footer select {
	height: 32px;
	width: 115px;
	font-size: 14px;
	color: #606973;
	border: 1px solid #acbfd6;
	background: #fcfdff;
}
.content-container {
	height: 520px; /*  the */
}

.short-content-container {
	height: 191px; /*  the */
}

.step-container {
	width: 95%;
	float: right;
	padding-right: 16px;
}

.step-title-container {
	background-color: #f3f8fb;
	height: 50px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
}

.step-title-container__align-element {
	flex-basis: 30%;
	display: flex;
}

.button-container {
	display: flex;
	justify-content: space-between;
	width: 100%;
	min-height: 32px;
}

rwc-dropdown-input-field[edit-mode],
rwc-switch-field[edit-mode],
rwc-text-input-field[edit-mode],
rwc-text-area-field[edit-mode] {
	margin-bottom: 16px;
}

rwc-dropdown-input-field:not([edit-mode]),
rwc-switch-field:not([edit-mode]),
rwc-text-input-field:not([edit-mode]) {
	margin-bottom: 9px;
}

.info-notification-wrapper {
	margin-bottom: 24px;
}

.review-set-info-notification {
	overflow-wrap: break-word;
}

.review-set-info-notification a {
	color: #0078d4;
	text-decoration: none;
}

.review-set-info-notification a:hover {
	color: #005a9e;
	text-decoration: underline;
}

h3.message {
	font-weight: 400;
	font-size: 18px;
}

.center-span {
	display: flex;
	justify-content: center;
}

.loading-step-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/*
	Taken from Platform homepage:
	https://git.kcura.com/projects/PLAT/repos/homepage/browse/Source/Relativity.HomePage.Frontend/src/components/carouselLoadingState/carouselLoadingState.scss
*/

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

.hp-carousel-loading-container {
	height: 180px;
	font-family: "Roboto", arial, helvetica, sans-serif;
	font-style: normal;
	line-height: 0.75;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.hp-carousel-loading-spinner {
	width: 80px;
	height: 80px;
	border: 7px solid #e7e7e7;
	border-right-color: #0075e0;
	border-radius: 50%;
	animation: spinner 1.067s infinite linear;
}

.hp-carousel-loading-header {
	color: #0075e0;
	font-size: 22px;
	font-weight: 500;
	margin-top: 24px;
	margin-bottom: 12px;
}

.hp-carousel-loading-message {
	color: #8c93a6;
	font-size: 14px;
	font-weight: normal;
}

.checkmark {
	width: 106px;
	height: 106px;
	border-radius: 50%;
	display: block;
	stroke-width: 3;
	stroke: #1f8b51;
	stroke-miterlimit: 10;
	margin: 37px auto;
	box-shadow: inset 0px 0px 0px #1f8b51;
	animation: fill 0.4s ease-in-out 0.4s forwards,
		scale 0.3s ease-in-out 0.9s both;
}

.checkmark__circle {
	stroke-dasharray: 216;
	stroke-dashoffset: 216;
	stroke-width: 4;
	stroke-miterlimit: 10;
	stroke: #1f8b51;
	fill: none;
	animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
	transform-origin: 50% 50%;
	stroke-dasharray: 98;
	stroke-dashoffset: 98;
	animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.7s forwards;
}

@keyframes stroke {
	100% {
		stroke-dashoffset: 0;
	}
}
@keyframes scale {
	0%,
	100% {
		transform: none;
	}
	50% {
		transform: scale3d(1.1, 1.1, 1);
	}
}
@keyframes fill {
	100% {
		box-shadow: inset 0px 0px 0px 80px #fff;
	}
}

.fade-out {
	animation: fadeOut ease 0.3s forwards;
}
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.fade-in {
	animation: fadeIn ease 0.3s;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.job-item-list-title {
	font-family: Roboto, arial, helvetica, sans-serif;
	font-weight: normal;
	font-size: 18px;
	padding-left: 15px;
}

.slide-out {
	position: fixed;
	top: 0;
	right: -50%;
	padding: 0rem 0rem;
	height: 100vh;
	width: 50%;
	background: white;

	/* based on the slideout for the tabs menu. Color adjusted to be a darker shadow */
	transition: 0.5s all ease;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.slide-out.open {
	right: 0%;
	box-shadow: -7px 11px 20.6px 2px rgba(0, 0, 0, 0.12);
}

.pane-header {
	align-items: center;
	display: flex;
	padding: 4px 16px;
	border-bottom: 1px solid #e2ebf3;
	margin-bottom: 12px;
}

.pane-header-title {
	font-family: Roboto, arial, helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #3d454e;
	padding: 0 3px 0 0;
	font-feature-settings: "liga" off;
}

.pane-content-container {
	padding-top: 5px;
	padding-right: 20px;
	height: 100%;
}

.pane-button-container {
	padding: 4px;
	bottom: 0;
	border-bottom: 1px solid #e2ebf3;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.pane-content-container rwc-text-input-field {
	padding: 4px 0;
}

.processing-set-name-field {
	padding: 4px 0;
	margin-left: 50px;
	display: flex;
	align-items: center;
	gap: 18px;
}

.processing-set-name-field .field-label {
	font-family: Roboto, arial, helvetica, sans-serif;
	font-size: 14px;
	color: #3d454e;
	font-weight: bold;
	letter-spacing: 0.5px;
	min-width: 120px;
	flex-shrink: 0;
}

.processing-set-name-field rwc-link {
	font-family: Roboto, arial, helvetica, sans-serif;
	font-size: 14px;
	color: #3b82f6;
	cursor: pointer;
}

.processing-set-name-field rwc-link:hover {
	text-decoration: underline;
}

.processing-set-name-field .processing-set-error {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: Roboto, arial, helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
}

.processing-set-name-field .processing-set-error rwc-icon {
	flex-shrink: 0;
}

.pane-content-container .item-list-container {
	margin-top: 24px;
}

.form-loading {
	height: 100%;
	padding-left: 20px;
}

.form-card-loading-title {
	height: 27px;
	flex: 1;
	background-repeat: no-repeat;
	background-image: linear-gradient(90deg,
			hsla(0, 0%, 100%, 0),
			hsla(0, 0%, 100%, 0.5) 50%,
			hsla(0, 0%, 98%, 0)),
		linear-gradient(#fff 100%, transparent 0),
		/* Vertical bar that separates label and value of field  */
		linear-gradient(rgba(205, 218, 232, 0.5) 100%, transparent 0),
		/* styles value of first field */
		linear-gradient(#fff 100%, transparent 0);
	/* The actual background color */
	background-size: 13.75rem 100%,
		/* styles the shimmering effect */
		0px 0px,
		/* Vertical bar that separates label and value of field  */
		72% 0.75rem,
		/* styles value of first field */
		100% 100%;
	/* size of the background */
	background-position: -150% 0, 18% 0, 0 0, 0 1.5rem, 0 3rem, 0 0;
	animation: category-loading-state-animation 2s linear infinite;
	margin-bottom: 25px;
}

.form-card-loading-content {
	display: flex;
	flex-direction: row;
	height: 100px;
	margin-bottom: 15px;
}

.form-card-loading-header {
	height: 27px;
	flex: 1;
	background-repeat: no-repeat;
	background-image: linear-gradient(90deg,
			hsla(0, 0%, 100%, 0),
			hsla(0, 0%, 100%, 0.5) 50%,
			hsla(0, 0%, 98%, 0)),
		linear-gradient(#fff 100%, transparent 0),
		/* Vertical bar that separates label and value of field  */
		linear-gradient(rgba(205, 218, 232, 0.5) 100%, transparent 0),
		/* styles value of first field */
		linear-gradient(#fff 100%, transparent 0);
	/* The actual background color */
	background-size: 13.75rem 100%,
		/* styles the shimmering effect */
		0px 0px,
		/* Vertical bar that separates label and value of field  */
		45% 0.75rem,
		/* styles value of first field */
		100% 100%;
	/* size of the background */
	background-position: -150% 0, 18% 0, 0 0, 0 1.5rem, 0 3rem, 0 0;
	animation: category-loading-state-animation 2s linear infinite;
}

.form-card-loading-labels {
	flex: 1;
	background-repeat: no-repeat;
	background-image: linear-gradient(90deg,
			hsla(0, 0%, 100%, 0),
			hsla(0, 0%, 100%, 0.5) 50%,
			hsla(0, 0%, 98%, 0)),
		linear-gradient(#fff 100%, transparent 0),
		/* Vertical bar that separates label and value of field  */
		linear-gradient(rgba(205, 218, 232, 0.5) 100%, transparent 0),
		/* styles value of first field */
		linear-gradient(rgba(205, 218, 232, 0.5) 100%, transparent 0),
		/* styles value of second field */
		linear-gradient(rgba(205, 218, 232, 0.5) 100%, transparent 0),
		/* styles value of third field */
		linear-gradient(#fff 100%, transparent 0);
	/* The actual background color */
	background-size: 13.75rem 100%,
		/* styles the shimmering effect */
		0px 0px,
		/* Vertical bar that separates label and value of field  */
		85% 0.75rem,
		/* styles value of first field */
		55% 0.75rem,
		/* styles value of second field */
		60% 0.75rem,
		/* styles value of third field */
		100% 100%;
	/* size of the background */
	background-position: -150% 0, 18% 0, 0 0, 0 1.5rem, 0 3rem, 0 0;
	animation: category-loading-state-animation 2s linear infinite;
}

.form-card-loading-values {
	flex: 1;
	background-repeat: no-repeat;
	background-image: linear-gradient(90deg,
			hsla(0, 0%, 100%, 0),
			hsla(0, 0%, 100%, 0.5) 50%,
			hsla(0, 0%, 98%, 0)),
		linear-gradient(#fff 100%, transparent 0),
		/* Vertical bar that separates label and value of field  */
		linear-gradient(rgba(205, 218, 232, 0.5) 100%, transparent 0),
		/* styles value of first field */
		linear-gradient(rgba(205, 218, 232, 0.5) 100%, transparent 0),
		/* styles value of second field */
		linear-gradient(rgba(205, 218, 232, 0.5) 100%, transparent 0),
		/* styles value of third field */
		linear-gradient(#fff 100%, transparent 0);
	/* The actual background color */
	background-size: 13.75rem 100%,
		/* styles the shimmering effect */
		0px 0px,
		/* Vertical bar that separates label and value of field  */
		100% 0.75rem,
		/* styles value of first field */
		65% 0.75rem,
		/* styles value of second field */
		70% 0.75rem,
		/* styles value of third field */
		100% 100%;
	/* size of the background */
	background-position: -150% 0, 18% 0, 0 0, 0 1.5rem, 0 3rem, 0 0;
	animation: category-loading-state-animation 2s linear infinite;
}

.form-loading-failed {
	height: 100%;
}

.overlay-error-container {
	display: flex;
	align-items: center;
}

.overlay-error-container .rwa-button {
	margin-left: 10px;
}

.scrollable-content {
	overflow-y: auto;
	max-height: 800px;
}

.error-section {
    margin-bottom: 8px;
    position: relative;
}

.error-section rwc-text-input-field {
    width: 100%;
    margin-bottom: 4px;
}

.error-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 4px;
    margin-left: 205px;
}

/* Existing button styles remain unchanged */
.error-buttons .rwa-button {
    font-size: 12px;
    padding: 4px 8px;
    width: fit-content;
}

/* New styles for the copy container and copied message */
.copy-container {
    display: inline-flex;
    align-items: center;
}
.copied-message {
    margin-left: 8px;
    padding: 4px 8px;
    font-size: 12px;
    color: #FFFFFF;              /* White text */
    background-color: #333333;   /* Dark gray background */
    border-radius: 4px;
    position: relative;
    display: inline-block;
}

.copied-message:after {
    content: "";
    position: absolute;
    top: 50%;              /* Vertically centered */
    right: 100%;           /* Place arrow to the left */
    transform: translateY(-50%);
    border-width: 6px;     /* Adjust size as needed */
    border-style: solid;
    border-color: transparent #333333 transparent transparent; /* Left-pointing arrow */
}

/* Quality Check Summary Styles */
.quality-check-summary {
    margin: 24px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: white;
    padding: 16px;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.summary-column {
    padding: 0;
    position: relative;
}

.summary-column:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background-color: #d1d5db;
}

.column-header {
    font-family: Roboto, arial, helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6%;
	color: #374151;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.metric-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
}

.metric-item:last-child {
    margin-bottom: 0;
}

.metric-label {
    font-family: Roboto, arial, helvetica, sans-serif;
    font-size: 14px;
    color: #374151;
    font-weight: 600;
    margin-right: 10px;
}

.metric-value {
    font-family: Roboto, arial, helvetica, sans-serif;
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

/* Info Icon and Tooltip Styles */
.info-icon-container {
    position: relative;
    display: inline-block;
}

.info-icon {
    cursor: help;
    transition: color 0.2s ease;
}

.info-icon:hover {
    color: #2563eb !important;
}

.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.info-icon-container:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip-content {
    background-color: #374151;
    color: white;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    max-width: 150px;
    width: max-content;
}

.tooltip-content::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #374151;
}

.tooltip-content ul {
    margin: 8px 0 0 0;
    padding-left: 16px;
}

.tooltip-content li {
    margin-bottom: 4px;
}

.tooltip-content li:last-child {
    margin-bottom: 0;
}

/* Not Started Styles */
.metric-item.not-started {
    justify-content: center;
    padding: 20px 0;
}

.not-started-text {
    font-family: Roboto, arial, helvetica, sans-serif;
    font-size: 14px;
    color: #6b7280;
    font-weight: 400;
    font-style: italic;
}

/* Quality Check Error Styles */
.metric-item.quality-check-error {
    justify-content: center;
    padding: 20px 0;
}

.quality-check-error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.quality-check-error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quality-check-error-text {
    text-align: center;
}

.quality-check-error-title {
    font-family: Roboto, arial, helvetica, sans-serif;
    font-size: 14px;
    color: #dc2626;
    font-weight: 500;
    margin-bottom: 2px;
}

.quality-check-error-description {
    font-family: Roboto, arial, helvetica, sans-serif;
    font-size: 12px;
    color: #6b7280;
    font-weight: 400;
}

/* Error Header Styles */
.column-header.error-header {
    font-family: Roboto, arial, helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6%;
    color: #374151;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-header-text {
    color: #374151;
}
rwc-text-input-field,
rwc-password-input-field {
	padding: 3px 80px 3px 0px;
	margin: 4px 0;
	min-height: 24px;
}

.column-box {
	display: flex;
	height: 90vh; /* 100vh value makes a vertical scroll bar appear */
}

.console-container {
	background-color: #fff;
	border-radius: 5px;
	border: 1px solid #e2ebf3;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 15px;

	min-width: 260px;
	max-width: 300px;
	padding: 15px 16px;
	box-shadow: 0 1px 3px #636b7f33, 0 2px 2px #636b7f1f, 0 0 2px #636b7f24;
	box-sizing: border-box;
}

.console-section {
	margin: 0 0 13px;
}

.console-section-title {
	text-transform: capitalize;
	font-weight: 400;
	font-size: 18px;
	color: #3d454e;
	padding: 0;
	margin: 0;
}

.console-section-item-container {
	margin: 9px 0;
}

.console-item {
	margin: 4px 0;
	width: 100%;
}

#upn-display-box {
	text-overflow: ellipsis;
	overflow: hidden !important;
	white-space: nowrap;
}

.console-description-box {
	font-size: 14px;
	padding: 7px 0;
	text-align: center;
}

.config-message-container {
	margin-bottom: 15px;
	margin-right: 15px;
}