/* ****************** */
/* General formatting */
/* ****************** */

/* App-wide font */
body {
	font-family: "Be Vietnam Pro", sans-serif;
}

/* Emphasis, for the usual inline emphasis applied in a paragraph */
.emphasis {
	font-weight: bold;
	color: #4539e9;
}

.title {
	font-weight: lighter;
}

.vertical-text {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	direction: rtl;
}

/* Other font-related classes */
.font-monospace {
	font-family: "Courier New", Courier, monospace;
}

/* Messing with the Bootstrap modal-fullscreen class; making it almost fullscreen by adding modal-almost-fullscreen */

.modal-fullscreen.modal-almost-fullscreen {
	margin: 1rem;
	max-width: calc(100% - 2rem);
	max-height: calc(100% - 2rem);
}

.modal-almost-fullscreen > .modal-content {
	border-radius: 1rem;
}

/* Inactive, to indicate e.g. a link or text paragraph are not applicable, inactive, etc. */
.inactive {
	text-decoration: line-through;
}

/* Credits to these geniuses for the color transformations (turn-...-...) below: */
/* https://codepen.io/sosuke/pen/Pjoqqp */
/* https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43960991#43960991 */

.turn-grayscale-bluescale {
	-webkit-filter: brightness(0) saturate(100%) invert(94%) sepia(4%) saturate(5681%) hue-rotate(180deg) brightness(84%) contrast(92%);
	filter: brightness(0) saturate(100%) invert(94%) sepia(4%) saturate(5681%) hue-rotate(180deg) brightness(84%) contrast(92%);
}

.turn-grayscale-dark {
	-webkit-filter: brightness(0) saturate(100%) invert(14%) sepia(7%) saturate(21%) hue-rotate(360deg) brightness(89%) contrast(80%);
	filter: brightness(0) saturate(100%) invert(14%) sepia(7%) saturate(21%) hue-rotate(360deg) brightness(89%) contrast(80%);
}

.turn-grayscale-light-dark {
	-webkit-filter: brightness(0) saturate(100%) invert(35%) sepia(8%) saturate(254%) hue-rotate(169deg) brightness(95%) contrast(85%);
	filter: brightness(0) saturate(100%) invert(35%) sepia(8%) saturate(254%) hue-rotate(169deg) brightness(95%) contrast(85%);
}

.turn-black-to-white {
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.color-filter-pastel-red {
	-webkit-filter: invert(67%) sepia(16%) saturate(961%) hue-rotate(316deg) brightness(106%) contrast(101%);
	filter: invert(67%) sepia(16%) saturate(961%) hue-rotate(316deg) brightness(106%) contrast(101%);
}

.color-filter-pastel-yellow {
	-webkit-filter: invert(89%) sepia(15%) saturate(242%) hue-rotate(360deg) brightness(106%) contrast(96%);
	filter: invert(89%) sepia(15%) saturate(242%) hue-rotate(360deg) brightness(106%) contrast(96%);
}

.color-filter-pastel-green {
	-webkit-filter: invert(92%) sepia(21%) saturate(373%) hue-rotate(107deg) brightness(97%) contrast(95%);
	filter: invert(92%) sepia(21%) saturate(373%) hue-rotate(107deg) brightness(97%) contrast(95%);
}

.color-filter-pastel-blue {
	-webkit-filter: invert(95%) sepia(3%) saturate(3783%) hue-rotate(156deg) brightness(91%) contrast(92%);
	filter: invert(95%) sepia(3%) saturate(3783%) hue-rotate(156deg) brightness(91%) contrast(92%);
}

.color-filter-pastel-purple {
	-webkit-filter: invert(38%) sepia(22%) saturate(264%) hue-rotate(184deg) brightness(97%) contrast(91%);
	filter: invert(38%) sepia(22%) saturate(264%) hue-rotate(184deg) brightness(97%) contrast(91%);
}

ul.no-bullets {
	list-style-type: none; 
	padding: 0; 
	margin: 0;
	margin-left: 7px;
}

/* The class below is used to disable the Bootstrap-specific hover effects on some buttons */
.btn.btn-no-hover-effect:hover {
	background-color: inherit;
	color: inherit !important;
}
.btn-check:checked+.btn.btn-no-hover-effect, .btn.active.btn-no-hover-effect, .btn.show.btn-no-hover-effect, .btn.btn-no-hover-effect:first-child:active, :not(.btn-check)+.btn.btn-no-hover-effect:active {
	background-color: inherit;
	color: inherit !important;
}

/* Link that is automatically added/populated after a Bootstrap collapse that also has this class */
.page-intro-links {
	font-size: small;
}

.collapse-link.collapsed::after {
	content: "+ Show more";
}

.collapse-link:not(.collapsed)::after {
	content: "- Show less";
}

.collapse-link-before.collapsed::before {
	content: "+ Show more ";
}

.collapse-link-before:not(.collapsed)::before {
	content: "- Show less ";
}

/* Decorative horizontal lines for headings, courtesy of Le Chat J'ai Pété */
.decorative-heading {
	display: flex;
	align-items: center;
	gap: 20px; /* Space between the lines and the heading */
  }
  
.decorative-heading .line {
	flex: 1; /* Makes the lines grow to fill the available space */
	height: 1px; /* Thickness of the line */
	background-color: #ccc; /* Line color */
}
  
.decorative-heading h1, .decorative-heading h2, .decorative-heading h3, .decorative-heading h4, .decorative-heading h5, .decorative-heading h6 {
	margin: 0; /* Remove default margin */
	/* font-size: 24px; Adjust as needed */
	white-space: nowrap; /* Prevent the heading from wrapping */
}

/* Loading indicator that can be added to any element, as it works with :before */
.loading-indicator-thinkspin:before {
	content: "";
	background-image: url("../images/emoji/thinkspin.gif");
	display: inline-block;
	height: 1.2rem;
	width: 1.2rem;
	background-size: 100%;
	margin-right: .5rem;
	vertical-align: middle; /* Align with text */
}

/* DataTables tweaks */
/* Search box width */
.dt-search>input {
	min-width: 400px;
}

/* django-prose-editor tweaks */
/* Textarea/div height */
div .ProseMirror {
	min-height: 200px;
	max-height: 400px;
	overflow-y: auto;
}

/* Icons (Fontawesome mostly) */
.icon-large {
	font-size: 21px;
}
.icon-xl {
	font-size: 28px;
}
.icon-xxl {
	font-size: 36px;
}

/* Generally, icons are colored dark gray */
i.fa, i.fa-solid, i.fa-light {
	color: var(--bs-gray-dark);
}

/* However, we'll modify that with the class/one of the classes below if needed */
i.icon.icon-light-grey {
	color: #ccc;
}


/* The background of virtually everything but the sidebar */
.container-background {
	background: #0139e815;
	/* background: #bbb; */
}

.oo-card {
	background-color: #fff;
	/* Copied from bootstrap .shadow */
	box-shadow: var(--bs-box-shadow)!important;
	/* Copied from bootstrap .rounded */
	border-radius: var(--bs-border-radius)!important;
	/* ms-2 and me-2 */
	margin-left: .5rem!important;
	margin-bottom: 2.5rem!important;
	/* p-3 */
	padding: 1rem!important;
}

.oo-card.no-padding {
	padding: 0rem!important;
}

.oo-card.oo-index-card {
	height: 300px;
	padding: 2rem!important;
	background-color: #fff;
	-webkit-transition:
		background-color 300ms linear,
		transform 300ms ease;
	-ms-transition:
		background-color 300ms linear,
		transform 300ms ease;
	transition:
		background-color 300ms linear,
		transform 300ms ease;
}

.oo-card.oo-index-card:hover {
	background-color: #d2ecfc;
	-ms-transform: scale(1.035, 1.035); /* IE 9 */
	-webkit-transform: scale(1.035, 1.035); /* Safari */
	transform: scale(1.035, 1.035);
	-webkit-transition:
		background-color 300ms linear,
		transform 300ms ease;
	-ms-transition:
		background-color 300ms linear,
		transform 300ms ease;
	transition:
		background-color 300ms linear,
		transform 300ms ease;
}
/* Exception: index card(s) that do(es) not have a hover effect */
.oo-card.oo-index-card.oo-index-card-no-effect:hover {
	background-color: #fff;
	-ms-transform: none; /* IE 9 */
	-webkit-transform: none; /* Safari */
	transform: none;
	-webkit-transition: none;
	-ms-transition: none;
	transition: none;
}

.oo-card.oo-index-card > .card-header, .oo-card.oo-index-card > a {
	text-decoration: none;
	text-align: center;
	color: var(--bs-dark);
}



/* ******* */
/* Sidebar */
/* ******* */

/* sidebar-logo-biztory is a derivative of Datta Able's b-bg (which we don't use anymore) */
.sidebar-logo-biztory {
	background: #fff;
	border-radius: 5px;
	width: 35px;
	height: 35px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
}

.nav-item a span {
	text-align: center;
}

.sidebar-title {
	text-decoration: none;
	height: 75px;
	max-height: 100%;
}

.sidebar-title span {
	color: var(--bs-dark);
	height: 72px;
	vertical-align: middle;
}

/* Note that this class is also used in script.js to apply the active class based on the URL of the page we're on. */
.sidebar-nav-link {
	color: var(--bs-primary-emphasis);
}

.sidebar-nav-link img {
	height: 1.125rem;
}

/* Because the sidebar is hidden when we're on the Portal... this is used to float a button in the bottom left which will show the sidebar. Also applies to small screens on any page (Portal or not) */
.btn-sidebar-portal {
	position: fixed;
	z-index: 1030; /* 10 more than Bootstrap's sticky-top which has a value of 1020 */
	bottom: 20px;
	left: 20px;
	width: 50px;
	height: 50px;
	/* border-radius: 25px; */
	background-color: var(--bs-primary);
}

.btn-sidebar-portal-w-img {
	/* background-image: url(../images/orbit_one/multi_bubble.svg); */
	/* background-size: contain; */
	/* The image has been moved to the HTML so that it can be replaced with a custom one if the admins so desire. */
	width: 100px;
	height: 100px;
	background-color: #ffffff;
	padding: 10px;
	background-origin: content-box;
	padding: 10px;
	background-repeat: no-repeat;
	border-radius: 15px;
	border: 2px solid #999;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
}

.btn-sidebar-portal i {
	color: #eee;
}

.sidebar-offcanvas {
	width: 16.66667% !important;
	min-width: 300px !important;
}

.sidebar-nav-link.orbit-one-select-environment {
	border-radius: 0px;
}

.orbit-one-dropdown-menu {
	min-width: 400px;
	margin-left: 1.4rem;
}

#sidebar-signout {
	position: absolute;
	display: inline-block;
	bottom: 3rem;
}

/* *********** */
/* OOID Tiles */
/* *********** */

/* Used in several modules */

.ooid-tile {
	background-color: #fff;
	/* Shadow copied from Bootstrap */
	box-shadow: var(--bs-box-shadow)!important;
	border-radius: 10px;
	border: 1px solid #ccc;
	margin: 0.75rem;
	padding: 5px;
	padding-bottom: 8px;
	padding-right: 8px;
	cursor: pointer;
	max-width: 500px;
	max-height: 150px;
	text-wrap: pretty;
}

.ooid-tile:hover {
	background-color: #aaaaaa51;
}

.ooid-tile.ooid-tile-deleted {
	background-color: #ff666631;
}

/* Currently, both the "regular" OOID Tile and the one with a selector have the same style as they both have an action attached. */

/* When the OOID Tile enables a OOID Selector, it has visual cues for it. */
.ooid-tile.ooid-with-selector {
	cursor: pointer;
}

.ooid-tile.ooid-with-selector:hover {
	background-color: #04a9f551;
}

.ooid-tile-icon {
	padding: 5px;
	display: inline-block; /* Added to support the old template-based Insight Messaging tiles, but these should be updated to use the generateOoIdTile constructor in entities.js later */
}

.ooid-tile-header {
	padding: 5px;
}

.ooid-tile-title {
	padding: 5px;
	font-size: 1.25rem;
	display: inline-block; /* Added to support the old template-based Insight Messaging tiles, but these should be updated to use the generateOoIdTile constructor in entities.js later */
}

.ooid-tile-contents {
	padding-left: 13px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* Icons (our "own") */
.oo-icon {
	height: 22px;
	width: 22px;
	display: inline-block;
	margin-right: 3px;
	background-size: contain;
	background-repeat: no-repeat;
}

.oo-icon.icon-mini {
	height: 18px;
	width: 16px;
	margin-right: 2px;
	background-position-x: 0px;
	/* background-position-y: 2px; */
}

.oo-icon.icon-regular {
	height: 28px;
	width: 28px;
	margin-right: 2px;
}

.oo-icon.workbook {
	background-image: url("../images/vizportal/workbook_18px-large.png");
}

.oo-icon.datasource {
	background-image: url("../images/vizportal/data_source_content_type_small.png");
}

.oo-icon.view {
	background-image: url("../images/vizportal/view_18px-large.png");
}

.oo-icon.live_view {
	background-image: url("../images/vizportal/view_custom_large.png");
}

.oo-icon.project {
	background-image: url("../images/vizportal/project_content_type_small.png");
}

.oo-icon.flow {
	background-image: url("../images/vizportal/flow_content_type_small.png");
}

.oo-icon.pulseMetricDefinition {
	background-image: url("../images/vizportal/pulse.png");
}

.oo-icon.pulse {
	background-image: url("../images/vizportal/pulse.png");
}

.oo-icon.user {
	background-image: url("../images/vizportal/user_small.png");
}

.oo-icon.group {
	background-image: url("../images/vizportal/users_groups_large.png");
}

.oo-icon.report {
	background-image: url("../images/powerbi/powerbi-logo-gs-32.png");
}

.oo-icon.relation {
	background-image: url("../images/vizportal/table_36px-jumbo.png");
}

.oo-icon.relation.snowflake {
	background-image: url("../images/snowflake/snowflake-bug-color-rgb@1x.png");
}

.oo-icon.relation.bigquery {
	background-image: url("../images/google_bigquery/google_bigquery.png");
	margin-left: -1px;
}

.oo-icon.static_item {
	background-image: url("../images/vizportal/file_connection_type_small.png");
	margin-left: -1px;
}

/* Tableau Next Icons */
.oo-icon.dashboard {
	background-image: url("../images/tableau_next/dashboard.png");
}

.oo-icon.data_lake_object {
	background-image: url("../images/tableau_next/data_lake_object.png");
}

.oo-icon.semantic_model {
	background-image: url("../images/tableau_next/semantic_model.png");
}

.oo-icon.visualization {
	background-image: url("../images/tableau_next/visualization.png");
}

.oo-icon.workspace {
	background-image: url("../images/tableau_next/workspace.png");
}

/* OOID Selector */
.ooid-selector {
	/* background-color: #ededed; */
	border-radius: 10px;
	display: inline-grid;
	grid-gap: 0px;
	grid-template-columns: auto;
	padding: 5px;
	max-height: 400px;
	overflow-y: scroll;
}

/* OOID Search Results */
.ooid-search-results {
	background-color: #eee;
	border-radius: 10px;
	border: 1px solid #ccc;
	margin: 0.75rem;
	padding: 5px;
	padding-bottom: 8px;
	padding-right: 8px;
	cursor: pointer;
	max-width: 500px;
	height: 400px;
	text-wrap: pretty;
	overflow-y: scroll;
	position: relative;
}

.ooid-search-results.selected {
	background-color: #04a9f551;
}

.ooid-search-results-target {
	z-index: 1;
}

.ooid-search-results-backdrop-text {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 0; /* We assign the OOID tiles "target wrapper" z-index 1 so they appear above this backdrop text. */
	font-size: 2rem;
	color: #666;
}

.ooid-search-results.selected > .ooid-search-results-backdrop-text {
	color: #94c3dc;
}

.ooid-search-results > .ooid-search-results-backdrop-text {
	color: #bbb;
}

/**********/
/* Browse */
/**********/

nav.orbit-one-browse-breadcrumb {
	--bs-breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/></svg>");
}

.tab-content-actions {
	padding-left: 15px;
}

.browse-entity-metadata-list {
	font-size: smaller;
}

.browse-table-loading-message {
	text-align: center;
	margin-top: 1rem;
	margin-bottom: 1rem;
	justify-content: center;
}

/* We need this chart container to have a fixed height, because agCharts will draw it exactly like that. */
.browse-usage-stats-chart-container {
	width: 12.5rem;
	height: 3rem;
}

/* ********* */
/* Home page */
/* ********* */

ul.home-cards {
	list-style-type: none;
	padding-left: 0px;
}

.home-card-link {
	font-size: large;
}

.home-card-icon {
	font-size: 4rem;
}

.home-card-icon i {
	color: #f8f8f8;
}

.home-card-icon img {
	width: 4rem;
}

.home-card-description {
	font-size: small;
	color: #666;
}


/* ************ */
/* Environments */
/* ************ */

.environment-card-stat {
	text-transform: uppercase;
	font-size: 9pt;
}

.environment-card-properties {
	font-size: 11pt;
}

.add-environment-button-tableau {
	background-color: #d0e2ff;
	color: #333;
}

.add-environment-button-pbi {
	background-color: #fff3cd;
	color: #333;
}

.add-environment-button-snowflake {
	background-color: #cff4fc;
	color: #333;
}

.add-environment-button-bigquery {
	background-color: #d1e7de;
	color: #333;
}

.add-environment-button-tableaunext {
	background-color: #f0d3ff;
	color: #333;
}

/* Some "custom" styles for Tableau Next environments */

.bg-tableaunext {
	background-color: #f0d3ff;
}

.fg-tableaunext {
	color: #a800ff;
}

/* ****** */
/* Portal */
/* ****** */

#portal-loading-async-indicator {
	position: fixed;
	width: 500px;
	height: 80px;
	top: 0px; /* May be overriden by the hidden/visible classes below. As in, this is the starting point, but we translate it a bit further down. */
	left: 50%;
	margin-left: -250px; /* Negative half of width. */
	color: #222;
	font-weight: 200;
	font-size: larger;
	background: #ffffffcc;
	border-radius: 8px;
	border: 1px solid #222;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
	z-index: 1050; /* This means, just above the search bar area/header */
}

#portal-loading-async-indicator.hidden {
	/* Animation-specific properties _only_ */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-100%);
	transition:
		opacity 1s ease,
		visibility 1s ease,
		transform 1s ease;
}

#portal-loading-async-indicator.visible {
	/* Animation-specific properties _only_ */
	opacity: 1;
	visibility: visible;
	transform: translateY(100%);
	transition:
		opacity 1s ease,
		visibility 1s ease,
		transform 1s ease;
}

@keyframes pulse-for-async-loading-indicator {
	0%, 60%, 100% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
}

#portal-loading-async-indicator.hang-out {
	animation: pulse-for-async-loading-indicator 1500ms infinite;
}

#portalContents {
	/* min-height to ensure we can always scoll down a little bit and push the search bar to the top, getting rid of the sections if we feel like it. */
	min-height: 70vh;
}

.portal-main {
	/* Ensure we don't have the background from the other Orbit One pages. */
	background-color: #fff;
}

.portal-top-bar {
	/* TBD */
	background-image: linear-gradient(#fff 70%, #ffffff00 100%);
	height: 165px;
	min-height: 165px;
}

.portal-controls {
	/* TBD */
	color: #000;
	/* width: 92px; */
}

/* The portal sections which scroll horizontally */

#portalSectionsContainer > .row > .col > .card > .row {
	overflow-x: auto;
	white-space: nowrap;
	overflow-y: clip;
	flex-wrap: nowrap;
	scrollbar-width: none;
}

#portalSectionsContainer > .row > .col > .row > .col {
	display: inline-block;
	float: none;
	/* Do wrap in here as otherwise titles etc. are messed up. */
	white-space: normal;
}

#portalSectionsContainer {
	/* background-color: #e7ebfa; */
	background-color: #efefef;
	border-bottom: 2px solid #ddd;
}

.portal-section-row-container {
	min-height: 75px;
}

.portal-section-content-push {
	width: 0.01rem; /* Width is very low; we no longer use this to push content but to contain the arrow when on mobilé (it is positioned absolutely). */
}

.portal-section-arrow-icon {
	position: absolute;
	top: 10rem;
	right: 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
	color: #ddd;
	font-size: 3.2rem;
	z-index: 10;
}

/* And the arrow flashes a few times, then disappears. */
.portal-section-arrow-icon.flash {
	animation: flash 1s ease-in-out;
	animation-iteration-count: 3;
	/* And at the end, disappear */
	animation-fill-mode: forwards;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

@keyframes flash {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0.666; /* Slightly lower opacity so this isn't _too_ present */
	}
	100% {
		opacity: 0;
	}
}

/* This is also hovering somewhere around the section */
.portal-section-collapse-toggle {
	/* position: absolute; */
	/* bottom: -5px; */
	/* left: 0px; */
	height: 3.3rem;
	min-height: 3.3rem;
	width: 100%;
	overflow: hidden;
}

.portal-section-title {
	overflow: hidden;
	font-size: 2.5rem;
	line-height: 1;
	font-weight: lighter;
	position: absolute;
	left: 4rem;
	top: 0.8rem;
	text-wrap-mode: nowrap;
}
.portal-section-collapse-toggle button {
	height: 3.75rem;
}

/* The icon that goes with the collapse button */
.portal-section-collapse-toggle i {
	position: absolute;
	top: 1.52rem;
	left: 0px;
	width: 4rem;
	font-size: 1.25rem;
	text-align: center;
}

.portal-section-content {
	padding-top: 1.3rem;
}

.portal-section-content.show {
	/* Combine with .show, as this otherwise interferes with the collapse animation. */
	height: 490px;
}

.portal-section-card {
	/* Normally we'd use 32rem because of the live cards still being 32rem. Now setting to 23.5rem to demonstrate the more compact layout. */
	max-height: 23.5rem;
	min-height: 4.5rem;
	border: 0;
}

/* Portal search and controls */

/* Same badges as the cards but larger and located in the controls */
.portal-control-badge {
	/* The icon in here has as size driven by the selector below */
	height: 4rem;
	width: 4rem;
	background: #fff;
	/* border: #aaa 1px solid; */
	border-radius: 32px;
	/* box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15); */
	padding-left: 17px;
	padding-top: 18px;
	margin-left: auto;
	margin-right: auto;
}

.portal-control-badge-small {
	height: 48px;
	width: 48px;
	border-radius: 24px;
	padding-left: 16px;
	padding-top: 11px;
}

.portal-control-badge-small.vizportal-icon {
	/* These icons should be aligned slightly differently */
	padding-left: 11px;
}

/* Contents of the badge when icons, a bit larger */
.portal-control-badge > span.fa, .portal-control-badge > span.fa-solid, .portal-control-badge > span.fa-regular {
	font-size: 24px;
	color: var(--bs-gray);
	/* background-color: var(--bs-warning-bg-subtle); */
}

/* Contents of the badge when small icons, still a little bit larger */
.portal-control-badge-small > span.fa, .portal-control-badge-small > span.fa-solid, .portal-control-badge-small > span.fa-regular {
	font-size: 18px;
	color: var(--bs-gray);
	/* background-color: var(--bs-warning-bg-subtle); */
}

.portal-control-badge span {
	height: 36px;
	width: 36px;
}

.portal-control-badge-small span {
	height: 24px;
	width: 24px;
}

.portal-control-badge.active {
	background-color: var(--bs-success-bg-subtle);
	color: var(--bs-success);
	border-color: var(--bs-success);
	border-width: 2px;
}

#filterTypeButton.portal-control-badge {
	/* Needs some specific alignment */
	padding-left: 19px;
}

/* Each type icon might need some tweaking, too. */
#filterTypeButton.portal-control-badge.filter-all {
	padding-left: 16px;
	padding-top: 19px;
}

#filterTypeButton.portal-control-badge.filter-view {
	padding-left: 19px;
	padding-top: 20px;
}

#filterTypeButton.portal-control-badge.filter-live-view {
	padding-left: 20px;
	padding-top: 19px;
}

#filterTypeButton.portal-control-badge.filter-pulse-metric {
	padding-left: 19px;
	padding-top: 19px;
}

.portal-control-badge.search-include {
	padding-left: 19px;
	padding-top: 0.625rem;
}

.portal-control-badge.flip-all-cards {
	padding-left: 19px;
	padding-top: 0.5rem;
}

.portal-nothing-to-see {
	font-size: 24pt;
	font-weight: lighter;
	text-align: center;
	margin-bottom: 15rem;
}

/* Portal cards */

.portal-card {
	border: 0px;
	height: 350px;
	position: relative;
	width: 18rem;
	height: 17rem;
	overflow: hidden;
}

.portal-card-side-front,.portal-card-side-back {
	position: absolute;
	width: 100%;
	height: 100%;
}

/* Of all the "coloring rules" below, this one should be first as it otherwise overrules the other ones. */
.portal-card:not(.portal-card-report) {
	border-bottom: var(--bs-primary) 4px solid;
	/* background-color: #e9f0fd; */
	background-color: #ffffff;
}

.portal-card.portal-card-pulse {
	width: 20rem;
	height: 13rem;
	border-bottom: var(--bs-danger) 4px solid;
	background-color: #fff;
}

.portal-card.portal-card-live {
	width: 25rem;
	/* height: 25rem; */
	background-color: #fff;
}

.portal-card-col {
	/* The column containing the portal card is a bit wider */
	width: 20rem;
	min-width: 20rem;
}

/* Double down on the min width for the portal-card-col in case it's a live card */
.portal-card-col:has(.portal-card-live) {
	width: 27rem;
	min-width: 27rem;
}

.portal-card.portal-card-report {
	background-color: var(--bs-gray-dark);
	color: #ccc;
	border-bottom: var(--bs-secondary) 4px solid;
}

.portal-card.portal-card-datasource {
	height: 17rem;
	background-color: #e9fdeb;
	border-bottom: var(--bs-success) 4px solid;
}

.portal-card.portal-card-static {
	background-color: var(--bs-light-bg-subtle);
	border-bottom: var(--bs-gray-dark) 4px solid;
	/* height: 22rem; */
}

.portal-card.portal-card-relation {
	background-color: #e8faff;
	border-bottom: var(--bs-info) 4px solid;
}

/* Scrollbars for static cards show up in a pretty ugly way on Windows, so we actively hide them until hovering */
.portal-card-static {
	overflow-y: hidden !important;
}
.portal-card-static:hover {
	overflow-y: auto !important;
}

.portal-card.portal-highlight {
	border-bottom: var(--bs-warning) 4px solid;
}

.portal-card-badge {
	/* The icon in here has as size of 28px through .icon-regular */
	height: 48px;
	width: 48px;
	position: absolute;
	top: 6px;
	right: -24px;
	padding-left: 10px;
	padding-top: 10px;
	border: #aaa 1px solid;
	background: #fff;
	border-radius: 24px;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
	z-index: 1; /* Me first!! */
}

.portal-card-badge.favorite-badge {
	/* Overwrites the position of the badge above, to push it down a bit. 36px = 24px + 12px. */
	top: 66px;
	right: -24px;
	font-size: 24px;
	color: var(--bs-warning);
	padding-top: 4px;
	padding-left: 9px;
	background-color: var(--bs-warning-bg-subtle);
}

.portal-card-badge.pulse-badge {
	/* Adjustments specific to the icon we display. */
	font-size: 18pt;
	padding-top: 9px;
	padding-left: 9px;
}

.portal-card-badge.live-view-badge {
	/* Adjustments specific to the icon we display. */
	font-size: 18pt;
	padding-top: 5px;
	padding-left: 12px;
}


/* The portal-top-container class div is what contains the thumbnail on the front, or the Pulse, and on the backside, it contains the chart with views. */
.portal-top-container {
	/* "trims" the thumbnail so it is a slightly wider image and not a square. */
	max-height: 8rem;
	height: 8rem;
	max-width: 18rem;
	overflow: hidden;
	vertical-align: middle;
}

.portal-card.portal-card-live > .portal-card-side-back > .portal-top-container {
	max-width: 25rem;
}

.portal-card.portal-card-datasource > .portal-card-side-front > .portal-top-container > div > div > img {
	height: 6rem;
}

.portal-card.portal-card-relation > .portal-card-side-front > .portal-top-container > div > div > img {
	height: 6rem;
}

.portal-card.portal-card-pulse > .portal-top-container {
	height: 13rem;
	min-height: 13rem;
	width: 20rem;
	min-width: 19.5rem;
	/* Adding some fluff to mask the "forced border and shadow" they added instead of making this more white label-like. */
	/* border: 20px solid #fff; */
	/* Even more fine-tuned */
	border-left: 2px solid #fff;
    border-bottom: 20px solid #fff;
    border-top: 20px solid #fff;
}

.portal-card.portal-card-live > .portal-card-side-front > .portal-top-container {
	/* For a live card, the whole card is the embedded view */
	height: 25rem;
	min-height: 25rem;
	width: 25rem;
	min-width: 25rem;
}

/* The fall-back thumbnail (which is the default icon) looks better when a bit smaller. */
.fallback-thumbnail {
	height: 5rem;
	width: 5rem;
	margin: 3rem auto;
}

/* The loading placeholders for Pulse Metrics and Live Views, if we wanted to further customize them.
.portal-card.portal-card-pulse > .portal-top-container > .tableau-pulse-ban-loading {
	color: #aaa;
}
*/
.tableau-live-view-loading {
	margin-top: 3rem;
}

/* Different versions may have different margins (there is a reason for this) */
.portal-top-container tableau-pulse,
.portal-top-container tableau-pulse-v3-1,
.portal-top-container tableau-pulse-v3-2,
.portal-top-container tableau-pulse-v3-3,
.portal-top-container tableau-pulse-v3-4,
.portal-top-container tableau-pulse-v3-5,
.portal-top-container tableau-pulse-v3-6,
.portal-top-container tableau-pulse-v3-7,
.portal-top-container tableau-pulse-v3-8,
.portal-top-container tableau-pulse-v3-9,
.portal-top-container tableau-pulse-v3-10,
.portal-top-container tableau-pulse-v3-11,
.portal-top-container tableau-pulse-v3-12,
.portal-top-container tableau-pulse-v3-13
{
	margin-left: -10px;
	margin-top: -23px;
}

.tableau-pulse-click-detector {
	/* We can't detect the click _in_ the iframe, so we detect a click on this transparent overlay instead. */
	height: 11rem;
	min-height: 11rem;
	width: 17rem;
	min-width: 17rem;
	background-color: transparent;
	position: absolute;
	z-index: 1;
	margin-top: 2rem;
}

/* Commenting out the title thing for now; removing it prevents the "overflow problem" and makes cards differently sized which is okay. */
.portal-card-title {
	/* height: 3.5rem; */
	overflow: hidden;
	height: 2.5rem;
	text-wrap: nowrap;
	position: relative; /* Position relative so we can add the fade-out effect on the right-hand side and anchor it to this */
}

/* Fade-out of the title on the right-hand side */
.portal-card-title::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	pointer-events: none;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
	width: 6rem;
	height: 100%;
}

/* The color of the fade out is different depending on the type */

.portal-card-view.portal-card-title::after {
	/* background: linear-gradient(to right, #e9f0fd00, #e9f0fdff 90%); */
	background: linear-gradient(to right, #ffffff00, #ffffffff 90%);
}

.portal-card-report.portal-card-title::after {
	background-color: var(--bs-gray-dark);
}

.portal-card-datasource.portal-card-title::after {
	background: linear-gradient(to right, #e9fdeb00, #e9fdebff 90%);
}

.portal-card-static.portal-card-title::after {
	/* background-color: var(--bs-light-bg-subtle); */
	opacity: 0; /* No fade out for static cards */
}

.portal-card-relation.portal-card-title::after {
	background: linear-gradient(to right, #e9fdeb00, #e8faffff 90%);
}

.portal-card-subtitle {
	font-weight: 300;
	text-transform: uppercase;
	color: #999;
	margin-bottom: 1rem;
}

.portal-card-title.portal-card-datasource, .portal-card-body.portal-card-datasource, .portal-top-container.portal-card-datasource {
	background-color: #e9fdeb;
}

.portal-card-body {
	/* white-space: nowrap; */
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 18rem;
	height: 6rem;
	max-height: 6rem;
	padding: 0.5rem 0rem 0rem 1rem;
	font-size: smaller;
}

.portal-card-body.portal-card-static {
	padding: 1rem;
	position: relative; /* In this case we defer to the user to provide adequate content */
}

/* For videos and images, we have different sizes */
.portal-card-body.portal-card-static.portal-card-static-video, .portal-card-static-content.portal-card-static-video,.portal-card-body.portal-card-static.portal-card-static-image, .portal-card-static-content.portal-card-static-image {
	width: 28rem;
	overflow: hidden;
}
.portal-card-col:has(.portal-card-static-video),.portal-card-col:has(.portal-card-static-image) {
	width: 30rem;
	min-width: 30rem;
}
.portal-card:has(.portal-card-static-video),.portal-card:has(.portal-card-static-image) {
	width: 28rem;
	min-width: 28rem;
}

/* "Fade out" the bottom of portal-cards. Added to portal-card-body so other content on top of that remains visible. */
.portal-card-body::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
	width: 100%;
	height: 3em;
}

/* The color of the fade out is different depending on the type */

.portal-card-view.portal-card-body::after {
	/* background: linear-gradient(to bottom, #e9f0fd00, #e9f0fdff 90%); */
	background: linear-gradient(to bottom, #ffffff00, #ffffffff 90%);
}

.portal-card-report.portal-card-body::after {
	background-color: var(--bs-gray-dark);
}

.portal-card-datasource.portal-card-body::after {
	background: linear-gradient(to bottom, #e9fdeb00, #e9fdebff 90%);
}

.portal-card-static.portal-card-body::after {
	/* background-color: var(--bs-light-bg-subtle); */
	opacity: 0; /* No fade out for static cards */
}

.portal-card-relation.portal-card-body::after {
	background: linear-gradient(to bottom, #e8faff00, #e8faffff 90%);
}


.portal-card-body li>i {
	width: 15px;
}

.portal-card-stat-row {
	position: absolute;
	bottom: 10px;
	left: 20px;
}

.portal-card-stat {
	text-transform: uppercase;
	font-size: 9pt;
}

.portal-card-stat.portal-card-view {
	color: var(--bs-primary);
}

.portal-card-stat.portal-card-report {
	color: var(--bs-warning);
}

.portal-card-stat.portal-card-pulse {
	color: var(--bs-danger);
}

.portal-card-stat.portal-card-datasource {
	color: var(--bs-success);
}

.portal-card-stat.portal-card-relation {
	color: var(--bs-info);
}

.portal-pulse-full-screen {
	width: 100%;
	min-width: 100%;
	height: 100%;
	min-height: 100%;
}

.portal-pulse-full-screen tableau-pulse,
.portal-pulse-full-screen tableau-pulse-v3-1,
.portal-pulse-full-screen tableau-pulse-v3-2,
.portal-pulse-full-screen tableau-pulse-v3-3,
.portal-pulse-full-screen tableau-pulse-v3-4,
.portal-pulse-full-screen tableau-pulse-v3-5,
.portal-pulse-full-screen tableau-pulse-v3-6,
.portal-pulse-full-screen tableau-pulse-v3-7,
.portal-pulse-full-screen tableau-pulse-v3-8,
.portal-pulse-full-screen tableau-pulse-v3-9,
.portal-pulse-full-screen tableau-pulse-v3-10,
.portal-pulse-full-screen tableau-pulse-v3-11,
.portal-pulse-full-screen tableau-pulse-v3-12,
.portal-pulse-full-screen tableau-pulse-v3-13
{
	height: 100%;
}

/* Make views' iframes 100% width so they are centered if more narrow */
tableau-viz-v3-13 > iframe {
	width: 100% !important;
}

.portal-card-description {
	font-size: small;
}

.portal-card-options {
	position: absolute;
	bottom: 0.5rem;
	width: 2rem;
	height: 2rem;
	cursor: pointer;
	text-align: center;
}

.portal-card-options.portal-card-options-link {
	right: 0;
}

.portal-card-options.portal-card-options-favorite-star {
	right: 1.6rem;
	bottom: 0.35rem;
}


.portal-card-ayd-button-img {
	width: 40%;
	max-height: 40%;
}


/* We need this chart container to have a fixed height, because agCharts will draw it exactly like that. */
.portal-entity-chart-container {
	height: 10rem;
}

/* More specific selector to make the chart for Live Views wider */
.portal-card-live > .portal-card-side-back > .portal-top-container > .portal-entity-chart-container {
	width: 25rem;
}

.card-side-active {
	animation: fadeInAnimation ease 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.card-side-inactive {
	animation: fadeOutAnimation ease 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

/* entity-action-buttons on the back */
.card-side-actions > .entity-action-buttons > span > i {
	color: var(--bs-gray-600);
}
/* Some of those are in a link */
.card-side-actions > .entity-action-buttons > span > a > i {
	color: var(--bs-gray-600);
}

/* In the portal, we have a little donut chart that shows how much of the content matches the search and filter */

#searchPercentMatchingChart {
	background: conic-gradient(var(--bs-gray-500) 100%, #fff 0);
	border-radius: 50%;
	width: 4rem;
	height: 4rem;
	position: relative;
	justify-content: center;
}

#searchPercentMatchingChartInnerCircle {
	font-size: small;
	background-color: #fff;
	color: #666;
	position: absolute;
	justify-content: center;
	top: 0.6rem;
	left: 0.65rem;
	width: 2.75rem;
	height: 2.75rem;
	padding-top: 0.75rem;
	border-radius: 99px;
}

#searchPercentMatchingChartLabel {
	text-align: center;
}

/* portalSearchBarProgressIndicator, which is the area we use to count down until we load new content after the user has typed  */
#portalSearchBarProgressIndicator {
	width: 100%;
	height: 3rem;
	background-color: #ffffff00;
	position: absolute;
	top: 0;
	pointer-events: none; /* To allow click-through */
}

#portalSearchBarProgressIndicatorMessage {
	height: 2.875rem;
	width: 33%;
	position: absolute;
	right: 1px;
	top: 1px;
	text-align: right;
	color: #0d6efd;
	background-color: #ffffffb0;
	pointer-events: none; /* To allow click-through */
	font-family: monospace;
	font-size: small;
	padding-right: 8px;
	padding-top: 6px;
}

#portalSearchBarProgressIndicatorFill {
	height: 3rem;
	width: 100%;
	border-radius: 0.3125rem;
	pointer-events: none; /* To allow click-through */
}

#portalSearchBarProgressIndicatorFill.inactive {
	width: 100%;
	background-color: #ffffff00;
	/* Immediate reset */
	-ms-transform: scale(0.01, 1); /* IE 9 */
	-webkit-transform: scale(0.01, 1); /* Safari */
	transform: scale(0.01, 1);
	transform-origin: left;
	-webkit-transition:
		transform 0ms ease;
	-ms-transition:
		transform 0ms ease;
	transition:
		transform 0ms ease;
}

#portalSearchBarProgressIndicatorFill.waiting {
	background-color: #0d6efd30;
	-ms-transform: scale(1, 1); /* IE 9 */
	-webkit-transform: scale(1, 1); /* Safari */
	transform: scale(1, 1);
	transform-origin: left;
	-webkit-transition:
		transform 3000ms linear;
	-ms-transition:
		transform 3000ms linear;
	transition:
		transform 3000ms linear;
}

@keyframes pulse-for-search-bar-progress-indicator {
	0%, 100% {
		background-color: #0d6efd30;
	}
	50% {
		background-color: #ffffff00;
	}
}

#portalSearchBarProgressIndicatorFill.fetching {
	background-color: #0d6efd30;
	-ms-transform: scale(1, 1); /* IE 9 */
	-webkit-transform: scale(1, 1); /* Safari */
	transform: scale(1, 1);
	transform-origin: left;
	-webkit-transition:
	transform 0ms linear;
	-ms-transition:
	transform 0ms linear;
	transition:
	transform 0ms linear;
	animation: pulse-for-search-bar-progress-indicator 750ms infinite;
}

@keyframes pulse-for-search-bar-progress-indicator-no-action {
	0%, 100% {
		background-color: #ff6f0030;
	}
	50% {
		background-color: #ffffff00;
	}
}

#portalSearchBarProgressIndicatorFill.no-action {
	background-color: #ff6f0030;
	-ms-transform: scale(1, 1); /* IE 9 */
	-webkit-transform: scale(1, 1); /* Safari */
	transform: scale(1, 1);
	transform-origin: left;
	-webkit-transition:
		transform 0ms linear;
	-ms-transition:
		transform 0ms linear;
	transition:
		transform 0ms linear;
	animation: pulse-for-search-bar-progress-indicator-no-action 450ms infinite;
}

/* Portal Embedding Modal */

.embedding-modal-footer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	border-radius: 0.5rem 0.5rem 0 0 !important;
    border-bottom: 2px solid #ccc
}

/* Portal Mobile/narrow version.
	Below the other Portal style rules because order-based.
 	Bootstrap 5.3 lg=992px 
*/
@media (max-width: 992px) {
	.portal-top-bar {
		background-image: linear-gradient(#fff 90%, #ffffff00 100%);
		height: 280px;
		min-height: 280px;
	}
	#portalSearchBarProgressIndicator {
		display: none;
	}
	.portal-section-title {
		font-size: 2rem;
		left: 3rem;
		top: 0.6rem;
	}
	.portal-section-collapse-toggle i {
		top: 1.2rem;
		width: 3rem;
		font-size: 1rem;
	}
}

/***********************/
/* Permissions Browser */
/***********************/

.permissions-browser-icon {
	width: 28px;
	display: inline-block;
	vertical-align: middle;
}

.permissions-browser-icon img {
	width: 20px;
}

.permissions-browser-icon-in-table {
	margin-right: 4px;
}

.permissions-browser-accordion-fill-background {
	background-color: #5acd9840;
	width: 0%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
}

.permissions-browser-accordion-fill {
	background-color: #5acd98;
	height: 0.4rem;
	width: 0%;
}

/* 🫤 we kind of want the accordion button on the left. Thanks, https://stackoverflow.com/a/69833762/27966606 */
.accordion-button::after {
	order: -1;
	margin-left:0!important;
	margin-right: 1rem;
}
/* We do need to pad this back to the right a bit to respect the arrow hierarchy */
button.accordion-button.no-after:after {
	background-image: none;
	content: "";
}

.permissions-browser-accordion-content-count {
	margin-left: 1rem;
	font-size: smaller;
}

/* The class below exists because we spaced out the top-level projects in the Project Hierarchy a bit, but they don't have a top border normally. Now they do. */
.accordion-item-permissions-project-list {
	border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
}

/* The few formatting rules below were originally used to have the table scroll in the viewport before we used Datatables. With the use of Datatables, they don't seem necessary anymore. */
/*
.permissions-browser-results-table {
	table-layout: fixed;
	width: 100%;
}

.permissions-browser-results-table tr {
	width: 100%;
}

.permissions-browser-results-table-head {
	width: 100%;
	display: block;
}

.permissions-browser-results-table-body {
	display: block;
	overflow-y: scroll;
	width: 100%;
	max-height: 85vh;
} 
*/

/* Fade in/out animations */
.fade-in {
	animation: fadeIn 0.5s forwards;
}

.fade-out {
	animation: fadeOut 0.5s forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}


/**************/
/* S.H.E.L.F. */
/**************/

.shelf-tree-icon {
	width: 22px;
	margin-right: 0.25rem;
	text-align: center;
}


/*****************/
/* Ask Your Data */
/*****************/

.ayd-chat-card {
	position: relative;
}

.ayd-chat-window {
	background: var(--bs-body-bg);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0.75rem;
	min-height: 700px;
	max-height: 700px;
	overflow-y: auto;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
@media (max-width: 767px) {
	.ayd-chat-window {
		min-height: 420px;
		max-height: 420px;
	}
}

.ayd-chat-message {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	align-items: flex-start;
}

.ayd-chat-message-user {
	align-items: flex-end;
}

.ayd-chat-bubble {
	max-width: 90%;
	background-color: rgba(13, 110, 253, 0.12);
	color: var(--bs-body-color);
	border-radius: 0.75rem;
	padding: 0.75rem 0.95rem;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
	white-space: pre-wrap;
	word-break: break-word;
}

.ayd-chat-message-status .ayd-chat-bubble {
	background-color: var(--bs-tertiary-bg);
	color: var(--bs-body-color);
}

.ayd-chat-message-error .ayd-chat-bubble {
	background-color: rgba(220, 53, 69, 0.12);
	color: var(--bs-danger);
}

.ayd-chat-message-answer .ayd-chat-bubble {
	background-color: rgba(13, 253, 17, 0.12);
	color: var(--bs-success);
}

.ayd-chat-meta {
	font-size: 0.75rem;
	color: var(--bs-secondary-color);
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ayd-chat-message-user .ayd-chat-bubble {
	background: var(--bs-primary);
	color: #fff;
}

.ayd-chat-message-status .ayd-chat-meta {
	color: var(--bs-primary);
}

.ayd-chat-message-error .ayd-chat-meta {
	color: var(--bs-danger);
}

.ayd-chat-bubble > span {
	display: block;
}

.ayd-chat-empty {
	text-align: center;
	color: var(--bs-secondary-color);
	font-size: 0.9rem;
	margin-top: 1rem;
}

.ayd-chat-form textarea {
	resize: vertical;
	max-height: 160px;
}

.ayd-chat-status {
	min-height: 1.25rem;
}

.ayd-chat-bubble a {
	color: var(--bs-primary);
	text-decoration: underline;
}

.ayd-chat-bubble > span > img {
	max-width: 580px;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
	margin-bottom: 0.5rem;
	margin-right: 0.5rem;
	margin-top: 0.5rem;
	margin-left: 0.15rem;
	border: 2px solid #c7dbff;
}

@media (max-width: 767px) {
	.ayd-chat-window {
		max-height: 360px;
	}
}

.ayd-chat-button {
	min-width: 8rem;
}

.ayd-chat-message-action {
	display: inline-block;
	margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
	background-color: #cff4fc;
}

.ayd-chat-message-action-text {
	margin-bottom: 0.25rem;
}