:root {
	--incoming-color: #444444;
	--incoming-bg-color: #fafafa;
	--approved-color: #448844;
	--approved-color: #448844;
	--approved-bg-color: #ddeedd;
	--deleted-color: #bb9999;
	--deleted-bg-color: #eee7e7;
	--answered-color: #226688;
	--answered-bg-color: var(--info-bg-color);
	--live-color: var(--first-brand-color);
	--live-bg-color: #f2eff1;

	--first-slide-color: var(--first-brand-color);
	--second-slide-color: var(--second-brand-color);

	--icon-approved: "\f058";
	--icon-unapprove: "\f057";
	--icon-deleted: "\f2ed";
	--icon-undelete: "\f82a";
	--icon-present: "\f144";
	--icon-unpresent: "\f28d";
	--icon-answered: "\f11e";
	--icon-unanswered: "\f11e";
	--icon-inbox: "\f658";
}

/* fa-icons */
a.switch::before,
.filters label:before,
table#dataTable div.icons label:before,
table#dataTable tr .moveUp, table#dataTable tr .moveDown ,
.dragHandler:before { font-family: var(--fa-style-family-classic); font-weight: var(--fa-style, 900); display: inline-block; font-size: 0.9em; vertical-align: 0; min-width: 1.5em; text-align: center; margin-right: 0.1em}

/* Forms */
form h3:has( + fieldset.disabled ),
form hr:has( + fieldset.disabled ),
form fieldset.disabled,
form fieldset.disabled + .fieldNote { display: none; } /* Hide disabled items when fieldset is disabled */

fieldset:has( #flatbg_1:checked ) ~ fieldset:has( #firstcolor ) { opacity: 0.3; filter: grayscale(1); pointer-events: none} /* Hide the first color picker when the flat background is checked */

form:not(:has(#field_type option[value="select"]:checked )) fieldset:has( #field_first_option ),
form:not(:has(#field_type option[value="select"]:checked )) fieldset:has( #field_first_option )+ .fieldNote { display: none } /* Hide the first option field when the select type is not selected */

form:has(#field_type option[value="select"]:checked ) fieldset:has( #field_placeholder ),
form:has(#field_type option[value="select"]:checked ) fieldset:has( #field_placeholder )+ .fieldNote,
form:has(#field_type option[value="radio"]:checked ) fieldset:has( #field_placeholder ),
form:has(#field_type option[value="radio"]:checked ) fieldset:has( #field_placeholder )+ .fieldNote,
form:has(#field_type option[value="checkbox"]:checked ) fieldset:has( #field_placeholder ),
form:has(#field_type option[value="checkbox"]:checked ) fieldset:has( #field_placeholder )+ .fieldNote  { display: none } /* Hide placeholder field if it not used */

form div#previewParams { display: block; }
form #previewTextarea { display: block; height: 15em; margin-top: 1.5em; width: 100%; }
form:has( #previewParams ) { padding-top: 0;}
#qaForm { max-width: 600px; box-shadow: -1px var(--box-shadow); border: 1px solid var(--light-color);border-radius: 0.5em;}

/* (from) vertical tablet */
@media screen and (min-width: 768px)
{
	form div.preview fieldset.buttons > * { padding-left: 1.1em; }
	form div.preview table.data td { text-align: center; }
	form div.preview table.data td input { display: inline-block; }
}

form:has(.filters) { padding: 0 }
.filters { text-align: center; display: block;}
.filters * { vertical-align: baseline }
.filters label:first-child { width:auto !important; min-width: inherit !important; }
.filters input { transform: scale(0.85); display: inline; top: 0.1em; z-index: 1; vertical-align: middle; }
.filters label, .filters input { opacity: 0.5; color: var(--text-color); transition: 0.3s; }
.filters input + label { display: inline-block !important ; background: transparent; border: 1px solid transparent; padding: 0.4em; padding-left: 1.5em; margin-left: -1.5em !important; border-radius: 5px; margin: 0.3em; }
.filters input:checked +label, .filters input:checked,
.filters label:hover, .filters input:hover { opacity: 1; color: var(--color); }
.filters input:checked +label { border-color: var(--bg); background-color: var(--bg); }
.filters input:checked, .filters input:hover { background-color: var(--first-brand-color); }

.filters input:checked +label[for*="new"] 		{ --color: var(--incoming-color); --bg: var(--incoming-bg-color); }
.filters input:checked +label[for*="approved"] 	{ --color: var(--approved-color); --bg: var(--approved-bg-color); }
.filters input:checked +label[for*="deleted"] 	{ --color: var(--deleted-color); --bg: var(--deleted-bg-color); }
.filters input:checked +label[for*="answered"]	{ --color: var(--answered-color); --bg: var(--answered-bg-color); }
.filters input:checked +label[for*="live"] 		{ --color: var(--live-color); --bg: var(--live-bg-color); }

section form:has( .filters input[name*="access-new"]:not(:checked) ) ~ .table-container table#dataTable tr.is_none,
section form:has( .filters input[name*="access-approved"]:not(:checked) ) ~ .table-container table#dataTable tr.is_approved,
section form:has( .filters input[name*="access-deleted"]:not(:checked) ) ~ .table-container table#dataTable tr.is_deleted,
section form:has( .filters input[name*="pres-approved"]:not(:checked) ) ~ .table-container table#dataTable tr.is_none,
section form:has( .filters input[name*="pres-live"]:not(:checked) )  ~ .table-container table#dataTable tr.is_live:not(.is_answered),
section form:has( .filters input[name*="pres-answered"]:not(:checked) ) ~ .table-container table#dataTable tr.is_answered:not(.is_live) { display: none  }

table#dataTable.data thead:has( + tbody:not(:has(tr:nth-last-child(n + 1))) ) { display: none; }
table#dataTable.data tbody:not(:has(tr:nth-last-child(n + 1))) { display: table-caption; }
table#dataTable      tbody:before  { min-width: 100%; font-size: smaller; padding: 1em; background: var(--info-bg-color); color:  var(--info-color); border: 1px solid rgba(0,0,0,0.03); border-radius: 3px; display: block; }
table#dataTable.data tbody:before {  display: table-caption; margin: 0.5em 0; }
table#dataTable      tbody:not(:has(tr:nth-last-child(n + 1))):before  { content: attr(data-empty) !important;}
table#dataTable tbody:not(:has( tr:not(.is_answered) ) ):before { content: attr(data-answered); font-weight: bold; }
table#dataTable      tbody:has( tr.is_live):before { display: none }

table#dataTable 	  div.icons > * { color: var(--text-color); opacity: 0.3; }
table#dataTable       div.icons input { display: none; }
table#dataTable.fancy div.icons a,
table#dataTable		  div.icons label { margin: 0 }
table#dataTable       div.icons > *:hover { opacity: 0.7; }
table#dataTable       div.icons input:checked + label { opacity: 1; transform: scale(1.2); }
table#dataTable       div.icons input:checked + label:hover { opacity: 0.8; }

table#dataTable tr { background: #fff; }

table#dataTable.data td[data-system="move"] { white-space: nowrap; }
table#dataTable tr .moveUp,
table#dataTable tr .moveDown { width: 1.5em; display: inline-block; text-indent: 100px; overflow: hidden; height: 1.2em; margin: 0.2em }
table#dataTable tr .moveUp:before,
table#dataTable tr .moveDown:before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: 0; font-size: 1.2em }
table#dataTable.fancy tr .moveUp,
table#dataTable.fancy tr .moveDown { color: var(--approved-color); }
table#dataTable tr:first-child .moveUp,
table#dataTable tr:last-child .moveDown { visibility: hidden; }
table#dataTable.data td[data-type=textarea]  p:not(:empty),
table#dataTable.data td[data-system=comment] p:not(:empty) { min-width: 20em; }
table#dataTable.data td[data-type=textarea] ,
table#dataTable.data td[data-system=comment]  { width: 25%; }
table#dataTable td[data-type=textarea] p,
table#dataTable td[data-system=comment] p {  margin: 0; white-space: pre-line; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
table#dataTable.fancy td[data-type=textarea] p:not(:empty) { -webkit-line-clamp: 7; }
table#dataTable td[data-type=textarea] p:hover,
table#dataTable td[data-system=comment] p:hover { overflow: auto; scrollbar-width: thin; -webkit-line-clamp: 1000 !important; cursor: text; }

table#dataTable.fancy { margin: 2em 0; }
table#dataTable.fancy tr { padding-bottom: 3rem; padding-top: 0.4rem; border: 2px solid var(--light-color); border-radius: 3px; }
table#dataTable.fancy tr td[data-system="id"]       { position: absolute; top: 0; right: 8%; width: auto; text-align: center; background: var(--text-color); color: #fff; padding: 0.5em; font-size: 0.9em; opacity: 0.5; }
table#dataTable.fancy tr td[data-system="actions"]  { position: absolute; bottom: 0.3rem; right: 0; width: 100%; }

table#dataTable.fancy .moveUp::before   { content: "\f060"; }
table#dataTable.fancy .moveDown::before { content: "\f061"; }

table#dataTable.fancy td[data-system="move"] { display: flex; flex-direction: row-reverse; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; padding-right: 1.5em; }
table#dataTable.fancy td[data-system="question"] { margin-top: 1.2em; padding-top: 0.8em; padding: 0.8em 0 1em; order: -1; }
table#dataTable.fancy td[data-system="question"] p 				{ font-size: smaller; height: 10em; color: var(--incoming-color); background: var(--incoming-bg-color); border: 0.8em solid var(--incoming-bg-color); }
table#dataTable		  td[data-system="comment"]  p:not(:empty) 	{ font-size: smaller; padding: 0.5em; background: var(--alert-bg-color); color: var(--alert-color); border: 1px solid rgba(0,0,0,0.02);-webkit-line-clamp: 4; max-height: 5.5em; margin: 0 -0.3em; }
table#dataTable.fancy td[data-system="question"]::before,
table#dataTable.fancy td[data-system="question"]::after {  position: absolute; color: var(--light-color); left: 0.25em; font-size: 5em; width: auto; mix-blend-mode: multiply; pointer-events: none; }
table#dataTable.fancy td[data-system="question"]::before { top: -0.15em; left: 0; content: open-quote; z-index: 1; }
table#dataTable.fancy td[data-system="question"]::after  { bottom: -0.64em; right: 0; left: auto; content: close-quote; }
table#dataTable.fancy td[data-system="comment"]:has( p:empty ), table#dataTable.fancy td[data-system="comment"] p:empty { display: none; }
table#dataTable.fancy td[data-label]:not([data-system]):before { content: attr(data-label) ": "; font-size: 10.5px; opacity: 0.7; font-weight: normal; }

table#dataTable.fancy td[data-system="datetime"] { font-size: smaller; opacity: 0.6; }
table#dataTable.fancy td[data-system="id"] + td { font-weight: bold; }

table#dataTable.data  tr.is_approved { background: var(--approved-bg-color); }
table#dataTable.fancy tr.is_approved { border-color: var(--approved-bg-color); }
table#dataTable.fancy tr.is_approved td[data-system="id"] { background: var(--approved-color); opacity: 1; }
table#dataTable.fancy tr.is_approved td[data-system="question"]::before,
table#dataTable.fancy tr.is_approved td[data-system="question"]::after { color: var(--approved-bg-color);  }
table#dataTable.fancy tr.is_approved td[data-system="question"] p { background: var(--approved-bg-color); color: var(--approved-color); border-color: var(--approved-bg-color); }
table#dataTable tr.is_approved .icons label[for*="approved"] { color: var(--approved-color); }
table#dataTable tr.is_approved .icons label[for*="deleted"]  { visibility: hidden; }

table#dataTable.data  tr.is_deleted { background: var(--deleted-bg-color); }
table#dataTable.fancy tr.is_deleted { border-color: var(--deleted-bg-color); }
table#dataTable.fancy tr.is_deleted td[data-system="id"] { background: var(--deleted-color); opacity: 1; }
table#dataTable.fancy tr.is_deleted td[data-system="question"]::before,
table#dataTable.fancy tr.is_deleted td[data-system="question"]::after { color: var(--deleted-bg-color);  }
table#dataTable.fancy tr.is_deleted td[data-system="question"] p { background: var(--deleted-bg-color); color: var(--deleted-color); border-color: var(--deleted-bg-color); }
table#dataTable tr.is_deleted .icons label[for*="deleted"] { color: var(--deleted-color); }
table#dataTable tr.is_deleted .icons label[for*="approved"],
table#dataTable tr.is_deleted .icons .edit { visibility: hidden; }

table#dataTable.data  tr.is_approved td[data-system="id"],
table#dataTable       tr.is_approved td[data-type="text"]:nth-of-type(1) { color: var(--first-brand-color); font-weight: bold; }

@media screen and (max-width: 767px) {
	table#dataTable.data div.icons a, table#dataTable.data div.icons label { margin: 0.3em; }
}

/* Presenter mode */
#presenter { display: flex; flex-direction: column; align-items: center; background: var(--light-color); width: 100%; justify-content: space-around; padding: 2em; gap: 2vw; margin-bottom: 1.2em; }
#presenter > div { flex: 1; }
#presenter .slide-controls { display: flex; flex-direction: row; align-items: center; width: 100%; justify-content: space-around; flex: 2; }
#presenter .slide-preview { width: 400px; max-width: 100%; }
#presenter .slide-preview iframe { transform: scale(0.6); overflow: hidden; width: 170%; margin: -15% -36%; aspect-ratio: 16/9; }
#presenter .slide-link { margin-right: 1vw; overflow: hidden; }
#presenter .slide-link h3 { margin-bottom: 0; }
#presenter .slide-link p { margin-top: 0; }
#presenter .slide-link p.big {font-weight: bold;}
#presenter .line-break 	{ display: none; }
#presenter .slide-link a { display: block; padding: 0.3em; margin: 0.2em; width: 100%; overflow: hidden; text-overflow: ellipsis;  }
#presenter .nav-slides { display: inline-flex; }
#presenter .nav-slides a { font-size: 3em; text-decoration: none !important; margin: 0 0.2em; color: var(--second-brand-color); opacity: 0.5; }
#presenter .nav-slides a:hover { opacity: 1; color: var(--first-brand-color); }
#presenter label[for="autoCheck"] .on { display: none; }
#presenter .switch:has( #autoCheck:checked )  + label[for="autoCheck"] .on { display: inline; }
#presenter .switch:has( #autoCheck:checked )  + label[for="autoCheck"] .off { display: none; }


/* < 568px, horizontal mobile */
@media(max-width: 567px)
{
	#presenter .slide-controls { display: none; }
	#presenter .slide-link { text-align: center; }
	#presenter .slide-link a { display: inline-block; margin-right: 1em; }
	#presenter .lg-screen { display: none; }
	#presenter .line-break 	{ display: block; }
}


main section.presenter table.data tr:first-child a.moveUp,
main section.presenter table.data tr:last-child a.moveDown { pointer-events: none; }

main section.presenter table#dataTable div.icons input:checked + label { transform: scale(1); top: 0; }
main section.presenter table#dataTable div.icons input:checked + label[for*="live"]	{ transform: scale(1.8); }

main section.presenter table#dataTable tr.is_answered .icons label[for*="answered"] { color: var(--answered-color) ;}
main section.presenter table#dataTable tr.is_answered .icons label[for*="approved"] { visibility: hidden; }

main section.presenter table#dataTable.fancy tr { border-color: var(--approved-bg-color); }
main section.presenter table#dataTable.fancy tr td[data-system="id"] { background: var(--approved-color); opacity: 1; }
main section.presenter table#dataTable.fancy tr td[data-system="question"]::before,
main section.presenter table#dataTable.fancy tr td[data-system="question"]::after { color: var(--approved-bg-color); }
main section.presenter table#dataTable.fancy tr td[data-system="question"] p { background: var(--approved-bg-color); color: var(--approved-color); border-color: var(--approved-bg-color); }
main section.presenter table#dataTable tr .icons label[for*="approved"] { color: var(--approved-color); }

main table#dataTable.fancy tr.is_live { border-color: var(--live-color) !important; }
main table#dataTable.fancy tr.is_live td[data-system="id"]  { background: var(--live-color) !important; }
main table#dataTable tr .icons label[for*="live"] { transform: scale(1.5); margin-right: 1.5em; }
main table#dataTable tr .icons label[for*="live"]:hover { color: var(--live-color); }
main table#dataTable tr.is_live .icons label[for*="live"] { color: var(--live-color); }
main table#dataTable tr.is_live td[data-system="move"] a,
main table#dataTable tr.is_live .icons label[for*="approved"],
main table#dataTable tr.is_live .icons .edit { visibility: hidden; }
main table.data tr.is_live { background: var(--td-bg-color-hover); }


/* (from) horizontal tablet / PC */
@media screen and (min-width: 1024px)
{
	#presenter { flex-direction: row; }
}

/* Slideshow mode */
.slideshow #topbar { display: none; }

.slideshow { display: flex; flex-direction: column; align-items: stretch; align-content: center; justify-content: center; background: var(--second-slide-color); min-height: 100vh; margin: 0; padding: 3vw; }
.slideshow:not(.flatbg):after {  height: auto; top:0; left: 0; bottom: 0; right: 0; z-index: -1; background: linear-gradient(45deg, var(--first-slide-color) 0%, var(--second-slide-color) 100%); }
.slideshow:not(.flatbg):before { position: absolute; content: "";top:0; left: 0; bottom: 0; right: 0; z-index: 0; background: rgba(0,0,0,0.3); }
.slideshow.flatbg:after { display: none; }

.slideshow main { min-height: 75vh; }
.slideshow .content { display: flex; flex-direction: column; align-items: stretch; align-content: stretch; justify-content: center; font-size: 36px; padding: 4vw; border-radius: 1vw; font-size: calc(12px + 1.2vw); overflow-y: auto; box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.3); flex: 1; background: rgba(255,255,255,0.95); }
.slideshow .content > div { margin: 0.2em 0 0; }
.slideshow .field_id, .slideshow #field_approved { display: none; }
.slideshow .field_id + div:not([data-system="question"]) { font-weight: bold; color: var(--first-slide-color); opacity: 1; }
.slideshow div[data-system="question"] { order: -1; margin-bottom: 0.5em; font-size: calc(14px + 2.1vw); }
.slideshow div[data-type="text"], .slideshow div[data-type="email"] { opacity: 0.8; border-left: 0.5em solid var(--light-color); padding: 0.1em 0.1em 0.1em 0.5em; margin: 0; }
.slideshow div[data-system="comment"]:not(:empty) { font-size: 0.8em; background: var(--alert-bg-color); color: var(--alert-color); border: 1px solid rgba(0,0,0,0.02); padding: 0.6em; margin-top: 0.6em; }
.slideshow div[data-system="comment"]:not(:empty):before { content: "Moderator comment: "; font-weight: bold; }
.slideshow div[data-system="datetime"] { font-size: 0.6em; position: absolute; bottom: 0.5em; right: 0.5em; }

.slideshow footer { display: flex; flex-direction: row; justify-content: space-between; align-content: center; color: #fff; font-size: 1.2em; padding-top: 0.5em; }
.slideshow footer a { color: var(--second-slide-color); filter: brightness(100); font-size: 1.4em; }

/* Slideshow for custom querystrings */
.slideshow.nofullscreen a.fa-maximize,
.slideshow.nocomments div[data-system="comment"]  { display: none; }
.slideshow.flatbg:after { background: var(--second-slide-color); }
.slideshow.showlabels div[data-label]:not([data-system]):before { content: attr(data-label) ": "; font-size: 0.5em; opacity: 0.7; font-weight: normal; color: var(--text-color); }


/* Section: import CSV */
#csvEdit select + input { margin-left: 8px; }
#csvWrap { background-color: #FFF; margin: 4px -8px; padding: 8px; }
#csvWrap .csvResize { resize: vertical; max-height: 400px; overflow: auto; }
#csvWrap .csvError { font-weight: normal; color: blue; display: block; margin-top: 2px; }
#csvWrap .csvError.lock { color: red; }
#csvWrap #csvTable { margin-bottom: 0; }
#csvWrap #csvTable .strike { text-decoration: line-through; opacity: 0.5; }
@media screen and (max-width: 767px)
{
	#csvWrap .csvResize { max-height: fit-content; }
}


/* icons */

main > .navigation a.nav-back:before { content: "\f060"; }

main > .navigation ol > li.nav-modules > a::before    { content: "\f00b"; }
main > .navigation ol > li.nav-module > a::before    { content: "\f00b"; }
main > .navigation ol > li.nav-fields > a::before    { content: "\f46d"; }
main > .navigation ol > li.nav-dataset > a::before   { content: "\f0fe"; }
main > .navigation ol > li.nav-questions > a::before { content: "\51";   }
main > .navigation ol > li.nav-settings > a::before  { content: "\f013";   }

main > .navigation ol > li.submenu > ol > li.nav-inbox     > a::before { content: var(--icon-inbox);   }
main > .navigation ol > li.submenu > ol > li.nav-presenter > a::before { content: var(--icon-present);   }
main > .navigation ol > li.submenu > ol > li.nav-slideshow > a::before { content: "\f08e";   }

main > .navigation ol > li.nav-ecousers  > a:before { content: "\f007"; }
main > .navigation ol > li.nav-ecouser   > a:before { content: "\f007"; }
main > .navigation ol > li.nav-whitelist > a:before { content: "\e541"; }
main > .navigation ol > li.nav-blacklist > a:before { content: "\e540"; }

main .navigation ol > li > a > span.red { color: #f55 }

a.switch::before { content: "\f121";  }

.filters label[for*="new"]:before 		{ content: var(--icon-inbox) }
.filters label[for*="approved"]:before 	{ content: var(--icon-approved) }
.filters label[for*="deleted"]:before 	{ content: var(--icon-deleted) }
.filters label[for*="all"]:before 		{ content: var(--icon-approved) }
.filters label[for*="answered"]:before 	{ content: var(--icon-answered) }
.filters label[for*="live"]:before 		{ content: var(--icon-present) }

table#dataTable .icons label[for*="approved"]:before 	{ content: var(--icon-approved) }
table#dataTable .icons label[for*="deleted"]:before 	{ content: var(--icon-deleted) }
table#dataTable .icons label[for*="live"]:before 		{ content: var(--icon-present) }
table#dataTable .icons label[for*="answered"]:before 	{ content: var(--icon-answered) }

table#dataTable .icons input:checked + label:hover:before 	{ opacity: 0.3  }
table#dataTable .icons input:checked + label[for*="approved"]:hover:before 	{ content: var(--icon-unapprove); color: var(--incoming-color); }
table#dataTable .icons input:checked + label[for*="deleted"]:hover:before 	{ content: var(--icon-undelete); color: var(--incoming-color);  }
table#dataTable .icons input:checked + label[for*="live"]:hover:before 		{ content: var(--icon-unpresent); color: var(--incoming-color);  }
table#dataTable .icons input:checked + label[for*="answered"]:hover:before 	{ content: var(--icon-unanswered); color: var(--incoming-color);  }

.event-resume .col .qa-inbox:before { content: var(--icon-inbox);}
.event-resume .col .qa-approved:before { content: var(--icon-approved); }
.event-resume .col .qa-answered:before { content: var(--icon-answered); }


/* Drag'n'drop */
.dragHandler { cursor: grab; overflow: hidden; white-space: nowrap; width: 1.8em !important}
.dragHandler:before { content: "\f047"; visibility: hidden; animation: fade_in_show 1s; transition: 0.1s; padding: 0.5em 0; box-shadow: var(--box-shadow); }
table.data 	.dragHandler { width: 1px; }
table.data  .dragHandler:before { display: inline-block; margin-right: 0.3em}
table.fancy .dragHandler:before { width: 100%; height: 100%; position: absolute; top: 0; left: 0;  }
table.fancy tr:hover .dragHandler { text-indent: 100px;  }

tr:hover .dragHandler:before { visibility: visible; opacity: 0.8; text-indent: 0 }
tr .dragHandler:hover:before { opacity: 1; color: var(--alert-bg-color); background: var(--alert-color); }

.dragging { opacity: 0.5; }

.dragTarget { opacity: 0.5; border-style: dashed !important; border-color: var(--alert-color) !important}
table.fancy .dragTarget * 	{ pointer-events: none; }
table.data  .dragTarget:after { position: absolute; content:""; width: 100%; height: 100%; border: 1px dashed var(--alert-color); top: 0; left: 0 }

.dragTarget div.icons label, .dragTarget div.icons a, .dragTarget .moveUp, .dragTarget .moveDown { opacity: 0 !important; filter: grayscale(1) }

.dragTarget.dragHere { background-color: var(--alert-bg-color) !important; border-style: dashed !important; border-color: var(--alert-color) !important }
.dragTarget.dragHere * { visibility: hidden !important; transition: 0 !important }
table.data  .dragTarget.dragHere:after { background-color: var(--alert-bg-color)  }

#toggleExtraSettings { margin-left: 1em; }