#agreement-header-editor {
    height: 280px;
}
.modal {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.modal-header {
  background-color: #759bbb;
  padding: 0.5rem 0.75rem;
  cursor: move;
  font-weight: 500;
  border-bottom: 1px solid #ddd;
  min-height: 3rem;
  line-height: 1.9rem;
}
.modal-header .modal-title-info {
  margin-left: 1rem;
}
.modal-header .btnclose {
  float: right;
  color: #aaa;
  width: 1.9rem;
  height: 1.9rem;
}
.modal-header .btnclose:not([disabled]):hover,
.modal-header .btnclose:not([disabled]):active,
.modal-header .btnclose:not([disabled]):focus {
  color: #555;
  background-color: #fff9d0;
  border-color: #e5c365;
}
.modal-header .btnclose[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.modal-header .btn-help {
  float: right;
  color: #999;
  line-height: 1.8rem;
  padding: 0 4px;
  margin-right: 0.2rem;
  border: 1px solid transparent;
}
.modal-header .btn-help:hover {
  background-color: #fff9d0;
  border-color: #e5c365;
}
.modal-footer {
  padding: 0.75rem;
  background-color: #f9f9f9;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.modal-footer .btn {
  min-width: 6rem;
}
.modal-footer .btn + .btn,
.modal-footer .btn + .dropdown,
.modal-footer .dropdown + .btn {
  margin-left: 0.75rem;
}
.modal-footer .btn-help {
  cursor: pointer;
  margin-top: 5px;
}
.modal-footer .btn-help .ico {
  margin-right: 4px;
}
.modal-footer .btn-help:hover {
  text-decoration: none;
}
.modal-footer .btn + .btn-caret {
  min-width: 0;
  margin-left: 0;
}
.modal-body.confirm,
.modal-body.alert,
.modal-body.info {
  margin: 1.5rem 0.75rem;
  display: flex;
}
.modal-body.confirm > .ico,
.modal-body.alert > .ico,
.modal-body.info > .ico {
  font-size: 24px;
  display: inline-block;
  margin: 0 12px;
}
.modal-body.confirm > div,
.modal-body.alert > div,
.modal-body.info > div {
  white-space: pre-wrap;
}
.modal-content.content-iframe {
  display: flex;
}
.modal-content {
  flex-grow: 2;
  overflow: auto;
  position: relative;
}
.modal-content.overflow {
  overflow: visible;
}
.modal-content.overflow .tab-panel {
  overflow: visible;
}
.modal-content.overflow .tab-panel .tab-item {
  overflow: visible;
}
/* BUG-051 follow-up: Safari-only "tab-content collapses / fields sit on a transparent
   background" (bottom of the modal gets cut off). Root cause: the platform's own compiled
   CSS sets .tab-content { max-height: -webkit-fill-available }, a WebKit-only value Chrome
   silently ignores (falling back to max-height: none) but Safari applies - and Safari's
   fill-available computation is well known to misresolve inside a chain of overflow:visible
   ancestors like this Overflow="True" dialog mode, capping tab-content's height instead of
   letting it grow to fit content. Overriding it to max-height: none here matches what Chrome
   already effectively does, fixing Safari without changing Chrome's rendering at all. */
.modal-content.overflow .tab-panel .tab-content {
  max-height: none;
}
.modal-content .tab-panel .tab-header {
  white-space: nowrap;
  overflow-x: auto;
}
.modal-content .dialog-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0;
  grid-gap: 0;
  height: 100%;
}
.button-on-top .modal-content {
  order: 2;
}
.button-on-top .modal-footer {
  order: 1;
  border-bottom: 1px solid #ddd;
  border-top: none;
}
 
/* BUG-051: Safari-only - the platform never sets a z-index on the modal overlay,
   relying on DOM order alone to paint it above page content. Chrome/Firefox keep
   that implicit stacking; Safari does not reliably, once the underlying page has
   its own positioned/transformed elements (e.g. sticky headers, DataGrid rows),
   letting them bleed through/overlap the modal. Forcing an explicit stacking
   context here fixes it in every browser without changing Chrome's behavior. */
.modal-animation-frame {
  z-index: 10000;
}
.modal-animation-frame.show {
  transition: background-color linear 0.1s, backdrop-filter step-end 0.1s;
  background-color: rgba(0, 0, 0, 0.2);
 }
.modal-animation-window:not([maximize]) {
  box-shadow: none;
  backface-visibility: hidden;
  transform: translate(0, -33%);
  opacity: 0;
}
.modal-animation-window:not([maximize]).loaded {
  transition: transform ease 0.1s, box-shadow ease 0.1s, opacity ease 0.1s;
  transform: translate(0, 0);
  opacity: 1;
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}
.modal-animation-window[maximize] {
  box-shadow: none;
  backface-visibility: hidden;
  transform: scale(0.8, 0.8);
  transform-origin: center top;
  opacity: 0;
}
.modal-animation-window[maximize].loaded {
  transition: transform ease 0.1s, box-shadow ease 0.1s, opacity 0.1s ease;
  transform: scale(1, 1);
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  opacity: 1;
}
.modal-header-menu {
  float: right;
  cursor: pointer;
}
.modal-header-menu .modal-menu-link {
  color: black;
  display: inline-block;
  width: 1.9rem;
  height: 1.9rem;
  margin: 0 2px;
  text-align: center;
}
.modal-header-menu .modal-menu-link:hover {
  background-color: #fff9d0;
  border-color: #e5c365;
}

  /* Task list: progress mini bar */
.progress-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.progress-mini-track {
  height: 6px;
  border-radius: 3px;
  width: 50px;
  background: var(--bg-muted, #e8e8e8);
  overflow: hidden;
}
.progress-mini-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--color-info, #42a5f5);
  transition: width 0.3s;
}
.progress-mini-fill.complete {
  background: var(--color-success, #66bb6a);
}

/* Task list: quick state change dropdown */
.quick-state-dropdown {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  padding: 4px 0;
  min-width: 120px;
}
.quick-state-item {
  padding: 4px 12px;
  cursor: pointer;
}
.quick-state-item:hover {
  background: #f5f5f5;
}

/* Task list: clickable status badge */
.status-clickable {
  cursor: pointer;
}

/* Task list: unassigned indicator */
.task-unassigned {
  color: #999;
  font-style: italic;
}
/* Task Chat Panel (inside Taskpad) */
.task-chat-panel .taskpad-body {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.task-chat-input {
	border-top: 1px solid #e0e0e0;
	background: #fafbfc;
	margin-top: auto;
	flex-shrink: 0;
}

.task-chat-input .stack-panel.horizontal {
	align-items: center;
}

/* Chat input row: [📎] [textarea] [send] */
.chat-input-row {
	align-items: flex-end !important;
}

.chat-input-row .control-group {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	width: auto !important;
}

.chat-input-row .control-group textarea {
	width: 100%;
	resize: none;
}

.chat-input-row > .btn,
.chat-input-row > .a2-button {
	flex: 0 0 auto;
}

.chat-input-row > .btn {
	cursor: pointer;
	transition: opacity 0.15s, transform 0.1s;
}

.chat-input-row > .btn:hover {
	opacity: 0.85;
	transform: scale(1.05);
}

/* Message styles */
.chat-message,
.chat-message-own {
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	margin-bottom: 0.5rem;
	box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.chat-message {
	background: #f0f2f5 !important;
	margin-right: 2rem;
}

.chat-message-own {
	background: #e3f2fd !important;
	margin-left: 2rem;
}

/* Grouped messages: reduce gap and add visual connector */
.a2-list-item.chat-message + .a2-list-item.chat-message,
.a2-list-item.chat-message-own + .a2-list-item.chat-message-own {
	margin-top: -0.25rem;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* First message in group: sharpen bottom corners when followed by continuation */
.a2-list-item.chat-message:has(+ .a2-list-item.chat-message),
.a2-list-item.chat-message-own:has(+ .a2-list-item.chat-message-own) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin-bottom: 1px;
}

/* Message row layout: [avatar] [content] */
.chat-msg-row {
	align-items: flex-start;
}

.chat-msg-body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Avatar circle with initials */
.chat-avatar {
	flex: 0 0 1.8rem;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: #7986cb;
	color: white;
	font-size: 0.7rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.1rem;
	line-height: 1;
}

.chat-message-own .chat-avatar {
	background: #42a5f5;
}

/* Quote block */
.chat-quote {
	border-left: 3px solid #1976d2;
	background: rgba(25, 118, 210, 0.08);
	border-radius: 0 4px 4px 0;
	margin-bottom: 0.2rem;
}

.chat-quote-text {
	font-style: italic;
	color: #666;
	font-size: 0.85em;
}

/* Quote preview in input area */
.chat-quote-preview {
	background: #fff3cd;
	border-left: 3px solid #ffc107;
	border-radius: 0 4px 4px 0;
	padding: 0.25rem 0.5rem;
	align-items: center;
}

/* Attachment preview */
.chat-attachment-preview {
	background: #e8f5e9;
	border-left: 3px solid #4caf50;
	border-radius: 0 4px 4px 0;
	padding: 0.25rem 0.5rem;
	align-items: center;
}

/* Date label */
.chat-date {
	font-size: 0.8em;
	color: #999;
}

/* Reply button */
.chat-reply-btn {
	opacity: 0;
	transition: opacity 0.15s;
}

.a2-list-item:hover .chat-reply-btn {
	opacity: 0.6;
}

.chat-reply-btn:hover {
	opacity: 1 !important;
}

/* Chat attachment link */
.chat-attach-link {
	align-items: center;
}

.chat-attach-icon {
	font-size: 0.85em;
	opacity: 0.7;
}

/* Chat file upload - compact icon-only style (override framework defaults) */
.chat-input-row .a2-file-upload {
	flex: 0 0 auto !important;
	align-self: flex-end;
	margin-bottom: 0.3rem;
}

.chat-input-row .a2-file-upload .file-upload {
	border: none !important;
	padding: 0 !important;
	min-height: auto !important;
	height: auto !important;
	background: transparent !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	position: relative;
	color: inherit;
}

.chat-input-row .a2-file-upload .file-upload input {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.chat-input-row .a2-file-upload .upload-tip {
	display: none !important;
}

.chat-input-row .a2-file-upload .ico {
	font-size: 1.4rem !important;
	color: #888;
	position: static !important;
	top: auto !important;
	left: auto !important;
}

.chat-input-row .a2-file-upload .ico::before {
	content: "\e954" !important;
}

.chat-input-row .a2-file-upload .file-upload:hover .ico {
	color: #1976d2;
}

/* Chat messages list scrollable */
.task-chat-panel .a2-list.chat {
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
	flex: 1 1 auto;
}

/* Prevent message text from overflowing */
.chat-message,
.chat-message-own {
	word-break: break-word;
	overflow-wrap: break-word;
	min-width: 0;
}

.chat-message .a2-list-item-content,
.chat-message-own .a2-list-item-content {
	min-width: 0;
	overflow: hidden;
}

/* Cancel task button - outlined danger style */
.modal .btn.btn-danger[test-id="Task_Cancel"] {
	background-color: transparent;
	color: #da533f;
	border: 1px solid #da533f;
}

.modal .btn.btn-danger[test-id="Task_Cancel"]:not([disabled]):hover {
	background-color: #da533f;
	color: white;
}

/* Dialog grid - adjust columns when chat Taskpad is collapsed */
.modal-content .dialog-grid {
	min-height: 0;
}

.modal-content .dialog-grid:has(.taskpad.collapsed) {
	grid-template-columns: 1fr auto !important;
}
/*!
 * Quill Editor v1.3.7
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}
.ql-editor ul > li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}
@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #444;
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
  font-size: 2em;
}
.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
  font-size: 1em;
}
.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}
.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}
.ql-snow .ql-editor a {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 8px;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0px;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: 'Edit';
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: 'Remove';
  margin-left: 8px;
}
.ql-snow .ql-tooltip a {
  line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: 'Save';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow a {
  color: #06c;
}
.ql-container.ql-snow {
  border: 1px solid #ccc;
}
.btn {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
}
.btn:focus {
  outline-offset: -3px;
  outline-color: #bbb;
  outline-style: dotted;
  outline-width: 1px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn > .ico {
  margin-right: 0.2em;
}
.btn.btn-icon > .ico {
  margin-right: 0;
}
.btn:not([disabled]):hover {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.4);
  transition: box-shadow linear 0.2s;
}
.btn:not([disabled]):active {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
  outline-style: none;
  transition: box-shadow linear 0.2s;
}
.btn .btn-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 9px;
  background-color: coral;
  border-radius: 50%;
  padding: 1px;
  min-width: 14px;
  min-height: 14px;
}
.btn.lg {
  padding: 0.85rem 1rem;
  font-size: 1.25rem;
  line-height: 1;
}
.btn.lg .ico {
  font-size: 1.3rem;
}
.btn.sm {
  padding: 0.4rem;
  font-size: 0.95rem;
  line-height: 1;
  min-height: 27px;
}
.btn.sm > .ico {
  font-size: 12px;
}
.btn.xs {
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
  line-height: 1;
}
.btn.xs .ico {
  font-size: 0.85rem;
}
.btn.block + .btn.block {
  margin-top: 6px;
}
.btnclose {
  padding: 0 4px;
  line-height: normal;
  background-color: transparent;
  border: 1px solid transparent;
}
.caret {
  display: inline-block;
  margin: 0 0.25em;
  border: 4px solid transparent;
  vertical-align: middle;
  border-top-color: currentColor;
}
.caret.up {
  border-top-color: transparent;
  border-bottom-color: currentColor;
  vertical-align: 2px;
}
.btn.icon-top {
  display: inline-grid !important;
}
.btn.btn-primary {
  background-color: #3470b4;
  color: white;
}
.btn.btn-primary:active {
  background-color: #2b5c94 !important;
}
.btn.btn-primary:not([disabled]):hover {
  background-color: #2e64a0;
}
.btn.btn-primary[disabled] {
  color: #f5f5f5;
}
.btn.btn-orange,
.btn.btn-warning {
  background-color: #ffb74d;
  color: white;
}
.btn.btn-orange:active,
.btn.btn-warning:active {
  background-color: #ffa624 !important;
}
.btn.btn-orange:not([disabled]):hover,
.btn.btn-warning:not([disabled]):hover {
  background-color: #ffad33;
}
.btn.btn-orange[disabled],
.btn.btn-warning[disabled] {
  color: #f5f5f5;
}
.btn.btn-green,
.btn.btn-success {
  background-color: #5db750;
  color: white;
}
.btn.btn-green:active,
.btn.btn-success:active {
  background-color: #4c9d41 !important;
}
.btn.btn-green:not([disabled]):hover,
.btn.btn-success:not([disabled]):hover {
  background-color: #52a845;
}
.btn.btn-green[disabled],
.btn.btn-success[disabled] {
  color: #f5f5f5;
}
.btn.btn-red,
.btn.btn-danger,
.btn.btn-error {
  background-color: #da533f;
  color: white;
}
.btn.btn-red:active,
.btn.btn-danger:active,
.btn.btn-error:active {
  background-color: #c93c27 !important;
}
.btn.btn-red:not([disabled]):hover,
.btn.btn-danger:not([disabled]):hover,
.btn.btn-error:not([disabled]):hover {
  background-color: #d6402a;
}
.btn.btn-red[disabled],
.btn.btn-danger[disabled],
.btn.btn-error[disabled] {
  color: #f5f5f5;
}
.btn.btn-cyan,
.btn.btn-info {
  background-color: #60bbe5;
  color: white;
}
.btn.btn-cyan:active,
.btn.btn-info:active {
  background-color: #3dacdf !important;
}
.btn.btn-cyan:not([disabled]):hover,
.btn.btn-info:not([disabled]):hover {
  background-color: #4ab2e1;
}
.btn.btn-cyan[disabled],
.btn.btn-info[disabled] {
  color: #f5f5f5;
}
.btn-rounded {
  border-radius: 10rem;
  padding: 0.5rem;
  min-width: 2.6rem;
  min-height: 2.6rem;
}
.btn-outline {
  background-color: transparent;
  border: 1px solid #ddd;
}
.btn-outline:hover {
  border-color: #e5c365;
  background-color: #fdf4bf;
}
.btn-outline:active {
  background-color: #fff29d;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
  border-color: #e5c365;
  outline: none;
}
.btn-outline:focus {
  outline: none;
}
.btn-outline .ico:before {
  color: #777 !important;
}

.btn-tb {
  padding: 5px 6px 6px 6px;
  white-space: nowrap;
  background-color: transparent;
  color: #222;
  min-width: 0;
  min-height: 28px;
  margin: 2px 0;
}
.btn-tb:focus {
  outline: 1px dotted #9dacca;
  outline-offset: -2px;
}
.btn-tb:hover {
  background-color: #fdf4bf;
  border-color: #e5c365;
  outline: none;
}
.btn-tb:active {
  background-color: #fff29d;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
  border-color: #e5c365;
  outline: none;
}
.btn-tb:disabled {
  color: #999;
}
.btn-tb:disabled:hover {
  background-color: transparent;
  border-color: transparent;
}
.btn-tb > i.ico {
  display: inline-block;
  margin-right: 2px;
  color: #333;
}
.control-group .input-group .a2-inline {
  margin-left: 0 !important;
}

.a2-hyperlink.highlight .ico.ico-send:before {
  content: "\e950";
}
.a2-hyperlink.highlight:not([disabled]) .ico:before {
  color: #208cf8 !important;
}
.a2-hyperlink.highlight:not([disabled]) .ico.ico-send:before {
  content: "\e951";
}
.a2-hyperlink.small i.ico {
  font-size: 12px;
}
.a2-hyperlink.large i.ico {
  font-size: 15px;
}.commandbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0;
  overflow: visible;
  background-color: transparent;
  color: #208cf8;
}
.commandbar .btn-cb {
  white-space: nowrap;
  background-color: transparent;
  text-transform: lowercase;
  color: #222;
  min-width: 0;
  padding: 2px 4px 3px 4px;
}
.commandbar .btn-cb:focus {
  outline: 1px dotted #9dacca;
  outline-offset: -2px;
}
.commandbar .btn-cb:hover {
  background-color: #fdf4bf;
  border-color: #e5c365;
  outline: none;
}
.commandbar .btn-cb:active {
  background-color: #fff29d;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
  border-color: #e5c365;
  outline: none;
}
.commandbar .btn-cb:disabled {
  color: #777;
}
.commandbar .btn-cb:disabled:hover {
  background-color: transparent;
  border-color: transparent;
}
.commandbar.visible-active,
.commandbar.visible-hover {
  visibility: hidden;
}
.active .commandbar.visible-active,
.active .commandbar.visible-hover {
  visibility: visible;
}
tr:hover .commandbar.visible-hover {
  visibility: visible;
}
.data-grid td > .commandbar {
  margin: -3px;
}

table.tree-grid .commandbar {
  margin: -3px;
}

.commandbar .btn-cb:hover {
  outline: none;
  background-color: rgba(27, 166, 255, 0.2);
  border-color: #0f8e92;
}
.commandbar .btn-cb:active {
  outline: none;
  background-color: rgba(27, 166, 255, 0.2);
  border-color: #0f8e92;
  box-shadow: none;
}/* Timesheet calendar grid — compact day cells */
.timesheet-grid .data-grid-cell {
	padding: 1px 2px;
}

/* Day column headers: two-line (day-of-week + number) */
.timesheet-grid th > div,
.timesheet-grid th > div > span {
	white-space: pre-line !important;
	text-align: center;
	line-height: 1.2;
}

/* Select wrapper: transparent border (keeps height), centered */
.timesheet-grid .control-group .input-group .select-wrapper {
	border-color: transparent;
	background: transparent;
	min-width: 2.2rem;
}

/* Hide the dropdown caret arrow (high specificity to override framework) */
.timesheet-grid .control-group .input-group .select-wrapper .caret {
	display: none !important;
}

/* Show caret only on hover */
.timesheet-grid .data-grid-cell:hover .control-group .input-group .select-wrapper .caret {
	display: inline-block !important;
}

/* Code text: centered, bold, uppercase */
.timesheet-grid .control-group .input-group .select-wrapper .select-text {
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	flex: 1;
}

/* Remove extra margins from control-group inside grid cells */
.timesheet-grid .control-group {
	margin: 0;
}

/* Cell background colors by time code (Mark) */
.timesheet-grid td.tc-work {
	background-color: #a5d6a7 !important;
}
.timesheet-grid td.tc-trip {
	background-color: #ffe082 !important;
}
.timesheet-grid td.tc-sick {
	background-color: #90caf9 !important;
}
.timesheet-grid td.tc-vacation {
	background-color: #ce93d8 !important;
}
.timesheet-grid td.tc-absent {
	background-color: #ef9a9a !important;
}
.timesheet-grid td.tc-weekend {
	background-color: #e0e0e0 !important;
}
/* Column resize handles for DataGrid */
table.data-grid.resizable > thead > tr > th:not(.fit):not(.marker):not(:last-child) {
    position: relative;
}

table.data-grid.resizable > thead > tr > th:not(.fit):not(.marker):not(:last-child)::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 4px;
    bottom: 4px;
    width: 6px;
    cursor: col-resize;
    z-index: 10;
    border-radius: 3px;
}

table.data-grid.resizable > thead > tr > th:not(.fit):not(.marker):not(:last-child):hover::after,
table.data-grid.resizable > thead > tr > th.col-resizing::after {
    background: rgba(0, 123, 255, 0.3);
}

body.col-resizing,
body.col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}
.modal-content.InlineDialog_cpms {
    overflow: visible;
}

.modal-stack {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.TableRow_cpmsrows.control-group .input-group {
    background-color: transparent;
    border:none;
}

.TableRow_cpmsrowsPrime.control-group .input-group {
    background-color: transparent;
    border: none;
    background-color: #d8ffd880;
}

.data-grid-fetch td {
    padding: 6px 8px !important;
}

.data-grid-fetch th .h-holder {
    padding: 2px 8px !important;
}

.modal-animation-frame.show {
    backdrop-filter: none;
}

.modal-footer .btn-more {
    min-width: auto;
}

.a2-sticky-container {
    overflow: visible;
}

.tab-panel.full-page .tab-content {
    overflow: visible;
}
.DataGrid_overflow {
    overflow: visible;
    overflow-y: inherit;
}

.OverflowX {
    overflow-x: auto;
}

.gantt-container {
    overflow: auto;
    height: 100%;
}

.gantt-header {
    position: sticky;
    top: 37px;
    z-index: 5;
    background: #fff;
}

.a2-graphics + .toolbar,
.grid:has(.gantt-header) > .toolbar {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--background, #fff);
}

.gantt-popover {
    position: absolute;
    z-index: 10;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 10px 14px;
    min-width: 200px;
    max-width: 320px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    pointer-events: auto;
}

.gantt-popover-title {
    font-weight: 600;
    font-size: 13px;
    color: #1565c0;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e0e0e0;
}

.gantt-popover-row {
    padding: 2px 0;
    color: #333;
}

.gantt-popover-label {
    color: #777;
    font-weight: 500;
}

.gantt-popover-progress {
    font-weight: 600;
    color: #2196f3;
}

/* Dependency arrows */
.gantt-dep-arrow {
    stroke: #e57373;
    stroke-width: 1.5;
    fill: none;
    pointer-events: stroke;
    cursor: pointer;
}
.gantt-dep-arrow:hover {
    stroke: #d32f2f;
    stroke-width: 2.5;
}

/* Context menu */
.gantt-context-menu {
    position: absolute;
    z-index: 20;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
    padding: 4px 0;
}
.gantt-context-menu-item {
    padding: 6px 16px;
    cursor: pointer;
    white-space: nowrap;
}
.gantt-context-menu-item:hover {
    background: #e3f2fd;
}
.gantt-context-menu-item.disabled {
    color: #aaa;
    pointer-events: none;
}
.gantt-context-menu-item.danger {
    color: #e53935;
}
.gantt-context-menu-item.danger:hover {
    background: #ffebee;
}
.gantt-context-menu-separator {
    border-top: 1px solid #e0e0e0;
    margin: 4px 0;
}

/* Linking mode */
.gantt-linking rect,
.gantt-linking path {
    cursor: crosshair;
}
.gantt-link-source rect,
.gantt-link-source path {
    stroke: #e53935 !important;
    stroke-width: 2 !important;
    stroke-dasharray: 4 2;
}
.gantt-linking-hint {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: #1565c0;
    color: #fff;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Dependency dialog */
.gantt-dep-dialog {
    position: absolute;
    z-index: 20;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
    min-width: 240px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
}
.gantt-dep-dialog label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: #555;
}
.gantt-dep-dialog select,
.gantt-dep-dialog input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    margin-bottom: 8px;
}
.gantt-dep-dialog .dep-dialog-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
.gantt-dep-dialog button {
    padding: 4px 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    background: #fff;
}
.gantt-dep-dialog button.primary {
    background: #1565c0;
    color: #fff;
    border-color: #1565c0;
}
.gantt-dep-dialog button.primary:hover {
    background: #1256a8;
}
.gantt-dep-dialog button.danger {
    color: #e53935;
    border-color: #e53935;
}
.gantt-dep-dialog button.danger:hover {
    background: #ffebee;
}

/* Dependencies list popup */
.gantt-deps-list {
    position: absolute;
    z-index: 20;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 10px 14px;
    min-width: 280px;
    max-width: 400px;
    max-height: 300px;
    overflow-y: auto;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
}
.gantt-deps-list-title {
    font-weight: 600;
    color: #1565c0;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e0e0e0;
}
.gantt-deps-list-section {
    font-weight: 500;
    color: #777;
    margin-top: 6px;
    margin-bottom: 2px;
}
.gantt-deps-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}
.gantt-deps-list-item:hover {
    background-color: #e3f2fd;
}
.gantt-deps-list-item:last-child {
    border-bottom: none;
}
.gantt-deps-list-item .dep-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gantt-deps-list-item .dep-type {
    color: #1565c0;
    font-weight: 500;
    margin-left: 8px;
    white-space: nowrap;
}
.gantt-deps-list-item .dep-delete {
    color: #e53935;
    cursor: pointer;
    margin-left: 8px;
    font-size: 14px;
}
.gantt-deps-list-item .dep-delete:hover {
    color: #b71c1c;
}

.DataGrid_valign .data-grid-body .data-grid > tbody > tr > td {
    vertical-align: middle;
}

.TableRow_cpmsrows_line.control-group .input-group {
    text-decoration: line-through;
    background-color: transparent;
    border: none;
}

/* Word wrap for text with overlay buttons */
.text-wrap-container {
    position: relative;
}

.text-wrap {
    white-space: normal;
    word-wrap: break-word;
    display: block;
    padding: 2px 6px;
}

/* Truncate text with ellipsis - for long text in grid columns */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em;
    line-height: 1.5em;
}

/* CommandBar overlay on right side */
.cmd-bar-right {
    position: absolute;
    right: 0;
    bottom: 0;
    justify-content: flex-end;
    gap: 16px;
    background: linear-gradient(to right, transparent, white 20%);
    padding-left: 20px;
}


.a2-table td.ctrl {
    vertical-align: middle;
}


.homepage {
    background-image: url("/home.png");
    background-repeat: repeat-x;
    background-position-y: center;
    background-position-x:center;
}

.bigheader {
    font-size: large;
    color: midnightblue;
    position: absolute;
    top: 0;
    background-color: azure;
    border-radius: 15px;
}

.side-bar {
    background-color:azure;
}






/* Kanban base styles moved to kanban.css */

/* Sticky headers for Sheet tables */
.sticky-sheet-container {
    overflow: auto;
    max-height: calc(100vh - 200px);
}

/* Sticky headers for SheetPage */
.sheet-page-wrapper.sticky-sheet-container {
    max-height: calc(100vh - 150px);
}

.sheet-page-wrapper.sticky-sheet-container .sheet-page {
    max-height: none;
}

.sticky-sheet-container table.sheet thead {
    position: sticky;
    top: 0;
    z-index: 7;
}

.sticky-sheet-container table.sheet thead tr {
    background-color: var(--background, white);
}

.sticky-sheet-container table.sheet thead tr.row-header {
    background-color: #e7e7e7;
}

.sticky-sheet-container table.sheet tfoot {
    position: sticky;
    bottom: 0;
    z-index: 7;
}

.sticky-sheet-container table.sheet tfoot tr {
    background-color: var(--background, white);
}

.addr-spacer {
    display: block;
    height: 24px;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px 4px;
  overflow: visible;
  background-color: #cfd6e5;
  color: #555;
  z-index: 8;
}
.toolbar .checkbox {
  margin: 0 6px;
}
.toolbar.no-wrap {
  flex-wrap: nowrap;
}
.toolbar.tb-border-bottom {
  border-bottom: 1px solid #ddd;
}
.toolbar.tb-border-bottom-shadow {
  border-bottom: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.toolbar > .control-group.first-elem label {
  margin-left: 6px;
}
.toolbar.transparent {
  background-color: transparent;
  padding: 2px 2px 2px 0;
}
.toolbar.transparent .btn-tb {
  color: #208cf8;
}
.toolbar.transparent > .divider {
  border-right-color: #e3e7f0;
  background-color: #f7f8fb;
}
.toolbar.transparent .dropdown.show .btn {
  background: white;
  border: 1px dotted #ccc;
}
.toolbar.light {
  background-color: white;
}
.toolbar.light > .divider {
  border-right-color: #ececec;
  background-color: #fcfcfc;
}
.toolbar.light .dropdown.show .btn {
  background: white;
  border: 1px dotted #ccc;
}
.toolbar > .btn,
.toolbar > .dropdown > .btn {
  padding: 4px 6px 5px 6px;
}
.toolbar > .dropdown > .btn-caret {
  border-left-color: #bbc5da;
}
.toolbar .btn-caret {
  background-color: transparent;
}
.toolbar .btn-caret:hover {
  background-color: #fdf4bf;
  border-color: #e5c365;
  outline: none;
}
.toolbar .a2-header {
  margin: 0;
  align-self: baseline;
}
.toolbar > .divider {
  flex-grow: 0;
  display: inline-block;
  width: 2px;
  border-right: 1px solid #e0e4ee;
  align-self: stretch;
  background-color: #9dacca;
  margin: 2px 4px;
}
.toolbar > .control-group {
  display: inline-flex;
  margin: 2px 0;
  align-self: baseline;
  background-color: transparent;
}
.toolbar > .control-group .input-group {
  min-height: 28px;
}
.toolbar > .control-group label {
  align-self: center;
  margin: 0 6px 0 2px;
  font-size: 100%;
  white-space: nowrap;
  line-height: 1;
}
.toolbar .control-group + .control-group {
  margin-left: 6px;
}/* ============================================================================
   Файловий менеджер (#16147) — «архітектурний лист» у синій темі додатка.
   Уся верстка scoped через .fm-* (нічого глобального поза namespace). Кольори —
   з tokens.css (--nav900/800/700, --status-info-bg). Підхоплюється A2v10
   /_shell/appstyles (порядко-незалежно). Без зовнішніх шрифтів: Georgia для
   крупного заголовка, системний monospace для технічних міток.
   ============================================================================ */

/* ── Фікс розкладки для лівого Taskpad. Платформа (tabbed.css) задає
   .page-grid { grid-template-columns: 1fr auto } у розрахунку на taskpad СПРАВА, а для
   taskpad-left лише перекидає grid-column — у підсумку ліва панель потрапляє у широку
   1fr-колонку (≈800px) і праворуч від неї зяє порожнеча, а контент тулиться в auto.
   Закріплюємо колонку панелі під її ширину + minmax(0,1fr) для контенту (без форку платформи).
   Скоупимо через :has(.fm-page) — лише наша сторінка, не покладаючись на «taskpad-left тільки тут». ── */
.page.page-grid.taskpad-left:has(.fm-page) { grid-template-columns: 262px minmax(0, 1fr); }
/* Закріплення панелі: платформа ігнорує Collapsible="False" (клас .collapsible лишається й
   рендерить «‹‹»-хендл). Ховаємо хендл → панель не згортається й не лишає порожню 262px-колонку. */
.page.page-grid.taskpad-left:has(.fm-page) .taskpad-collapse-handle { display: none; }
/* Пейджер: платформа кладе .page-pager у колонку 1 (під сайдбар) для taskpad-left → при першому
   відкритті через меню він налазив на «Дата по» (JS-перенос губився при дорендері пейджера платформою).
   Фіксуємо колонку декларативно — без залежності від JS-таймінгу/ре-рендера. */
.page.page-grid.taskpad-left:has(.fm-page) > .page-pager {
	grid-column: 2; border-top: none; padding-top: 0;
}

/* ── Контентна колонка: flex, щоб ledger займав залишок висоти й скролився всередині.
   Делікатна «міліметрівка» синім, без беж/оранж домінанти. ── */
.fm-page {
	display:flex;
	flex-direction:column;
	height:100%;
	min-height:0;
	padding:14px 20px 0;
	background-color:#f6f8fb;
	background-image:
		linear-gradient(rgba(34,69,108,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(34,69,108,.045) 1px, transparent 1px);
	background-size:26px 26px;
}

/* ── masthead ── */
.fm-masthead {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:24px;
	padding-bottom:12px;
	border-bottom:2px solid var(--nav900,#1a4a7a);
}
.fm-kicker {
	display:flex;
	align-items:center;
	gap:8px;
	font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
	font-size:10.5px;
	letter-spacing:.26em;
	text-transform:uppercase;
	color:#8a94a6;
}
.fm-kicker-sq { width:8px; height:8px; background:var(--nav800,#2573a8); display:inline-block; }
.fm-title {
	margin:6px 0 0;
	font-family:Georgia,'Times New Roman',serif;
	font-weight:600;
	font-size:32px;
	line-height:1;
	letter-spacing:-.01em;
	color:var(--nav900,#1a4a7a);
}
.fm-sub { font-size:12.5px; color:#5b6675; margin-top:8px; }
.fm-tools { display:flex; flex-direction:column; align-items:flex-end; gap:8px; padding-bottom:4px; }


/* ── KPI ── */
.fm-kpi {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	border:1px solid rgba(34,69,108,.2);
	background:#fff;
	margin-bottom:16px;
}
.fm-stat { padding:11px 16px; border-right:1px solid rgba(34,69,108,.1); }
.fm-stat:last-child { border-right:none; }
.fm-stat-v {
	font-family:Georgia,'Times New Roman',serif;
	font-weight:600;
	font-size:28px;
	line-height:1;
	color:var(--nav900,#1a4a7a);
}
.fm-stat-u { font-size:13px; color:#9aa3b0; margin-left:3px; }
.fm-stat-k {
	font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
	font-size:9.5px;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:#9aa3b0;
	margin-top:7px;
}

/* ── ledger (DataGrid). fm-grid сидить на обгортці .data-grid-container, не на <table>. ── */
.fm-page > .fm-grid { flex:1 1 auto; min-height:0; border:1px solid rgba(34,69,108,.2); background:#fff; }

/* Зебра: класи .even є завжди (навіть при no-striped) → фарбуємо через контейнер. */
.fm-grid table.data-grid > tbody > tr.even > td { background-color:var(--status-info-bg,#e3f2fd); }
.fm-grid table.data-grid > tbody > tr:hover > td { background-color:#d6eaf8; }
.fm-grid table.data-grid > tbody > tr > td {
	padding:8px 12px; vertical-align:middle; border-bottom:1px solid rgba(34,69,108,.08);
}
.fm-grid table.data-grid > thead > tr > th {
	background-color:#eef3f9;
	font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
	font-size:9.5px;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:#6b7785;
	border-bottom:1.5px solid rgba(34,69,108,.28);
}

/* Довгі імена файлів — обрізати ellipsis. Клас колонки fm-name-col (DataGridColumn CssClass),
   не :nth-child — не залежить від порядку колонок. */
.fm-grid td.fm-name-col { max-width:380px; }
.fm-grid td.fm-name-col .a2-hyperlink {
	display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis;
	white-space:nowrap; vertical-align:bottom;
}

/* glyph типу файлу: рамка + «загнутий уголок» (dog-ear), колір з $GlyphStyle. */
.fm-glyph {
	display:inline-flex;
	align-items:flex-end;
	justify-content:center;
	width:30px; height:36px;
	border:1.5px solid currentColor;
	border-radius:2px;
	font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
	font-weight:700; font-size:8px; letter-spacing:.02em;
	padding-bottom:3px;
	position:relative;
	background:#fff;
}
.fm-glyph::before {
	content:""; position:absolute; top:0; right:0;
	border-width:6px; border-style:solid;
	border-color:currentColor currentColor transparent transparent;
	opacity:.32;
}

/* назва файлу + вторинний контекст */
.fm-rowmeta {
	font-size:11px;
	color:#9aa3b0;
	margin-top:1px;
	max-width:340px;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* об'єкт системи: крапка + (вид / назва-посилання) */
.fm-objcell { display:flex; align-items:flex-start; gap:8px; }
.fm-dot { width:8px; height:8px; border-radius:50%; flex:none; margin-top:5px; background:#5f6b7a; }
.fm-objkind {
	font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
	color:#8a94a6; line-height:1.4;
}

/* відповідальний: круглий бейдж ініціалів + ім'я */
.fm-resp { display:flex; align-items:center; gap:9px; font-size:13px; color:#3a4350; }
.fm-av {
	width:24px; height:24px; flex:none; border-radius:50%;
	border:1.5px solid var(--nav700,#4a90c2);
	color:var(--nav800,#2573a8);
	display:inline-flex; align-items:center; justify-content:center;
	font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:8.5px; font-weight:700;
}
.fm-size { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:11.5px; color:#5b6675; }

/* ── Сайдбар фільтрів (Page.Taskpad) ── */
.fm-sidebar { display:flex; flex-direction:column; gap:3px; padding:4px 2px; }
.fm-sidebar .selector, .fm-sidebar .date-picker, .fm-sidebar .text-box { margin-bottom:4px; }

.fm-section-title {
	font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
	font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
	color:#9aa3b0; margin:13px 0 4px; padding:0 8px;
	display:flex; align-items:center; gap:8px;
}
.fm-section-title::after { content:""; flex:1; height:1px; background:rgba(34,69,108,.14); }

/* «Всі файли» — крупний пункт-перемикач (активний = темно-синій). Клас fm-cat--all (не :first-child,
   щоб стиль не залежав від порядку елементів у сайдбарі). */
.fm-sidebar .fm-cat--all { padding:9px 10px; }
.fm-sidebar .fm-cat--all .a2-hyperlink { font-weight:600; font-size:15px; }
.fm-sidebar .fm-cat--all.is-active { background:var(--nav900,#1a4a7a); }
.fm-sidebar .fm-cat--all.is-active .a2-hyperlink,
.fm-sidebar .fm-cat--all.is-active .fm-count { color:#fff; }
.fm-sidebar .fm-cat--all.is-active::before { display:none; }

.fm-cat {
	display:flex; align-items:center; gap:8px;
	padding:4px 8px; margin:0; border-radius:3px; cursor:pointer; position:relative;
}
.fm-cat:hover { background:#eef3f9; }
.fm-cat.is-active { background:var(--status-info-bg,#e3f2fd); }
.fm-cat.is-active::before { content:""; position:absolute; left:-2px; top:4px; bottom:4px; width:3px; background:var(--nav800,#2573a8); }
.fm-cat > a { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fm-cat.is-active > a { color:var(--nav900,#1a4a7a); font-weight:600; }

.fm-cat-dot { width:8px; height:8px; flex:none; border-radius:2px; background:#5f6b7a; }
.fm-cat-dot-resp { border-radius:50%; background:#8a94a6; }

.fm-count {
	flex:0 0 auto; min-width:20px; text-align:center;
	font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:11px;
	color:#7a8696; background:rgba(34,69,108,.07); border-radius:9px; padding:0 7px;
}
.fm-cat.is-active .fm-count { color:#fff; background:var(--nav700,#4a90c2); }

/* ── Картковий вид (toggle Список/Картки). Та сама CollectionView (Files) — інший рендер.
   Переиспользует .fm-glyph / .fm-dot / .fm-objkind / .fm-resp / .fm-av зі списку. ── */
.fm-cards {
	flex:1 1 auto; min-height:0; overflow:auto; align-content:start;
	display:grid; grid-template-columns:repeat(auto-fill, minmax(248px, 1fr)); gap:14px;
	padding:2px 2px 6px;
}
.fm-card {
	background:#fff; border:1px solid rgba(34,69,108,.16); border-radius:10px;
	padding:14px; display:flex; flex-direction:column; gap:11px; height:max-content;
	transition:border-color .15s, box-shadow .15s;
}
.fm-card:hover { border-color:var(--nav700,#4a90c2); box-shadow:0 2px 10px rgba(34,69,108,.1); }
.fm-card-top { display:flex; gap:11px; align-items:flex-start; }
.fm-card-top .a2-hyperlink {
	font-weight:500; font-size:14px; color:var(--nav800,#2573a8); line-height:1.3;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fm-card-obj { display:flex; align-items:center; gap:7px; font-size:12.5px; min-width:0; }
.fm-card-obj .fm-dot { margin-top:0; }
.fm-card-obj .fm-objkind { flex:none; }
.fm-card-obj .a2-hyperlink { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--nav800,#2573a8); }
.fm-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid rgba(34,69,108,.1); padding-top:9px; }
.fm-card-foot .fm-resp { min-width:0; }
.fm-card-foot .fm-resp > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fm-card-meta {
	display:flex; flex-direction:column; align-items:flex-end; flex:none; text-align:right;
	font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:10.5px; color:#8a94a6; line-height:1.5;
}/* Task Reports Styles */

.task-report-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    min-height: 100vh;
}

/* Status bar chart */
.status-bar-container {
    display: flex;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0;
}

.status-bar-segment {
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 24px;
}

.bg-info { background: #2196F3; }
.bg-warning { background: #FF9800; }
.bg-success { background: #4CAF50; }
.bg-danger { background: #F44336; }

/* Status dots */
.status-dot.info { background: #2196F3; }
.status-dot.warning { background: #FF9800; }
.status-dot.success { background: #4CAF50; }
.status-dot.danger { background: #F44336; }

/* Priority bars */
.priority-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.priority-bar.critical { background: linear-gradient(90deg, #F44336, #E53935); }
.priority-bar.high { background: linear-gradient(90deg, #FF9800, #FB8C00); }
.priority-bar.normal { background: linear-gradient(90deg, #2196F3, #1E88E5); }
.priority-bar.low { background: linear-gradient(90deg, #9E9E9E, #BDBDBD); }

/* Trend bars */
.trend-bar-group {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 60px;
}

.trend-bar {
    min-width: 16px;
    border-radius: 2px 2px 0 0;
    transition: height 0.5s ease;
}

.trend-bar.created { background: #2196F3; }
.trend-bar.completed { background: #4CAF50; }

/* Overdue badge */
.overdue-badge {
    background: #F44336;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Priority badges for tables */
.priority-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.priority-badge.critical { background: #FFEBEE; color: #C62828; }
.priority-badge.high { background: #FFF3E0; color: #E65100; }
.priority-badge.normal { background: #E3F2FD; color: #1976D2; }
.priority-badge.low { background: #F5F5F5; color: #999; }

/* Workload bars */
.workload-bar-container {
    display: flex;
    height: 24px;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
}

.workload-bar {
    height: 100%;
    transition: width 0.5s ease;
}

.workload-bar.completed { background: #4CAF50; }
.workload-bar.inprogress { background: #FF9800; }
.workload-bar.overdue { background: #F44336; }
.workload-bar.other { background: #BDBDBD; }

/* Overdue deadline in DatePicker */
.date-picker.text-color-danger input {
    color: #a94442;
    font-weight: 600;
}

/* Data table */
.data-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}
/* Proxima Nova web fonts */
@font-face {
  font-family: 'Proxima Nova';
  src: url('/_files/fonts/proxima-nova-regular.woff2') format('woff2'),
       url('/_files/fonts/proxima-nova-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/_files/fonts/proxima-nova-regular-italic.woff2') format('woff2'),
       url('/_files/fonts/proxima-nova-regular-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/_files/fonts/proxima-nova-semibold.woff2') format('woff2'),
       url('/_files/fonts/proxima-nova-semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/_files/fonts/proxima-nova-bold.woff2') format('woff2'),
       url('/_files/fonts/proxima-nova-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Apply Proxima Nova globally */
body, input, button, select, textarea {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Custom navigation colors for blue theme */
:root {
  --nav900: #1a4a7a;
  --nav800: #2573a8;
  --nav700: #4a90c2;
  --nav-bg: #2573a8;
  --nav-icon: #ffffffd0;
  --nav-text: #ffffffe8;
  --nav-line: #ffffff7d;
  --nav-accent: #96c0f3;
  --mdi-menu-bg: #1a4a7a;
  --mdi-menu-text: #ffffffe8;
  --mdi-menu-hover: #2573a8;
  --mdi-menu-light: #ffffffb0;
  --mdi-menu-line: #ffffff7d;

  /* Increased base font size for better readability */
  --fontSize: 15px;
}

/* Wider sidebar navigation panel */
.mdi-navbar {
  min-width: 90px;
}

.mdi-navbar .bar li {
  max-width: 82px;
}

/* Larger font for sidebar menu labels */
.mdi-navbar .bar li .menu-text {
  font-size: 12px;
  line-height: 1.15;
}

/* Larger font for form labels */
.control-group label {
  font-size: 95%;
}

/* Larger font for small text elements */
.small {
  font-size: 0.9em;
}

table.data-grid td.small {
  font-size: 0.9rem;
}

/* PropertyGrid borders for better visibility */
table.prop-grid.grid-both td.prop-name {
  border-right: 1px solid #999;
  padding-right: 10px;
}

table.prop-grid.grid-both td.prop-value {
  padding-left: 10px;
}

/* Real estate contract status stepper */
.rec-status-steps {
  margin-bottom: 1rem;
  text-align: center;
}

.rec-status-steps .tag-label {
  font-size: 0.95rem;
  padding: 0.35rem 0.5rem;
}

/* Darker gray for the ApplicationCancelled status block, distinct from the light-gray inactive blocks */
.tag-label.graydark {
  background-color: #6c6c6c;
}

/* Theme settings color picker */
input.theme-color-picker {
  width: 28px;
  height: 28px;
  padding: 2px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  background: none;
}

input.theme-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
input.theme-color-picker::-webkit-color-swatch { border: none; border-radius: 2px; }
input.theme-color-picker::-moz-color-swatch { border: none; border-radius: 2px; }

/* Home page background image — falls back to /home.png when no theme image is set */
.homepage {
  background-image: var(--home-image-url, url("/home.png"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
}

table.prop-grid.grid-both td {
  border-bottom: 1px solid #ccc;
}

/* Client / PropObject info cards: fixed equal row height, text top-aligned */
.rec-info-card table.prop-grid tr {
  height: 2.5rem;
}

.rec-info-card table.prop-grid td {
  vertical-align: top;
}

/* Real estate contract dialog: spacer after ul.tab-header, before tab-content */
.tab-panel.rec-tabpanel > .tab-header + .tab-content::before {
  content: "";
  display: block;
  height: 1rem;
}

.tab-panel.rec-tabpanel > .tab-content {
  padding: 0.5rem;
  /* Prop Object edit modal (per Kateryna): with no background of its own here,
     the tab content area let the browse grid behind the dialog show through
     around the form controls. An explicit opaque background matches every
     other dialog's tab content, which relies on a background this class never
     supplied. */
  background-color: white;
}

/* Property Object edit: size the overflow-enabled form to all fieldsets,
   instead of constraining it to the dialog's fixed-height grid track. */
.modal-content.overflow .tab-panel.prop-object-edit-tabs {
  height: auto;
  min-height: 100%;
  grid-template-rows: max-content auto;
}

.modal-content.overflow .tab-panel.prop-object-edit-tabs > .tab-content {
  min-height: min-content;
  max-height: none;
}

/* Real estate contract calculator: plain white/black collapsible panels */
.panel.rec-calc-panel > .panel-header {
  background-color: white;
  color: #000;
}

.panel.rec-calc-panel > .panel-header .panel-collapse-handle,
.panel.rec-calc-panel > .panel-header .a2-header {
  color: #000;
}

.panel.rec-calc-panel > .panel-content {
  padding: 0.6rem;
}

/* Real estate contract "Загальне" tab: numbered section headers (01-04), per TASK-016 wireframes */
.rec-general-section {
  margin-bottom: 1.5rem;
}

.rec-general-section > legend {
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 0.35rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #ccc;
  width: 100%;
}

/* Finance Plan-Fact tab: numbers hint they're editable elsewhere (Calculator / Payment history), no in-place edit here */
.rec-fin-clickable {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

/* Real estate contract permalink page: narrow sidebar (Contragent / PropObject cards) + wide content column */
.rec-card-layout {
  column-gap: 1.5rem;
}

.rec-card-sidebar {
  row-gap: 1rem;
  align-content: start;
  align-self: start;
  position: sticky;
  top: 0;
}

/* TASK-022: Calculator tab summary cards - big total figure at the top of each card */
.rec-calc-total {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* TASK-022: Calculator tab - full-width "Сформувати пропозицію оренди" button below the summary cards */
.rec-calc-cta {
  width: 100%;
  margin-top: 0.5rem;
}

/* Finance Plan-Fact tab: summary cards (Object / Rent / Additional payments) above the sub-tabs */
.rec-fin-summary {
  column-gap: 1rem;
  margin-bottom: 1rem;
}

.rec-fin-summary-card .tag-label {
  float: right;
}

table.prop-grid.grid-both tr:last-child td {
  border-bottom: none;
}

/* Read-only info field — dashed border + light background */
.readonly-info textarea,
.readonly-info input[type="text"] {
  background-color: #f5f8fc !important;
  border: 1px dashed #b0c4de !important;
  color: #555 !important;
}

/* Menu customization indent levels */
.menu-indent-1 {
  padding-left: 24px;
}

.menu-indent-2 {
  padding-left: 48px;
}

.menu-indent-3 {
  padding-left: 72px;
}

/* Homepage taskpad - add top padding to prevent overlap with collapse button */
.homepage .taskpad .taskpad-body {
  padding-top: 0.5rem;
}

.homepage .taskpad .taskpad-body h1:first-child {
  margin-top: 0;
  padding-left: 2rem;
}

.mdi-new-version {
  display: none !important;
}

/* Theme image uploader */
.theme-image-upload {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-upload-status {
  font-size: 0.875em;
  color: #555;
  word-break: break-all;
}
/* Kanban board custom styles */

/* ===== Layout: independent lane scrolling ===== */

.kanban {
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%;
}

.kanban .kanban-body {
    flex-grow: 1;
    overflow: hidden;
}

.kanban .lane {
    overflow-y: auto;
    flex-direction: column;
    align-self: stretch;
}

.kanban .kanban-header {
    z-index: 2;
    background: var(--background, #fff);
    flex-shrink: 0;
}

.kanban .kanban-footer {
    z-index: 2;
    background: var(--background, #fff);
    flex-shrink: 0;
}

/* ===== Lane header ===== */

.kanban-lane-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Color-coded lane headers */
.kanban .lane-header:has(.lane-color-info) {
    background: #E3F2FD;
    border-bottom: 2px solid #2196F3;
}

.kanban .lane-header:has(.lane-color-warning) {
    background: #FFF3E0;
    border-bottom: 2px solid #FF9800;
}

.kanban .lane-header:has(.lane-color-success) {
    background: #E8F5E9;
    border-bottom: 2px solid #4CAF50;
}

.kanban .lane-header:has(.lane-color-danger) {
    background: #FFEBEE;
    border-bottom: 2px solid #F44336;
}

.kanban-lane-count {
    font-size: 0.85em;
    color: #999;
    font-weight: normal;
}


/* ===== Card: project line ===== */

.kanban .kanban-card .kanban-card-header {
    padding: 4px 8px 2px;
    border-bottom: none;
}

.kanban-card-project {
    font-size: 0.75em;
    color: #999;
    line-height: 1.3;
}

/* ===== Card content ===== */

.kanban .kanban-card .kanban-card-content {
    padding-top: 2px;
    padding-bottom: 6px;
}

.kanban-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.kanban-card-meta {
    font-size: 0.85em;
    color: #666;
}

/* ===== Card footer indicators ===== */

.kanban .kanban-card .kanban-card-footer {
    padding: 2px 8px 4px;
    border-top: 1px solid var(--neutralBkDarker);
}

/* Hide footer when no visible indicators */
.kanban .kanban-card .kanban-card-footer:not(:has(.kanban-card-footer-bar)) {
    padding: 0;
    border-top: none;
}

.kanban-card-footer-bar {
    display: flex;
    align-items: center;
}

.kanban-card-indicator {
    font-size: 0.8em;
    color: #888;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.kanban-card-indicator .ico {
    font-size: 0.95em;
}

/* Progress >= 90% highlighted green */
.kanban-progress-high {
    color: #2e7d32;
    font-weight: 600;
}

.kanban-progress-high .ico {
    color: #2e7d32;
}

/* Dashboard Animations & Styles */
.dashboard-page {
	background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
	min-height: 100vh;
}

/* Card animations */
.kpi-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	animation: fadeInUp 0.5s ease-out;
	animation-fill-mode: both;
}
.kpi-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}
.kpi-card:nth-child(1) { animation-delay: 0.05s; }
.kpi-card:nth-child(2) { animation-delay: 0.1s; }
.kpi-card:nth-child(3) { animation-delay: 0.15s; }
.kpi-card:nth-child(4) { animation-delay: 0.2s; }
.kpi-card:nth-child(5) { animation-delay: 0.25s; }
.kpi-card:nth-child(6) { animation-delay: 0.3s; }

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Pulse animation for alerts */
.pulse-alert {
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4); }
	70% { box-shadow: 0 0 0 15px rgba(244, 67, 54, 0); }
	100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
}

/* Number counter animation */
.counter-value {
	display: inline-block;
	transition: all 0.3s ease;
}
.counter-value:hover {
	transform: scale(1.1);
}

/* Progress bar */
.progress-bar-container {
	width: 100%;
	height: 8px;
	background: #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
	margin-top: 0.5rem;
}
.progress-bar {
	height: 100%;
	border-radius: 4px;
	transition: width 1s ease-out;
	background: linear-gradient(90deg, #4CAF50, #8BC34A);
}
.progress-bar.warning { background: linear-gradient(90deg, #FF9800, #FFC107); }
.progress-bar.danger { background: linear-gradient(90deg, #F44336, #E91E63); }

/* Panel animations */
.panel-animated {
	animation: fadeIn 0.6s ease-out;
	animation-fill-mode: both;
}
.panel-animated:nth-of-type(1) { animation-delay: 0.35s; }
.panel-animated:nth-of-type(2) { animation-delay: 0.4s; }
.panel-animated:nth-of-type(3) { animation-delay: 0.45s; }

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Risk item animation */
.risk-item {
	transition: background-color 0.2s ease, padding-left 0.2s ease;
	border-left: 3px solid transparent;
}
.risk-item:hover {
	background-color: #fff5f5;
	padding-left: 1.25rem;
	border-left-color: #F44336;
}

/* Finance stat hover */
.finance-stat {
	padding: 1rem;
	border-radius: 8px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.finance-stat:hover {
	background-color: #f5f5f5;
	transform: scale(1.02);
}

/* Table row animation */
.data-grid tbody tr {
	transition: background-color 0.2s ease;
}

/* Status indicator */
.status-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 0.5rem;
	animation: blink 1.5s infinite;
}
.status-dot.green { background-color: #4CAF50; animation: none; }
.status-dot.yellow { background-color: #FF9800; }
.status-dot.red { background-color: #F44336; }

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Sparkline / Mini chart */
.mini-chart {
	display: flex;
	align-items: flex-end;
	height: 30px;
	gap: 2px;
	margin-top: 0.5rem;
}
.mini-chart-bar {
	flex: 1;
	background: linear-gradient(to top, #2196F3, #64B5F6);
	border-radius: 2px 2px 0 0;
	transition: height 0.5s ease;
	min-height: 3px;
}
/* Work Schedule grid styles */
.schedule-grid .data-grid-cell {
	padding: 1px 2px;
}

.schedule-grid .data-grid-cell input[type="text"] {
	text-align: center;
	width: 2.5rem;
	min-width: 2.2rem;
	padding: 0 2px;
	border-color: transparent;
}

.schedule-grid .data-grid-cell:hover input[type="text"] {
	border-color: #ccc;
}

.schedule-grid th > div {
	text-align: center;
}

/* Work day — green */
.sc-work {
	background-color: #a5d6a7;
}

/* Weekend / day off — light pink */
.sc-weekend {
	background-color: #f8d7da;
}

/* Day beyond last day of month — disabled grey */
.sc-disabled {
	background-color: #e9ecef;
}

.sc-disabled input[type="text"] {
	pointer-events: none;
	opacity: 0.4;
}