/*
common colors stylesheet

Installing and running the PPMS software requires a license, contact info@stratocore.com for details
The PPMS licensing agreement DOES NOT allow any modification of the software (including stylesheets and images), contact info@stratocore.com for feature requests
The PPMS licensing agreement DOES NOT allow re-distribution of the software
*/

/* Screen reader only — visually hidden but accessible */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* calendar colors */
div#content td.avail {
	opacity: 0.8;
	background-color: #f2f2f2;
	color: #f2f2f2;
}

div#content td.booked {
	opacity: 0.8;
	background-color: #303f9f;
	color: white;
}

div#content td.booked a {
	color: white;
}

div#content td.inuse {
	opacity: 0.8;
	background-color: #304ffe;
	color: white;
}

div#content td.inuse a {
	color: white;
}

div#content td.bused {
	opacity: 0.9;
	background-color: #1a237e;
	color: white;
}

div#content td.bused a {
	color: white;
}

div#content td.na,
div#content td.holiday {
	opacity: 0.7;
	background-color: #d1d0d0;
	color: #d1d0d0;
}

div#content td.disabled {
	opacity: 1;
	background-color: #d1d0d0;
	color: red;
	text-align: center;
}

div#content td.specialE {
	opacity: 0.8;
	background-color: #388e3c;
	color: white;
}

div#content td.specialE a {
	color: white;
}

div#content td.specialEinu {
	opacity: 0.8;
	background-color: #4caf50;
	color: white;
}

div#content td.specialEinu a {
	color: white;
}

div#content td.specialEused {
	opacity: 0.9;
	background-color: #4caf50;
	color: white;
}

div#content td.specialEused a {
	color: white;
}

div#content td.specialE2 {
	opacity: 0.8;
	background-color: #9c27b0;
	color: white;
}

div#content td.specialE2 a {
	color: white;
}

div#content td.andE2 {
	border: 5px solid #9c27b0;
}

div#content td.andE2res {
	background-color: #005232;
	background: linear-gradient(to bottom, #005232 50%, #7c368a 50%);
}

div#content td.savail {
	opacity: 0.8;
	background-color: #c8e6c9;
}

div#content td.savailused {
	opacity: 0.8;
	background-color: #c8e6c9;
}

div#content td.navail {
	opacity: 0.8;
	background-color: #a5d6a7;
}

div#content td.crit3 {
	opacity: 0.7;
}

div#content .crit3 {
	background-color: #ef6c00;
}

div#content td.crit2 {
	opacity: 0.8;
}

div#content .crit2 {
	background-color: #dce775;
}

div#content td.crit-3 {
	opacity: 0.8;
}

div#content .crit-3 {
	background-color: #7986cb;
}

div#content td.crit-2 {
	opacity: 0.8;
}

div#content .crit-2 {
	background-color: #c5cae9;
}

div#content span.crit-3,
div#content span.crit3 {
	color: white;
}

div#content span.crit-3,
div#content span.crit-2,
div#content span.crit2,
div#content span.crit3 {
	padding-left: 0.5em;
	padding-right: 0.5em;
}

table.planning th {
	font-weight: normal;
}

div#content label.calinputlab {
	color: white;
	font-size: 0.7em;
	font-weight: bold;
	padding: 0.3em 0.3em;
}

/* disabled button */
input[type="button"]:disabled,
button:disabled,
input:disabled {
	cursor: default;
	opacity: 0.5;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

/* others */
img {
	border: 0;
}

.mand {
	color: #dc3545;
	font-weight: bold;
	font-size: 120%;
}

.italic {
	font-style: italic;
}

.bold {
	font-weight: bold;
}

abbr,
acronym {
	border-bottom: 1px dotted;
	cursor: help;
}

.planning td {
	cursor: default;
}

.hidden {
	display: none;
}

.warn,
.orange {
	color: orange !important;
}

.error,
.red {
	color: red !important;
}

.invalid-input {
	border: 1px solid #dc3545;
}

.invalid-input-error-label {
	color: #c41a16;
}

.input-label-floating-right {
	float: right;
	padding-left: 1em;
	margin-top: 0.5em;
}

.input-label-floating-left {
	float: left;
	padding-right: 1em;
}

.underline-default {
	/* background-color: white !important; */
}

.underline-level1-tr {
	background-color: rgb(235, 235, 228);
}

.underline-level2-tr {
	background-color: rgb(235, 235, 228);
	opacity: 0.5;
}

.underline-level2-tr>.underline-td,
.underline-level1-tr>.underline-td {
	font-weight: bold;
}

.underline-td-title {
	font-weight: bold;
	padding-top: 1em !important;
}

.option-ac-inactive {
	color: gray !important;
}

.underline-split-block-1 {
	background-color: rgba(232, 234, 246, 0.32);
}

.tr-ac-custom {
	font-size: 1.5em;
}

.form-custom-table {
	width: 100%;
}

.form-custom-table-td-label {
	width: 30%;
}

.form-custom-table-input {
	width: 60%;
}

.form-custom-table-input-split {
	width: 80%;
}

.p-text-including-a {
	font-weight: normal;
}

.p-text-including-a>a {
	font-weight: bold;
	margin-left: 0.3em;
}

.full-width {
	width: 100%;
}

div #content li li {
	font-size: 1em;
}

.forprint {
	display: none;
}

/* Changing checkbox and radio in UI
Targetted the modals only.
*/

/* .modalWindow input[type="radio"],
.ui-dialog .ui-dialog-content input[type="radio"]{
	appearance: none;
	background-color: #fff;
	margin: 0;
	font: inherit;
	color: currentColor;
	width: 1.15em;
	height: 1.15em;
	border: 0.15em solid currentColor;
	border-radius: 50%;
}
.modalWindow input[type="radio"]:checked,
.ui-dialog .ui-dialog-content input[type="radio"]:checked{
	transform: scale(1);
	box-shadow: 0 0 0 1000px #68A2ED inset !important;
}
.modalWindow input[type="checkbox"],
.ui-dialog .ui-dialog-content input[type="checkbox"]{
	appearance: none;
	background-color: #fff;
	margin: 0;
	font: inherit;
	color: currentColor;
	width: 1.15em;
	height: 1.15em;
	border: 0.15em solid currentColor;
}
.modalWindow input[type="checkbox"]:checked,
.ui-dialog .ui-dialog-content input[type="checkbox"]:checked{
	transform: scale(1);
	box-shadow: 0 0 0 1000px #68A2ED inset !important;
} */

.modalWindow input[type="radio"]:disabled,
.ui-dialog .ui-dialog-content input[type="radio"]:disabled {
	appearance: none;
	background-color: #fff;
	margin: 0;
	font: inherit;
	color: currentColor;
	width: 1.15em;
	height: 1.15em;
	border: 0.15em solid currentColor;
	border-radius: 50%;
}

.modalWindow input[type="radio"]:checked:disabled,
.ui-dialog .ui-dialog-content input[type="radio"]:checked:disabled {
	transform: scale(1);
	box-shadow: 0 0 0 1000px #868686 inset !important;
}

.modalWindow input[type="checkbox"]:disabled,
.ui-dialog .ui-dialog-content input[type="checkbox"]:disabled {
	appearance: none;
	background-color: #fff;
	margin: 0;
	font: inherit;
	color: currentColor;
	width: 1.15em;
	height: 1.15em;
	border: 0.15em solid currentColor;
}

.modalWindow input[type="checkbox"]:checked:disabled,
.ui-dialog .ui-dialog-content input[type="checkbox"]:checked:disabled {
	transform: scale(1);
	box-shadow: 0 0 0 1000px #868686 inset !important;
}

/* training forms */
#content4 input[type="radio"]:checked:disabled {
	appearance: none;
	background-color: #fff;
	/* margin: 0; */
	font: inherit;
	color: currentColor;
	width: 1em;
	height: 1em;
	border: 0.15em solid currentColor;
	border-radius: 50%;
	/* margin-left: 0.4em; */
	vertical-align: bottom;
}

#content4 input[type="radio"]:checked:disabled {
	transform: scale(1);
	box-shadow: 0 0 0 1000px #868686 inset !important;
}

#content4 input[type="checkbox"]:checked:disabled {
	appearance: none;
	background-color: #fff;
	/* margin: 0; */
	font: inherit;
	color: currentColor;
	width: 1em;
	height: 1em;
	border: 0.15em solid currentColor;
	/* margin-left: 0.4em; */
	vertical-align: bottom;
}

#content4 input[type="checkbox"]:checked:disabled {
	transform: scale(1);
	box-shadow: 0 0 0 1000px #868686 inset !important;
}

.edits-icon {
	fill: rgb(154, 153, 153);
	margin-top: 7px;
	transition: 200ms;
}

.edits-icon:hover {
	fill: var(--primary-color);
	cursor: pointer;
}

.edits-icon-highlight {
	fill: rgb(203, 203, 203);
	margin-top: 7px;
	transition: 200ms;
}

@media print {
	.forprint {
		display: block;
	}

	.wrap {
		white-space: pre-line;
	}

	/*checkbox and radio button darker in print*/
	input[type="radio"] {
		appearance: none;
		background-color: #fff;
		margin: 0;
		font: inherit;
		color: currentColor;
		width: 1.15em;
		height: 1.15em;
		border: 0.15em solid currentColor;
		border-radius: 50%;
	}

	input[type="radio"]:checked {
		transform: scale(1);
		box-shadow: 0 0 0 1000px #000000 inset !important;
	}

	input[type="checkbox"] {
		appearance: none;
		background-color: #fff;
		margin: 0;
		font: inherit;
		color: currentColor;
		width: 1.15em;
		height: 1.15em;
		border: 0.15em solid currentColor;
	}

	input[type="checkbox"]:checked {
		transform: scale(1);
		box-shadow: 0 0 0 1000px #000000 inset !important;
	}
}

/*
For accessibility on hidden elements: technically visible but practically hidden;
https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
*/
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Button WebKit */
input[type="button"],
input[type="submit"],
button {
	-webkit-appearance: none;
}

/* Wait Icon */
img.wait-icon-page {
	height: 50px;
	margin-left: 45%;
	margin-top: 5em;
}

img.wait-icon-schedules-day-view {
	height: 50px;
	margin-left: 45%;
	margin-top: 5em;
}

img.wait-icon {
	height: 24px;
}

/* Filter Input */
input[type="text"].filter {
	width: 10%;
	background: transparent;
	transition: all 0.25s;
}

input[type="text"].filter-blur {
	color: #aaa;
	border: none;
	text-decoration: underline;
}

input[type="text"].filter-focus {
	color: #000;
	border: 1px solid #aaa;
	text-decoration: none;
}

/* stat colors */
div#content .stat2 {
	background: #003469;
	opacity: 0.8;
	color: white;
}

div#content .stat1 {
	background: #5990c5;
	color: #fff;
}

/*------------------ statistics page -------------------------*/

.stat-page {
	display: flex;
	justify-content: start;
	align-items: stretch;
	gap: 30px;
	width: 100%;
}

.stat-page-fullscreen {
	width: 95vw;
	margin-left: calc(50% - 48vw);
}

.stat-page-left {
	flex-basis: 20%;
	/* border-right: #283593 solid 2px; */
	border-right: rgba(176, 176, 176, 0.39) solid 2px;
	/* height: 100vh; */
	padding-right: 10px;
}

.stat-page-right {
	flex-basis: 80%;
	/* height: 80vh; */
}

.stat-page .stat-dropdown {
	margin-bottom: 2px;
}

.stat-page .stat-dropdown select {
	width: 100%;
	box-sizing: border-box;
}

.stat-page .stat-dropdown select {
	width: 100%;
	box-sizing: border-box;
}

.noGroupData table {
	font-family: arial, sans-serif;
	border-collapse: collapse;
	width: 80%;
}

.noGroupData td,
.noGroupData th {
	border: 1px solid #dddddd;
	text-align: left;
	padding: 8px;
}

.noGroupData tr:nth-child(even) {
	background-color: #dddddd;
}

.stat-filter-component .stat-dropdown label {
	display: block;
	width: 100%;
}

.stat-filter-component .stat-dropdown select {
	width: 100%;
	box-sizing: border-box;
}

.stat-filter-component .stat-dropdown .select2.select2-container.select2-container--default {
	width: 100% !important;
}

/* table sheets*/
table.sheet {
	background-color: white;
	width: 100%;
}



.sheet2 {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	background-color: #f9f9f9;
	border: 1px solid #c0c0c0;
}

.sheet2 tr:first-child td:first-child {
	border-top-left-radius: 10px;
}

.sheet2 td {
	/* Match the 8px horizontal padding on `.sheet2 th` so left-aligned
	   text lines up between header and body rows. Kept the 2px vertical
	   to preserve the existing compact row height. */
	padding: 2px 8px;
	border-bottom: 1px solid #ddd;
}

.sheet2 th {
	background-color: #F5F7F7;
	font-size: 12px;
	font-weight: bolder;
	color: #707171;
	border-bottom: 1px solid #c0c0c0;
	padding: 8px;
}

.sheet2 tr:nth-child(even) td {
	background-color: #FCFDFE;
}

.sheet2 tr:hover td {
	background-color: #ECF0F1;
}



.align-right {
	text-align: right;
}

/* documents */

/*div#doc p  { color: black; font-size: 100%; }*/
div#doc h4 {
	color: black;
	font-size: 1.3em;
	font-weight: 700;
}

div#doc h5 {
	color: black;
	font-size: 1.1em;
	font-weight: 700;
}

div#doc strong {
	color: black;
	font-weight: 700;
}

div#content textarea:focus,
div#content input[type="text"]:focus,
div#content input[type="password"]:focus {
	background-color: #dadfff;
}

/* login page */
#beforelogin {
	height: 1.5em;
}

#loginnotes {
	padding: 20px;
}

.warningmessage {
	background: rgb(100%, 99%, 70%);
	background: rgba(100%, 98%, 60%, 0.7);
	padding: 0.5em;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* 2 step auth page */
.totp-form {
	margin: 10px auto;
	width: 200px;
	padding: 30px 25px;
}

h1.totp-form-title {
	margin: -28px -25px 25px;
	padding: 15px 25px;
	font-size: 1.4em;
	font-weight: 300;
	text-align: center;
}

.totp-form-input {
	width: 188px;
	margin-bottom: 15px;
	padding-left: 10px !important;
	/*font-size: 15px;*/
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.totp-form-input:focus {
	border-color: #6e8095;
	outline: none;
}

.totp-form-button {
	width: 100%;
	padding: 0;
	text-align: center;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	outline: 0;
}

/* date picker widget */
.ui-datepicker {
	font-size: 70%;
	margin-top: 1em;
	margin-left: 1em;
}

/* CURL Report */
pre#curl-call,
pre#report-url {
	white-space: pre-wrap;
	word-wrap: break-word;
	background-color: rgba(70%, 70%, 70%, 0.05);
	padding: 10px;
	border: 1px solid #ccc;
	border-color: rgba(50%, 50%, 50%, 0.3);
}

/* Select Multiple */
select[multiple] {
	height: auto;
	-moz-appearance: none;
}

/* ------------ */
/* -- HEADER -- */
/* ------------ */
select#change-core {
	background: rgba(255, 255, 255, 0.15);
	border: none;
	color: white;
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;
	height: auto;
}

select#change-core option {
	background-color: white;
}

/* ----------------- */
/* -- MENU BANNER -- */
/* ----------------- */

/* -- Admin Menu -- */
div#menu2 ul li.help-menu a:hover {
	cursor: help;
}

/* ---------------- */
/* -- Start Page -- */
/* ---------------- */

/* Search Box */
div#search-div {
	/*float: right;*/
}

div#search-div input#search-box {}

.ignore-strong-styles strong {
	color: inherit;
	font-size: inherit;
}

.ignore-strong-styles h2 {
	color: inherit;
}

.ignore-strong-styles h3 {
	color: inherit;
}

.ignore-strong-styles h4 {
	color: inherit;
}

/* Content */
div#start-main h4.institution-title {
	margin-top: 0;
	padding-top: 1em;
}

div#start-main ul.cores-list {
	margin: 0;
}

/* Public Documents */
div#pub-global-docs {
	float: right;
	background-color: rgba(70%, 70%, 70%, 0.05);
	margin: 2em 0 1em 0;
	padding: 0 1em 1.5em 1em;
	border: 1px solid #ddd;
	border-color: rgba(60%, 60%, 60%, 0.3);
	border-radius: 12px;
	transition: box-shadow 0.3s;
}

div#pub-global-docs:hover {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

/* Square List Style */
ul.list-style-square {
	list-style: square !important;
}

/* home page */
div.home-main {
	margin: 0;
	font-size: 90%;
	clear: both;
}

div.home-left {
	width: 48%;
	margin: 0;
	float: left;
}

div.home-right {
	float: right;
	margin: 0;
	width: 48%;
}

div.home-clear {
	clear: both;
}

div.home-action {
	background-color: #f8f8f8 !important;
	background-color: rgba(70%, 70%, 70%, 0.05) !important;
	margin: 2em 0 1em 0;
	padding: 0 1em 1.5em 1em;
	border: 1px solid #ccc !important;
	border-color: rgba(50%, 50%, 50%, 0.3);
	border-radius: 12px;

	transition: box-shadow 0.3s;
}

div.home-action-catalog {
	background-color: #f8f8f8 !important;
	background-color: rgba(70%, 70%, 70%, 0.05) !important;
	margin: 2em 0 1em 0;
	padding: 0 1em 1.5em 1em;
	border: 1px solid #ccc !important;
	border-color: rgba(50%, 50%, 50%, 0.3);
	border-radius: 2px;
	max-height: 800px;
	overflow-y: scroll;
	scrollbar-width: thin;
	scrollbar-color: #e1e1e1 #f1f1f1;

	transition: box-shadow 0.3s;
}

div.home-action:hover {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

option[disabled],
option[disabled="disabled"] {
	color: #ccc !important;
}

.ui-dialog-titlebar {
	font-size: 0.7em;
}

/* --------------- */
/* -- Home Page -- */
/* --------------- */

/* New Features */
p.new-features {
	background: rgb(255, 229, 127);
	background: rgba(255, 229, 127, 0.7);
	padding: 10px;
	border-radius: 4px;
}

p.new-features a {
	font-weight: bold;
	text-decoration: underline;
	color: #3f51b5;
}

/* annoucement-critical */
p.annoucement-critical {
	background: rgb(255, 138, 138);
	background: rgba(255, 108, 108, 0.7);
	padding: 10px;
	border-radius: 4px;
}

p.annoucement-critical a {
	font-weight: bold;
	text-decoration: underline;
	color: #3f51b5;
}

/* Notifications */
div#home-notifications {
	background-color: #f8f8f8;
	background-color: rgba(70%, 70%, 70%, 0.05);
	border: 1px solid #ccc;
	border-color: rgba(50%, 50%, 50%, 0.3);

	padding: 10px;
	border-radius: 12px;

	transition: box-shadow 0.3s;
}

div#home-notifications:hover {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

div#home-notifications span.notification {
	font-weight: bold;
	font-size: 0.8em;
	display: block;
	margin-left: 10px;
}

div#home-notifications span.notification a {
	text-decoration: none;
}

/* Information text block */
.information-text {
	display: block;
	background: rgba(255, 229, 127, 0.7);
	margin-left: -4px;
	padding: 4px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.information-text>a {
	color: #657acc !important;
}

.information-text>a:hover {
	color: #98adff !important;
}

/* Home Sections Controller */
div#home-sections-controller {
	text-align: right;
}

div#home-sections-controller input[type="button"]#restore-button {
	float: left;
}

/* Home Sections */
h3.home-section-title {
	cursor: pointer;
	margin-bottom: 0;
}

h3.home-section-title span {
	text-decoration: underline;
	margin-right: 6px;
}

div.home-section {
	background-color: #f8f8f8;
	background-color: rgba(70%, 70%, 70%, 0.05);
	margin: 2em 0 1em 0;
	padding: 0 1em 1.5em 1em;
	border: 1px solid #ddd;
	border-color: rgba(60%, 60%, 60%, 0.3);
	border-radius: 12px;

	transition: box-shadow 0.3s, background 2s ease;
}

div.home-section:hover {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

div.home-section h3 {
	/* For backward compatibility with pre-2015 stylesheets */
	padding-bottom: 0px;
	padding-top: 0.5em !important;
	border-bottom: none;
}

div.home-section div.section-content {
	border-left: 1px solid #ccc;
	padding-top: 0.1em;
	padding-left: 5px;
	margin-left: 4px;
}

div.home-section ul {
	padding-left: 10px;
	margin: 10px 0;
	list-style-image: url("hyphen.png") !important;
}

div.home-main img.wait-icon {
	margin-left: 50%;
	margin-top: 25px;
}

div#home-sections div.dataTables_wrapper,
div#home-sections div.table-wrapper {
	overflow-x: auto;
}

span.home-section-actions {
	float: right;
	text-decoration: none !important;
	margin-top: 1.5em;
}

span.home-section-actions img {
	height: 20px;
	opacity: 0.1;
}

span.home-section-actions img:hover {
	cursor: pointer;
	opacity: 1;
}

p.home-bottom {
	color: #555;
	background-color: #f8f8f8;
	margin: 2em 1em 0 1em;
	padding: 1em;
}

select#item-diff {
	width: 72.5%;
}

span.report-pub-msg {
	display: block;
	background: rgb(255, 229, 127);
	background: rgba(255, 229, 127, 0.7);
	margin-left: -4px;
	padding: 5px;
	margin-top: 3px;
	border-radius: 5px;
}

input[type="button"]#create-incident-button {
	width: 25%;
	padding: 6px;
}

span.not-applicable {
	color: #bbb;
}

/*-- Schedules Page --*/
img#fav-star {
	float: right;
	height: 25px;
	cursor: pointer;
}

table#schedules-systems-list {
	border-collapse: collapse;
	border: 1px solid #bbb;
	float: left;
}

table#schedules-systems-list tr.system-type th {
	background-color: #ddd;
	padding: 0 3px;
	border: 1px solid #ddd;
	border-left: 1px solid #bbb;
	text-align: left;
}

table#schedules-systems-list tr.system-element th {
	border-top: 1px solid #eee;
}

table#schedules-systems-list tr.system-element th img {
	height: 10px;
	margin-left: 5px;
	vertical-align: middle;
	cursor: pointer;
}

table#schedules-systems-list tr.system-element th.system-name {
	padding-left: 10px;
}

div#day-views-container-scroll {
	width: 840px;
	overflow-x: scroll;
	overflow-y: hidden;
	float: left;
}

div#day-views-container {
	width: 30000px;
}

div.day-view {
	float: left;
	width: 400px;
	/*height: 750px;*/
}

div.day-view tr,
table#schedules-systems-list tr {
	height: 22px !important;
}

div.day-view th,
table#schedules-systems-list th {
	height: 22px !important;
	background-color: #eee;
	padding: 0;
	font-size: 10px !important;
	text-align: left;
}

div.day-view td,
table#schedules-systems-list td {
	height: 22px !important;
	font-size: 10px;
	padding: 0;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	text-align: left;
	min-width: 3px;
	/* for FF */
}

div.day-view table {
	float: left;
	border-collapse: collapse;
	border: 1px solid #bbb;
}

div.day-view tr.system-element {
	cursor: pointer;
}

div.day-view th.system-el {
	background-color: #ddd;
	padding: 0 3px;
	border: 1px solid #ddd;
	text-align: left;
}

div.day-view th.day {
	border-left: 1px solid #bbb;
	text-align: center !important;
}

div.day-view th.hours {
	border-left: 1px solid #bbb;
	font-size: 9px !important;
	width: 32px;
	padding-left: 1px;
}

div.day-view td.session,
div.day-view td.incident,
div.day-view td.intervention {
	cursor: auto;
	border-left: 1px solid #ddd;
}

div.day-view td.session,
div.day-view span.session {
	/*opacity: 0.8;*/
	background-color: #3f51b5;
	color: white;
}

div.day-view td.SE1,
div.day-view span.SE1 {
	/*opacity: 0.8; */
	background-color: #388e3c;
	color: white;
}

div.day-view td.SE2,
div.day-view span.SE2 {
	/*opacity: 0.8; */
	background-color: #9c27b0;
	color: white;
}

div.day-view td.SE1.SE2 {
	background: linear-gradient(to bottom, #388e3c 50%, #9c27b0 50%);
}

div.day-view td.incident,
div.day-view span.incident {
	/*opacity: 0.8;*/
	background-color: #bbb;
	color: white;
}

div.day-view td.now {
	border-left: 2px solid orange !important;
}

div.day-view td.out-hours {
	background-color: #f7f7f7;
	background-color: rgba(0, 0, 0, 0.02);
}

div.day-view td.hour {
	border-left: 1px solid #ddd;
}

div.day-view span.hover-popup-info {
	margin-top: 10px;
	padding: 3px;
}

div.system-view {
	margin-bottom: 5em;
}

div.system-view table#planning-calendar td.sess:hover {
	cursor: default;
	box-shadow: none;
}

div#switch-views-container {
	text-align: right;
	margin-top: -1em;
	margin-bottom: 1em;
}

div#switch-views-container img {
	height: 33px;
	cursor: pointer;
}

/* ---------------------- */
/* -- Publication Page -- */
/* ---------------------- */

/* Publication List */
.publication-filters label {
	display: inline-block;
	width: 100px;
}

.publication-filters select {
	width: 25%;
	min-width: 250px;
}

.publication-details {
	padding: 0 !important;
}

.publication-details .details-title {
	display: block;
	border-bottom: 1px dotted;
	border-top: 1px dotted;
	padding: 2px;
}

.publication-details ul {
	margin: 5px;
	padding-left: 20px;
	margin-bottom: 10px;
}

/* Publication Edit */
ul.pub-list {
	list-style: none !important;
	padding-left: 1.5em;
}

ul.pub-list input[type="button"].delete-link {
	padding-top: 0px;
	padding-bottom: 3px;
	border-radius: 25px;
}

ul.pub-list input[type="button"].delete-link:hover {
	color: white;
	background-color: red;
}

ul.pub-list input[type="button"].delete-link:disabled {
	color: black;
	background-color: lightgrey;
}

ul.pub-list input[type="button"].delete-link:disabled:hover {
	box-shadow: none;
	cursor: default;
}

/* ---------------------------------- */

/* Filter Input */
input[type="text"].filter {
	width: 10%;
	background: transparent;
	transition: all 0.25s;
	color: #aaa;
	border: none !important;
	text-decoration: underline;
	background: transparent !important;
}

input[type="text"].filter-blur {
	color: #aaa;
	border: none !important;
	text-decoration: underline;
}

input[type="text"].filter-focus {
	color: #000;
	border: 1px solid #aaa !important;
	text-decoration: none;
}

/* Happy or Not */
div#happyOrNotSurvey p {
	white-space: pre-line;
	line-height: 1.25em;
}

div#happyOrNotSurvey img.smiley {
	/*height: 50px;*/
	height: 80px;
	margin: 10px 20px;
	cursor: pointer;
}

/* Create Report Table */
table.create-report-table {
	width: 100%;
}

table.create-report-table input[type="text"],
table.create-report-table select,
table.create-report-table textarea,
table.create-report-table input#category {
	width: 75%;
}

table.create-report-table textarea#procedure {
	height: 12em;
}

table.create-report-table input[type="button"]#createButton {
	width: 100%;
}

/* Canvas */
canvas#canvas {
	margin-top: 15px;
	margin-bottom: 15px;
	width: 20;
	height: 20;
}

div#canvasContainer {
	max-height: 800px;
}

/* -- Reports Page -- */
select#reports-list,
select#global-reports-list {
	width: 100%;
}

p#params {
	margin-top: 2em;
}

p.report-single-data {
	text-align: center;
	font-size: 2em !important;
	font-weight: bold;
}

/* -- upload page -- */
.imageAmazonFile {
	margin-top: 1em;
	margin-bottom: 2em;
	max-width: 255px;
	max-height: 255px;
}

/* -- STOCK PAGE -- */
div#stock-check-in-container {
	float: left;
}

div#stock-check-out-container {
	float: right;
}

div#stock-check-in-container,
div#stock-check-out-container {
	width: 45%;
	text-align: center;
}

div#stock-check-in-container ul,
div#stock-check-out-container ul {
	padding-top: 15px;
	padding-left: 15px;
	border: 1px solid grey;
	list-style: none;
	text-align: left;
	overflow: auto;
}

div#stock-check-in-container img.big-arrow,
div#stock-check-out-container img.big-arrow {
	height: 100px;
}

div#stock-check-in-container img.big-arrow:hover,
div#stock-check-out-container img.big-arrow:hover {
	cursor: pointer;
	height: 105px;
}

div#stock-check-in-container label {
	display: block;
	float: left;
	width: 33%;
}

div#stock-check-in-container input {
	width: 55%;
}

div#stock-check-in-container input[type="number"] {
	width: 20%;
}

div#stock-check-out-container li#no-elements-to-check-out {
	margin: 75px auto;
	width: 40%;
	text-align: center;
}

div#stock-check-out-container ul#check-out-list span {
	display: block;
	float: left;
	width: 20%;
	text-align: center;
	line-height: 2.5em;
	max-height: 2.5em;
	overflow-y: hidden;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

div#stock-check-out-container ul#check-out-list span img {
	height: 1em;
	cursor: pointer;
}

#stock-list-loading {}

div#stock-check-in-container-img,
div#stock-check-out-container-img {
	min-height: 120px;
}

div#stock-list-container {}

div#stock-list-container #stockListTypeFilter {
	min-width: 45%;
	margin-top: 1em;
	margin-bottom: 1em;
}

div#stock-list-container table#stock-list td {
	vertical-align: middle;
}

div#stock-list-container table#stock-list tr.expired,
#stock-list-color-legend .expired {
	background: #ff9100;
}

div#stock-list-container table#stock-list tr.ordered,
#stock-list-color-legend .ordered {
	background: #81c784;
}

div#stock-list-container table#stock-list td.stock-actions {
	background: white !important;
	text-align: center;
}

div#stock-list-container table#stock-list td.stock-actions img.stage-stock-element {
	height: 1.5em;
	margin: 0px 15px;
	cursor: pointer;
}

dl#stock-list-color-legend dt {
	display: inline-block;
	width: 25px;
}

dl#stock-list-color-legend dd {
	display: inline-block;
	margin-left: 10px;
}

div.editStockElement ul {
	list-style: none;
	text-align: left;
}

div.editStockElement label {
	display: block;
	float: left;
	width: 33%;
}

div.editStockElement input {
	width: 55%;
}

/* -- ListSys Table -- */
table.listsys td {
	font-size: 1em !important;
	padding-left: 20px !important;
	vertical-align: top;
}

/* ------------------------ */
/* -- user group project -- */
/* ------------------------ */

.customParamTextarea {
	width: 408px;
	height: 20px;
}

.userPubmedIdQueryBlock {
	padding-top: 1em;
	padding-bottom: 2em;
}

/* -------------- */
/* -- Planning -- */
/* -------------- */

/* Rate Display */
div#rate-display {
	float: right;
}

div#rate-display p {
	background-color: #ddd;
	padding: 8px;
	border-radius: 5px;
}

div#rate-display2 {
	float: right;
}

div#rate-display2 p {
	background-color: #ddd;
	padding: 8px;
	border-radius: 5px;
}

/* Title */
h3.system-name,
h3.week-info {
	border-bottom: none !important;
	margin-bottom: 0.25em;
}

/* Date Nav */
span#date-nav {
	font-size: 0.75em;
	font-weight: 600;
}

/* date-week */
div#date-week {
	margin-bottom: 1em;
}

div#bcode-chooser #activity-account-select,
div#duplicate-user-chooser #duplicate-user-select,
div#duplicate-user-chooser #loadingBookingDuplicateUserChooser,
div#project-chooser #select-project {
	width: 25em;
}

div#project-chooser h4,
div#bcode-chooser h4,
div#duplicate-user-chooser h4 {
	display: inline-block;
	min-width: 10em;
}

/* Calendar */
table#planning-calendar {
	margin-top: 20px;
}

table#planning-calendar tr {
	height: 0.5em;
}

table#planning-calendar tr#night {
	height: 5em !important;
}

table#planning-calendar th {
	font-size: 0.7em;
	text-align: center;
}

table#planning-calendar th.hour-display {
	border-top: 1px solid #ddd;
	vertical-align: top;
	text-align: right;
	line-height: 1em;
}

table#planning-calendar td.sess {
	cursor: pointer;
	text-align: center;
}

table#planning-calendar td.sess:hover {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
}

table#planning-calendar td.sess.alias {
	cursor: default;
	color: black !important;
	background-color: #d1d1d0 !important;
	border: none !important;
	opacity: 0.8;
}

table#planning-calendar td.sess.alias:hover {
	box-shadow: none;
}

table#planning-calendar td.sess.training {
	cursor: default;
}

table#planning-calendar td.sess.training:hover {
	box-shadow: none;
}

table#planning-calendar td.inc.merge {
	text-align: center;
	color: white;
}

table#planning-calendar td.sess button.calendar-form {
	background-color: white;
	color: #666;
}

table#planning-calendar td.sess button.calendar-form:focus {
	color: #ffffff;
	background-color: #3949ab;
	outline: none;
}

table#planning-calendar td.specialE label,
table#planning-calendar td.specialE2 label,
table#planning-calendar td.pending label {
	color: white;
}

tr#calendar-actions td {
	text-align: center;
}

input#planning-book,
input#report-incident,
input#planning-edit-session,
input#planning-edit-session-cancel,
input#disable-time {
	width: 100%;
}

input#planning-edit-session,
input#planning-edit-session-cancel {
	margin-top: 1em;
}

input#cmtbx {
	padding: 0;
	margin: 0;
}

#required-when-no-project-display {
	margin-top: 20px;
}

.select-project-container {
	max-width: 40%;
}

.calendar-container-edit-mode {
	background-color: #f2f2f2;
	border: 1px solid #9e9e9e;
	padding-bottom: 1em;
	padding-right: 1em;
}

.editSessionContainer {
	position: relative;
	padding-top: 22px;
	padding-bottom: 22px;
}

.editSessionLink {
	position: absolute;
	width: 22px;
	height: 22px;
	top: 0;
	right: 0;
}

.editSessionIcon {
	padding: 5px;
	width: 12px;
	height: 12px;
	opacity: 1;
}

.editSessionIcon:hover {
	opacity: 0.5;
}

.editSessionSlot {
	background-color: rgba(95, 77, 208, 0.22) !important;
}

/* -- TRAINING -- */
#val label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#val {
	width: 24em;
}

/* -- SLIDE MENU -- */
nav#slide-menu {
	display: none;
}

img#slide-menu-button {
	display: none;
}

/* -- DATATABLES OVERRIDE -- */
.dataTables_wrapper {
	margin-bottom: 10px;
}

.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
	font-size: 80%;
}

.dataTables_wrapper .dataTables_paginate {
	font-size: 65%;
}

/* -- Modal Popup -- */
.modalOverlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	background: #000;
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-in;
	-moz-transition: opacity 0.3s ease-in;
	-ms-transition: opacity 0.3s ease-in;
	-o-transition: opacity 0.3s ease-in;
	transition: opacity 0.3s ease-in;
	z-index: 101;
}

.modalWindow {
	position: fixed;
	top: 25%;
	left: 25%;
	width: 50%;
	margin: 0px;
	padding: 10px;
	background: #ffffff;
	border-radius: 8px;
	/*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);*/
	box-shadow: -1px 2px 12px rgba(0, 0, 0, 0.91);
	/*border: 2px solid #151515;*/
	text-align: center;
	word-spacing: 2px;
	line-height: 15px;
	font-weight: bold;
	color: #2b3a42;
	opacity: 0;
	-webkit-transition: opacity 0.2s ease-in;
	-moz-transition: opacity 0.2s ease-in;
	-ms-transition: opacity 0.2s ease-in;
	-o-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
	z-index: 102;
}

.modalWindow.form,
.modalWindow.form-content {
	height: 75%;
	width: 75%;
	top: 12.5%;
	left: 12.5%;
	font-size: 0.8em;
}

.modalWindow.form .modalWindowContent,
.modalWindow.form-content .modalWindowContent {
	text-align: left;
	font-weight: normal;
}

.modalWindow.form .modalWindowContent p,
.modalWindow.form .modalWindowContent h4,
.modalWindow.form .modalWindowContent h5 {
	margin: 0;
	width: 90%;
}

.modalWindow.form .modalWindowContent textarea,
.modalWindow.form-content .modalWindowContent textarea {
	padding: initial;
	padding-top: 4px;
	padding-bottom: 4px;
}

.modalWindow.form-content .modalWindowContent div#form-content-popup {
	margin-bottom: 2.5em;
}

.modalWindow.form-content .modalWindowContent span.form-content-text {
	background-color: #eee;
	padding: 10px;
	display: block;
	margin: 10px 0;
}

.modalWindow.form-content .modalWindowContent input#form-comment {
	width: 75%;
}

.modalWindow.form-content .modalWindowContent input#add-form-comment {
	width: 20%;
}

.modalWindow.session-info {
	height: 75%;
	width: 75%;
	/* centering the modal */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 1024px;
}

.modalWindow.session-info div.modalWindowContent {
	text-align: left;
	line-height: 30px;
}

.modalWindow.session-info dt {
	margin-left: 0em;
	margin-top: 1em;
	font-weight: 700;
	color: #283593;
	border-bottom: 1px dotted;
}

.modalWindow.session-info dd {
	font-size: 0.9em;
	margin-left: 0em;
}

.modalWindow.confirm-change-res {
	top: 30%;
}

.modalWindowHeader {
	width: 100%;
	padding-top: 3px;
	margin-bottom: 0px;
	display: block;
	overflow: hidden;
	text-align: center;
	line-height: 30px;
	font-size: 18px;
	color: #ffffff;
	background: grey;
}

.confirm .modalWindowHeader {
	background: #ffa500 !important;
}

.error .modalWindowHeader {
	background: #ff0000 !important;
}

.modalWindowContent {
	max-height: 85%;
	max-height: calc(100% - 100px);
	padding: 10px;
	display: block;
	overflow: auto;
	line-height: 40px;
	font-weight: bold;
	color: #000000;
}

.modalWindowFooter {
	margin-top: 15px;
}

.modalWindowFooterFloatBottom {
	margin-bottom: 25px;
	position: absolute;
	bottom: 0;
	width: 100%;
}

.modalWindowFooter .cancelButton {
	width: 25%;
	/*background-color: #ffffff;
	color: red;
	font-size: 14px;*/
}

.modalWindowFooter .okButton {
	width: 70%;
	/*background: linear-gradient(to bottom, #efb12b 0%, #e49228 100%);
	border-radius: 5px;
	border: 1px solid #e2e1e1;
	padding: 5px 50px;
	cursor: pointer;
	font-size: 1em;
	color: #ffffff;*/
}

.session-info .modalWindowFooter {
	margin-top: 10px;
}

.session-info .modalWindowFooter button {
	height: 40px;
	display: block;
	float: left;
}

#add-home-section-content {
	text-align: left;
}

/* -- POPUP -- */
div#popup {
	position: absolute;
	background-color: #7986cb;
	display: none;
	margin: 50px;
	padding: 4px;
	line-height: 1.4em;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 10px 10px 50px #222;
	-webkit-box-shadow: 10px 10px 50px #222;
	-moz-box-shadow: 10px 10px 50px #222;
}

div#popup ul {
	margin: 0 0 0 0;
	padding: 5px;

	display: block;
	list-style-type: none;

	background-color: #f8f8f8;
	border-top: 1px solid #7986cb;
}

div#popup ul li {
	margin: 0;
	padding: 0;
	display: inline;
	font-size: 0.6em;
}

div#popup ul li a {
	margin: 0;
	padding: 0.5em 0.7em;
	text-decoration: none !important;

	background-color: #5c6bc0;
	color: white !important;
}

/*------------------*/
/*-- ON-OFF Swith --*/
/*------------------*/
/* https://proto.io/freebies/onoff/ */
.onoffswitch {
	position: relative;
	width: 38px;
	margin-top: 10px;
	margin-bottom: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.onoffswitch-small {
	margin-left: -6px;
}

.onoffswitch-checkbox {
	display: none;
	position: absolute;
	cursor: pointer;
	z-index: -1;
}

.onoffswitch-label {
	display: block;
	overflow: hidden;
	cursor: pointer;
	height: 15px;
	padding: 0;
	line-height: 15px;
	border: 0px solid #ffffff;
	border-radius: 23px;
	background-color: #999999;
}

.onoffswitch-label:before {
	content: "";
	display: block;
	width: 23px;
	margin: -4px;
	background: #eeeeee;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 19px;
	border-radius: 23px;
	box-shadow: 0 6px 12px 0px #757575;
}

.onoffswitch-label-small:before {
	width: 20px !important;
	margin: -5px !important;
}

.onoffswitch-label-small {
	height: 10px !important;
	width: 30px !important;
	margin-left: 9px !important;
}

.onoffswitch-checkbox:checked+.onoffswitch-label {
	background-color: #3f51b5;
}

.onoffswitch-checkbox:checked+.onoffswitch-label,
.onoffswitch-checkbox:checked+.onoffswitch-label:before {
	border-color: #3f51b5;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
	margin-left: 0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label:before {
	right: 0px;
	background-color: #283593;
	box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
}

.onoffswitch-checkbox:focus+.onoffswitch-label {
	outline: 2px solid var(--primary-color, #3f51b5);
	outline-offset: 2px;
}

.disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* specific style for accounts views */

.descriptionListBlockTitle {
	margin-top: 2em !important;
	font-size: 1.2em !important;
}

.account-custom-onoffswitch,
.account-custom-onoffswitch-enable {
	opacity: 0.5 !important;
}

.account-custom-onoffswitch * {
	cursor: default !important;
}

.account-custom-onoffswitch>.onoffswitch-label:before,
.account-custom-onoffswitch-enable>.onoffswitch-label:before {
	width: 20px !important;
	margin: -5px !important;
}

.account-custom-onoffswitch>.onoffswitch-label,
.account-custom-onoffswitch-enable>.onoffswitch-label {
	height: 10px !important;
	width: 30px !important;
	margin-left: 9px !important;
}

.accountTypeCustomTextarea {
	width: -webkit-fill-available;
}

.account-priority-style-1,
.account-priority-style-2 {
	/*color: #ccff00;*/
}

.account-priority-style-3,
.account-priority-style-4 {
	/*color: #FFFF00;*/
}

.account-priority-style-5,
.account-priority-style-6 {
	/*color: #FFCC00;*/
}

.account-priority-style-7,
.account-priority-style-8 {
	/*color: #ff9900;*/
}

.account-priority-style-9,
.account-priority-style-10 {
	/*color: #FF0000;*/
}

.rejectedRequestedAccountBlock {
	margin-bottom: 2em;
}

.rejectedRequestedAccountBlock>p {
	color: red;
	font-size: 1.3em !important;
}

/*------- Service page --------*/
.edit-quantity-stock {
	margin-left: 10px;
}

.number-quantity-stock {
	font-size: 1.1em;
}

#select-stock-service,
.select-stock-service-option {
	max-width: 500px;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

/*------- Account popup page --------*/

#accountPopupContentView {
	min-height: 300px;
}

.bcodeAccountPopup-user-style {
	padding-top: 6px;
	padding-right: 4px;
	padding-bottom: 8px;
	padding-left: 4px;
	margin-top: 4px;
	background-color: white;
	border: 1px solid #999999;
	height: 1em;
	cursor: text;

	text-overflow: ellipsis;
	overflow: hidden;
}

.bcodeAccountPopup-user-style:disabled {
	background-color: rgb(235, 235, 228);
}

#account-popup-content {
	text-align: left;

	line-height: 20px;
	font-weight: initial;
	word-spacing: initial;
	font-size: 0.8em;
}

#createNewAccount {
	color: -webkit-link;
	text-decoration: underline;
	cursor: pointer;
}

.labelAccountInfo {
	margin-top: 1em;
}

.accountTypeBox {
	margin: 1em 1em 0 0;
	padding: 0 0 1em 1em;

	border-left: 1px solid #c8c8c8;
	border-bottom: 1px solid #c8c8c8;
}

.accountBcodeSelector {
	width: 100%;
	height: 30px;
}

.accountBcodeSelectorState,
.accountBcodeSelectorInput {
	float: left;
}

.accountBcodeSelectorState {
	padding-top: 0.5em;
	padding-left: 1em;
}

.accountSelectElement {
	cursor: pointer;
}

.accountSelectElement:hover {
	color: grey;
}

.accountSelectElementLoadMore {
	pointer-events: none;
	color: #bbb;
}

.inactiveAccountSelectElement {
	pointer-events: none;
	color: #bbb;
}

.accountPopupButton {
	width: 30%;
}

#account-type-content {
	margin-top: 2em;
	margin-bottom: 2em;
}

.disabled-content {
	pointer-events: none;
	opacity: 0.2;
}

.inputPopupStyle {
	width: 398px;
}

.selectPopupStyle {
	width: 402px;
}

#addSelectedAccountToSplit,
#addCreatedAccountToSplit {
	margin-top: 1em;
}

#split-accounts-list-error {
	color: red;
	margin-top: 1em;
	font-size: 1.3em;
}

.popupNewAccountWarning {
	color: red;
	font-weight: bold;
	margin-top: 2em;
	font-size: 1.3em;
}

.accountInvalidBtnDisabled {
	cursor: not-allowed;
	opacity: 0.4;
}

.noAccountTypeWarning {
	color: red;
	font-weight: bold;
	font-size: 1.3em;
}

.emptyDatepickerLink {
	color: grey;
	margin-bottom: 1em;
}

/* User Rights Page */
#userRightsVueContainer .placeholderRow {
	display: none;
}

#userRightsVueContainer #aggregatedSelectDisplay {
	display: flex;
	align-items: baseline;
	gap: 2px;
}

#userRightsVueContainer #viewRightsContainer {
	display: flex;
	/* justify-content: left; */
	align-items: center;
}

#userRightsVueContainer #viewRightsSelectContainer {
	width: 25em;
	display: inline-block;
	margin-right: 10%;
}

/* #userRightsVueContainer #aggregatedLabel {
	display: none;
} */
#userRightsVueContainer #aggregatedContainer {
	display: inline-block;
}

#userRightsVueContainer .changeCompareDurationInput {
	display: none;
}

#userRightsVueContainer .changeDurationLabel:hover {
	cursor: pointer;
}

#userRightsVueContainer .rightsSelectBox {
	width: 20em;
}

#userRightsVueContainer #rightsContainer .del {
	margin-top: 2px;
	margin-bottom: 2px;
}

#userRightsVueContainer .ag-header-cell-text {
	white-space: normal;
	text-align: center;
}

#userRightsVueContainer .filter {
	width: 4em;
	color: #aaa;
	border: 0;
	text-decoration: underline;
	background: transparent;
}

#userRightsVueContainer #aggregatedSelectBox {
	width: 30em;
	margin-right: 1%;
}

#userRightsVueContainer .notable {
	color: orange;
}

#userRightsVueContainer #superUserGridHolder {
	display: none;
}

#userRightsVueContainer #userRightsGridHolder {
	display: none;
}

#userRightsVueContainer .expirationDatePicker,
#userRightsVueContainer .ui-datepicker-trigger,
#userRightsVueContainer .expirationDateSaveButton {
	display: none;
}

#userRightsVueContainer .expirationDatePicker,
#userRightsVueContainer .ui-datepicker-trigger,
#userRightsVueContainer .expirationDateSaveButton {
	display: none;
}

#userRighsVueContainer #autonomyTable div[col-id="1"] {
	width: 82px;
}

#userRightsPlaceholder {
	display: none;
}

/*Create Incident Page*/

#creatinc #multiSystemsLabel {}

#creatinc #systemSelect {
	overflow: auto;
	width: 370px;
	margin-bottom: 20px;
	height: 200px;
}

#creatinc .submitInterventionButton {
	width: 300px;
}

#creatinc #systemLabel,
#systemselected {}

#creatinc #singleSystemSelect {
	width: 250px;
	margin-bottom: 20px;
}

#creatinc .selectLabel {
	color: rgb(255, 5, 0);
}

#creatinc #staffMemberContainer {
	display: inline;
	width: 33%;
}

#creatinc #staffMemberContainer img,
#categoryContainer img {
	position: relative;
	right: 25%;
}

#creatinc .isErroneousText {
	color: rgb(255, 5, 0);
	font-size: 1em;
}

#creatinc #de3 {
	color: rgb(255, 5, 0);
}

#creatinc .isErroneousTime {
	color: rgb(255, 5, 0);
	font-size: 1em;
}

#creatinc #incidentLabel {
	color: rgb(255, 5, 0);
}

#creatinc #select-reli {
	max-width: 38%;
	white-space: normal;
	overflow: hidden;
}

#creatinc #hourStartLabel {
	display: none;
}

#creatinc #hourStartLabel {
	display: none;
}

#creatinc #hourStopLabel {
	display: none;
}

#creatinc #weekdayLabel {
	color: #1a237f;
}

/*--- Incident pages ---*/

.incidentPage tbody {
	font-size: 16px;
}

.incidentPage td {
	margin-right: 16px;
	vertical-align: top;
}

.incidentPage .detailshead {
	font-weight: bold;
}

.incidentPage .tabHeader {
	width: 100%;
	height: 2.5em;
	align-items: center;
	display: flex;
	justify-content: left;
	background-color: #e8eaf6;
}

.incidentPage #updateCategory #waitGif,
#staffMemberContainer #waitGif {
	position: relative;
	right: 25%;
}

.incidentPage .tab {
	display: grid;
	justify-content: left;
	text-align: left;
}

.incidentPage .tabHeader input[type="button"] {
	float: left;
	height: 2.5em;
	width: 20%;
	border: none;
}

.incidentPage .selectLabel {
	color: rgb(255, 5, 0);
}

.incidentPage .boldlink {
	font-weight: bold;
}

.incidentPage a {
	cursor: pointer;
}

.incidentPage .isErroneousText,
#sub .isErroneousTime {
	color: rgb(255, 5, 0);
	font-size: 1em;
}

.incidentPage #submitUpdateInterventionButton {
	width: 678px;
}

#exportp #exportbutton {
	width: 20%;
	margin-right: 0.5%;
	height: 2.5em;
}

.noprint #separatebutton {
	width: 20%;
	color: rgb(255, 5, 0);
	margin-right: 0.5%;
	height: 2.5em;
}

.incidentPage #groupWarn {
	font-size: 0.9em;
	color: rgb(255, 5, 0);
}

.incidentPage #incidentGroupTitle {
	font-size: 0.9em;
	position: relative;
	left: -3%;
}

/* Incident Details Table */

table.sheet .warning {
	font-weight: bold;
	color: rgb(255, 5, 0);
}

table.sheet a:hover {
	cursor: pointer;
}

/*----------------- Training pages -----------------*/

.participantUserName {
	vertical-align: middle;
	font-weight: 600;
}

#createTrainVueContainer #selectedParticipantListContainer {
	clear: left;
}

#createTrainVueContainer textarea {
	max-width: 100%;
}

#createTrainVueContainer .createTrainLabel {
	display: none;
}

div#trainingRequests {
	flex: 1 1 50%;
}

div#additionalUserList {
	flex: 1 1 50%;
}

#createTrainVueContainer #trainingRequestSelect {
	width: 100%;
}

#createTrainVueContainer #usersList {
	float: left;
}

#createTrainVueContainer #allusers {
	width: 300px;
}

#createTrainVueContainer #usersFilter {
	width: 4em;
	color: #aaa;
	border: 0;
	text-decoration: underline;
	background: transparent;
}

#createTrainVueContainer .noAccountsForParticipant {
	color: red;
}

#createTrainVueContainer #processTraining {
	clear: left;
	padding-top: 1em;
}

#createTrainVueContainer #processTrainingButtons {
	padding-top: 1em;
}

#createTrainVueContainer #uploadspan {
	width: 300px;
}

/*----------------- vTrain page Start-----------------*/
div#addParticipantContainer {
	border: 1px dotted gray;
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
	gap: 20px;
}

#selectedParticipantListContainer ul li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#selectedParticipantListContainer ul li>* {
	width: 25%;
	flex-grow: 1;
	margin-left: 4px;
}

#selectedParticipantListContainer ul li select {
	width: 100% !important;
}

#selectedParticipantListContainer ul li .select {
	width: 100% !important;
}

#participantDisplayList .select2.select2-container.select2-container--default {
	width: 100% !important;
}

@media all and (min-width: 930px) and (max-width: 1150px) {

	div#menu1 ul li a,
	div#menu2 ul li a {
		padding: 6px 4px;
		margin-right: 0em !important;
	}
}

@media all and (max-width: 670px) {
	#selectedParticipantListContainer ul {
		padding: 0;
	}

	#selectedParticipantListContainer ul li {
		flex-direction: column;
		align-items: center;
		margin-bottom: 15px;
	}

	#selectedParticipantListContainer ul li>* {
		flex: 1 1 0;
		margin-left: 4px;
		min-width: 80%;
	}
}

#vTrainEditParticipantPopup #page dt {
	margin-top: 1em;
}

#vTrainEditParticipantPopup #page dd {
	line-height: 1.5em;
}

#vTrainEditParticipantPopup #page {}

#vTrainEditParticipantPopup a {
	text-decoration: none;
}

#vTrainEditParticipantPopup select {
	width: 16em;
}

#editTrainingVueContainer div#userFileInterface p,
#editTrainingVueContainer div#userFileInterface li {
	font-size: 1em;
}

/* vTrainValidateParticipantPopup */
#validation-system-container .system-type-list {
	list-style: none;
	font-size: 0.75rem;
	padding-inline-start: 0px;
}

#validation-system-container .system-type-list-item {
	padding: 5px;
	box-sizing: border-box;
	border-radius: 12px;
}

#validation-system-container .system-list {
	list-style: none;
	font-size: 0.9em;
	padding-inline-start: 20px;
}

#validation-system-container .system-list-item {
	display: flex;
	list-style: none;
	justify-content: flex-start;
	border-bottom: 2px dotted rgb(198, 198, 198);
	padding-left: 5px;
}

#validation-system-container .system-list-item.active {
	background: #d7ddff;
}

#validation-system-container .system-list-item .system-name {
	display: flex;
	flex-wrap: wrap;
	flex-basis: 40%;
}

#validation-system-container .system-list-item .user-rights-options {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9em;
	justify-content: space-between;
	gap: 40px;
}

#validation-system-container .system-list-item .user-rights-options .radio-input input {
	margin-right: 0.2em;
}

#vTrainValidateParticipantPopup .radio-input {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 80px;
}

#vTrainValidateParticipantPopup input[type="radio"] {
	appearance: none;
	border: 1px solid #000000c0;
	width: 13px;
	height: 13px;
	content: none;
	outline: none;
	margin: 0;
	border-radius: 3px;
	position: relative;
}

#vTrainValidateParticipantPopup input[type="radio"]:focus-visible {
	outline-offset: 2px;
	outline: rgb(0 0 0 / 51%) 2px solid;
}

#vTrainValidateParticipantPopup input[type="radio"]:checked {
	appearance: none;
	outline: none;
	padding: 0;
	content: none;
	border: none;
}

#vTrainValidateParticipantPopup input[type="radio"]:checked::before {
	position: absolute;
	color: white !important;
	content: "\00A0\✔\00A0" !important;
	border: 1px solid #d3d3d3;
	font-weight: bolder;
	font-size: 9px;
	background: #0075ff;
}

dd.trainer {
	display: flex;
	justify-content: start;
	align-items: baseline;
}

dd.trainer>* {
	margin-right: 2px;
}

dd.trtypeline {
	display: flex;
	justify-content: start;
	align-items: flex-start;
}

dd.trtypeline>* {
	margin-top: 0px;
	margin-right: 2px;
}

.user-rights-options .btn-option {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.2em;
	width: 80px;
}

.user-rights-options .btn-option input {
	border: 1px solid #000000c0;
	font-size: 0.65rem;
}

/*----------------- vTrain page End-----------------*/

@media all and (max-width: 570px) {
	body {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modalWindow.cancel {
		overflow: auto;
		min-height: 50%;
		left: auto;
		width: 90%;
	}

	.modalWindow.cancel .modalWindowHeader {
		position: absolute;
		height: 18%;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: visible;
	}

	.modalWindow.cancel .modalWindowContent {
		position: absolute;
		height: fit-content;
		overflow: visible;
		top: 18%;
		line-height: 25px;
		font-size: 0.8em;
	}

	.modalWindow.cancel .modalWindowFooter {
		position: absolute;
		bottom: 10%;
		width: 100%;
	}

	.modalWindow.cancel .cancelButton {
		width: auto;
		margin-left: auto;
		margin-right: auto;
	}
}

.palert .form-content-text {
	background-color: #eee;
	padding: 10px;
	display: block;
	margin: 10px 0px 30px 0px;
}

.palert label {
	color: inherit;
}

/* Incident Search Tables */

#incident-search-results table.sheet th {
	width: 20%;
}

#incident-form #multipleSelect td {
	height: 100%;
}

#incident-form #inputColumns td {
	width: 25%;
}

/* Date Picker Component */

.datepicker .dateSelector {
	text-align: center;
	width: 5.5em;
}

.datepicker #dateValueHolder {
	display: none;
}

.datepicker {
	display: inline;
}

.datepicker #clearButtonContainer {
	display: inline;
	height: 30px;
}

.datepicker #datePickerClear,
#datePickerContainer .datePickerClear {
	transition: all 0.2s ease;
	position: relative;
	top: 4px;
	height: 15px;
	width: auto;
	margin-right: 7px;
	margin-left: 2px;
}

.custom-date-filter {
	background-color: white !important;
}

.datepicker #datePickerClear:hover,
#datePickerContainer .datePickerClear:hover {
	transform: scale(1.3);
	cursor: pointer;
}

/* Report Page */

#reportsTree #reportTreeFilterContainer {
	position: relative;
	/*margin-left: 4%;*/
}

#reportsTree .reportList {
	list-style-type: none;
}

#reportsTree .caret {
	cursor: pointer;
	user-select: none;
	/* Prevent text selection */
	border: 0;
	margin-right: 3px;
	color: black;
	display: inline-block;
}

#reportsTree .caret:focus {
	background: transparent;
	border: 2px solid black;
}

#reportsTree .caret-open {
	color: black;
	transform: rotate(90deg);
}

#reportsTree .caretText {
	display: none;
}

#reportsTree .expandText {
	margin-right: 20px;
	font-size: 0.9em;
}

#reportsTree .nested {
	display: none;
}

#reportsTree .active {
	display: block;
}

.create-report-table #categoryWarning {
	color: rgb(255, 5, 0);
	font-weight: bold;
	font-size: 1em;
	display: none;
}

/*----------------- Order form uploaded image width fix -----------------*/
/*-- ticket #21094 --*/

.ui-widget-content span img {
	max-width: 25em;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*----------------- Account management pages -----------------*/

.filterListContainer {
	float: right;
	margin-bottom: 5px;
	margin-top: 1em;
}

.selectFilterLabelStyle,
.selectFilterStyle,
.searchLikeBox {
	float: left;
}

.selectFilterLabelStyle,
.selectFilterStyle {
	margin-right: 0.5em;
}

.selectFilterStyle {
	min-width: 200px;
}

.searchLikeBox {
	min-width: 300px;
	margin-top: 0 !important;
	margin-right: 1px;
	padding: 6px 2px !important;
}

.selectFilterLabelStyle {
	margin-top: 3px;
}

.orderListByClass {
	cursor: pointer;
}

.activeOrderByASC::after {
	content: "▲";
	margin-left: 0.5em;
	font-size: 0.8em;
}

.activeOrderByDESC::after {
	content: "▼";
	margin-left: 0.5em;
	font-size: 0.8em;
}

.accountListPagelinkContainer {
	margin-top: 0.3em;
}

.accountNotValid>a {
	color: #ff0000 !important;
}

.trackinPagelinkContainer {
	margin-top: 0.3em;
	padding: 5px 0px;
	overflow: auto;
}

.trackinPagelinkContainer .listPagelink {
	float: left;
	padding: 2px 6px;
	text-decoration: none;
	border: 1px solid #ddd;
}

.trackinPagelinkContainer .selectedPageStyle {
	background-color: #1b4283;
	color: white !important;
}

.listPagelink {
	font-size: 1em;
	cursor: pointer;
}

.selectedPageStyle {
	font-weight: bold;
}

.trackin-selected-filter {
	font-weight: bold;
}

.trackin-filter-link {
	cursor: pointer;
	padding: 5px;
}

.trackin-search-container {
	/* overflow: auto; */
	display: flex;
	padding-bottom: 10px;
	text-align: center;
}

.trackin-search-container>div {
	flex: 1;
}

.trackin-search-container>div>p {
	margin: 0;
	padding: 0;
}

/* .trackin-search {
	float: left;
	padding-bottom: 10px;
}

.trackin-view-edit {
	float: right;
} */

.wait-icon-container {
	text-align: center;
}

.accountTypeFooter {
	padding-top: 2em !important;
	padding-bottom: 1em;
}

#accountmngtAccountListView {
	min-height: 600px;
}

div.interfaceLoaderBlock {}

div.interfaceLoaderBlock>h3 {
	margin-bottom: 0.5em !important;
}

div.interfaceLoaderBlock>p {
	margin-top: 0 !important;
}

.vueRenderingAnimation-enter-active,
.vueRenderingAnimation-leave-active {
	transition: opacity 0.5s;
}

.vueRenderingAnimation-enter,
.vueRenderingAnimation-leave-to {
	opacity: 0;
}

/*-----------------------------*/

/*------------------ Info session Vue -------------------------*/
#infoSessionVue.infoSessionVueTemplateMode dt {
	margin-top: 1em;
}

#infoSessionVue.infoSessionVueModalPopupMode .infoSessionNavigationLink {
	height: 0.5em !important;
}

#infoSessionVue .infoSessionNavigationLink a {
	float: right;
	font-size: 0.8em;
}

/*------------------ Info session form Vue -------------------------*/
#infoSessionFormNavigationLink {
	float: right;
	font-size: 0.8em;
	display: inline;
	font-weight: normal;
}

#infoSessionFormVue .new-form-comment-line {
	margin-top: 2em;
}

#infoSessionFormVue .form-comment-line {
	line-height: 30px;
}

#printSessionFormContent {
	float: right;
}

#formResponseDetailsLink {
	text-align: right;
}

@media print {
	.do-not-print {
		display: none !important;
	}
}

/*-----------------------------*/

/*------------------ form session popup Vue -------------------------*/
#formSessionPopupVue .new-form-comment-line {
	margin-top: 2em;
}

#formSessionPopupVue .form-comment-line {
	line-height: 30px;
}

/*-----------------------------*/

/*------------------ Account compatibility request Vue -------------------------*/

.acRequestInput {
	width: 100%;
}

.acRequestInputFilterLabel {
	width: 20%;
}

.acRequestInputFilter {
	width: 80%;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
}

.objectForValidationApproveAll {
	float: right;
	margin-top: 0.5em;
}

.objectForValidationActionTh {
	width: 125px;
}

/*-----------------------------------------------------------------*/

/*------------------CUSTOM SELECT -------------------------*/
.customSelect {
	width: 100%;
}

.customSelectInput {
	width: 390px;
	padding: 4px !important;
	font-size: 1em;
}

.customSelectInputIcon {
	float: left;
	margin-top: 9px;
	margin-left: 3px;
}

.customSelectInputNoResult {
	color: red;
}

#accountBcodeNotValid,
#newAccountBcodeNotValid {
	color: red;
	font-weight: bold;
}

#globalErrorMsg {
	color: red;
	font-weight: bold;
	font-size: 1.3em;
}

.customSelectOptions {
	width: 400px;
	margin-top: 1px;
	/* position: absolute; */
	z-index: 1;
	background-color: white;
	border-bottom: 1px solid #999999;
	border-right: 1px solid #999999;
	border-left: 1px solid #999999;
}

.customSelectOptionsEmpty {
	border-color: transparent !important;
}

.customSelectOption {
	text-overflow: ellipsis;
	overflow: hidden;

	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 2px;
}

.batch-process-row {
	background-color: #e6ffe6;
}

/*-----------------------------*/

/*------------------ Tag vue -------------------------*/
#tagIntefaces .tag-vue-td-preview {
	padding: 1em !important;
	line-height: 20px;
}

#tagIntefaces .tag-vue-td-preview .tag-vue-objName {
	font-weight: bold;
}

#tagIntefaces .tag-vue-validation-btn {
	width: 150px;
}

#tagIntefaces .tag-vue-validation-error {
	min-height: 30px;
}

#tagIntefaces .tag-vue-create-new-btn {
	min-height: 30px;
}

#tagLinkIntefaces #tagList {
	margin-bottom: 2em;
}

#tagLinkIntefaces .tag-link-vue-back-a {
	margin-bottom: 2em;
}

#tagLinkIntefaces .tag-link-vue-category-td {
	padding: 0.5em;
	font-weight: bold;
	font-size: 0.9em;
}

/*------------------ Tag Edit vue -------------------------*/
.tagListContainer .tagElement {
	margin-right: 1em;
	font-size: 0.8em;
}

/*-----------------------------*/

/*--------- order vue ----------*/
.SGroup-level-1 {
	font-size: 130%;
	margin-left: 0em;
}

.SGroup-level-2 {
	font-size: 120%;
	margin-left: 1em;
}

.SGroup-level-3 {
	font-size: 110%;
	margin-left: 2em;
}

.SGroup-level-4 {
	font-size: 100%;
	margin-left: 3em;
}

.SGroup-level-5 {
	font-size: 90%;
	margin-left: 4em;
}

td.invalid-order-input {
	.SGroup-level-1 {
		font-size: 130%;
		margin-left: 0em;
	}

	.SGroup-level-2 {
		font-size: 120%;
		margin-left: 1em;
	}

	.SGroup-level-3 {
		font-size: 110%;
		margin-left: 2em;
	}

	.SGroup-level-4 {
		font-size: 100%;
		margin-left: 3em;
	}

	.SGroup-level-5 {
		font-size: 90%;
		margin-left: 4em;
	}
}

td.invalid-order-input {
	background-color: #ffec00;
}

/* Catalog tree row card. Used on the consumer /catalog/ page and on
   the /catalog-asset-settings/ tree column. The previous near-invisible
   halo-style box-shadow (rgba 0.2, 2px blur, 0 spread, 0/0 offset) left
   the rows floating with no discernible edge; adding a real 1px border
   gives each row a clean card boundary, and the adjusted shadow
   (1px down, tighter blur) keeps the subtle lift. Border alpha is low
   enough to read as "card boundary" not "input field", and the same
   value works on the default / disabled / selected backgrounds
   (nearly invisible on the primary-color selected state — fine, the
   background color already separates it from siblings). */
.catalog-line {
	margin-bottom: 5px;
	z-index: 0;
	justify-self: end;
	box-sizing: border-box;
	width: 100%;
	background-color: #fcfcfc;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	color: black;
	box-shadow: rgba(99, 99, 99, 0.12) 0px 1px 2px 0px;
}

.catalog-line-disabled {
	margin-bottom: 5px;
	z-index: 0;
	justify-self: end;
	box-sizing: border-box;
	width: 100%;
	background-color: #b9b9b9;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	color: #848484;
	box-shadow: rgba(99, 99, 99, 0.12) 0px 1px 2px 0px;
}

.catalog-line-selected {
	margin-bottom: 5px;
	z-index: 0;
	justify-self: end;
	box-sizing: border-box;
	width: 100%;
	background-color: var(--primary-color);
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	color: white;
	box-shadow: rgba(99, 99, 99, 0.12) 0px 1px 2px 0px;
}

.catalog-add {
	transition: 200ms;
}

.catalog-add:hover {
	background-color: #f7f5f5;
}

.activeCatalog {
	background-color: #003469;
}

.asset-img {
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 200px;
	overflow: hidden;
	background-size: contain;
}

.asset-img-card-component {
	width: 180px;
	height: 180px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

.new-asset-img {
	width: 120px;
	height: 120px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
	/* Prevents shrinking when text is long */
}

.asset-info {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #e1e1e1 #f1f1f1;
}

.asset-types {
	position: relative;
	border: 1px solid #dfdfdf;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	padding: 5px;
}

.type-container {
	font-size: 14px;
	margin-top: 3px;
	line-height: 16px;
	overflow-x: hidden;
	overflow-y: hidden;
}

.type-container::-webkit-scrollbar {
	display: none;
}

/* Chip secondary line: the chip title is bold, the description is not. */
.cfg-chip-subtext {
	font-weight: 500;
}

.type-container>small {
	padding: 2px 5px;
	width: fit-content;
	font-weight: bold;
	border-radius: 10px;
	border: 1px solid #cfcfcf;
	background-color: #f8f8f8;
	margin-right: 3px;
}

.assets-container {
	display: grid;
	width: 100%;
	margin: 0 auto;
	column-gap: 30px;
	margin-top: 25px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: 30px;
	z-index: 0;
}

.catalog-container-full-screen {
	width: 95vw;
	margin-left: calc(50% - 48vw);
	display: grid;
	column-gap: 30px;
	margin-top: 25px;
	z-index: 0;
	padding: 0 16px;
	background-color: #fcfcfc;
}

.assets-container-full-screen,
.assets-container-cards-4 {
	display: grid;
	column-gap: 10px;
	margin-top: 25px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	row-gap: 20px;
	z-index: 0;
}

.assets-container-cards-2 {
	display: grid;
	width: 100%;
	margin: 0 auto;
	column-gap: 30px;
	margin-top: 25px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: 30px;
	z-index: 0;
}

.assets-container-list {
	margin-top: 15px;
}

.asset-list-group-header {
	font-size: 13px;
	font-weight: bold;
	padding: 8px 10px 4px;
	color: #555;
	border-bottom: 1px solid #e0e0e0;
	margin-top: 10px;
}

.asset-list-group-header:first-child {
	margin-top: 0;
}

.asset-list-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
	font-size: 12px;
}

.asset-list-row:hover {
	background-color: #e8ecf7;
}

.asset-list-row:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: -2px;
}

.asset-list-type-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0px 8px 1px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	flex-shrink: 0;
	white-space: nowrap;
	width: 65px;
	text-align: center;
}

.asset-list-type-system {
	background-color: var(--primary-color);
}

.asset-list-type-service {
	background-color: var(--primary-color);
}

.asset-list-type-facility {
	background-color: var(--primary-color);
}

.asset-list-type-asset {
	background-color: var(--primary-color);
}

.asset-list-type-portal {
	background-color: var(--primary-color);
}

.asset-list-type-alias {
	background-color: var(--primary-color);
}

.asset-list-name {
	flex: 1;
	font-weight: 600;
	min-width: 150px;
	word-break: break-word;
}

.asset-list-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	overflow: hidden;
	flex: 1;
}

.asset-list-actions {
	flex-shrink: 0;
	width: 65px;
	text-align: right;
}

.asset-list-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 50px;
	min-height: 24px;
	padding: 2px 10px;
	border: 1px solid var(--primary-color);
	border-radius: 4px;
	color: var(--primary-color);
	cursor: pointer;
	font-size: 11px;
	white-space: nowrap;
	text-align: center;
}

.asset-list-action-btn:hover {
	background-color: var(--primary-color);
	color: #fff;
}

.asset-list-action-btn:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 1px;
}

.asset-list-chip {
	padding: 1px 6px;
	border: 1px solid #cfcfcf;
	border-radius: 10px;
	font-size: 10px;
	white-space: nowrap;
}

.catalog-groupby-select {
	font-size: 11px;
	padding: 0 10px;
	height: 22px;
	border: 1px solid var(--primary-color);
	border-radius: 5px;
	color: var(--primary-color);
	background: #ffffff;
	cursor: pointer;
	/* Size to the selected option, not the widest one. */
	field-sizing: content;
}

/* Not --secondary-color: it's a second blue in some themes (blue on blue). */
.catalog-groupby-select:hover,
.catalog-groupby-select:focus {
	background: var(--primary-color);
	color: #ffffff;
}

.catalog-groupby-select option {
	background: #ffffff;
	color: #333;
}

.catalog-groupby-select:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 1px;
}

.catalog-chip-expand {
	position: relative;
	cursor: default;
}

.catalog-chip-expand::after {
	content: attr(data-path);
	position: absolute;
	left: -6px;
	top: -3px;
	white-space: nowrap;
	padding: 2px 5px;
	line-height: inherit;
	border-radius: 10px;
	border: 1px solid #cfcfcf;
	background-color: #f8f8f8;
	font-weight: bold;
	font-size: inherit;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 100;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease 0.5s;
}

.catalog-chip-expand:hover::after {
	opacity: 1;
}

.catalog-chip-expand:not(:hover)::after {
	transition: opacity 0.2s ease 0s;
}

.type-container:has(.catalog-chip-expand:hover) {
	overflow: visible;
}

.asset-list-row:has(.catalog-chip-expand:hover) {
	overflow: visible;
}

.asset-list-chips:has(.catalog-chip-expand:hover) {
	overflow: visible;
}

.view-mode-active {
	fill: var(--primary-color) !important;
	color: var(--primary-color) !important;
}

.search-input-catalog {
	padding: 4px 10px !important;
	height: 30px;
	border-radius: 4px;
	margin-top: 0 !important;
	border: 1px solid #ccc;
	font-size: 13px;
	transition: border-color 0.3s ease-in-out;
	width: 100%;
	box-sizing: border-box;
}

.search-input-catalog:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.search-input-select-catalog {
	padding: 5px 10px !important;
	height: 20px;
	border-radius: 2px;
	padding: 0 5px;
	margin-top: 0 !important;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	font-size: 16px;
	transition: border-color 0.3s ease-in-out;
	width: 100%;
}

.search-input-select-catalog:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.tree-catalog {
	display: block;
	padding: 5px 5px 0 0;
	width: 350px;
}

.catalog-button {
	display: none;
}

.catalog-container {
	display: flex;
	flex-wrap: row;
	column-gap: 30px;
	align-items: flex-start;
}

.asset-catalog {
	width: fit-content;
	padding: 5px 10px;
	border-radius: 10px;
	border: 1px solid rgb(154, 174, 197, 0.5);
	margin-bottom: 5px;
	font-weight: light;
	transition: 200ms;
}

.asset-catalog:hover {
	border: 1px solid rgb(79, 146, 223, 1);
	transition: 200ms;
	cursor: pointer;
}

.path-container {
	border: 1px solid rgb(235, 236, 238);
	min-height: 18px;
	border-radius: 2px;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 5px;
	background-color: #fcfcfc;
}

.catalog-filter-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	margin: 0 2px;
	border-radius: 10px;
	background-color: var(--primary-color);
	color: white;
	font-size: 12px;
	white-space: nowrap;
	cursor: pointer;
	max-width: 300px;
}

.catalog-filter-chip small {
	overflow: hidden;
	text-overflow: ellipsis;
}

.catalog-filter-chip-type {
	background-color: #a4b3c0;
}

.catalog-filter-chip-search {
	background-color: #1494a7;
	cursor: pointer;
}

.catalog-filter-chip-search strong {
	color: #ffffff;
	font-size: 11px
}

.catalog-reset-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #dc3545;
	cursor: pointer;
	flex-shrink: 0;
	margin-left: 5px;
	transition: background-color 200ms;
}

.catalog-reset-button:hover {
	background-color: #c82333;
}

.link-style {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}

.link-style:hover {
	color: rgb(1, 1, 103);
}



.edit-button {
	border: 1px solid var(--primary-color);
	border-radius: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 25px;
	height: 25px;
	min-width: 25px;
	min-height: 25px;
}

.edit-button:hover {
	cursor: pointer;
}

.edits-icon {
	fill: rgb(154, 153, 153);
	margin-top: 7px;
	transition: 200ms;
	outline: none;
}

.edits-icon:hover {
	fill: var(--primary-color);
	cursor: pointer;
}

.reset-filter-icon {
	fill: rgb(154, 153, 153);
	transition: 200ms;
}

.reset-filter-icon:hover {
	fill: var(--primary-color);
	cursor: pointer;
}

.catalog-settings-icon {
	fill: rgb(154, 153, 153);
	transition: 200ms;
}

.catalog-settings-icon:hover {
	fill: var(--primary-color);
	cursor: pointer;
}

.edits-icon-highlight {
	fill: rgb(203, 203, 203);
	margin-top: 7px;
	transition: 200ms;
}

.edits-icon-highlight:hover {
	fill: white;
}

.delete-icon {
	fill: rgb(154, 153, 153);
	margin-top: 7px;
	transition: 200ms;
}

.delete-icon:hover {
	fill: #e73737;
	cursor: pointer;
}

.delete-icon-highlight {
	fill: rgb(203, 203, 203);
	margin-top: 7px;
	transition: 200ms;
}

.delete-icon-highlight:hover {
	fill: #e73737;
}

.div-action-icons {
	position: relative;
	border-left: 1px solid #ccc;
	padding: 0 2px;
	z-index: 10;
}

.catalog-checkbox {
	border-left: 1px solid #ccc;
	padding: 0 2px;
	z-index: 10;
	height: 100%;
	/* 24px minimum tap target (WCAG 2.5.8) — it measured 23px wide. */
	min-width: 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.catalog-checkbox:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: -2px;
}

.catalog-filter-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 10px;
}

.catalog-header {
	display: none;
	flex-direction: row;
	column-gap: 25px;
}

.tree-header {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	column-gap: 7px;
	width: 36%;
}

.modal-move {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 70%;
	width: 40%;
	z-index: 120;
	border-radius: 10px;
	overflow: auto;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 0px 8px 0px;
	opacity: 1;
	background-color: #fcfcfc;
	margin: 0 auto;
	padding: 20px 20px 40px 20px;
}

.load-more-btn {
	padding: 10px;
	border: 1px solid #cfcfcf;
	color: #1a237f;
	border-radius: 5px;
	transition: 200ms;
}

.load-more-btn:hover {
	background: var(--primary-color);
	color: #ffffff;
	cursor: pointer;
}

.advanced-search-link {
	font-size: 10px;
	text-decoration: underline;
	min-height: 24px;
}

.advanced-search-link.path-element {
	display: inline-flex;
	align-items: center;
}

[aria-label="Clear all filters"] {
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.search-clear-icon {
	position: absolute;
	right: -18px;
	font-size: 10px;
	top: 1px;
	z-index: 1;
}

/* 24x24 tap target (WCAG 2.5.8), vertically centred in the input. */
.advanced-search-clear-icon {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

/* .delete-icon's 7px top margin would offset the glyph here. */
.advanced-search-clear-icon .delete-icon {
	margin: 0;
}

.path-element {
	color: var(--primary-color);
	display: inline-block;
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

.path-element:hover {
	cursor: pointer;
	text-decoration: underline;
}

.advanced-search-container {
	margin-block: 1rem;
	padding: 0.5rem;
	border-radius: 10px;
	overflow: auto;
	box-shadow: rgba(99, 99, 99, 0.5) 0px 0px 2px 0px;
	opacity: 1;
	background-color: #fcfcfc;
}

/* Shown only in the mobile sheet (see max-width: 768px). */
.advanced-search-mobile-header {
	display: none;
}

.advanced-search-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.input-search-container {
	display: flex;
	flex-direction: row;
	column-gap: 1rem;
	width: 85%;
	margin-top: 1em;
	margin-left: 1em;
}

.advanced-search-input-catalog {
	/* Right padding clears the clear-icon button. */
	padding: 0 36px 0 10px !important;
	height: 40px;
	border-radius: 2px;
	margin-top: 0 !important;
	border: 1px solid #ccc;
	font-size: 16px;
	transition: border-color 0.3s ease-in-out;
	width: 100%;
	box-sizing: border-box;
}

.advanced-search-input-catalog:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.advanced-search-filter {
	margin-top: 1em;
	margin-left: 1em;
	width: 95%;
	padding: 0.5em;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 5px;
	row-gap: 5px;
}

.advanced-search-button-disabled {
	padding-inline: 14px;
	height: 40px;
	box-sizing: border-box;
	flex-shrink: 0;
	white-space: nowrap;
	border: 1px solid #cfcfcf;
	color: #fff;
	background-color: gray;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.root-catalog-mngt-button {
	padding-inline: 10px;
	width: 15%;
	border: 1px solid #cfcfcf;
	color: var(--primary-color);
	border-radius: 5px;
	transition: 300ms;
	display: flex;
	justify-content: center;
	align-items: center;
}

.root-catalog-mngt-button:hover {
	background: var(--primary-color);
	color: #ffffff;
	cursor: pointer;
}

/* Applied to the Root Catalog Administrators button while its panel is
   open — gives the button a filled "on" appearance so the user can see
   at a glance that clicking again closes the panel. */
.root-catalog-mngt-button-active,
.root-catalog-mngt-button.root-catalog-mngt-button-active {
	background: var(--primary-color);
	color: #ffffff;
	border-color: var(--primary-color);
}

/* Asset-count chips in the catalog banner. They're styled like the
   Root-Catalog-Mngt pill but are informational-only — no click
   affordance, no hover highlight. The accompanying "View ↗" link
   handles navigation separately. */
.asset-count-chip {
	background: #f5f5f5;
}

.asset-count-chip:hover {
	background: #f5f5f5;
	color: var(--primary-color);
	cursor: default;
}

/* "(+N hidden)" note — appended to the asset count when raw-total and
   catalog-view-visible counts disagree. Muted text so the visible
   count stays the dominant number; tooltip on the parent chip
   explains why (assets or catalog nodes inactive). */
.asset-count-hidden {
	color: #777;
	font-weight: normal;
	margin-left: 3px;
}

.root-catalog-mngt-button-active:hover {
	/* Keep it filled on hover — a subtle darken instead of flipping back
	   to the idle border-only look. */
	filter: brightness(0.92);
}

/* Now a real <button>, so background/font are pinned against the theme's global
   button chrome, and the disabled look comes from :disabled instead of a
   separate .advanced-search-button-disabled div. */
.advanced-search-button {
	padding-inline: 14px;
	height: 40px;
	box-sizing: border-box;
	flex-shrink: 0;
	white-space: nowrap;
	border: 1px solid #cfcfcf;
	background: #ffffff;
	color: var(--primary-color);
	font: inherit;
	border-radius: 5px;
	transition: 300ms;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

/* :not(:disabled) outranks the theme's `button:hover:not(:disabled)`. */
.advanced-search-button:hover:not(:disabled) {
	background: var(--primary-color);
	color: #ffffff;
	cursor: pointer;
}

.advanced-search-button:disabled {
	border-color: #cfcfcf;
	background-color: #767676;
	color: #ffffff;
	cursor: not-allowed;
}


.save-styled-button {
	padding-inline: 10px;
	width: 10%;
	border: 1px solid #cfcfcf;
	padding-block: 5px;
	color: #303F9F;
	border-radius: 5px;
	transition: 300ms;
	display: flex;
	justify-content: center;
	align-items: center;
}

.save-styled-button:hover {
	background: #303F9F;
	color: #ffffff;
	cursor: pointer;
}

.cancel-styled-button {
	padding-inline: 10px;
	padding-block: 5px;
	width: 10%;
	border: 1px solid #cfcfcf;
	color: #303F9F;
	border-radius: 5px;
	transition: 300ms;
	display: flex;
	justify-content: center;
	align-items: center;
}

.cancel-styled-button:hover {
	background: gray;
	color: #ffffff;
	cursor: pointer;
}

.catalog-card-button {
	padding-inline: 20px;
	width: 10%;
	border: 1px solid #cfcfcf;
	color: var(--primary-color);
	background: #ffffff;
	border-radius: 5px;
	transition: 300ms;
	position: absolute;
	bottom: 5px;
	left: 5px;

	display: flex;
	justify-content: center;
	align-items: center;
	height: 22px;
	text-align: center;
}

.catalog-card-button:hover {
	background: var(--primary-color);
	color: #ffffff;
	cursor: pointer;
}

.asset-card-vue-btn {
	margin-bottom: 3px;
	padding: 1px 20px;
	width: 100%;
	border: 1px solid #cfcfcf;
	background: var(--primary-color);
	color: #ffffff;
	border-radius: 5px;
	transition: 500ms;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
}

.asset-card-vue-btn:hover {
	background: #ffffff;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	cursor: pointer;
}

.asset-card-vue-btn svg {
	fill: #ffffff;
	transition: fill 300ms;
}

.asset-card-vue-btn:hover svg {
	fill: var(--primary-color);
}

.book-asset-btn {
	margin-bottom: 3px;
	padding: 1px 20px;
	width: 10%;
	border: 1px solid #cfcfcf;
	background: var(--primary-color);
	color: #ffffff;
	border-radius: 5px;
	transition: 500ms;
	display: flex;
	justify-content: center;
	align-items: center;
}

.book-asset-btn:hover {
	background: #ffffff;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	cursor: pointer;
}

.book-asset-btn svg {
	fill: #ffffff;
	transition: fill 300ms;
}

.book-asset-btn:hover svg {
	fill: var(--primary-color);
}

.back-asset-btn {
	margin-bottom: 3px;
	padding: 1px 20px;
	width: 10%;
	border: 1px solid #cfcfcf;
	background: #ffffff;
	color: var(--primary-color);
	border-radius: 5px;
	transition: 500ms;
	display: flex;
	justify-content: center;
	align-items: center;
}

.back-asset-btn:hover {
	background: var(--primary-color);
	border: 1px solid #ffffff;
	color: #ffffff;
	cursor: pointer;
}

.back-asset-btn svg {
	fill: var(--primary-color);
	transition: fill 300ms;
}

.back-asset-btn:hover svg {
	fill: #ffffff;
}

.asset-login-button {
	margin-bottom: 3px;
	padding: 1px 20px;
	width: 30%;
	border: 1px solid #cfcfcf;
	background: var(--primary-color);
	color: #ffffff;
	border-radius: 5px;
	transition: 500ms;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.asset-login-button:hover {
	background: #ffffff;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	cursor: pointer;
}

.nav-asset-management-back-button {
	margin-bottom: 3px;
	padding: 1px 20px;
	width: 20%;
	border: 1px solid var(--primary-color);
	background: #ffffff;
	color: var(--primary-color);
	border-radius: 5px;
	transition: 500ms;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.nav-asset-management-back-button:hover {
	background: var(--primary-color);
	border: 1px solid #ffffff;
	color: #ffffff;
	cursor: pointer;
}

.nav-asset-management-back-button svg {
	fill: var(--primary-color);
	transition: fill 300ms;
}

.nav-asset-management-back-button:hover svg {
	fill: #ffffff;
}

.nav-asset-management-button {
	margin-bottom: 3px;
	padding: 1px 20px;
	width: 35%;
	border: 1px solid var(--primary-color);
	background: #ffffff;
	color: var(--primary-color);
	border-radius: 5px;
	transition: 500ms;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.nav-asset-management-button:hover {
	background: var(--primary-color);
	border: 1px solid #ffffff;
	color: #ffffff;
	cursor: pointer;
}

.nav-asset-management-button svg {
	fill: var(--primary-color);
	transition: fill 300ms;
}

.nav-asset-management-button:hover svg {
	fill: #ffffff;
}

.catalog-view-activation-div {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: #f8f9fa;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 10px 20px;
}


.catalog-visibility-button {
	margin-bottom: 3px;
	padding: 1px 20px;
	width: 9%;
	border: 1px solid var(--primary-color);
	background: #ffffff;
	color: var(--primary-color);
	border-radius: 5px;
	transition: 500ms;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.catalog-visibility-button:hover {
	background: var(--primary-color);
	border: 1px solid #ffffff;
	color: #ffffff;
	cursor: pointer;
}

.catalog-visibility-button svg {
	fill: var(--primary-color);
	transition: fill 300ms;
}

.catalog-visibility-button:hover svg {
	fill: #ffffff;
}

.add-asset-catalog-setting-button {
	margin-bottom: 3px;
	padding: 1px 20px;
	width: 5%;
	border: 1px solid var(--primary-color);
	background: #ffffff;
	color: var(--primary-color);
	border-radius: 5px;
	transition: 500ms;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.add-asset-catalog-setting-button:hover {
	background: var(--primary-color);
	border: 1px solid #ffffff;
	color: #ffffff;
	cursor: pointer;
}

.add-asset-catalog-setting-button svg {
	fill: var(--primary-color);
	transition: fill 300ms;
}

.add-asset-catalog-setting-button:hover svg {
	fill: #ffffff;
}

.back-catalog-button {
	padding: 0 12px;
	height: 24px;
	border: 1px solid var(--primary-color);
	background: #ffffff;
	color: var(--primary-color);
	border-radius: 5px;
	transition: 500ms;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.back-catalog-button:hover {
	background: var(--primary-color);
	border: 1px solid #ffffff;
	color: #ffffff;
	cursor: pointer;
}

.back-catalog-button svg {
	fill: var(--primary-color);
	transition: fill 300ms;
}

.back-catalog-button:hover svg {
	fill: #ffffff;
}

.add-asset-catalog-button {
	padding: 0 12px;
	height: 22px;
	border: 1px solid var(--primary-color);
	background: #ffffff;
	color: var(--primary-color);
	border-radius: 5px;
	transition: 500ms;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-shrink: 0;
	background: #ffffff;
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 400;
	cursor: pointer;
}

/* :not(:disabled) outranks the theme's `button:hover:not(:disabled)`. */
.add-asset-catalog-button:hover:not(:disabled) {
	background: var(--primary-color);
	border: 1px solid #ffffff;
	color: #ffffff;
	cursor: pointer;
}

.add-asset-catalog-button:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

.add-asset-catalog-button svg {
	fill: var(--primary-color);
	transition: fill 300ms;
}

.add-asset-catalog-button:hover svg {
	fill: #ffffff;
}

.catalog-create-asset-content-button {
	display: flex;
	align-items: center;
	gap: 5px;
}

.catalog-card-login-content-button {
	display: flex;
	align-items: center;
	gap: 5px;
}

.catalog-card-button svg {
	fill: var(--primary-color);
	transition: fill 300ms;
}

.catalog-card-button:hover svg {
	fill: #ffffff;
}

.asset-login-button svg {
	fill: #ffffff;
	transition: fill 300ms;
}

.asset-login-button:hover svg {
	fill: var(--primary-color);
}

.go-asset-btn-card-component {
	margin-bottom: 3px;
	padding: 1px 20px;
	width: 60%;
	border: 1px solid #cfcfcf;
	background: var(--primary-color);
	color: #ffffff;
	border-radius: 5px;
	transition: 500ms;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.go-asset-btn-card-component:hover {
	background: #ffffff;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	cursor: pointer;
}

.book-asset-btn {
	margin-bottom: 3px;
	padding: 1px 20px;
	width: 10%;
	border: 1px solid #cfcfcf;
	background: var(--primary-color);
	color: #ffffff;
	border-radius: 5px;
	transition: 500ms;
	display: flex;
	justify-content: center;
	align-items: center;
}

.book-asset-btn:hover {
	background: #ffffff;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	cursor: pointer;
}

.sub-catalog {
	margin-inline: 4px;
	margin-block: 4px;
	padding-inline: 8px;
	padding-block: 3px;
	background-color: #f5f2f2;
	border-radius: 20px;
	border: 1px solid #c1c1c1;
	height: fit-content;
	cursor: pointer;
	transition: 150ms;
}

.sub-catalog:hover {
	box-shadow: 0 0 2px rgba(54, 54, 54, 0.5);
}

.list-catalog-container {
	width: 100%;
	margin-top: 10px;
	padding-inline: 10px;
	border-radius: 10px;
	position: relative;
	box-shadow: rgba(99, 99, 99, 0.5) 0px 0px 2px 0px;
	overflow: hidden;
}

.close-icon {
	position: absolute;
	top: 1px;
	right: 5px;
	cursor: pointer;
}

.asset-card-compnent {
	height: 500px;
	width: 100%;
	border-radius: 10px;
	position: relative;
	box-shadow: rgba(99, 99, 99, 0.5) 0px 0px 2px 0px;
	cursor: pointer;
	transition: 400ms;
	overflow: hidden;
}

.asset-card {
	height: var(--asset-card-size);
	width: 100%;
	border-radius: 10px;
	position: relative;
	box-shadow: rgba(99, 99, 99, 0.5) 0px 0px 2px 0px;
	cursor: pointer;
	transition: box-shadow 200ms ease;
	overflow: hidden;
}

.asset-card:hover {
	box-shadow: rgba(99, 99, 99, 0.5) 0px 0px 10px 0px;
}

.asset-card-open {
	position: absolute;
	bottom: 5px;
	right: 12px;
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.asset-card-open:focus-visible {
	outline: 2px solid var(--primary-color);
}

/* Single asset */
.single-asset-container {
	display: flex;
	flex-direction: column;
	row-gap: 15px;
}

.single-asset-header {
	display: flex;
	flex-direction: row;
}

.single-asset-header-infos {
	padding-right: 0.5em;
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.single-asset-header-img-container {
	width: 50%;
	display: flex;
	flex-direction: column;
	border: 1px solid #eeeeee;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
}

.single-asset-second-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 5px;
	width: 100%;
	column-gap: 10px;
}

.single-asset-border {
	border: 1px solid #eeeeee;
	border-radius: 5px;
	padding: 5px;
	padding-left: 15px;
	padding-block: 10px;
}

.single-asset-contact {
	width: 50%;
	max-width: 50%;
	border-radius: 5px;
}

.single-asset-img {
	height: 100%;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.contact-info-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 5px;
}

.asset-lifecycle table {
	width: 100%;
}

.asset-lifecycle th,
.asset-lifecycle td {
	border-bottom: 1px solid #ddd;
}

.asset-back-button {
	fill: var(--primary-color);
	cursor: pointer;
}

.asset-back-button:hover {
	fill: #ef6c00d1;
}

.empty-catalog-error {
	border: 1px solid #dc3545 !important;
}

.responsiveInputWidth {
	width: 600px;
}

.responsiveInputWidthAssetOnly {
	width: 590px;
}

/* ------------------------------------------ */
/* -- Config form layout (cfg-* classes)   -- */
/* ------------------------------------------ */

.cfg-row {
	display: flex;
	flex-direction: column;
	row-gap: 6px;
}

.cfg-field {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	column-gap: 0.75rem;
}

.cfg-field-divider {
	border-top: 1px solid #d0d0d0;
	padding-top: 0.75rem;
}

.cfg-field-divider-bottom {
	border-bottom: 1px solid #d0d0d0;
	padding-bottom: 0.75rem;
}

.cfg-label {
	width: 13em;
	min-width: 13em;
	padding-top: 5px;
	font-size: 0.8rem;
	line-height: 1.3;
}

.cfg-input {
	flex: 1;
	max-width: 600px;
	font-size: 0.85rem;
	min-width: 0;
}

/* Force TinyMCE to respect container width */
.cfg-input .tox-tinymce {
	max-width: 100% !important;
	width: 100% !important;
}

/* Mandatory * overlaps outside the input's right edge */
.cfg-input>input+.mand,
.cfg-input>textarea+.mand,
.cfg-input>.cfg-chip-row+.mand {
	position: relative;
	margin-left: -1em;
	left: 1.2em;
}

/* Chip-row star: pin to top, compensate for flex gap so it aligns with other input stars */
.cfg-input>.cfg-chip-row+.mand {
	align-self: flex-start;
	margin-top: 0.45em;
	left: 0.7em;
}

/* plateformComponent nests the chip-row under a flex wrapper div (so the
   "use by default" checkbox can sit on a second row inside the same dd).
   That nesting defeats `.cfg-input > .cfg-chip-row + .mand`, which made
   the mandatory-asterisk for Organization steal flex width from the chip
   row — so that picker rendered narrower than Locations / Categories /
   Techniques. Re-apply the overlap trick one level deeper. */
.cfg-input>div>.cfg-chip-row+.mand {
	position: relative;
	margin-left: -1em;
	left: 0.7em;
	align-self: flex-start;
	margin-top: 0.45em;
}

/* Post-save "what next?" action list used by the system/service/facility
   /asset-only edit forms. Renders each follow-up as a left-aligned card
   inside modalPopup (which has text-align:center / font-weight:bold on
   its parent, hence the explicit resets). */
.pp-after-save-msg {
	font-weight: normal;
	line-height: 1.5;
	text-align: left;
	margin: 0 0 0.6em 0;
}

.pp-after-save-msg.pp-after-save-muted {
	color: #555;
	margin-top: 1em;
}

.pp-action-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-action-link {
	display: block;
	padding: 10px 14px;
	border: 1px solid #8f8f8f;
	border-radius: 6px;
	text-decoration: none;
	color: var(--primary-color, #3f51b5);
	font-weight: 600;
	line-height: 1.4;
	background: #fff;
	transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.pp-action-link:hover,
.pp-action-link:focus {
	background: #eef1ff;
	border-color: var(--primary-color, #3f51b5);
	outline: none;
	box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.15);
}

.pp-action-link::before {
	content: "\2192";
	/* right arrow */
	margin-right: 8px;
	opacity: 0.7;
	font-weight: 400;
}

/* "Use this" button in the catalog-select popup. Replaces an ambiguous
   check-mark icon (read as "saved/done") with a clear text+arrow button
   that says "apply this pick to the form". */
.pp-use-this-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var(--primary-color, #3f51b5);
	border-radius: 5px;
	background: #fff;
	color: var(--primary-color, #3f51b5);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, box-shadow 0.15s;
}

.pp-use-this-btn:hover,
.pp-use-this-btn:focus {
	background: var(--secondary-color, #eef1ff);
	outline: none;
	box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
}

.pp-use-this-btn svg {
	flex-shrink: 0;
}

/* When mand is a flex sibling (e.g. other layouts), just be a normal item */
.cfg-input .mand {
	flex-shrink: 0;
}

.cfg-input input[type="text"],
.cfg-input input[type="number"],
.cfg-input input[type="email"],
.cfg-input textarea,
.cfg-input select {
	min-height: 32px;
	padding: 4px 8px;
	font-size: 0.85rem;
	box-sizing: border-box;
	width: 100%;
}

/* Small numeric / short text inputs */
.cfg-input .cfg-input-sm {
	width: 6em !important;
}

/* Inputs inside from-to groups size to content, not 100% */
.cfg-from-to input[type="text"],
.cfg-from-to input[type="number"],
.cfg-from-to .cfg-input-sm {
	width: 6em !important;
}

/* From/To inline groups (availability, peak hours) */
.cfg-from-to {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
}

.cfg-from-to label {
	font-size: 0.8rem;
	white-space: nowrap;
}

.cfg-from-to select {
	width: auto !important;
	min-width: 6em;
}

.cfg-input input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.cfg-chip-row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px;
	min-height: 32px;
	height: fit-content;
	border: 1px solid #767676;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	width: 100%;
	padding: 4px 30px 4px 8px;
	box-sizing: border-box;
	font-size: 0.85rem;
}

.cfg-chip-add {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px dashed #767676;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	fill: #555;
}

.cfg-chip-add:hover,
.cfg-chip-add:active {
	background: var(--primary-color);
	border-color: var(--primary-color);
	fill: white;
}

.cfg-chip-add:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

/* Icon-only button for inline table/row actions (save, add, move-confirm).
   Replaces the pre-existing `<div tabindex="0" @click @keyup.enter>` pattern
   with a real <button> so screen readers announce role=button, Space and
   Enter both activate it, and the focus ring uses native styling. Transparent
   chrome keeps the visual identical to the old <div>-as-button treatment. */
.pp-icon-btn {
	background: transparent;
	border: 0;
	padding: 0 2px;
	margin: 0;
	cursor: pointer;
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.pp-icon-btn:focus-visible {
	outline: 2px solid var(--primary-color, #3f51b5);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Variant for the icons that were wrapped in `.div-action-icons` (border-left
   separator between row-action icons). Preserves the visual divider. */
.pp-icon-btn.div-action-icons {
	border-left: 1px solid #ccc;
}

/* Armed state for quick-confirm delete buttons. Applied by a Vue :class
   binding when a first click has armed the button and it's waiting for a
   confirming second click (auto-clears after ~3s).
   Earlier version expanded the button horizontally with an inline text
   label — that pushed neighbouring cells around and misaligned tables.
   Now the icon stays the same size (just tinted red + pulsing) and the
   "Click to confirm" label floats above the button as an absolutely
   positioned pill, so table layout is stable whether any row is armed
   or not. `.pp-icon-btn` gets `position: relative` by default so the
   overlay anchors correctly. */
.pp-icon-btn {
	position: relative;
}

.pp-icon-btn-armed {
	background: #fdecea;
	border-radius: 3px;
	animation: pp-icon-btn-armed-pulse 0.9s ease-in-out infinite alternate;
}

.pp-icon-btn-armed .delete-icon,
.pp-icon-btn-armed .delete-icon path {
	fill: #d32f2f;
}

.pp-icon-btn-confirm-label {
	/* Floating confirmation bubble positioned above the armed button.
	   Not inline — so the button's width doesn't change and surrounding
	   layout is unaffected. Pointer-events none so a click on the
	   button's hit area still registers as the confirm click rather
	   than landing on the label. */
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	background: #d32f2f;
	color: #ffffff;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Downward-pointing tail on the bubble so it visually connects to the
   button below. */
.pp-icon-btn-confirm-label::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: #d32f2f;
}

@keyframes pp-icon-btn-armed-pulse {
	from {
		box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.45);
	}

	to {
		box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.10);
	}
}

/* Invisible spacer used in the catalog admin tree where a node has no
   children — fills the same column width as the expand/collapse chevron
   (25x25) so leaf labels stay aligned with sibling labels that do render
   a chevron. flex-shrink: 0 keeps it from collapsing when the row is
   narrow. */
.pp-tree-leaf-spacer {
	width: 25px;
	height: 25px;
	flex-shrink: 0;
}

/* WCAG AA icon fills for catalog-admin components.
   Replaces inline :style fill bindings and the generic .edits-icon /
   .delete-icon classes (which are shared across the whole app and cannot
   be updated in isolation).
   Contrast targets: #767676 on white = 4.54:1 (AA ✓), white on
   var(--primary-color,#556df1) = 4.08:1 (AA ✓). */
.pp-icon-action {
	fill: #767676;
	transition: 200ms;
}

.pp-icon-action:hover {
	fill: var(--primary-color);
	cursor: pointer;
}

.pp-icon-action--active {
	fill: rgb(210, 210, 210);
	transition: 200ms;
}

.pp-icon-action--active:hover {
	fill: white;
	cursor: pointer;
}

.pp-icon-delete {
	fill: #767676;
	transition: 200ms;
}

.pp-icon-delete:hover {
	fill: #c62828;
	cursor: pointer;
}

.pp-icon-delete--active {
	fill: white;
	transition: 200ms;
}

.pp-icon-delete--active:hover {
	fill: #ffcdd2;
	cursor: pointer;
}

/* Tree expand/collapse chevrons — replaces the per-row inline
   :style="fill: ...; margin-top: 5px" binding. */
.pp-chevron {
	fill: var(--primary-color);
	flex-shrink: 0;
}

.pp-chevron--active {
	fill: white;
	flex-shrink: 0;
}

/* Focus-visible + hit-target wrapper for the span-as-button controls
   (row actions on the catalog-admin tables, chevrons on the tree, etc.).
   The a11y pass added role="button" + aria-label + Space-key handlers on
   spans; this class gives them a visible focus ring matching PPMS's
   other focusable elements (2px primary-color outline, small offset) and
   a comfortable hit target. inline-flex keeps the inner <svg> centered.
   outline-offset is -1px so the ring sits just inside the wrapper edge
   and doesn't push sibling icons apart when it shows. */
.pp-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	padding: 2px;
	border-radius: 3px;
	cursor: pointer;
}

.pp-icon-wrap:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: -1px;
}

/* Privacy-policy picker "+ new policy" button — sized to match the select
   box next to it so the row lines up with the input rows above.
   Colors/hover are provided by the .reset theme class. */
.pp-new-policy-btn {
	min-height: 27px;
	margin-bottom: 2px;
	padding: 4px 15px;
	font-size: 0.85rem;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Inline add panel (technicians, asset links) */
.cfg-add-panel {
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	background: #fafafa;
	padding: 0;
	margin-bottom: 0.5rem;
}

.cfg-add-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.4rem 0.75rem;
	border-bottom: 1px solid #d0d0d0;
	background: #f0f0f0;
	border-radius: 4px 4px 0 0;
	font-weight: 600;
	font-size: 0.85rem;
}

.cfg-add-panel-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	min-width: 28px;
	min-height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	fill: #666;
	border-radius: 3px;
}

/* :not(:disabled) to outrank the theme's global `button:hover:not(:disabled)`,
   which repaints the background with --hover (#0d47a1 on V2025Stratocore) and
   leaves the red glyph at 1.4:1 — well under the 3:1 of WCAG 1.4.11. */
.cfg-add-panel-close:hover:not(:disabled),
.cfg-add-panel-close:active:not(:disabled) {
	background-color: var(--del-button-hover, #fdecea);
	fill: #c41a16;
}

.cfg-add-panel-close:focus-visible {
	outline: 2px solid var(--primary-color, #3f51b5);
	outline-offset: 2px;
}

.cfg-add-panel-body {
	padding: 0.5rem 0.75rem;
	display: flex;
	flex-direction: column;
	row-gap: 0.4rem;
}

.cfg-add-panel-body .cfg-field {
	row-gap: 0.2rem;
}

.cfg-add-panel-actions {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	padding: 0.4rem 0.75rem;
	border-top: 1px solid #d0d0d0;
}

.cfg-add-panel-actions button {
	min-height: 28px;
	padding: 4px 12px;
	font-size: 0.8rem;
	cursor: pointer;
}

.cfg-add-panel-actions button:focus-visible {
	outline: 2px solid var(--primary-color, #3f51b5);
	outline-offset: 2px;
}

.cfg-select {
	width: 100%;
	max-width: 600px;
}


.cfg-readonly {
	display: inline-block;
	padding: 4px 0;
	font-weight: 500;
	color: #333;
}

.cfg-error {
	color: #c41a16;
	font-size: 0.8rem;
	margin: 2px 0 0 0;
}

.cfg-actions {
	display: flex;
	column-gap: 0.75rem;
	margin-top: 0.75rem;
}

.cfg-actions button {
	min-height: 32px;
	padding: 4px 12px;
	font-size: 0.85rem;
	box-sizing: border-box;
	cursor: pointer;
}

/* Visible focus ring for cfg form elements (WCAG AA) */
.cfg-input input:focus,
.cfg-input textarea:focus,
.cfg-input select:focus,
.cfg-chip-row:focus-within {
	outline: 2px solid var(--primary-color, #3f51b5);
	outline-offset: 2px;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* tagEdit / extraRefEdit inside cfg forms — pass through wrapper divs */
.cfg-row #editObjTagContainer,
.cfg-row #editObjExtraRefsContainer,
.cfg-row #editObjTagContainer>div,
.cfg-row #editObjExtraRefsContainer>div {
	display: contents;
}

.cfg-row #editObjTagContainer .tagElement {
	font-size: 0.8rem;
	margin-right: 0.5em;
}

.cf-tag-in-catalog {
	display: flex;
	flex-direction: row;
	margin-right: 6px;
	height: 100%;
	border-radius: 15px;
	font-size: 10px;
	background-color: var(--primary-color);
	color: white;
	padding: 3px;
	font-weight: bold;
}

.catalog-filter-box {
	border: 1px solid #ccc;
	font-size: 12px;
	border-radius: 4px;
	color: rgb(56, 56, 56);
	margin-top: 25px;
}

.catalog-header-filter-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 25px;
	box-sizing: border-box;
	cursor: pointer;
}

.catalog-header-filter-box:hover {
	background-color: #f3f5fc;
}

.catalog-header-filter-box-active {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 25px;
	box-sizing: border-box;
	cursor: pointer;
	background-color: var(--primary-color);
	color: white;
	border-radius: 2px;
}

.catalog-asset-card-tag {
	padding: 2px 10px;
	background-color: var(--primary-color);
	width: fit-content;
	border-bottom-left-radius: 10px;
	color: white;
}

/* Slider */

.wizard-tabs-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tabs {
	display: flex;
	position: relative;
	background-color: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06),
		0 4px 4px 0 rgba(0, 0, 0, 0.08);
	padding: 0.35rem;
	border-radius: 10px;
}

.tabs * {
	z-index: 2;
}

.wizard-tabs-container input[type="radio"] {
	display: none;
}

.wizard-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	width: 200px;
	font-size: 1.25rem;
	font-weight: 500;
	border-radius: 10px;
	cursor: pointer;
	transition: color 0.15s ease-in;
}

.tab-notification {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-left: 0.75rem;
	border-radius: 50%;
	background-color: #888888;
	transition: 0.15s ease-in;
}

.wizard-tabs-container input[type="radio"]:checked+label {
	color: #444444;
}

.wizard-tabs-container input[type="radio"]:checked+label>.notification {
	background-color: #444444;
	color: #fff;
}

.wizard-tabs-container input[id="radio-1"]:checked~.glider {
	transform: translateX(0);
}

.wizard-tabs-container input[id="radio-2"]:checked~.glider {
	transform: translateX(100%);
}

.wizard-tabs-container input[id="radio-3"]:checked~.glider {
	transform: translateX(200%);
}

.glider {
	position: absolute;
	display: flex;
	height: 54px;
	width: 200px;
	background-color: #f1f1f1;
	z-index: 1;
	border-radius: 10px;
	transition: 0.25s ease-out;
}

/* End Slider */

/* Catalog Slider */

.catalog-tabs {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	background-color: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06),
		0 4px 8px 0 rgba(0, 0, 0, 0.08);
	padding: 0.35rem;
	border-radius: 10px;
}

.catalog-tabs * {
	z-index: 2;
}

.catalog-tabs-container input[type="radio"] {
	display: none;
}

.catalog-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	width: calc(100% / 6);
	font-size: 0.9rem;
	font-weight: 500;
	border-radius: 10px;
	cursor: pointer;
	transition: color 0.15s ease-in;
}

.catalog-tabs-container input[type="radio"]:checked+label {
	color: #444444;
}

@media (max-width: 900px) {
	.catalog-tab {
		width: calc(100% / 3);
		height: 44px;
		font-size: 0.8rem;
		text-align: center;
	}

	.catalog-glider {
		display: none !important;
	}

	.catalog-tabs-container input[type="radio"]:checked+label {
		background-color: #f1f1f1;
	}
}

.catalog-tabs-container input[type="radio"]:checked+label>.notification {
	background-color: #444444;
	color: #fff;
}

/* Adjusted transform values for four tabs */
.catalog-tabs-container input[id="radio-1"]:checked~.catalog-glider {
	transform: translateX(0%);
}

.catalog-tabs-container input[id="radio-2"]:checked~.catalog-glider {
	transform: translateX(100%);
}

.catalog-tabs-container input[id="radio-3"]:checked~.catalog-glider {
	transform: translateX(200%);
}

.catalog-tabs-container input[id="radio-4"]:checked~.catalog-glider {
	transform: translateX(300%);
}

.catalog-tabs-container input[id="radio-5"]:checked~.catalog-glider {
	transform: translateX(400%);
}

.catalog-tabs-container input[id="radio-6"]:checked~.catalog-glider {
	transform: translateX(500%);
}

.catalog-glider {
	position: absolute;
	display: flex;
	align-items: center;
	height: 54px;
	width: calc((100% - 0.7rem) / 6);
	background-color: #f1f1f1;
	z-index: 1;
	border-radius: 10px;
	transition: 0.25s ease-out;
	left: 0.35rem;
}

/* End Catalog Slider */

/* Slider for 3 tab */
.catalog-tabs-container-3 input[type="radio"] {
	display: none;
}

.catalog-tab-3 {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	width: calc(100% / 3);
	/* Adjusted width for three tabs */
	font-size: 1.25rem;
	font-weight: 500;
	border-radius: 10px;
	cursor: pointer;
	transition: color 0.15s ease-in;
}

.catalog-tabs-container-3 input[type="radio"]:checked+label {
	color: var(--primary-color);
}

.catalog-tabs-container-3 input[type="radio"]:checked+label>.notification {
	background-color: var(--primary-color);
	color: #fff;
}

/* Adjusted transform values for three tabs */
.catalog-tabs-container-3 input[id="radio-1"]:checked~.catalog-glider-3 {
	transform: translateX(0%);
}

.catalog-tabs-container-3 input[id="radio-2"]:checked~.catalog-glider-3 {
	transform: translateX(100%);
}

.catalog-tabs-container-3 input[id="radio-3"]:checked~.catalog-glider-3 {
	transform: translateX(200%);
}

.catalog-glider-3 {
	position: absolute;
	display: flex;
	align-items: center;
	height: 54px;
	width: calc(100% / 3);
	/* Adjusted width for three tabs */
	background-color: #f1f1f1;
	z-index: 1;
	border-radius: 10px;
	transition: 0.25s ease-out;
}

/* End Slider for 3 tab */

.reset-h3-style {
	font-size: inherit;
	font-weight: normal;
}

/* Icon-only <button> inside sheets/panels. The themes style bare `button` with
   their own chrome (and repaint the background on hover via --hover), so every
   inherited property is reset here — see .cfg-add-panel-close for the same trap. */
.sheet-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.sheet-icon-button:hover:not(:disabled),
.sheet-icon-button:active:not(:disabled) {
	background: none;
	box-shadow: none;
}

.sheet-icon-button:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

/* Tree type row: heading + its expand/collapse button as siblings. */
.catalog-tree-type-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top: 5px;
}

.catalog-tree-type-header h3 {
	margin: 0;
}

/* The h3 no longer wraps the whole row, so the theme's `div#content h3` decoration
   (dotted underline + padding-top + margin-top) has to be neutralised — it must be
   ID-qualified to outrank it. The dotted rule moves to the row below, which is where
   it always visually belonged. */
div#content .catalog-section-heading {
	display: inline;
	margin: 0;
	padding: 0;
	border-bottom: none;
	font-size: 1.1em;
	font-weight: 700;
}

div#content .catalog-section-header {
	border-bottom: 1px dotted;
	padding-top: 0.75em;
	margin-top: 1em;
}

/* Sheet titles: same reason — `div#content h2` would force them to 1.5em. */
div#content .sheet-title {
	margin: 0;
	padding: 0;
	border-bottom: none;
	font-size: 20px;
	font-weight: 600;
	color: inherit;
}

/* "Catalogs (N)" / "Assets (N)" rows: title + create button left, view switcher
   right, always one row — "+ Asset" drops its label instead of wrapping. */
.catalog-section-header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
}

/* Title only. Never shrinks; the group-by select gives up width instead */
.catalog-section-header-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	white-space: nowrap;
	margin-right: auto;
}

/* Right group: group-by select + view-mode icons. */
.catalog-view-mode-switcher {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

/* Natural width, and the only element allowed to shrink. No max-width: a hard
   cap would truncate while the row still has free space. */
.catalog-groupby-select {
	min-width: 0;
	flex-shrink: 1;
}

/* 24x24 hit area (WCAG 2.5.8); centring replaces .edits-icon's nudge margins.
   Now a <button>, so the theme's button chrome is reset here. */
.catalog-view-mode-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	flex-shrink: 0;
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
	font: inherit;
	cursor: pointer;
}

.catalog-view-mode-icon:hover:not(:disabled),
.catalog-view-mode-icon:active:not(:disabled) {
	background: none;
	box-shadow: none;
}

.catalog-view-mode-icon:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

.catalog-view-mode-icon .edits-icon {
	margin: 0;
}

.addLifecycleFormContainer {
	display: flex;
	flex-direction: column;
	padding-top: 10px !important;
	border: solid 1px #ddd;
	padding: 5px;
	row-gap: 10px;
}

.addLifecycleForm {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 20px;
	row-gap: 10px;
}

.info-div-asset-privacy {
	padding: 1rem;
	background-color: #eaeaea;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active below version 2.1.8 */
	{
	opacity: 0;
}

.header-settings-catalog {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
}

.second-line-settings-catalog {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
}

.settings-catalog-tab {
	overflow-x: auto;
}

.settings-catalog-tab-inner {
	min-width: 900px;
}

.settings-catalog-tree-col {
	width: 30%;
	min-width: 280px;
}

.settings-catalog-admin-col {
	flex: 1;
	min-width: 0;
	margin-left: 1rem;
}

.settings-table-scroll {
	overflow-x: auto;
}

.default-catalog-row {
	display: flex;
	flex-direction: row;
	column-gap: 1rem;
	align-items: flex-start;
}

.default-catalog-chips-wrap {
	display: flex;
	flex-direction: row;
	flex: 1;
	min-width: 0;
}

.default-catalog-chips {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	max-width: 500px;
	min-height: 25px;
	height: fit-content;
	border: 1px solid rgb(181, 181, 181);
	border-radius: 3px;
	background-color: white;
	cursor: pointer;
}

.default-catalog-modal-search {
	position: relative;
	width: 40%;
	margin-right: 1em;
}

.other-catalog-types-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 10px;
}

.catalog-type-card {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
	border: 1px solid #eeeeee;
	border-radius: 5px;
	margin-inline: 5px;
	padding-inline: 5px;
	padding-block: 2px;
}

.text-asset-view {
	margin: 0;
	font-size: 14px !important;
}

.link-css {
	cursor: pointer;
	color: blue;
	text-decoration: underline;
}

.link-css:hover {
	cursor: pointer;
	color: orange;
	text-decoration: underline;
}

.input-text-file-container {
	display: flex;
	align-items: center;
}

.input-clean {
	height: 19px;
	/* Adjust as needed */
	border: 1px solid #c1c1c1;
	padding: 5px !important;
	margin: 0 !important;
	font-size: 14px;
	outline: none;
}

.table-td-lifecycle-data-settings {
	vertical-align: middle !important;
	width: 9.09%;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal;
}

.table-td-lifecycle-data {
	width: 11.1%;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal;
}

.input-text-file {
	display: inline-block;
	width: 100%;
	height: 19px;
	border: 1px solid #c1c1c1;
	padding: 5px;
	font-size: 14px;
	outline: none;
	white-space: nowrap;
	overflow: hidden;
}

.placeholder-text-file {
	color: gray;
	pointer-events: none;
}

.input-text-file-modal {
	border: 1px solid #c1c1c1;
	padding: 5px !important;
	font-size: 14px;
	outline: none;
}

.icon-text-file-box {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 4px;
	padding-top: 5px;
	border: 1px solid #c1c1c1;
	border-left: none;
	cursor: pointer;
	transition: background 0.5s ease;
}

.icon-text-file-box svg {
	width: 20px;
	height: 20px;
	fill: #3F51B5;
	transition: fill 0.5s ease;
}

.icon-text-file-box svg {
	width: 20px;
	height: 20px;
	fill: #3F51B5;
}

.icon-text-file-box:hover {
	background: #3F51B5;
	color: white;
	cursor: pointer;
}

.icon-text-file-box:hover svg {
	fill: white;
}

.div-file-container {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #c1c1c1;
	padding: 10px;
	width: fit-content;
}

.fit-input {
	width: 100%;
	box-sizing: border-box;
	height: 100%;
}

@media (max-width: 2040px) {

	.assets-container-full-screen,
	.assets-container-cards-4 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 1740px) {

	.assets-container-full-screen,
	.assets-container-cards-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1340px) {

	.assets-container-full-screen,
	.assets-container-cards-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1140px) {

	.assets-container,
	.assets-container-cards-2 {
		display: grid;
		grid-template-columns: repeat(1, minmax(0, 1fr));
		row-gap: 30px;
	}

	.assets-container-full-screen,
	.assets-container-cards-4 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 20px;
		column-gap: 10px;
	}

	.modal-move {
		width: 70%;
	}
}

@media (max-width: 840px) {

	.assets-container-full-screen,
	.assets-container-cards-4 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.modalWindow {
		left: 10%;
		width: 80%;
	}

	.responsiveInputWidth {
		width: 350px;
	}

	.responsiveInputWidthAssetOnly {
		width: 300px;
	}

	/* cfg-* responsive: stack label above input on tablet/phone */
	.cfg-field {
		flex-direction: column;
	}

	.cfg-label {
		width: auto;
		min-width: auto;
		padding-top: 0;
		margin-bottom: 2px;
	}

	.cfg-input {
		max-width: none !important;
		width: 100% !important;
		/* Override any inline display:flex so children stack */
		display: block !important;
	}

	.cfg-input input[type="text"],
	.cfg-input input[type="number"],
	.cfg-input input[type="email"],
	.cfg-input textarea,
	.cfg-input select,
	.cfg-input .cfg-input-sm {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* Select2 generated containers */
	.cfg-input .select2-container,
	.cfg-select .select2-container,
	.cfg-input .select2-container--default {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.cfg-chip-row {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box;
	}

	.cfg-select {
		max-width: 100% !important;
		width: 100% !important;
	}

	.cfg-select .select2-container,
	.cfg-select .select2-container--default {
		width: 100% !important;
	}



	.cfg-actions {
		flex-direction: column;
	}

	.cfg-actions button {
		width: 100%;
	}

	.assets-container-full-screen,
	.assets-container-cards-4 {
		display: grid;
		grid-template-columns: repeat(1, minmax(0, 1fr));
		row-gap: 30px;
	}

	/* Let the last row scroll clear of the FABs. */
	.assets-container-list,
	.assets-container-cards-2,
	.assets-container-cards-4,
	.assets-container-full-screen {
		padding-bottom: 88px;
	}

	.single-asset-header {
		display: flex;
		flex-direction: column;
	}

	.single-asset-second-row {
		display: flex;
		flex-direction: column;
		row-gap: 15px;
	}

	.single-asset-header-infos {
		width: 100%;
	}

	.single-asset-header-img-container {
		width: 100%;
		height: 200px;
		margin-top: 15px;
	}

	.catalog-header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 10px;
	}

	/* Flush with the search bar above; the desktop rule is left-offset + 95%. */
	.advanced-search-filter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		margin: 10px 0 0;
		padding: 0;
	}

	.tree-header {
		width: 100%;
		justify-content: center;
	}


	.modal-move {
		width: 80%;
	}

	.path-container {
		margin: 15px auto;
	}

	.catalog-container {
		display: block;
		margin-bottom: 25px;
		z-index: 0;
	}

	/* Superseded by the Filter/tree FAB. */
	.catalog-button {
		display: none;
	}

	/* Superseded by the Search FAB (the view-mode switcher stays). */
	.advanced-search-link {
		display: none;
	}

	.asset-list-row {
		flex-wrap: wrap;
	}

	.asset-list-chips {
		order: 4;
		flex-basis: 100%;
	}

	.asset-list-actions {
		order: 3;
		margin-left: auto;
		/* The 65px desktop width would clip the taller touch target below. */
		width: auto;
	}

	/* Material FABs, stacked bottom-right: Filter/tree + Search open the sheets. */
	.catalog-mobile-fab-group {
		position: fixed;
		right: 16px;
		bottom: 16px;
		z-index: 900;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.catalog-mobile-fab {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		/* Secondary FAB (Search) */
		background-color: #fff;
		fill: var(--primary-color);
		border: none;
		padding: 0;
		font: inherit;
		cursor: pointer;
		/* Material elevation 6 */
		box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
			0 6px 10px 0 rgba(0, 0, 0, 0.14),
			0 1px 18px 0 rgba(0, 0, 0, 0.12);
		transition: box-shadow 0.2s ease, transform 0.08s ease;
	}

	/* Primary FAB (Filter/tree) */
	.catalog-mobile-fab-primary {
		background-color: var(--primary-color);
		fill: #fff;
	}

	/* :not(:disabled) on both, or the theme's `button:hover` repaints the surface
	   with --hover and the FAB loses its Material colour. */
	.catalog-mobile-fab:hover:not(:disabled),
	.catalog-mobile-fab:focus-visible {
		background-color: #fff;
		/* Material elevation 8 */
		box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
			0 8px 10px 1px rgba(0, 0, 0, 0.14),
			0 3px 14px 2px rgba(0, 0, 0, 0.12);
	}

	.catalog-mobile-fab-primary:hover:not(:disabled),
	.catalog-mobile-fab-primary:focus-visible {
		background-color: var(--primary-color);
	}

	/* Visible keyboard focus (the previous rule set outline: none), sized to sit on
	   the FAB rather than inflate it: inset ring, contrasting with each surface. */
	.catalog-mobile-fab:focus-visible {
		outline: 2px solid var(--primary-color);
		outline-offset: -4px;
	}

	.catalog-mobile-fab-primary:focus-visible {
		outline-color: #fff;
	}

	.catalog-mobile-fab:active {
		transform: scale(0.94);
	}

	/* Dim scrim behind the bottom sheets; tap to dismiss */
	.mobile-sheet-backdrop {
		position: fixed;
		inset: 0;
		z-index: 940;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.sheet-backdrop-enter-active,
	.sheet-backdrop-leave-active {
		transition: opacity 0.28s ease;
	}

	.sheet-backdrop-enter-from,
	.sheet-backdrop-leave-to {
		opacity: 0;
	}

	.catalog-mobile-settings-link {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 0 4px;
		color: var(--primary-color);
		fill: var(--primary-color);
		font-weight: 500;
		text-decoration: none;
	}

	.catalog-mobile-settings-link:focus-visible {
		outline: 2px solid var(--primary-color);
		outline-offset: 2px;
	}

	.default-catalog-modal-search {
		width: 100%;
		margin-right: 0;
	}

	.settings-catalog-tab {
		overflow-x: visible;
	}

	.settings-catalog-tab-inner {
		min-width: 0;
	}

	.second-line-settings-catalog {
		flex-direction: column;
	}

	.settings-catalog-admin-col {
		margin-left: 0;
	}

	/* Filters, above the tree in the "Catalog tree" sheet. */
	.catalog-mobile-tree-filters {
		margin-bottom: 10px;
		padding-bottom: 5px;
	}

	/* The sheet takes programmatic focus on open so its name is announced; it is a
	   container, not a control, so it draws no ring of its own. */
	.catalog-mobile-panel:focus,
	.advanced-search-container:focus {
		outline: none;
	}

	/* Tree sheet (filters inline above the tree): bottom-anchored, up to 85vh. */
	.catalog-mobile-panel {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 85vh;
		z-index: 950;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.18);
	}

	/* Drag handle on both sheets — see startSheetDrag in catalog.js. */
	.catalog-mobile-panel::before,
	.advanced-search-container::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 36px;
		height: 4px;
		border-radius: 2px;
		/* 3.2:1 on white — #d0d0d0 was 1.5:1 (WCAG 1.4.11). */
		background-color: #8f8f8f;
		z-index: 1;
	}

	.catalog-mobile-panel-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #e0e0e0;
		flex-shrink: 0;
		/* Drag area: no browser scroll/refresh gestures, no text selection. */
		touch-action: none;
		cursor: grab;
		user-select: none;
	}

	.catalog-mobile-panel-header:active {
		cursor: grabbing;
	}

	.catalog-mobile-panel-header h2 {
		margin: 0;
		font-size: 20px;
		/* Default text color, not the brand accent */
		color: inherit;
	}

	.catalog-mobile-panel-body {
		flex: 1;
		overflow-y: auto;
		padding: 10px 15px;
		/* Never --secondary-color: themes set it to a saturated accent. */
		background-color: var(--panel-surface);
	}

	/* Search sheet: bottom-anchored, sized to content up to 55vh. */
	.advanced-search-container {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		/* Reset margin-block:1rem, which lifted the sheet off the viewport edge. */
		margin: 0;
		max-height: 55vh;
		z-index: 950;
		background-color: var(--panel-surface);
		overflow-y: auto;
		padding: 15px;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.18);
	}

	/* Bleed to the sheet edges: white header band over the tinted body. */
	.advanced-search-mobile-header {
		display: flex;
		background-color: #fff;
		margin: -15px -15px 10px;
	}

	/* Replaced by the sheet header's close-X. */
	.advanced-search-close-desktop {
		display: none;
	}

	.advanced-search-header {
		padding: 0;
	}

	/* Reclaim the width the hidden desktop close-X used to share. */
	.input-search-container {
		width: 100%;
		margin: 0;
	}

	/* Disclosure row revealing the search field checkboxes. */
	.advanced-search-disclosure {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		width: 100%;
		min-height: 44px;
		padding: 0 4px;
		color: var(--primary-color);
		cursor: pointer;
		/* Now a <button>: reset the theme's button chrome. */
		border: none;
		background: none;
		box-shadow: none;
		font: inherit;
		text-align: left;
	}

	.advanced-search-disclosure:hover:not(:disabled),
	.advanced-search-disclosure:active:not(:disabled) {
		background: none;
		box-shadow: none;
	}

	.advanced-search-chevron {
		fill: var(--primary-color);
		transition: transform 200ms;
		flex-shrink: 0;
	}

	.advanced-search-chevron.is-open {
		transform: rotate(180deg);
	}

	/* Sheets slide up from the bottom. */
	.slide-panel-enter-active,
	.slide-panel-leave-active {
		transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
	}

	.slide-panel-enter-from,
	.slide-panel-leave-to {
		transform: translateY(100%);
	}

	.slide-panel-enter-to,
	.slide-panel-leave-from {
		transform: translateY(0);
	}

	/* Drop the top margin. !important on both: the inline margin-top beats any
	   rule, and `div#content h3` padding-top outranks this class. */
	.catalog-section-header {
		margin: 0 !important;
		padding: 0.5em 0 !important;
	}

	/* No room for "+ Asset" — square "+" only; aria-label carries the meaning. */
	.add-asset-catalog-label {
		display: none;
	}

	.add-asset-catalog-button {
		padding: 0;
		width: 26px;
		height: 26px;
	}

	.catalog-section-header-title {
		margin-right: 0;
	}

	.catalog-view-mode-switcher {
		margin-left: auto;
	}

	/* The 4-column grid is pointless on a phone (1 column there). */
	.catalog-view-mode-wide {
		display: none;
	}

}

/* Phone ≤480px — reserved for further mobile tweaks if needed */

/*-----------------------------*/

/* ------------------------------------------------------------------------------------------------------------- */
/* -- MAX-WIDTH: 1900px; -- */
/* ----------------------- */

@media all and (max-width: 1900px) {

	/* -- Modal popup forms + session info -- */
	.modalWindow.form,
	.modalWindow.form-content,
	.modalWindow.session-info {
		height: 85%;
		width: 85%;
		/* centering the modal */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 1024px;
	}

	.modalWindow.form .modalWindowContent,
	.modalWindow.form-content .modalWindowContent,
	.modalWindow.session-info .modalWindowContent {
		max-height: calc(100% - 105px);
	}
}

/* ------------------------------------------------------------------------------------------------------------- */
/* -- MAX-WIDTH: 1400px; -- */
/* ----------------------- */

@media all and (max-width: 1400px) {

	/* -- Modal popup forms + session info -- */
	.modalWindow.form,
	.modalWindow.form-content,
	.modalWindow.session-info {
		height: 90%;
		width: 90%;
		/* centering the modal */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 1024px;
	}

	.modalWindow.form .modalWindowContent,
	.modalWindow.form-content .modalWindowContent,
	.modalWindow.session-info .modalWindowContent {
		max-height: calc(100% - 105px);
	}
}

/* ------------------------------------------------------------------------------------------------------------- */
/* -- MAX-WIDTH: 930px; -- */
/* ----------------------- */

@media all and (max-width: 930px) {

	div#head.scroll div#facility h1,
	div#facility h1 {
		font-size: 1.2em;
	}

	img#slide-menu-button {
		display: inline !important;
		float: left;
		height: 35px;
		margin-top: 10px;
		margin-left: 7px;
		margin-right: 10px;

		background-color: #3f51b5;
		border-radius: 7px;
	}

	/* CODE FROM: http://callmenick.com/2014/03/26/slide-and-push-menus-with-css3-transitions/ */
	body.menu-open nav#slide-menu {
		left: 0;
	}

	body.menu-open div#main {
		left: 220px;
	}

	body.menu-open div#head {
		position: relative;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 15;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
	}

	div#main {
		position: relative;
		z-index: 10;
		top: 0;
		left: 0;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}

	nav#slide-menu {
		display: block !important;

		position: fixed;
		z-index: 20;
		background-color: #3f51b5;
		overflow: auto;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;

		top: 0;
		left: -300px;
		width: 220px;
		height: 100%;
	}

	nav#slide-menu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	nav#slide-menu ul li {
		display: block;
		text-align: center;
		border-bottom: solid 1px #e2e1e1;

		padding-top: 5px;
		padding-bottom: 5px;

		color: #ffffff;
		font-size: 0.75em;
	}

	nav#slide-menu ul li#menu-logout {
		background-color: red;
	}

	nav#slide-menu ul li a {
		font-weight: 600;
		color: #ffffff;
		text-decoration: none;
		font-size: 1.25em;
	}

	/* END CODE */
	nav#slide-menu ul li.slide-menu1 {
		background-color: #3f51b5;
	}

	nav#slide-menu ul li.slide-menu2 {
		background-color: #283593;
	}

	div#institution {
		display: none;
	}

	div#head {
		height: auto;
		background-image: none;
		background-color: transparent;
		padding: 0px;
	}

	div#head-2 {
		width: 100%;
		height: auto;
		background-image: none;
		background-color: transparent;
		margin: 0px;
	}

	div#facility {
		height: auto;
		width: auto;
		padding: 5px;
		border: none;
		padding-top: 10px;
		padding-bottom: 15px;
		margin: 0px;

		background-color: #3f51b5;
		background-image: none;

		position: initial;
		float: none;
		clear: none;

		display: block;
	}

	div#facility-2,
	div#facility-3 {
		height: auto;
		background-image: none;
	}

	div#facility-5,
	div#facility-6,
	div#facility-7 {
		height: 0px;
		background-image: none;
	}

	div#facility h1 {
		text-align: left;
		padding: 0px;
		height: auto;
		width: 100%;
		padding-top: 5px;
		/*padding-bottom: 10px;*/

		margin-top: 0px;
		margin-bottom: 0px;

		float: none;
		position: initial;

		background-image: none;
		border: none;

		color: #fff;
	}

	div#facility h1 a {
		color: inherit;
	}

	select#change-core {
		display: inline-block !important;
	}

	div#main,
	div#main-2,
	div#main-3,
	div#main-4 {
		margin: 0;
		padding: 0;
		width: 100%;
		background-image: none;
	}

	div#menu {
		display: none;
	}

	div#content {
		float: none;
		width: auto;
		margin: 0px;
		padding: 0px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5em;
	}

	div#main,
	div#main-2,
	div#main-3,
	div#main-4,
	div#content,
	div#head,
	div#head-2,
	div#bottom-4 {
		min-width: 0px;
	}

	div#bottom {
		width: auto;
		padding-left: 15px;
	}

	/* -- Planning -- */
	/* Time slots */
	td.bookable label {
		display: inline-block !important;
		color: black !important;
	}

	.specialEnvironmentBlocking {
		pointer-events: none !important;
	}

	/* -- Modal popup forms + session info -- */
	.modalWindow.form,
	.modalWindow.form-content,
	.modalWindow.session-info {
		height: 100%;
		width: 100%;
		padding: 0;
		border-radius: 0px;
		/* centering the modal */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 100%;
	}

	.modalWindow.form .modalWindowContent,
	.modalWindow.form-content .modalWindowContent,
	.modalWindow.session-info .modalWindowContent {
		padding: 15px;
		max-height: calc(100% - 130px);
	}

	.modalWindow.form .modalWindowFooter,
	.modalWindow.form-content .modalWindowFooter,
	.modalWindow.session-info .modalWindowFooter {
		margin: 15px;
	}

	#content4 table {
		margin-bottom: 1em;
		display: inline-block;
		overflow-x: auto;
	}
}

/* MM: long text with no space need to wrap */
.form,
#form-content {
	word-break: break-word;
}

/* DROPZONE */
.dropzone-file-main {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.dropzone-container {
	padding: 4rem;
	background: #f7fafc;
	border: 1px solid #e2e8f0;
}

.hidden-input {
	opacity: 0;
	overflow: hidden;
	position: absolute;
	width: 1px;
	height: 1px;
}

.file-label {
	font-size: 20px;
	display: block;
	cursor: pointer;
}

.doc {
	border: 1px solid gainsboro;
	width: 99%;
	padding: 10px;
}

.doc h1 {
	font-size: 35px !important;
}

.doc h2 {
	font-style: none !important;
	padding-top: none !important;
	font-size: 28px !important;
	text-align: none !important;
	border-bottom: none !important;
}

.doc h3 {
	font-style: none !important;
	padding-top: none !important;
	font-size: 23px !important;
	text-align: none !important;
	border-bottom: none !important;
}

.doc h4 {
	font-size: 18px !important;
}

.doc h5 {
	font-size: 14px !important;
}

.card {
	/* Add shadows to create the "card" effect */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	transition: 0.3s;
}

.upDownIcon {
	opacity: 0.8;
	transition: all 0.1s ease-in-out;
}

.upDownIcon:hover {
	opacity: 1;
	transform: scale(1.15);
	cursor: pointer;
}

.file {
	transition: all 0.1s ease-in-out;
}

.file:hover {
	transform: scale(1.01);
}

.recursive-foler-file {
	transition: all 0.1s ease-in-out;
}

.recursive-foler-file:hover {
	transform: scale(1.005);
	cursor: pointer;
}

.search-input {
	padding: 5px 10px !important;
	border-radius: 2px;
	padding: 0 5px;
	border: 1px solid #ccc;
	font-size: 16px;
	transition: border-color 0.3s ease-in-out;
}

.search-input:focus {
	outline: none;
	border-color: #3f51b5;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.first-elem-list-folder {
	padding: 0.5em;
	font-size: 0.8em;
}

.elem-list-folder {
	padding: 0.5em;
	cursor: pointer;
	font-size: 0.8em;
}

.elem-list-folder:hover {
	background-color: #e8eaf6;
}

#list-folder {
	width: 420px;
	border: solid 1px rgba(0, 0, 0, 0.251);
	border-radius: 1px;
}

/* Add some padding inside the card container */
.container {
	padding: 2px 16px;
}

.folders-font {
	font-size: 14px;
}

.toggle-switch {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 20px;
}

.toggle-input {
	display: none;
}

.toggle-label {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 20px;
	background-color: #dddddd;
	border-radius: 30px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.toggle-label:before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background-color: #ffffff;
	border-radius: 100%;
	transition: transform 0.3s ease;
}

.toggle-input:checked+.toggle-label {
	background-color: #506fa1;
}

.toggle-input:checked+.toggle-label:before {
	transform: translateX(20px);
}

.disabledButton {
	opacity: 0.5;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* -- MAX-WIDTH: 640px; -- */
/* ----------------------- */

@media all and (max-width: 640px) {

	/* -- Start Page -- */
	/* Public Documents */
	div#pub-global-docs {
		float: none;
		margin-bottom: 15px;
	}

	/* Search Box */
	div#search-div input#search-box {
		width: 100%;
	}

	/* -- Home Page -- */
	/* Home Sections */
	div.home-left,
	div.home-right {
		float: none !important;
		width: 100% !important;
	}

	/* Drag & Drop button */
	img.home-section-drag {
		display: none !important;
	}
}

.wizard-step-description {
	position: relative;
	width: 80%;
	border: 1px solid #3f51b5;
	color: #3f51b5;
	border-radius: 5px;
	margin: 0 auto 2rem auto;
	font-size: 16px;
	padding: 0 1rem;
}

.wizard-info-icon {
	position: absolute;
	fill: #3f51b5;
	top: -7px;
	left: -7px;
}

.divider-line {
	margin-top: 4rem;
	margin: 4rem auto 0 auto;
	width: 80%;
	height: 1px;
	background-color: #3f51b52d;
}

.step-hover-title {
	text-align: center;
	width: 125px;
	font-size: 13px;
	position: absolute;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid;
	opacity: 0;
	color: #3f51b5;
	bottom: 50px;
	-webkit-transition: all 150ms ease-out;
	-moz-transition: all 150ms ease-out;
	-o-transition: all 150ms ease-out;
	-ms-transition: all 150ms ease-out;
	transition: all 150ms ease-out;
}

.step-hover-title-bottom {
	text-align: center;
	width: 125px;
	font-size: 13px;
	position: absolute;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid;
	opacity: 0;
	color: #3f51b5;
	bottom: -41px;
	-webkit-transition: all 150ms ease-out;
	-moz-transition: all 150ms ease-out;
	-o-transition: all 150ms ease-out;
	-ms-transition: all 150ms ease-out;
	transition: all 150ms ease-out;
}

.step:hover .step-hover-title {
	opacity: 1;
	-webkit-transition: all 150ms ease-in;
	-moz-transition: all 150ms ease-in;
	-o-transition: all 150ms ease-in;
	-ms-transition: all 150ms ease-in;
	transition: all 150ms ease-in;
}

.step-selected-title {
	opacity: 1;
	background-color: #3f51b5;
	color: #fff;
	-webkit-transition: all 150ms ease-in;
	-moz-transition: all 150ms ease-in;
	-o-transition: all 150ms ease-in;
	-ms-transition: all 150ms ease-in;
	transition: all 150ms ease-in;
}

.arrow-down {
	position: absolute;
	left: 60px;
	bottom: -7px;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid #3f51b5;
}

.arrow-up {
	position: absolute;
	left: 60px;
	top: -7px;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #3f51b5;
}

:root {
	--primary-color: #3f51b5;
	--secondary-color: #e6eef9;
	--asset-card-size: 325px;
	/* Panel/sheet surface. Separate from --secondary-color, which themes override
	   with a saturated accent. Overridable, but must stay a light surface. */
	--panel-surface: #fff;
}

@media (max-width: 700px) {
	.tabs {
		transform: scale(0.6);
	}
}

.info_toggle_button {
	margin-bottom: 0.5em;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06),
		0 4px 8px 0 rgba(0, 0, 0, 0.08);
	background-color: #fff;
}

.pricerule_info_popup {
	z-index: 9;
	font-size: 14px;
	position: absolute;
	right: 0px;
	margin-top: 1em;
	min-width: 500px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06),
		0 4px 8px 0 rgba(0, 0, 0, 0.08);
	padding: 1em;
}

.pricerule_info_popup_mobile {
	font-size: 14px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06),
		0 4px 8px 0 rgba(0, 0, 0, 0.08);
	padding: 1em;
	margin-bottom: 2em;
}

.slide-enter-active,
.slide-leave-active {
	transition: transform 0.6s, opacity 0.6s;
}

.slide-enter,
.slide-leave-to {
	transform: translateY(-30px);
	opacity: 0;
}

.slidefast-enter-active {
	transition: transform 0.6s, opacity 0.6s;
}

.slidefast-enter {
	transform: translateY(-30px);
	opacity: 0;
}

.slideveryfast-enter-active {
	transition: transform 0.25s, opacity 0.25s;
}

.slideveryfast-enter {
	transform: translateY(-15px);
	opacity: 0;
}

/* CSS */
.button-btn {
	background-color: #fff;
	border: 1px solid #d5d9d9;
	border-radius: 3px;
	box-shadow: rgba(213, 217, 217, 0.5) 0 2px 5px 0;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	font-size: 13px;
	line-height: 29px;
	padding: 0 10px 0 11px;
	position: relative;
	text-align: center;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	vertical-align: middle;
	width: 100px;
}

.button-btn:focus {
	border-color: #008296;
	box-shadow: rgba(213, 217, 217, 0.5) 0 2px 5px 0;
	outline: 0;
}

.alert {
	color: red;
}

.warning {
	color: orange;
}

.error-message {
	width: fit-content;
	margin: 2rem auto;
	padding: 0 1rem;
}

/* ----------------- Price Popup Modal ------------------- */

/* --------------------- Accessibility ----------------*/

.buttonWrapper {
	border: 0px;
	background: transparent;
	transition: none;
	-moz-transition: none;
	-o-transition: none;
	-webkit-transition: none;
	transition: none;
	-moz-transition: none;
	-o-transition: none;
	-webkit-transition: none;
	box-shadow: none !important;
}

/*------------------ Vstock compatibility request Vue -------------------------*/
/*
.form-errors {
	background-color: #f2dede;
	padding: 15px;
	width:650px;
}

.error-label {
	color: #ff0b12;
}


/* pricerules option select */

select.priceruleSelect {
	width: 30px;
	border: 0;
	background-color: transparent;
}

select.rebateruleSelect {
	width: 30px;
}

select.rebateruleSelect {
	width: 30px;
	border: 0;
	background-color: transparent;
}

abbr:hover {
	cursor: default;
}

/*------------------ Contextual Menu Vue3 -------------------------*/
.menu-button-actions {
	margin: 0;
	padding: 0;
}

.menu-button-actions button {
	margin: 0;
	padding: 6px;
	display: inline-block;
	position: relative;
	background-color: #3949ab;
	border: 1px solid #3949ab;
	font-size: 0.9em;
	color: white;
	border-radius: 5px;
}

.menu-button-actions [role="menu"] {
	display: none;
	position: absolute;
	margin: 0;
	padding: 4px;
	border: 2px solid #3949ab;
	border-radius: 5px;
	background-color: #eee;
	z-index: 999;
	/* width: 9em; */
}

.menu-button-actions [role="menuitem"],
.menu-button-actions [role="separator"] {
	margin: 0;
	padding-left: 4px;
	padding-right: 4px;
	display: block;
	background-color: #eee;
	color: black;
	border-radius: 5px;
	width: 9em;
	white-space: normal;
	z-index: 999;
}

.menu-button-actions [role="separator"] {
	padding-top: 3px;
	background-image: url("../images/separator.svg");
	background-position: center;
	background-repeat: repeat-x;
	z-index: 999;
}

.menu-button-actions button svg.down {
	padding-left: 0.125em;
	fill: currentcolor;
	stroke: currentcolor;
	z-index: 999;
}

.menu-button-actions button[aria-expanded="true"] svg.down {
	transform: rotate(180deg);
}

/* focus styling */

.menu-button-actions button:hover,
.menu-button-actions button:focus,
.menu-button-actions button[aria-expanded="true"] {
	position: relative;
	padding: 4px;
	border: 3px solid #3949ab;
	background: #eee;
	color: #222;
	outline: none;
	margin: 0;
}

.menu-button-actions [role="menuitem"].focus,
.menu-button-actions [role="menuitem"]:focus {
	position: relative;
	padding-left: 4px;
	padding-right: 4px;
	border: 2px solid #3949ab;
	background: #3f51b5;
	color: #fff;
	outline: none;
	margin: 0;
	width: 9em;
	white-space: normal;
}

input.action:focus {
	outline: 2px solid #3949ab;
	background: #def;
	z-index: 999;
}

select.autonomousSelect {
	width: 30px;
	border: 0;
	background-color: transparent;
}

/* vorder */
.multiplierTooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}

.multiplierTooltip .multiplierTooltipText {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;

	/* Position the tooltip */
	position: absolute;
	z-index: 1;
}

.multiplierTooltip:hover .multiplierTooltipText {
	visibility: visible;
}

.multiplier-enter-active,
.multiplier-leave-active {
	transition: all 0.1s ease-out;
}

.multiplier-enter-from,
.multiplier-leave-to {
	opacity: 0;
}

.list-of-sessions .ag-theme-quartz {
	--ag-font-size: 0.8em;
}

@media (max-width:735px) {
	.draftinstructions {
		float: left !important
	}

}

.multiplier-enter-from,
.multiplier-leave-to {
	opacity: 0;
}

/* Style the form - display items horizontally */
.input-review-section {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

/* Add some margins for each label */
.input-review-section dt {
	margin: 5px 10px 5px 0;
}

/* Style the input fields */
.input-review-section input {
	vertical-align: middle;
	margin: 5px 10px 5px 0;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
}

/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
@media (max-width: 800px) {
	.input-review-section input {
		margin: 10px 0;
	}

	.input-review-section {
		flex-direction: column;
		align-items: stretch;
	}
}

/*------------------ Popup X button -------------------------*/
button.ui-dialog-titlebar-close[title="Close"] {
	text-indent: 0;
}

/* ============================================================
 * Privacy Policy Management component (/catalog-asset-settings/).
 * Lives in common.css (not a <style scoped> inside the template)
 * because the template is loaded via fetch + Vue runtime-compile,
 * where the `scoped` attribute on <style> is a no-op.
 *
 * All color combos pass WCAG 2.1 AA (>= 4.5:1 normal text, >= 3:1 UI):
 *   primary #3f51b5 on white            -> 6.87:1
 *   primary #3f51b5 on #eef1ff (selected)-> 6.11:1
 *   #c00 red         on #eef1ff         -> 5.23:1
 *   #8f8f8f border   on white           -> 3.23:1
 * ============================================================ */
/* Even-width columns for the four permission toggles
   (Guest / Unauthorized / Authorized / Admin) so the header labels line
   up across the two policy tables (read-only preview + edit form) and
   the checkboxes don't bunch together under long labels. Applied via
   a shared class on every <th> and <td> in those columns. */
.privacy-policy-management .pp-rule-col {
	width: 110px;
	text-align: center;
}

/* Read-only indicator used instead of a disabled <input type="checkbox">.
   A native disabled checkbox is hard to parse at a glance — the
   difference between "on but disabled" and "off but disabled" is a
   faint check rendered with low contrast, depending on the browser.
   The glyph version makes both states unambiguous while keeping the
   "I can't edit this" cue.
   Un-scoped on purpose — used wherever a table cell needs to render a
   boolean read-only (privacy policies tables + the catalog admins
   table when the current user can't manage grants + …). */
.pp-ro-check {
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	color: #5a5a5a;
}

.pp-ro-check path {
	fill: currentColor;
}

.pp-ro-dash {
	display: inline-block;
	width: 16px;
	line-height: 16px;
	color: #b0b0b0;
	vertical-align: middle;
	font-weight: 700;
}

.privacy-policy-management .pp-btn {
	/* Previously `font: inherit`, which made the "+ New policy" button
	   sitting inside the section's <h3> render at h3 font-size (~1.17em,
	   bold) — visually huge. Use the body font-size + normal weight so
	   the button scales to action-control proportions regardless of its
	   container. */
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.2;
	padding: 5px 12px;
	border-radius: 5px;
	border: 1px solid #8f8f8f;
	cursor: pointer;
	background: white;
	color: var(--primary-color, #3f51b5);
	white-space: nowrap;
}

.privacy-policy-management .pp-btn:hover {
	background: #f5f5f5;
}

.privacy-policy-management .pp-btn:focus {
	outline: 2px solid var(--primary-color, #3f51b5);
	outline-offset: 1px;
}

.privacy-policy-management .pp-btn-primary {
	background: var(--primary-color, #3f51b5);
	color: #fff;
	border-color: var(--primary-color, #3f51b5);
}

.privacy-policy-management .pp-btn-primary:hover {
	background: #3e53d4;
}

.privacy-policy-management .pp-btn-secondary {
	background: #fff;
	color: #555;
}

.privacy-policy-management .pp-btn-danger {
	background: #c00;
	color: #fff;
	border-color: #c00;
}

.privacy-policy-management .pp-btn-danger:hover {
	background: #a00;
}

.privacy-policy-management .pp-btn-link,
.privacy-policy-management .pp-btn-link-danger {
	background: transparent;
	border: none;
	padding: 4px 8px;
	text-decoration: underline;
	font-size: 0.9em;
}

.privacy-policy-management .pp-btn-link {
	color: var(--primary-color, #3f51b5);
}

.privacy-policy-management .pp-btn-link-danger {
	color: #c00;
}

.privacy-policy-management .pp-btn-link:hover,
.privacy-policy-management .pp-btn-link-danger:hover {
	background: #f5f5f5;
	text-decoration: none;
}

/* Selected policy row — light tint + left accent, readable text/buttons. */
.privacy-policy-management .sheet2 tr.pp-row-selected td,
.privacy-policy-management .sheet2 tr.pp-row-selected:hover td {
	background-color: #eef1ff;
	color: inherit;
	font-weight: normal;
}

.privacy-policy-management .sheet2 tr.pp-row-selected td:first-child {
	box-shadow: inset 3px 0 0 var(--primary-color, #3f51b5);
	font-weight: 600;
}

.privacy-policy-management .ag-theme-balham .ag-header-cell {
	padding-left: 4px !important;
}

/* Shared button styles for the delete confirmation modal.
   Mirrors .privacy-policy-management .pp-btn-* so both contexts
   look identical without touching the existing scoped rules. */
.delete-modal .pp-btn {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.2;
	padding: 5px 12px;
	border-radius: 5px;
	border: 1px solid #8f8f8f;
	cursor: pointer;
	background: white;
	color: var(--primary-color, #3f51b5);
	white-space: nowrap;
}

.delete-modal .pp-btn:hover {
	background: #f5f5f5;
}

.delete-modal .pp-btn:focus {
	outline: 2px solid var(--primary-color, #3f51b5);
	outline-offset: 1px;
}

.delete-modal .pp-btn-secondary {
	background: #fff;
	color: #555;
}

.delete-modal .pp-btn-danger {
	background: #c00;
	color: #fff;
	border-color: #c00;
}

.delete-modal .pp-btn-danger:hover {
	background: #a00;
}