:root {
	--cards-gap: 20px;
	--cards-padding-inside: 10px;
}

.dev_info {
	position: fixed;
	left: 15px;
	bottom: 15px;
	width: 300px;
	height: 200px;
	padding: 5px;
	overflow: auto;
	background-color: #e6e6e68a;
	border: solid 1px #404040;
	border-radius: 5px;
	font-size: 9pt;
}

.app_updated {
	color: #232323;
	position: fixed;
	font-weight: 600;
	background-color: rgb(243 188 165);
	text-align: center;
	padding: 5px 10px;
	/* margin: 0 auto; */
	/* margin-bottom: 20px; */
	width: auto;
	/* display: inline-block; */
	border-radius: 5px;
	/* box-shadow: aliceblue 5px 5px; */
	box-shadow: 3px 3px 10px #c6c6c6;
	z-index: 999;
	cursor: pointer;
}

.conteiner__center {
	max-width: 1200px;
	margin: auto;
	padding: 20px;
}

.center__box {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 250px;
	transform: translate(-50%, -50%);
	height: auto;
}
.center__box img {
	display: block;
	margin: 0 auto;
}
.center__box .logo {
	padding-bottom: 20px;
}

.window_filters__container {
	position: absolute;
	max-height: 65vh;
	/* margin: 0; */
	padding: 20px;
	background-color: white;
	border: solid 1px #ccc;
	border-radius: 10px;
	box-shadow: 0px 0px 40px #545454;
	overflow-y: auto;
	z-index: 99;
}

.div-invisible {
	display: none;
}

.panel_icon {
	font-size: 32px;
}
.table_icon {
	font-size: 12pt;
}

.container__panel {
	display: flex;
	align-items: center;
	/* align-items: stretch; */
	flex-direction: row;
	justify-content: flex-start;
	column-gap: 20px;
	row-gap: 10px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.container__panel div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.container__panel a {
	text-decoration: none;
	color: #000000;
}

.container__filters {
	margin-bottom: 20px;
	font-size: 10pt;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: flex-start;
	align-items: flex-start;
	gap: 20px;
}
.container__filters div {
	margin-bottom: 5px;
}

.container__main {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 30px;
}
.container__main a {
	text-decoration: none;
	color: #000000;
}

.box__row {
	/* display: flex;
	gap: 30px; */
	display: flex;
	gap: 20px;
	align-content: flex-start;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: column;
}
.box__row__filter__block {
	width: 200px;
}

.box__col {
	/* display: flex;
	gap: 30px; */
	display: flex;
	gap: 40px;
	align-content: flex-start;
	align-items: flex-start;
	justify-content: flex-end;
	flex-direction: row;
}
.box__col_menu {
	min-width: 150px;
}
.box__col_btn_loader {
	gap: 20px;
	align-items: center;
}

.box__cards div {
	gap: 10px;
}
.box__form {
	padding-left: 0;
}

.box__form__column {
	flex: 1;
	min-width: 300px;
	/* max-width: 680px; */
}
@media (min-width: 1000px) {
	.box__form__column {
		min-width: 290px;
		max-width: 680px;
	}
}

.flex-row {
	display: flex;
	flex-direction: row;
}
.flex-gap16px {
	gap: 16px;
}

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

/* https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body?noredirect=1&lq=1 */
.table_tasks__container {
	width: 100%;
	display: block;
	overflow: auto;
	max-height: calc(100vh - 9rem - 4rem);
	font-size: 11pt;
}
@media screen and (min-width: 766px) {
	.table_tasks__container {
		max-height: calc(100vh - 9rem);
	}
}
.table_tasks__container thead th {
	position: sticky;
	top: 0;
	z-index: 1;
}
.table_tasks__container tbody th {
	position: sticky;
	left: 0;
	background-color: #fff;
	padding-right: 5px;
}

.table_tasks {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	/* font-size: 11pt; */
}
.table_tasks thead {
	/* position: sticky;
	top: 90px; */
	/* z-index: 1;
	background: white; */
	/* padding: 20px; */
	/* border: 1px solid; */
}
.table_tasks thead th {
	background: #ffffff;
	text-align: center;
	padding: 3px;
	padding-left: 0px;
	font-weight: bolder;
	vertical-align: bottom;
	cursor: pointer;
}
.table_tasks thead th.highlighted div {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	background: #444;
	color: #fff;
	border-radius: 4px;
}
.table_tasks tr.tr_flat td {
	padding: 2px;
}
.table_tasks tr.tr_flat.task-gray2 span {
	padding: 2px 5px;
	background-color: #e1e1e1;
	border-radius: 3px;
}
.table_tasks td {
	cursor: pointer;
	padding: 5px 10px;
	vertical-align: top;

	border: 2px solid #ffffff00;
	border-style: solid none;
}
.table_tasks tr td:first-child {
	padding-left: 5px;
	border-left-style: solid;
}
.table_tasks tr td:last-child {
	padding-right: 5px;
	border-right-style: solid;
}
.table_tasks tr:first-child td:first-child {
	border-left-style: solid;
	border-top-left-radius: 5px;
}
.table_tasks tr:first-child td:last-child {
	border-right-style: solid;
	border-top-right-radius: 5px;
}
.table_tasks tr:last-child td:first-child {
	border-left-style: solid;
	border-bottom-left-radius: 5px;
}
.table_tasks tr:last-child td:last-child {
	border-right-style: solid;
	border-bottom-right-radius: 5px;
}
.table_tasks tr:hover {
	/*background-color: #cad6ed;*/
}
.table_tasks tr:hover td {
	border: 2px solid #474747;
	border-style: solid none;
}
.table_tasks tr:hover td:first-child {
	border-left-style: solid;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.table_tasks tr:hover td:last-child {
	border-right-style: solid;
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
}

.t_tr_index {
	width: 100%;
	border-collapse: collapse;
	line-height: 160%;
}
.t_tr_index th {
	text-align: left;
	padding: 3px;
	padding-left: 0px;
	font-weight: bolder;
	vertical-align: bottom;
}
.t_tr_index td {
	padding: 3px 3px;
	padding-left: 0px;
	vertical-align: top;
}
.t_tr_index tr td:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.t_tr_index tr td:last-child {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.t_tr_index tr:hover td {
	background: #eeeeee;
}
hr.t_tr_index {
	border-style: solid;
	border-color: #f2efe1;
	border-width: 0 0 1px 0;
}

.font-red {
	color: #b40000;
}
.font-lightred {
	color: #e3d3d3;
}
.font-green {
	color: green;
}

.card {
	position: relative;
	padding: var(--cards-padding-inside);
	color: black;

	width: 100%;
	/* min-width: 350px; */
	/* max-width: 100%; */
	/* border: 1px solid #e9e9e9; */
	border-radius: 5px;
	background-color: rgb(245, 245, 245);
}
.card__mach_operator_list ul,
.card__mach_operator_list #myUL {
	list-style-type: none;
}
.card__mach_operator_list li ul {
	padding-left: 15px;
}
.card__mach_operator_list li.root {
	margin-bottom: 10px;
}
.card hr {
	margin-top: 4px;
	border: none;
	border-top: 1px solid rgb(139, 139, 139);
}

@media (min-width: 700px) {
	.grouped-list .card {
		/* width: calc((100% - var(--cards-gap) * 2 - var(--cards-padding-inside) * 6) / 3); */
		width: calc((100% - var(--cards-gap) * 2) / 2);
		/* max-width: 450px; */
	}
}
@media (min-width: 1000px) {
	.grouped-list .card {
		/* width: calc((100% - var(--cards-gap) * 2 - var(--cards-padding-inside) * 6) / 3); */
		width: calc((100% - var(--cards-gap) * 2) / 3);
		/* max-width: 450px; */
	}
}
.grouped {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-bottom: 20px;
	gap: var(--cards-gap);
}

.card:hover {
	box-shadow: 0 4px 12px 0 rgb(0 0 0 / 20%);
}
.card-today {
	min-width: 50px;
	border: 2px solid rgb(0, 0, 0);
	background-color: #e9e9e9;
	text-align: center;
	display: flex;
	justify-content: center; /*Центрирование по горизонтали*/
	align-items: center; /*Центрирование по вертикали */
}

.card p {
	font-size: 11pt;
}
.card-flex {
	display: flex;
	flex-direction: column;
}
.card-flex div {
	margin: 0;
}
.card-row {
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.task-orange,
.task-orange_td td {
	background-color: #faeec8;
}
.task-green,
.task-green_td td {
	background-color: #ccfdba;
}
.task-gray,
.task-gray_td td {
	background-color: #e1e1e1;
}
.task-red,
.task-red_td td {
	background-color: #fdcbbe;
}
.task-blank {
	border: solid 1px;
}
span.task-orange,
span.task-green,
span.task-gray,
span.task-red,
span.task-blank {
	padding: 2px 5px;
	border-radius: 3px;
	line-height: 200%;
	white-space: nowrap;
}
td.table_row-updated {
	background-color: #444;
}
.table_row-updated {
	color: #fff;
}
td.table_row-deleted {
	background-color: #992b2b;
}
.table_row-deleted {
	color: #fff;
}

.task__note__container {
	display: flex;
	flex-direction: column;
	align-content: flex-start;
	flex-wrap: nowrap;
	align-items: flex-start;
	margin-top: 8px;
	max-height: 300px;
	overflow-y: auto;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid rgba(155, 155, 155);
	margin-bottom: 5px;
}
.task__note {
	/* display: inline-block; */
	padding: 2px 5px;
	margin-bottom: 5px;
	background-color: #ebebeb;
	border-radius: 3px;
	max-width: 90%;
}
.task__note__author {
	font-size: 9pt;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	gap: 5px;
}
.task__note__author__itsMe {
	align-self: flex-end;
	background-color: #d6eaf8;
}
.task__note__author__itsMe .task__note__author {
	flex-direction: row-reverse;
}
.task__note__message {
	/* font-size: 11pt; */
	white-space: pre-wrap;
}

.box-mech-task .info-green,
.card-green {
	background-color: #d3ffc3;
}
.box-mech-task .info-gray,
.card-gray {
	background-color: #e6e6e6;
}

.task-closed_by_mo {
	background-color: rgb(255 255 255);
}
.task-closed_by_mo div {
	color: #8f8f8f;
}

a.wfd {
	text-decoration: none;
	color: #181818;
}
.mrg2 {
	margin-bottom: 2px;
}
.mrg10 {
	margin-bottom: 10px;
}
.mrg20 {
	margin-bottom: 20px;
}
.mrg40 {
	margin-bottom: 40px;
}

a.gray {
	color: rgb(170, 170, 170);
}
.font-transparent50 {
	color: rgba(170, 170, 170, 0.5);
}

fieldset {
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

.btn {
	display: flex;
	margin-right: 0;
	/* margin-top: 5px;
	margin-bottom: 15px; */
}
.btn-right {
	align-self: flex-end;
}

.btn1 {
	/* display: inline-block; */
	box-sizing: border-box;
	padding: 10px 20px;
	/* margin: 0 15px 15px 0; */
	outline: none;
	border: none;
	border-radius: 6px;
	/* align-items: center; */
	/* height: 40px; */
	/* line-height: 40px; */
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background-color: #4c4c4c;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;
}
.btn1:focus-visible {
	box-shadow: 0 0 0 2px #2c2c2c;
}
.btn1:hover {
	background-color: #333333;
}
.btn1:active {
	transform: scale(0.96);
}
.btn1:disabled {
	pointer-events: none;
	opacity: 0.65;
}

.btn2 {
	/* display: inline-block; */
	box-sizing: border-box;
	padding: 10px 20px;
	/* margin: 0 15px 15px 0; */
	outline: none;
	border: none;
	border-radius: 6px;
	/* height: 40px; */
	/* line-height: 40px; */
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	color: #434343;
	background-color: #e6e6e6;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;
}
.btn2:focus-visible {
	box-shadow: 0 0 0 2px #2c2c2c;
}
.btn2:hover {
	background-color: #d6d6d6;
}
.btn2:active {
	transform: scale(0.96);
}
.btn2:disabled {
	pointer-events: none;
	opacity: 0.65;
}

.btn3 {
	/* display: inline-block; */
	box-sizing: border-box;
	padding: 10px 20px;
	/* margin: 0 15px 15px 0; */
	outline: none;
	border: none;
	border-radius: 6px;
	/* height: 40px; */
	/* line-height: 40px; */
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	color: #434343;
	background-color: #b1ff8c;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;
}
.btn3:focus-visible {
	box-shadow: 0 0 0 2px #2c2c2c;
}
.btn3:hover {
	background-color: #a1f07c;
}
.btn3:active {
	transform: scale(0.96);
}
.btn3:disabled {
	pointer-events: none;
	opacity: 0.65;
}

.btn4 {
	/* display: inline-block; */
	box-sizing: border-box;
	padding: 10px 20px;
	/* margin: 0 15px 15px 0; */
	outline: none;
	border: none;
	border-radius: 6px;
	/* height: 40px; */
	/* line-height: 40px; */
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	color: #434343;
	background-color: #ff998c;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;
}
.btn4:focus-visible {
	box-shadow: 0 0 0 2px #2c2c2c;
}
.btn4:hover {
	background-color: #ec8476;
}
.btn4:active {
	transform: scale(0.96);
}
.btn4:disabled {
	pointer-events: none;
	opacity: 0.65;
}

.btn__filter {
	/* display: inline-block; */
	box-sizing: border-box;
	padding: 5px 10px;
	/* margin: 0 15px 15px 0; */
	outline: none;
	border: none;
	border-radius: 6px;
	/* height: 25px; */
	/* line-height: 40px; */
	font-size: 10pt;
	font-weight: 600;
	text-decoration: none;
	color: #181818;
	background-color: #ececec;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;
}
.btn__filter:focus-visible {
	box-shadow: 0 0 0 2px #dedede;
}
.btn__filter:active {
	transform: scale(0.96);
}
.btn__filter:disabled {
	pointer-events: none;
	opacity: 0.65;
}
.btn__filter_pressed {
	color: #ffffff;
	background-color: #404040;
}
.btn__filter_pressed:focus-visible {
	box-shadow: 0 0 0 2px #404040;
}
.btn__filter_pressed:active {
	transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
	.btn__filter:hover {
		color: #181818;
		background-color: #e2e2e2;
	}
	.btn__filter_pressed:hover {
		color: #ffffff;
		background-color: #282828;
	}
}

.btn-response-ok {
	background-color: #72e149;
}
.btn-response-ok:hover {
	background-color: #72e149;
}
.btn-response-bad {
	background-color: #e66f6f;
}
.btn-response-bad:hover {
	background-color: #e06a6a;
}

.pd_bottom1 {
	padding-bottom: 20px;
}

input:disabled,
select:disabled,
textarea:disabled {
	opacity: 0.7;
}

.form-1 input,
.form-1 select,
.form-1 textarea {
	font-size: 12pt;
}
.form-1 li label {
	margin-left: 8px;
}
.form-1 ul {
	list-style: none;
	padding: 0;
}
.form-1 ul li {
	padding-bottom: 10px;
}
.form-1 label.group {
	font-size: 14pt;
	/* font-weight: bold; */
	display: block;
	padding-bottom: 7px;
}

.form-2 input,
.form-2 select,
.form-2 textarea {
	font-size: 11pt;
}
.form-2 li label {
	margin-left: 8px;
}
.form-2 ul {
	list-style: none;
	padding: 0;
}
.form-2 ul li {
	padding-bottom: 10px;
	font-size: 11pt;
}
.form-2 label.group {
	font-size: 11pt;
	font-weight: bold;
	display: block;
	padding-bottom: 7px;
}

.form-3 input,
.form-3 select,
.form-3 textarea {
	font-size: 10pt;
}
.form-3 li label {
	margin-left: 8px;
}
.form-3 ul {
	list-style: none;
	padding: 0;
}
.form-3 ul li {
	padding-bottom: 10px;
	font-size: 10pt;
}
.form-3 label.group {
	font-size: 10pt;
	font-weight: bold;
	display: block;
	padding-bottom: 7px;
}

.form-group {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}
.form-group-LAST {
	margin-bottom: 0px;
}
.form-group a {
	text-decoration: none;
	color: black;
}
.form-group textarea {
	border-radius: 5px;
	width: 100%;
}
.form-group-disabled {
	color: #808080;
}
.form-control {
	background: none;
	border: 1px solid rgba(155, 155, 155);
	padding: 10px 15px;
	/* font-size: 12pt; */
	border-radius: 5px;
}

.form-control-lg {
	width: 100%;
}

.form-control2 {
	background: none;
	border: 1px solid rgba(155, 155, 155);
	padding: 1px 8px;
	border-radius: 5px;
}
.form-control2-lg {
	/* min-width: 160px; */
	max-width: 180px;
}

.select-control {
	background: none;
	padding: 10px 15px;
	/* font-size: 12pt; */

	border: 1px solid rgba(155, 155, 155);
	border-radius: 5px;

	width: 100%;
	max-width: 100%;
}
.select-control:focus {
	border-color: rgb(0, 0, 0);
	box-shadow: 0 0 1px 1px rgb(0, 0, 0);
	box-shadow: 0 0 0 1px -moz-mac-focusring;
	outline: none;
}

/* .tooltip {
	position: fixed;
	display: none;
	display: block;
	right: 24px;
	z-index: 100;
	background-color: rgb(255, 253, 230);
	border-radius: 5px;
	border: solid 1px rgb(231, 231, 218);
	box-shadow: 0px 5px 10px darkgrey;
	padding: 2px 5px;
	inline-size: max-content;
	white-space: pre-wrap;
	font-size: 11pt;
} */
span.tooltip_icon {
	position: relative;
}
span.tooltip_icon:hover .tooltip {
	display: block;
}
.tooltip_this_div {
	position: relative;
}
.tooltip_this_div:hover .tooltip {
	display: block;
}

.modal__footer {
	display: flex;
	justify-content: space-between;
}

.error-messages {
	font-size: 10pt;
}

.link2 {
	line-height: 2;
}
.link2 i {
	font-size: 24px;
	padding-right: 10px;
	vertical-align: middle;
}
.link2:hover {
	font-weight: 1000;
}
.active-link2 {
	font-weight: 1000;
	color: var(--first-color);
}
a.active-link2 {
	font-weight: 1000;
	color: var(--first-color);
}

.task_log_body {
	height: 30vh;
	overflow-y: auto;
}
/* Remove default bullets */
.task_log ul,
.task_log #myUL {
	list-style-type: none;
}
.task_log li ul {
	padding-left: 15px;
}
.task_log li.root {
	margin-bottom: 10px;
}
/* Remove margins and padding from the parent ul */
.task_log #myUL {
	margin: 0;
	padding: 0;
}
/* Style the caret/arrow */
.task_log .caret {
	/* cursor: pointer; */
	user-select: none; /* Prevent text selection */
}
/* Create the caret/arrow with a unicode, and style it */
.task_log .caret::before {
	content: '\25B6';
	font-size: 8pt;
	color: black;
	display: inline-block;
	margin-right: 6px;

	transform: rotate(90deg);
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.task_log .caret-down::before {
	transform: rotate(90deg);
}
/* Hide the nested list */
.task_log .nested {
	/* display: none; */
	font-size: 10pt;
}
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.task_log .active {
	/* display: block; */
}

.skeleton-btn {
	/* box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15);
	border-radius: 4px;
	height: 200px; */
	position: relative;
	overflow: hidden;
}
.skeleton-btn::before {
	content: '';
	display: block;
	position: absolute;
	left: -150px;
	top: 0;
	height: 100%;
	width: 150px;
	background: linear-gradient(to right, transparent 0%, #e8e8e8 50%, transparent 100%);
	animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes load {
	from {
		left: -150px;
	}
	to {
		left: 100%;
	}
}

.skeleton-input {
	height: 41px;
	padding: 10px 15px;
	background: #ededed;
	/* border: 1px solid rgba(155, 155, 155); */
	border-radius: 5px;
	width: 100%;
	max-width: 100%;
	/* box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15); */
	/* border-radius: 4px; */
	position: relative;
	overflow: hidden;
}
.skeleton-input::before {
	content: '';
	display: block;
	position: absolute;
	left: -150px;
	top: 0;
	height: 100%;
	width: 150px;
	background: linear-gradient(to right, transparent 0%, #e1e1e1 50%, transparent 100%);
	animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.skeleton-select {
	height: 20px;
	/* padding: 10px 15px; */
	margin-bottom: 10px;
	background: #ededed;
	/* border: 1px solid rgba(155, 155, 155); */
	border-radius: 5px;
	width: 100%;
	max-width: 100%;
	/* box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15); */
	/* border-radius: 4px; */
	position: relative;
	overflow: hidden;
}
.skeleton-select::before {
	content: '';
	display: block;
	position: absolute;
	left: -150px;
	top: 0;
	height: 100%;
	width: 150px;
	background: linear-gradient(to right, transparent 0%, #e1e1e1 50%, transparent 100%);
	animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.skeleton-textatea-task-note {
	height: 117px;
	/* padding: 10px 15px; */
	margin-bottom: 20px;
	background: #ededed;
	/* border: 1px solid rgba(155, 155, 155); */
	border-radius: 5px;
	width: 100%;
	max-width: 100%;
	/* box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15); */
	/* border-radius: 4px; */
	position: relative;
	overflow: hidden;
}
.skeleton-textatea-task-note::before {
	content: '';
	display: block;
	position: absolute;
	left: -150px;
	top: 0;
	height: 100%;
	width: 150px;
	background: linear-gradient(to right, transparent 0%, #e1e1e1 50%, transparent 100%);
	animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.skeleton-table-task-data {
	height: 20px;
	/* padding: 10px 15px; */
	/* margin-bottom: 20px; */
	background: #ededed;
	/* border: 1px solid rgba(155, 155, 155); */
	border-radius: 5px;
	width: 100%;
	max-width: 100%;
	/* box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15); */
	/* border-radius: 4px; */
	position: relative;
	overflow: hidden;
}
.skeleton-table-task-data::before {
	content: '';
	display: block;
	position: absolute;
	left: -150px;
	top: 0;
	height: 100%;
	width: 150px;
	background: linear-gradient(to right, transparent 0%, #e1e1e1 50%, transparent 100%);
	animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.skeleton-task-card {
	/* height: 154px; */
	/* padding: 10px 15px; */
	/* margin-bottom: 20px; */
	background: #f5f5f5;
	border: 0px solid;
	border-radius: 5px;
	/* width: 100%; */
	/* max-width: 400px; */
	/* box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15); */
	/* border-radius: 4px; */
	position: relative;
	overflow: hidden;
}
/* .skeleton-task-card::before {
	content: '';
	display: block;
	position: absolute;
	left: -150px;
	top: 0;
	height: 100%;
	width: 150px;
	background: linear-gradient(to right, transparent 0%, #e1e1e1 50%, transparent 100%);
	animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
} */
.skeleton-task-card-text {
	height: 20px;
	/* padding: 10px 15px; */
	margin-bottom: 10px;
	background: #ededed;
	/* border: 1px solid rgba(155, 155, 155); */
	border-radius: 5px;
	width: 100%;
	max-width: 100%;
	/* box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15); */
	/* border-radius: 4px; */
	position: relative;
	overflow: hidden;
}
div.skeleton-task-card-text {
	height: 20px;
	margin-bottom: 10px;
}
div.skeleton-task-card-text_last_div {
	margin-bottom: 0px;
}
.skeleton-task-card-text::before {
	content: '';
	display: block;
	position: absolute;
	left: -150px;
	top: 0;
	height: 100%;
	width: 150px;
	background: linear-gradient(to right, transparent 0%, #e1e1e1 50%, transparent 100%);
	animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.loader,
.loader:before,
.loader:after {
	background: #929292;
	-webkit-animation: load1 1s infinite ease-in-out;
	animation: load1 1s infinite ease-in-out;
	width: 1em;
	height: 4em;
}
.loader {
	color: #929292;
	text-indent: -9999em;
	/* margin: 88px auto; */
	position: relative;
	font-size: 4px;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
.loader:before,
.loader:after {
	position: absolute;
	top: 0;
	content: '';
}
.loader:before {
	left: -1.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader:after {
	left: 1.5em;
}
@-webkit-keyframes load1 {
	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}
	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}
@keyframes load1 {
	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}
	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}