.message-container {
	position: fixed;
	bottom: 28px;
	left: 80px;
	z-index: 1024;
	transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
}
.message-wrapper {
	display: block;
	transform: translateY(28px);
	transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
}
.message-content {
	padding-bottom: 14px;
}
.message {
	padding: 12px;
	font: 14px/20px var(--font-base);
	min-height: 60px;
	width: 352px;
	margin: 0;
	border-radius: 12px;
	z-index: 1014;
	box-sizing: border-box;
	color: var(--base-txt-accent);
	display: flex;
	border: 1px solid var(--colors-graphite-500);
	backdrop-filter: blur(12px);
	background-color: var(--base-cont-top);
	background-clip: padding-box;
}
@media (max-width: 480px) {
	.message-container {
		left: 10px;
		bottom: calc(var(--footerMobile-height) + 4px);
		width: calc(100% - 20px);
		z-index: 1064; /* треба завжди бачити помилку */
	}
	.message {
		width: 100%;
	}
}
.message .l {border-top-left-radius: 12px;border-bottom-left-radius: 12px;}
.message .l, .message .r {position: relative;width: 36px;flex-shrink: 0;}
.message .main {width: 254px;flex-shrink: 0;flex-grow: 0;}
.message .main .header {display: flex;align-items: center;justify-content: space-between;}
.message .main .header .title {
	flex-shrink: 1;
	flex-grow: 1;
	padding: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font: var(--font-ui-16-title-3-bold)
}
.message-chat .main .header .title {
	padding: 0 8px;
	font: var(--font-ui-14-regular-bold);
}
.message .l.hidden {display: none}
.message .l.hidden + .main {width: 290px;}
.message .main .header .title:empty {display: none}
.message .main .header .action:empty {display: none}
.message .main .header .action {flex-shrink: 0;padding: 4px;}
.message .main .header .action > div {max-width:100px;}
.message .main .header .action ws-btn {max-width:100%;}
.message .main .text {
	padding: 8px;
	font: var(--font-ui-14-regular-reg);
	color: var(--base-txt-accent);
	white-space: pre-wrap;
	word-break: break-word;
}
.message-chat .main .text {
	padding: 0 8px;
	margin: 2px 0 0  0;
}
.message .main .text:empty {display: none}
.message .main .options {padding: 0 4px;display:flex;gap:4px;}
.message .main .options > div {padding: 4px;flex-shrink: 1;/* width: 100%; */overflow: hidden}
.message .main .options ws-btn {max-width: 100%}
.message .l .indicator svg {width:36px;height:36px;rotate: -90deg}
.message .l .indicator svg > circle { transition: all .5s linear; stroke: var(--colors-graphite-500)}
.message .l .indicator {position: absolute;top:0;left:0;}
.message .l .icon {position: absolute;top:0;left:0;padding:8px}
.message .r .close { padding: 4px; }
.message .r .close button { padding:0;}
.message .l .icon svg {fill: var(--colors-graphite-500);}
.message .l span.proj_color, .message .l span.avatar {
	position: absolute;
	top:6px;
	left:6px;
	width: 24px;
	height: 24px;
	border-radius:18px;
}
.message .l .av_nm {
	width: 24px;
	height: 24px;
	font: 12px / 24px var(--font-base) !important;
}
.message .l span.proj_color ws-emoji {
	width: 24px;
	height: 24px;
	transform:scale(0.6666)
}

/*MSG_VARIANT_A*/
.message.message-a {border-color:var(--base-hlt-focus);box-shadow: 0 8px 0 0 var(--base-hlt-focus);background-color: var(--base-hlt-easy);}
.message.message-a .l .indicator svg > circle {stroke:var(--base-txt-btn-a);}
.message.message-a .l .icon svg {fill:var(--base-txt-btn-a);}
.message.message-a .main .header .title {color:var(--base-txt-btn-a);}
/*MSG_VARIANT_B*/
.message.message-b {border-color:var(--base-hlt-b-focus);box-shadow: 0 8px 0 0 var(--base-hlt-b-focus);background-color: var(--base-hlt-b-easy)}
.message.message-b .l .indicator svg > circle {stroke:var(--base-txt-btn-b);}
.message.message-b .l .icon svg {fill:var(--base-txt-btn-b);}
.message.message-b .main .header .title {color:var(--base-txt-btn-b);}
/*MSG_VARIANT_G*/
.message.message-g {border-color:var(--base-hlt-g-focus);box-shadow: 0 8px 0 0 var(--base-hlt-g-focus);background-color: var(--base-hlt-g-easy)}
.message.message-g .l .indicator svg > circle {stroke:var(--base-txt-primary);}
.message.message-g .l .icon svg {fill:var(--base-txt-primary);}
.message.message-g .main .header .title {color:var(--base-txt-primary);}
/*MSG_VARIANT_S*/
.message.message-s {border-color:var(--base-txt-new-minor);box-shadow: 0 8px 0 0 var(--base-txt-new-minor);background-color: var(--base-hlt-alt-fresh)}
.message.message-s .l .indicator svg > circle {stroke:var(--base-txt-new-major);}
.message.message-s .l .icon svg {fill:var(--base-txt-new-major);}
.message.message-s .main .header .title {color:var(--base-txt-new-major);}
/*MSG_VARIANT_W*/
.message.message-w {border-color:var(--base-txt-notice-minor);box-shadow: 0 8px 0 0 var(--base-txt-notice-minor);background-color: var(--base-hlt-alt-notice)}
.message.message-w .l .indicator svg > circle {stroke:var(--base-txt-notice-major);}
.message.message-w .l .icon svg {fill:var(--base-txt-notice-major);}
.message.message-w .main .header .title {color:var(--base-txt-notice-major);}
/*MSG_VARIANT_D*/
.message.message-d {border-color:var(--base-hlt-w-focus);box-shadow: 0 8px 0 0 var(--base-hlt-w-focus);background-color: var(--base-hlt-w-easy)}
.message.message-d .l .indicator svg > circle {stroke:var(--base-txt-alert-major);}
.message.message-d .l .icon svg {fill:var(--base-txt-alert-major);}
.message.message-d .main .header .title {color:var(--base-txt-alert-major);}
/*MSG_VARIANT_INVERT*/
.message.message-i {border-color:var(--base-hlt-g-focus);box-shadow: 0 8px 0 0 var(--base-hlt-g-focus);background-color:var(--base-hlt-g-invert)}
.message.message-i .l .indicator svg > circle {stroke:var(--base-txt-btn-flip);}
.message.message-i .l .icon svg {fill:var(--base-txt-btn-flip);}
.message.message-i .main .header .title {color:var(--base-txt-btn-flip);}
.message.message-i .main .text {color:var(--base-txt-btn-flip);}

.message.message-long { width: unset; }
.message.message-long .main {width: auto;max-width:70vw;}
.message.message-long .main .text {font: var(--font-ui-12-mini-reg);}
.mobile .message.message-long .main .text {font: var(--font-ui-10-nano-reg);}

.msg_ico {
	float: left;
	width: 40px;
	height: 40px;
	background: url(/assets/img/notifier_iconset.svg) no-repeat;
	margin: -4px 10px -4px 0;
}
.message .ico_r {
	margin: -3px -3px -3px 10px;
	transform: scale(0.8);
}
.message.shown {
	bottom: 24px;
}
#drag_notice .msg_ico {
	margin: 0 20px 0 0
}
.freeze {
	padding: 15px 0 15px 0;
	font: bold 15px/20px var(--font-base);
	min-height: 32px;
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: 1023;
}
.freeze2 {
	padding: 15px 0 15px 0;
	font: bold 15px/16px var(--font-base);
	min-height: 32px;
}
.freeze1line {
	font: bold 15px/36px var(--font-base);
}
.freeze i {
	font: italic 13px/16px var(--font-base)
}
.freeze a {
	font: 14px/16px var(--font-base)
}
.freeze a.button_r, .freeze ws-btn {
	margin: 0 30px 0 0;
}
.sleep, .sleep3 {
	min-height: 32px;
	position: relative;
	font: 16px/25px var(--font-base);
	color: var(--base-txt-secondary);
	margin: 50px auto 50px auto;
	width: 66%;
}
.sleep3 {
	text-align: center
}
.dataadd .sleep, .dataadd .sleep3 {
	width: 100%
}
.rightPanel .dataadd .sleep {
	align-items: center;
	margin-bottom: 28px;
	height: 100%;
}
.sleep2 {
	text-align: center;
	width: 300px;
	margin: 30px auto;
	height: 250px;
	font: 16px/25px var(--font-base);
	color: var(--base-txt-secondary);
	text-shadow: 1px 1px 0 var(--base-cont-top);
	background: url(/assets/img/funybricks.svg) no-repeat center 40px;
}
.sleep a.log, .sleep3 a.log {
	color: var(--base-txt-primary);
	border-bottom: 1px dashed var(--base-txt-accent)
}
.msg1line {
	line-height: 24px
}
.msg_text {
	margin-top: 4px
}
.msgstick {
	margin: 15px 0 -15px 0
}
#settings .msgstick {
	margin: 15px 0 -15px 0
}
p.tip .msg_ico {
	background-position: -280px 0;
	margin: 0 0 0 -40px;
}
.message .msg_ico {
	background-position: 0 0
}
.access_denied .msg_ico, #drag_notice .msg_ico {
	background-position: -80px 0
}
.freeze_reader .msg_ico {
	background: url(/assets/img/iconset.svg) no-repeat -240px -1320px / 280px 3200px
}
.freeze2 .msg_ico {
	background-position: -120px 0;
	left: 20px;
	top: 16px;
	position: absolute;
}
.alert .msg_ico {
	background-position: -40px 0
}
.sleep .msg_ico {
	background-position: -200px -40px;
	position: static;
	float: left;
	margin: 5px 10px 0 0
}
.sleep3 .msg_ico {
	background-position: -200px -40px;
	position: static;
	float: none;
	display: block;
	margin: 0 auto 30px auto
}
.access_denied {
	padding: 20px;
	font: 14px/20px var(--font-base);
	color: var(--base-txt-secondary);
	white-space: nowrap;
	width: 360px;
}
.access_denied h3 {
	margin: 0 0 2px;
	color: var(--base-txt-primary)
}
.access_denied .msg_ico {
	margin: 2px 10px 0 0;
}
.access_denied .button {
	margin: 0 0 0 50px
}

.settings .msg_ico {
	float: left;
	position: static;
	width: 40px;
	height: 40px;
	margin: -12px 10px 0 0;
	background: url(/assets/img/notifier_iconset.svg) no-repeat;
}

/* TODO: PALETTE_FIX */

.message a {
	color: inherit;
	text-decoration: underline
}
.error_sm {
	color: var(--base-txt-primary);
	background: var(--base-hlt-alt-notice);
	font: italic 13px/20px var(--font-base);
	padding: 10px 15px; /* margin:0 0 10px 0; */
}
.error_sm .ico_l {
	margin: 0 10px 0 0
}
.freeze {
	color: var(--white-accent);
	background: var(--colors-blue-930)
}
.freeze2 {
	color: var(--white-accent);
	background: var(--colors-blue-930);
	padding: 15px 20px 15px 80px;
	font-size: 14px;
	margin: 12px 0 0 0;
	position: relative;
}
.freeze2 b {
	font: 18px var(--font-base)
}
.freeze a {
	color: var(--colors-interblue-400)
}
.freeze_reader {
	background: var(--colors-amber-desat-400-ultra);
	color: var(--base-txt-alt-dark-major);
	font-weight: normal;
}
.freeze_reader a {
	color: var(--colors-interblue-900);
	font: inherit
}
.freeze_reader .esc {
	float: right;
	transform: scale(1.25);
	margin: 10px 15px;
}

@media (max-width: 768px) {
	.freeze2 {font-size:12px; padding-left:50px;}
	.freeze2 .msg_ico {left:5px;}
	.freeze2 b {font-size:16px;}
}
@media (max-width: 480px) {
	.freeze2 {font-size:12px; padding-left:50px;}
	.freeze2 b {font-size:12px; }
	.freeze2 b:before {content:'. '}
	.error br, .freeze br, .message br, .alert br,.freeze2 br {display:none;}
	.message .main {flex-grow: 1; flex-shrink: 1; width: unset; overflow: hidden;}
	.message .main .text {
		text-wrap-style: balance;
	}
}
@media print {
	.message {
		display: none
	}
}

/* FOREGROUND MESSAGE */
.foreground-message {
	position: fixed;
	padding: 12px 24px 12px 12px;
	background: var(--base-cont-top-opac);
	backdrop-filter: blur(8px);
	z-index: 1030;
	border-radius: 12px;
	box-shadow: var(--shadow-cont-minor-lineonly-inside);
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	display: flex;
	gap: 12px;
	width: 360px;
	margin-left: -180px;
	left: 50%;
	top: 0;
	opacity: 0;
	transform: scale(0.9);
	pointer-events: none;
	overflow: hidden;
}
.foreground-message.bell {
	transform: scale(0.5);
	top: 145px;
	left: 30px;
	margin-left: 0;
	transform-origin: left center;
	width: auto;
	max-width: 300px;
	background: #253341bb;
	z-index: 1023;
	color: var(--white-accent);
}
.foreground-message.bell .body {
	color: var(--white-secondary);
	padding: 6px 0 0 4px;
	font-size: 12px;
	line-height: 12px;
	display: flex;
	flex-wrap: wrap;
	row-gap: 4px; column-gap: 4px;
	max-width: 200px;
}
.foreground-message.bell .icon {
	display: none;
}
.foreground-message .progress {
	height: 1px;
	background: var(--base-txt-secondary);
	position: absolute;
	bottom: 0;
	left: 0;
	transition: width 2s linear;
	-webkit-transition: width 2s linear;
}
.foreground-message.shown {
	top: 50px;
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}
.foreground-message.bell.shown {
	top: 145px;
	left: 56px;
}

.foreground-message .icon {
	flex-grow: 0;
	flex-shrink: 0;
}
.foreground-message .in {
	flex-grow: 1;
	flex-shrink: 1;
	overflow: hidden;
}
.foreground-message .in .title {
	font: var(--font-ui-14-regular-med);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.foreground-message .in .body {
	word-break: break-word;
}

@media (max-width: 480px) {
	.foreground-message {
		width: auto;
		left: 10px;
		right: 10px;
		margin: 0;
	}
	.foreground-message.shown {
		top: 10px;
	}
}

/* PAGE RELOADER */
.page-reloader {
	position: fixed;
	padding: 12px 12px 12px 24px;
	background: var(--base-cont-top-opac);
	backdrop-filter: blur(8px);
	z-index: 1050;
	top: -40px;
	border-radius: 40px;
	box-shadow: var(--shadow-brd-focus-alt);
	transition: top 0.3s ease;
	-webkit-transition: top 0.3s ease;
}

.page-offline > span,
.page-reloader > span {
	margin-right: 12px;
	font: var(--font-ui-13-small-semi);
	font-family: monospace;
}

.page-reloader.forceReload {
	z-index: 1032;
}

body.offlineMode .page-reloader {
	display: none;
}

.page-offline {
	position: fixed;
	backdrop-filter: blur(8px);
	z-index: 1050;
	top: -40px;
	border-radius: 40px;
	transition: top 0.3s ease;
	-webkit-transition: top 0.3s ease;
	box-shadow: var(--shadow-brd-error-focus);
	background: var(--base-hlt-w-easy);
	padding: 12px;
}
.page-offline.page-online {
	box-shadow: var(--shadow-brd-focus-b);
	background: var(--base-hlt-b-easy);
}
.page-offline.page-slow {
	box-shadow: var(--shadow-brd-focus);
	background: var(--base-hlt-easy);
}

@media screen and (max-width: 480px) {
	/* .page-offline, */
	.page-reloader {
		transform: translateX(-50%);
		left: 50% !important;
		right: auto !important;
		max-width: calc(100% - 6vw);
		box-sizing: border-box;
		span {
			flex-shrink: 1;
			min-width: 0;
		}
	}

	/* TODO на пробу, але треба кольори проставить нормальні */
	.page-offline {
		pointer-events: none;
		box-shadow: unset !important;
		inset: 0 0 auto 0 !important;
		height: 16px;
		background: black;
		color: #fff;
		border-radius: unset;
		justify-content: center;
		padding: 0;
		z-index: 99999;
		span {
			font: var(--font-ui-10-nano-reg);
			font-family: var(--font-mono);
		}
		&.page-online {
			background: #8162e0;
		}
		&.page-slow {
			background: grey;
		}
	}

}

.freeze {
	&.freeze--pay {
		padding: 0;
		background: var(--colors-graphite-trans-990);
		backdrop-filter: blur(12px);
		z-index: 1001;
	}
	.alertblock {
		padding: 0;
		margin: 0;
		border-radius: unset;
		box-shadow: unset;
		.alertblock__close {
			position: absolute;
			right: 14px;
			top: 12px;
			color: var(--white-tertiary);
			font: 12px / 20px var(--font-base);
			display: flex;
			gap: 4px;
			cursor: pointer;
			&:hover {
				color: var(--white-secondary);
			}
			.alertblock__close-icon {
				background-position: -100px -440px;
				filter: invert(1);
				margin: 0;
			}
		}
		.text {
			background: unset;
			margin: 0 auto;
			display: grid;
			align-items: center;
			grid-template-columns: 1fr 1fr;
			min-height: 108px;
			box-sizing: border-box;
			@media (min-width: 1440px) {
				padding: 18px 0;
				width: 880px; /* 440px * 2 */
			}
			@media (min-width: 1024px) and (max-width: 1439px) {
				padding: 10px 0;
				width: 784px; /* 392px * 2 */
			}
			@media (min-width: 768px) and (max-width: 1023px) {
				grid-template-columns: 1fr;
				gap: 20px;
				padding: 32px 40px 24px;
			}
			@media (min-width: 480px) and (max-width: 767px) {
				grid-template-columns: 1fr;
				gap: 20px;
				padding: 32px 40px 24px;
			}
			@media (max-width: 479px) {
				grid-template-columns: 1fr;
				gap: 20px;
				padding: 48px 16px 24px;
			}
			.text__text-column {
				text-wrap-style: pretty;
			}
			.text__form-column {
				display: flex;
				flex-direction: column;
				gap: 8px;
			}
			.text__text-column-secondary {
				min-height: 68px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 2px;
			}
			.text__title {
				margin: 0;
				color: var(--base-txt-alt-light);
				font: 18px / 24px var(--font-base);
				font-weight: 590;
				margin-bottom: 4px;
			}
			.text__text {
				margin: 0;
				font: 13px / 20px var(--font-base);
				color: var(--white-secondary);
			}
			form {
				padding: 0;
				display: flex;
				gap: 8px;
				.drop_select {
					margin: 0;
					border-radius: 4px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 8px;
					box-sizing: border-box;
					width: 100%;
					height: 40px;
					color: var(--base-txt-primary);
					@media (min-width: 768px) and (max-width: 1023px) {
						max-width: 320px;
					}
					@media (min-width: 480px) and (max-width: 767px) {
						max-width: 266px;
					}
					span.drop {
						position: static;
						inset: 0;
						margin: 0;
						border: unset;
						background-color: unset;
					}
				}
				a.pay {
					margin: 0;
					color: var(--base-txt-alt-light);
					min-width: 135px;
					box-sizing: border-box;
					@media (min-width: 480px) and (max-width: 767px) {
						min-width: 126px;
					}
					@media (max-width: 479px) {
						min-width: 102px;
					}
				}
			}
			.text__text-secondary,
			.text__bullet {
				font: 13px / 20px var(--font-base);
				color: var(--white-tertiary);
				a {
					text-decoration: underline;
					text-underline-position: under;
					color: var(--colors-interblue-600);
					&:hover {
						text-decoration: unset;
					}
				}
				.ico_mail {
					margin: 0;
				}
			}
			.text__bullets {
				display: flex;
				flex-wrap: nowrap;
				min-height: 24px;
				align-items: center;
				@media (max-width: 479px) {
					padding-top: 8px;
					gap: 8px;
					flex-direction: column;
					align-items: flex-start;
				}
				.text__bullet {
					flex-shrink: 0;
					@media (min-width: 480px) {
						&:nth-child(n+2):before {
							content: '•';
							width: 25px;
							display: inline-block;
							text-align: center;
						}
					}
				}
			}
			.whitespace-nowrap {
				white-space: nowrap;
			}
		}
	}
}

body[data-color] .freeze--pay .drop_select span.drop {
	background-position: -365px -215px;
}