/* DIV SHOW/HIDE TOGGLE (SIMPLE) */

.panel-floating.messages,
.panel-floating.documents,
.panel-floating.notifications,
.panel-floating.history {
	display: none;
}

.panel-floating {
	background: var(--color-white-trans-90);
	width: 500px;
	height: calc(100dvh - 100px);
	border-radius: var(--border-radius-20) var(--border-radius-20) var(--border-radius-1)
		var(--border-radius-1);
	position: fixed;
	z-index: 1;
	left: 69px;
	top: 100px;
	backdrop-filter: blur(20px);
	/* border: 1px solid var(--color-textcolor-trans-10);
	border-bottom: 0; */
	padding: 30px 0;
	box-shadow: 30px 0 80px 0 var(--color-black-trans-40);
}
.panel-floating #dynamic-panel-area {
	height: calc(100% - 22px);
}
.panel-floating .panel-scrolling-container {
	height: calc(100% - 50px);
	overflow-y: auto;
}
.panel-floating.messages .panel-scrolling-container {
	height: calc(100% - 90px);
}
.app-container .panel-floating h2 {
	font-size: var(--font-size-xxlarge);
	font-weight: 500;
	padding: 0 0 0 30px !important;
	color: var(--color-black);
}
.panel-floating .status-utility-bar {
	display: grid;
	grid-column-gap: 10px;
	align-items: center;
	margin: 15px 30px 30px 30px;
	cursor: pointer;
	justify-self: center;
	width: calc(100% - 60px);
}
.panel-floating .type-heading {
	font-size: var(--font-size-xxmedium);
	font-weight: 400;
	grid-area: type-heading;
	color: var(--color-black);
}
.panel-floating .new-count {
	width: 22px;
	height: 22px;
	border-radius: var(--border-radius-5);
	background: var(--color-primary);
	color: var(--color-white);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: var(--font-size-small);
	font-weight: 500;
	grid-area: new-count;
	line-height: 100;
}
.panel-floating .clear-all {
	color: var(--color-primary);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: var(--font-size-small);
	font-weight: 500;
	grid-area: link-clear-all;
	justify-self: end;
}
.panel-floating .tabs {
	position: relative;
	display: grid;
	grid-template-areas:
		'tab-first tab-last'
		'tab-content tab-content';
	margin: 30px 0 0 0;
	height: calc(100% - 20px);
	grid-template-rows: min-content auto;
	grid-row-gap: 15px;
}
.panel-floating.messages .tabs {
	grid-template-areas:
		'tab-first tab-second tab-last'
		'tab-content tab-content tab-content';
}
.panel-floating .tabs input + label:hover {
}
.panel-floating .content .item {
	display: none;
	transition: all 0.3s;
	height: calc(100% - 30px);
}
.panel-floating .tab:checked + label {
	background: var(--color-primary-trans-20);
	color: var(--color-primary);
	font-weight: 600;
	cursor: default;
}
.panel-floating input.tab:first-child {
	grid-area: tab-first;
}
.panel-floating input.tab:nth-child(2) {
	grid-area: tab-second;
}
.panel-floating input.tab:last-child {
	grid-area: tab-last;
}
.panel-floating section.content {
	grid-area: tab-content;
}
.panel-floating .tabs input + label {
	background: var(--color-black-trans-10);
	color: var(--color-black-trans-60);
	padding: 10px;
	cursor: pointer;
	border-radius: var(--border-radius-5) var(--border-radius-5) 0 0;
	text-align: center;
	transition: var(--transition-04);
	height: fit-content;
	font-size: var(--font-size-xmedium);
}
.panel-floating .tabs input + label:nth-child(2) {
	margin-left: 30px;
	margin-right: 2px;
}
.panel-floating .tabs input + label:nth-child(4) {
	margin-right: 30px;
}
.panel-floating.messages .tabs input + label:nth-child(4) {
	margin-left: 0;
	margin-right: 0;
}
.panel-floating.messages .tabs input + label:nth-child(6) {
	margin-right: 30px;
	margin-left: 2px;
}
.panel-floating .content {
	display: block;
	z-index: 2;
	position: relative;
	height: calc(100dvh - 222px);
}
.panel-floating .tabs input {
	display: none;
}

/* INDICATE TAB + CONTENT IDS FOR TAB SWITCHING, BY SECTION */

.panel-floating #tab-messages-all:checked ~ section #content-messages-all,
.panel-floating #tab-messages-dms:checked ~ section #content-messages-dms,
.panel-floating #tab-messages-offers:checked ~ section #content-messages-offers,
.panel-floating #tab-documents-all:checked ~ section #content-documents-all,
.panel-floating #tab-documents-dealroom:checked ~ section #content-documents-dealroom,
.panel-floating #tab-notifications-all:checked ~ section #content-notifications-all,
.panel-floating #tab-notifications-dealrooms:checked ~ section #content-notifications-dealrooms,
.panel-floating #tab-history-all:checked ~ section #content-history-all,
.panel-floating #tab-history-offers:checked ~ section #content-history-offers {
	display: block;
}

/* NOTIFICATIONS PANEL */

.panel-floating.notifications .status-utility-bar {
	grid-template-areas: 'type-heading new-count link-clear-all';
	grid-template-columns: min-content min-content auto;
}
.panel-floating.notifications .notifications-container {
	display: flex;
	grid-row-gap: 20px;
	flex-flow: column;
}
.panel-floating.notifications .single-notification {
	grid-template-areas:
		'notification-icon notification-title'
		'notification-icon notification-content'
		'notification-icon notification-timestamp'
		'notification-icon cta-container';
	grid-template-columns: 40px auto;
	grid-column-gap: 15px;
	grid-row-gap: 10px;
	display: grid;
	border-bottom: 1px solid var(--color-black-trans-20);
	padding: 20px 30px;
}
.panel-floating.notifications .single-notification.new {
	border-left: 2px solid var(--color-primary);
}
.panel-floating.notifications .single-notification:first-child {
	padding-top: 0;
}
.panel-floating.notifications .single-notification:last-child {
	border-bottom: none;
}
.panel-floating.notifications .single-notification .notification-icon {
	grid-area: notification-icon;
	width: 40px;
	height: 40px;
	background: var(--color-black-trans-10);
	border-radius: var(--border-radius-10);
	position: relative;
}

/* 'ALERT: TYPE 2' NOTIFICATION */
.panel-floating.notifications .single-notification.alert-type-2 .notification-icon {
	background: var(--color-live);
}
.panel-floating.notifications .single-notification.alert-type-2 .notification-icon:before {
	mask: var(--icon-alert-type-2) center center / 22px 22px no-repeat;
	background: var(--color-black);
	width: 22px;
	height: 22px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: '';
}

/* 'NEW MESSAGE' NOTIFICATION */
.panel-floating.notifications .single-notification.new-message .notification-icon {
	background: var(--color-primary-trans-20);
}
.panel-floating.notifications .single-notification.new-message .notification-icon:before {
	mask: var(--icon-message) center center / 18px 18px no-repeat;
	background: var(--color-primary);
	width: 18px;
	height: 18px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: '';
}
.panel-floating.notifications .single-notification.new-message .notification-icon:after {
	width: 5px;
	height: 5px;
	border-radius: var(--border-radius-circle);
	position: absolute;
	left: -10px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--color-primary);
	content: '';
}

/* 'DEALROOM UPDATE' NOTIFICATION */
.panel-floating.notifications .single-notification.dealroom-update .notification-icon:before {
	background: var(--icon-dealroom) center center / 22px 22px no-repeat;
	width: 22px;
	height: 22px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: '';
}

/* 'NEXT STEP' NOTIFICATION */
.panel-floating.notifications .single-notification.next-step .notification-icon:before {
	mask: var(--icon-next) center center / 16px 16px no-repeat;
	background: var(--color-alert-2);
	width: 16px;
	height: 16px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: '';
}
.panel-floating.notifications .single-notification .notification-title {
	grid-area: notification-title;
	font-size: var(--font-size-xmedium);
	font-weight: 600;
	color: var(--color-black);
}
.panel-floating.notifications .single-notification .notification-content {
	grid-area: notification-content;
	line-height: 130%;
	font-weight: 400;
	font-size: var(--font-size-medium);
	color: var(--color-black-trans-85);
}
.panel-floating.notifications .single-notification.new-message .notification-content {
	background: var(--color-black-trans-10);
	color: var(--color-black-trans-85);
	padding: 10px 16px;
	width: fit-content;
	border-radius: var(--border-radius-5);
}
.panel-floating.notifications .single-notification .notification-timestamp {
	grid-area: notification-timestamp;
	font-size: var(--font-size-xxsmall);
	color: var(--color-black-trans-60);
	font-weight: 500;
}
.panel-floating.notifications .cta-container {
	grid-area: cta-container;
	display: flex;
	grid-column-gap: 10px;
}
.panel-floating button.secondary {
	color: var(--color-black-trans-85);
}

/* DOCUMENTS (PANEL-SPECIFIC) */

.panel-floating.documents .panel-scrolling-container {
	height: calc(100% + 15px);
}
.panel-floating.documents .document {
	margin: 0;
}
.panel-floating.documents .document .row-2 {
	margin-left: 15px;
}
.panel-floating.documents .document .link-document {
	background: var(--color-black-trans-05);
	width: 100%;
}
.panel-floating.documents .document .link-document .live {
	color: var(--color-black);
	background: var(--color-live);
	border-color: var(--color-live-darker);
}
.panel-floating.documents .document .link-document:before {
	background: var(--color-black);
}
.panel-floating.documents .document .link-document span {
	color: var(--color-black);
}
.panel-floating .single-document {
	width: 100%;
	padding: 20px 30px;
	border-bottom: 1px solid var(--color-black-trans-10);
}

/* HISTORY (PANEL-SPECIFIC) */

.panel-floating.history .single-history {
	grid-template-rows: repeat(auto-fit, minmax(5px, min-content));
	grid-row-gap: 5px;
	display: grid;
	border-bottom: 1px solid var(--color-black-trans-20);
	padding: 20px 30px;
}
.panel-floating.history .single-history .history-content {
	font-size: var(--font-size-xmedium);
	line-height: 140%;
	font-weight: 500;
	color: var(--color-black);
}
.panel-floating.history .single-history .history-content a {
	color: var(--color-primary);
	font-weight: 500;
}
.panel-floating.history .single-history .history-timestamp {
	font-size: var(--font-size-xsmall);
	color: var(--color-black-trans-60);
	padding: 0 0 5px 0;
}
.panel-floating.history .cta-container {
	padding-top: 5px;
}
.panel-floating.history .single-history:first-child {
}
.panel-floating.history .single-history:last-child {
	border-bottom: none;
}
.panel-floating.history .single-history.offer.declined b {
	color: var(--color-alert);
	font-weight: 600;
}