#empty_page {padding:0 90px 0 90px; font:16px/25px var(--font-base); color:var(--base-txt-secondary); position:relative; margin:50px auto; width:450px; text-shadow: 1px 1px 0 var(--base-cont-top); text-align:center; }
#empty_page a {color:var(--base-txt-secondary)}
#empty_page .msg_ico { background-position:-200px 0; position:static; margin:20px auto; display:block; float:none;}
#empty_page .help_arrow {width:114px; height:76px; background:url(/assets/img/big_green_arrow.png) no-repeat; position:absolute; right:0; top:5px}

#big_hint {padding:20px 0 20px 60px; font:italic 14px/20px var(--font-base); color:var(--base-txt-secondary); position:relative; text-shadow: 1px 1px 0 var(--base-cont-top)}
#big_hint a {color:var(--base-txt-link-minor)}
#big_hint a:hover {color:var(--base-txt-link-major)}
#big_hint .msg_ico { background-position:0 -40px; top:10px; left:0; display:block; position:absolute; margin:0}
#big_hint .msg_ico_2l { top:20px}

#empty_div {padding:0 0 0 0; font:25px/25px var(--font-base); color:var(--base-txt-tertiary); position:relative; text-align:center; max-width:800px; margin:50px auto;
  text-shadow: 1px 1px 0 var(--base-cont-top)}
#empty_div.empty_div_ {font:16px/25px var(--font-base); color:var(--base-txt-secondary)}
#empty_div a {color:var(--base-txt-secondary)}
#empty_div strong, #empty_page strong {font-size: 2rem; font-weight: 500; color: var(--inp-hlt-focus); display:block; margin:10px 0 0 0}
#empty_div .empty_img, #empty_page .empty_img {margin:50px auto 0 auto}

.empty_img {
  height:200px; width:200px; padding:0; margin:0 auto;
  background-image:url(/assets/img/ws_emoji_new.svg) !important; background-color:transparent !important; background-size: 3300px 3300px !important;
  background-position: 0 -300%;
}

.emptylist {
  padding:40px 0;
  font:18px var(--font-base);
  color:var(--base-txt-secondary);
  text-align:center;
}
.emptylist span.advice {
  display:block;
  font:14px var(--font-base);
  margin:15px 0 0 0;
}
.emptylist a { color:var(--base-txt-secondary)}

#empty_files, #empty_files_navigation {position:relative; display:none; padding:50px 0 100px 0;  text-align:center; font:16px/25px var(--font-base); color:var(--base-txt-secondary);   }
.my_empty {position:relative; display:none; padding:0 10px 100px;  text-align:center; font:14px/22px var(--font-base); color:var(--base-txt-secondary)}
.my_empty .button {margin-bottom:4px }
#search_results .my_empty {display:block;}
#empty_files2 {padding:0 90px 0 90px; font:16px/25px var(--font-base); color:var(--base-txt-secondary); position:relative; margin:50px auto; width:450px;    text-align:center;}
.empty_show {display:block !important;padding: 80px 0 40px 0 !important;}
.empty_show .empty__img {margin-top: 48px; height: 288px; width: 100%; background-repeat: no-repeat; background-position: center center;}
.empty_show .in {display: inline-block;padding: 0 20px;}
#empty_files a, #empty_page a, #empty_files2 a, .my_empty a.a {color:var(--base-txt-primary); border-bottom:1px dashed var(--base-txt-accent)}
#empty_files .msg_ico, .my_empty .msg_ico { background-position:-200px 0; position:relative; top:0; left:0; display:block; margin:30px auto; float:none}
#empty_files2 .msg_ico { background-position:-200px 0; display:block; margin:20px auto; position:static; float:none;}
/*#empty_files2 .msg_ico { background-position:-160px 0; top:50%; left:20px; display:block; margin:-20px 0 0 0; position:absolute}*/
#empty_files2 .help_arrow {width:114px; height:76px; background:url(/assets/img/big_green_arrow.png) no-repeat; position:absolute; right:0; top:5px}
.eye_always {display:block !important; margin:0 0 30px 0 !important; border-width:0 !important}
.eye_always .button  {display:block !important}
#empty_files a.button_white, #empty_div a.button_white, #empty_page a.button_white,
#empty_files ws-btn, #empty_files_navigation ws-btn, #empty_div ws-btn, #empty_page ws-btn{margin-top: 20px}
#empty_files a.button_green, #empty_div a.button_green, #empty_page a.button_green {border-bottom:inherit; margin:20px 0 0 0}
.my_empty .or_line {border-top:1px solid var(--base-line-secondary); margin:40px -10px 0 -10px; text-align:center}
.project_bl .my_empty .or_line {margin:40px 0 0 0;}
.my_empty .or_line .or {display:block; width:40px; background:var(--base-cont-mod-top); margin:-13px auto 30px; color:var(--base-txt-ghost); font:14px/22px var(--font-base) !important}
.my_empty .or_line .ico_c {margin:30px auto 0}
#empty_files .or_line {border-top:1px solid var(--base-line-alt-cardbrd); margin:60px -10px 0 -10px; text-align:center; margin:40px auto 0; width:300px;}
#empty_files .or_line .or {display:block;width:40px;background: var(--base-surf-top);margin:-13px auto 30px;color:var(--base-txt-tertiary);font:14px/22px var(--font-base) !important}
body[data-archive=on] #empty_files .or_line .or {background:var(--base-surf-archive)}
#empty_files .or_line .ico_c {margin:30px auto 0}
.modal[data-group=white] .my_empty .or_line {margin:40px 0 0 0;}
.modal[data-group=white] .my_empty .or_line .or {background:var(--base-cont-low);}

.drop_empty {padding:15px; font:italic 13px/20px var(--font-base); color:var(--base-txt-tertiary); display:none; text-align:center}
.project_bl .drop_empty {padding:0}

body[data-page=tasks_grid] #empty_files .or_line .or,
body[data-page=projects_grid] #empty_files .or_line .or,
body[data-page=files_grid] #empty_files .or_line .or,
body[data-page=users] #empty_files .or_line .or,
body[data-page=contacts] #empty_files .or_line .or {
	background:var(--base-cont-top)
}


#empty_search {
	height: 298px;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center 52px;
	padding: 100px 0 100px 0;
	text-align:center;
	font: var(--font-txt-15-large-reg);
	color:var(--base-txt-secondary);
	text-shadow: 0.5px 0.5px 0 var(--base-cont-top);
	position:relative;
}
#empty_search a, #empty_files2 a { color: var(--base-txt-btn-a); }
#empty_search a:hover, #empty_files2 a:hover { text-decoration: underline; }
#empty_search .msg_ico { background-position:-200px 0; position:relative; top:0; left:0; display:block; margin:30px auto; float:none}

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

.uups_404 {background:url(/assets/img/uups_404.svg); width:222px; height:204px; margin:0 auto 20px;}

#big_search {height:300px; overflow:hidden}
#big_search .ico {transform:scale(8);-webkit-transform:scale(8); margin:120px; opacity:0.25}

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


#block_error {padding:100px 10px 100px 10px;text-align:center;color:var(--base-txt-accent);font:italic 1rem var(--font-base); background:var(--base-surf-top); box-shadow:0 0 500px 500px var(--base-surf-top)}
#block_error h1{font: bold 2rem/1 var(--font-base);padding:20px 0 8px 0}
#block_error h2{font: 300 1.5rem/1 var(--font-base);padding:20px 0 8px 0}
#block_error p{margin:0 0 40px 0}

main:has(.headerGeneral) .page_error_wrapper {
	padding: 5rem;
}
main:has(.headerGeneral) #block_error.not_found {
	box-shadow: none;
	border-radius: 2rem;
}

.p404user{font: 7rem var(--font-base)}
.p404user div{width: 11rem;height: 11rem;background-color: var(--base-cont-top);border-radius: 50%;font: 5rem/1 var(--font-base);display: inline-flex;align-items: center;justify-content: center;padding-bottom: 1.5rem;box-sizing: border-box}
.p404user div span{color: var(--base-txt-btn-w)}
#block_error .but404{font: 1rem var(--font-base);background-color: var(--base-txt-link-major);color: var(--colors-alpha-light-100);border-radius: 30px;white-space: nowrap;display: inline-block;padding: 16px 25px;transition: 0.3s}
#block_error .but404:hover{background-color: var(--base-txt-link-minor);}
#block_error4 .but404:active{box-shadow:0 0 0 6px var(--base-hlt-hover);transition:none}
@media(max-width: 500px){#block_error .wrap{padding-top: 75px;padding-bottom: 75px}
  #block_error h1{font: bold 1.6rem/1 var(--font-base)}
  .p404user div{width: 7.15rem;height: 7.15rem;font: 3.25rem/1 var(--font-base)}
  .p404user{font: 4.235rem var(--font-base)}
}

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

.alert_sm, .alert_inline {font:italic 13px/16px var(--font-base); color:var(--base-txt-secondary); padding:10px;}
.alert_sm {padding:0 5px;}
.alert_inline .ico_alert {margin:0 0 0 15px;}

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


.empty__state-wrapper {
	position: absolute;
	z-index: 1000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 0%, var(--base-cont-top-elevated) 50%);
	display: none;

	.empty__state-filter, .empty__state-search, .empty__state-page {
		display: none;
		margin: 120px auto 0 auto;
		ws-btn, a {
			pointer-events: all;
		}
	}
}


.emptyStateGlobal {
	width: 100%;
	height: 100%;
	max-width: 400px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;

	.emptyStateGlobal__content {
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: flex-start;
		text-align: initial;
		min-width: 0;
		text-wrap-style: balance;

		&.emptyStateGlobal__content-center {
			align-items: center;
			.emptyStateGlobal__row-text_primary, .emptyStateGlobal__row-text_secondary {
				text-align: center;
			}
			.emptyStateGlobal__buttonsGroup,
			.emptyStateGlobal__row-buttons {
				flex-wrap: wrap;
				justify-content: center;
			}
		}

		.emptyStateGlobal__row-icon {
			ws-icon, svg {
				width: 32px; height: 32px;
			}
			svg { fill: var(--base-txt-secondary); }
			padding-bottom: 8px;
		}

		.emptyStateGlobal__row-text_primary {
			font: var(--font-ui-15-large-med);
			color: var(--base-txt-primary);
		}

		.emptyStateGlobal__row-text_secondary {
			font: var(--font-ui-13-small-reg);
			color: var(--base-txt-tertiary);
			text-wrap: balance;
		}

		.emptyStateGlobal__buttonsGroup,
		.emptyStateGlobal__row-buttons {
			display: flex;
			gap: 8px;
		}
		.emptyStateGlobal__row-buttons {
			padding-top: 16px;
		}
	}
}

.dashboard__block__body .emptyStateGlobal {
	.emptyStateGlobal__content {
		gap: 6px;
		.emptyStateGlobal__row-buttons {
			padding-top: 12px;
		}
	}
}

@media (max-width: 480px) {
	.dashboard__block__body .emptyStateGlobal {
		padding: 40px 16px;
		box-sizing: border-box;
	}
}