/**
  Worse (is better): Wiki's Overdue Rather Simple Editor
  Written by (c) Petko Yotov 2017    www.pmwiki.org/petko

  This text is written for PmWiki; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published
  by the Free Software Foundation; either version 3 of the License, or
  (at your option) any later version. See pmwiki.php for full details
  and lack of warranty.
*/

trix-editor {
  border: 2px solid var(--link-color);
  max-height: 70vh;
  overflow: auto;
  padding: .7rem 5px 5px 5px !important;
  position: relative;
}
trix-editor:not(.autogrow) {
  height: 600px;
}
.worse-pagetitle[contenteditable=true], #worsetitle {
  border: 2px solid  var(--link-color);
  border-radius: 3px;
  padding: 1px 2px;
}

.trix-content {
  padding-top: .7rem;
}

.trix-content h1{
  font-weight: bold;
}
.trix-dialog select {
  border: none;
  width: 75%;
  background-color: transparent;
}
.trix-dialog b {
  font-size: 1.2em;
  background-color: var(--ddd);
}

#videoadd { width: 5em; }
#videourl { width: calc( 98% - 5em ); }
#videourl:invalid { background-color: #fcc; }

.trix-button--icon-contacts::before {
  background-image: url(fontawesome-user-friends-solid.svg);
  background-size: 24px !important;
}


trix-toolbar .trix-dialogs .trix-dialog.link_dialog .link_url_fields input[type="text"] {
    flex: 1;
}

#worseform {
  padding: 4px;
}

div.pmsave {
  margin: .4em 0;

}
div.pmsave, div.pmsave * {
  box-sizing: border-box;
}
div.pmsave input, #worseparentselect {
  border: 1px solid;
  border-color: var(--ccc) #888 #888 var(--ccc);
  background-color: transparent;
  padding: 4px 12px;
  border-radius: 3px;
  height: 2em;
}

div.pmsave input[type=text] {
  padding: 4px;
  border-color: #888 var(--ccc) var(--ccc) #888;
}

div.pmsave span * {
  white-space: nowrap;
}

div.pmsave {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

div.pmsave input, div.pmsave label {
  cursor: pointer;
  vertical-align: middle;
}


#wdraft:checked + label {
  font-weight: bold;
  color: red;
}



.trix-content figure.attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 0;
    padding: 0.4em 2em .4em 1em;
    border: 1px solid var(--ccc);
    border-radius: 5px;
/*     width: 30em; */
    max-width: 100%;
    background-image: url(icon-figattachfile.svg);
    background-position: 99% 99%;
    background-repeat: no-repeat;
    background-size: 24px 24px;

}
.trix-content figure.attachment--content {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 0;
  padding: 0;
  border: 1px solid var(--ccc);
  border-radius: 5px;
/*   width: 320px; */
}


.prevideoframe {
  width: 320px;
  height: 180px;
  
  background-image: url(video-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  border-radius: 6px;
  
  text-align: center;
  line-height: 180px;
  font-size: 5em;
  color: white;
  text-shadow: 2px 2px 8px #000;
  position: relative;
}
figure a.vlink {
  position: relative;
  float: right;
  margin: 2px 1px 0 0;
  z-index: 2;
  color: blue;
  background-color: white;
  border-top-right-radius: 3px;
}

.worse-content figure video { max-width: 100%; }

/*.trix-content .attachment figcaption {
  display: inline;
}*/

.trix-content img + figcaption {
/*   display: none; */
}
.worse-content img {
  display: block;
  margin: 0 auto;
}

.trix-content a[data-trix-content-type^="image"] {
    display: table;
    text-align: center;
    clear: left;
/*     margin: 0 auto; */
    padding: 2px;
}

#page_container article .h2, #page_container article .h3,
#page_container article h2, #page_container article h3,
.trix-content h2, .trix-content h3 {
  color:  var(--heading-color);
  background-color: var(--eee);
  padding: 1px 4px;
}
#page_container article .h3,
#page_container article h3,
.trix-content h3 {
  font-weight: normal;
  color: var(--text-color);
}

#page_container article .h2,
#page_container article .h3 {
  font-weight: bold;
  margin-bottom: .2em;
  display: block;
}

#worseform.saving, .worse-pagetitle.saving {
  cursor: wait;
  opacity: 50%;
}

#worseform.saving trix-editor, .worse-pagetitle.saving {
  border-color: var(--ccc);
}

.trix-content h2 em:only-child {
/*   display: block; */
/*   text-align: center; */
}



.trix-content blockquote {
  margin: 0;
  padding: 0;
  border-left: none;
}
.trix-content pre {
    display: block;
    vertical-align: top;
    font-family: inherit;
    font-size: 1em;
    margin: 0;
    padding: 0;
    white-space: inherit;
    background-color: inherit;
    overflow-x: auto;
}

.trix-content del {
  text-decoration: none;
}

.trix-button--icon-code, .trix-button--icon-quote, .trix-button--icon-strike {
  display: none;
}
.trix-dialog--attach {
    max-width: 600px;
}


.trix-content drt-tel a {
  color: inherit;
}
/*.drt-bleep, 
.trix-content drt-bleep, #wikidiff drt-bleep {
  white-space: pre;
  font-family: inherit;
  font-weight: bold;
  background-position: right 3px bottom 50%;
  background-repeat: no-repeat;
  background-image: url(icon-bleep.svg);
  color: var(--orangered);
  padding: 2px 16px 2px 2px;
}*/

.trix-button--icon-bleep::before {
  background-image: url(icon-bleep.svg);
  background-size: 40% !important;
}
.trix-button--icon-tel {
  font-size: 1.2em !important;
}

.trix-content .attachment__caption {
  white-space: pre;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}


.trix-content .attachment--preview {
  margin: 0.4em 0;
}
#appsave, #appcancel {
  border: 1px solid;
  border-color: var(--ccc) #888 #888 var(--ccc);
  background-color: transparent;
  padding: 4px 12px;
  border-radius: 3px;
  height: 2em;
  color: red;
  margin: 4px 0 4px 4px;
}

div.appactions {color: red;}



div.worse-main-links a[href$="HomePage"] {
  background-color: var(--eee);
  font-weight: bold;
  display: block;
}


@media screen and (max-width:49em) {

  div.pmsave > span { display: block; margin: 4px 1px; }
  div.pmsave { display: block; }

}

.worse-content iframe {
/*   margin: 0 auto; */
}
iframe.ytframe {
  display: block;
}
iframe.ytframe, iframe.ytframe ~ a.closevideo {
  margin: .5em auto; /* ytframe */
/*   text-align: center; */
}
iframe.ytframe ~ a.closevideo + a {display: none !important; }
iframe.ytframe ~ a.closevideo + figure {display: none !important; }


div.collapsible {
  position: relative;
  overflow: hidden;
  z-index:1;
}

p.readmore {
  float:right;
/*   z-index:2; */
  background-image: url(icon-readmore.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat, no-repeat;
  width:32px;
  margin-top: -45px;
  cursor: pointer;
}

div.collapsible p.readmore {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:2;
  background-image: url(icon-readmore.svg), linear-gradient(rgba(255, 255,255,0), rgba(255, 255,255,1));
  background-position: 50% 100%, center;
  background-repeat: no-repeat, no-repeat;
  width: 100%;
  margin: 0;
}




.embeddoc {
  margin-top: .4em;
}

.embeddoc var {
  color: #888;
}


trix-editor a {
  position: relative;
}



#worseform #deletepageform-toggle {
  color: red;
  width: 8em;
  margin: 0 0 0 auto;
  text-align: right;
/*   border: 1px dotted red; */
}

.trix-button-group--file-tools {
  display: none !important;
}


.worse-content summary { 
  cursor: pointer; 
  color: var(--heading-color); 
  background-color: var(--eee); 
  margin-top: 15px;
  margin-bottom: 9px; 
  position: relative;
  text-indent: -1rem;
  padding-left: 1em;
  width: auto;
}

.worse-content details > details > summary {
  color: var(--text-color);
}

.trix-content summary > h2, .trix-content summary > h3 { 
  display: inline;  
  padding-left: 0px;
}

.worse-content details summary + div, .worse-content details summary + ul, details[open] + details,
trix-editor.trix-content h2 + *, trix-editor.trix-content h3 + *, 
trix-editor.trix-content * + h3, trix-editor.trix-content * + h2 {
  margin-top: 1em;
}

.worse-content div.details h2, .worse-content div.details h3 {
  margin: 1rem 0;
}

.worse-content ol.drt-form > li {
/*   border: 1px inset #888; */
  padding: .5em;
  margin-bottom: 1em;
} 

.worse-content ol.drt-form > li > ul:before {
  display: block;
  font-style: italic;
  color: #888;
  content: "Select one answer.";
}

.worse-content ol.drt-form > li > ol:before {
  display: block;
  font-style: italic;
  color: #888;
  content: "Check all that apply.";
}

.worse-content ol.drt-form textarea {
  display: block;
  width: 100%;
  min-height: 2em;
  border-width: 2px;
  border-color: #888 var(--ccc) var(--ccc) #888;
  border-radius: 5px;
  padding: 4px;
  
}

.worse-content ol.drt-form > li > ol, 
.worse-content ol.drt-form > li > ul {
  list-style-type: none;
}

.worse-content ol.drt-form > li > ol > li, 
.worse-content ol.drt-form > li > ul > li {
  list-style-type: none;
  margin-left: 0;
}

.worse-content ol.drt-form textarea:focus {
  border: 2px solid  var(--link-color);
}

.worse-content ol.drt-form input:checked + label {
  font-weight: bold;
}


.worse-content ol.drt-form + input {
  border: 1px solid;
  border-color: var(--ccc) #888 #888 var(--ccc);
  background-color: transparent;
  padding: 4px 12px;
  border-radius: 3px;
  height: 2em;
  cursor: pointer;
}
 
.worse-content ol.drt-form + input:hover {
  background-color:#ffd;
}

.childrenlist, .siblingslist {
/*   border-top: 1px dashed var(--ddd); */
  margin-top: 1em;
/*   padding-top: 1em; */
}
.childrenlist p, .siblingslist p {
/*   font-weight: bold; */
  line-height: 1.5;
}
.childrenlist ul, .siblingslist ul {
  margin:0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: 8px;
}



.childrenlist ul li, .siblingslist ul li {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  width: 100%;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.childrenlist ul li a, .siblingslist ul li a {
  padding: 0 4px;
  border: 1px solid var(--link-color);
  border-radius: 5px;
  background-color: var(--theme-bgcolor-light);
  white-space: pre;
  text-overflow: ellipsis;
  line-height: 1cm;
  
/*   margin-bottom: 8px; */
  
  overflow: hidden;
  display: inline-block;
  width: 100%;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.childrenlist > p:first-child {
  color:  var(--link-color);
  background-color: var(--eee);
  font-size: 1.3rem;
  padding: 0 .4em;
  margin: .4em 0;
}

#worsetitle {
  font-size: 1.3em;
  width: calc(100% - 3em);
  padding: 5px;
  margin-bottom: 1em;
/*   display: block; */
}
#worsetitle ~ trix-content {
/*   margin-top: 1em; */
}

#worsecolor {
  color: var(--link-color);
  width: 2.5em;
  text-overflow: clip;
  overflow: hidden;
  border: 1px solid var(--link-color);
  background-color: var(--theme-bgcolor-light);
}

.childrenlist.selectbgcolor {
  display: inline-block;
  position: relative;
  z-index: 2;
}

.selectbgcolor ul {
  display: none;
  position: absolute;
  right: 0;  
  padding: .5em;
  background-color: white;
  box-shadow: 0px 4px 8px #ccc;
}

.selectbgcolor:hover ul {
  display: block;
}
.worsecolorlabel {
  font-size: 90%;
  white-space: pre;
}
body[data-name="HomePage"] .selectbgcolor {
  display: none;
}

body.appmockup .childrenlist li.bg-pastelgreen a,
.childrenlist li.bg-pastelgreen a,
#worsecolor[data-bg="pastelgreen"] { 
  background-color: #b4d3b2; 
}

body.appmockup .childrenlist li.bg-fuchsia a,
.childrenlist li.bg-fuchsia a,
#worsecolor[data-bg="fuchsia"] { 
  background-color: #df88b7; 
}

body.appmockup .childrenlist li.bg-turquoise a,
.childrenlist li.bg-turquoise a,
#worsecolor[data-bg="turquoise"] { 
  background-color: #71dbd4; 
}

body.appmockup .childrenlist li.bg-purple a,
.childrenlist li.bg-purple a,
#worsecolor[data-bg="purple"] { 
  background-color:#b09fca ; 
}

body.appmockup .childrenlist li.bg-nhsblue a,
.childrenlist li.bg-nhsblue a,
#worsecolor[data-bg="nhsblue"] { 
  background-color: #005EB8; 
  color: white;
}

body.appmockup .childrenlist li.bg-lavender a,
.childrenlist li.bg-lavender a,
#worsecolor[data-bg="lavender"] { background-color: #ecf; }


body.appmockup .childrenlist li.bg-blue a,
.childrenlist li.bg-blue a,
#worsecolor[data-bg="blue"] { background-color: #9df; }
body.appmockup .childrenlist li.bg-green a,
.childrenlist li.bg-green a,
#worsecolor[data-bg="green"] { background-color: #cfc; }
body.appmockup .childrenlist li.bg-red a,
.childrenlist li.bg-red a,
#worsecolor[data-bg="red"] { background-color: #fcc; }
body.appmockup .childrenlist li.bg-orange a,
.childrenlist li.bg-orange a,
#worsecolor[data-bg="orange"] { background-color: #fda; }
body.appmockup .childrenlist li.bg-yellow a,
.childrenlist li.bg-yellow a,
#worsecolor[data-bg="yellow"] { background-color: #ffa; }

.childrenlist li.bg-grey a { background-color: #eee; }
.childrenlist li.bg-grey { display:none; }
.childrenlist li.bg-default ~ li.bg-grey { display:block; }


.wikivisualedit figure.attachment--preview > a:not([href^="https://youtu.be"]):not([href^="https://vimeo.com"]):not([href*="/map--"][href*="/dr-toolbox/uploads/"]) + div.attachment__toolbar::before,
.wikivisualedit figure.attachment--file div.attachment__toolbar::before {
  content: "uploading, cannot edit";
  color: #800;
  display: block;
  position: absolute;
  left: calc(50% + 12px);
  top: -9px;
  padding: 4px 4px 0 4px;
  background-color: rgba(255,255,255,.7);
  font-weight: bold;
}


.wikivisualedit figure.attachment--file > a + div.attachment__toolbar::before {
  color: highlight;
  content: "double-click caption to edit";
}

.wikivisualedit figure.attachment--preview > a:not([href^="https://youtu.be"]):not([href^="https://vimeo.com"]):not([href*="/map--"][href*="/dr-toolbox/uploads/"]) + div.attachment__toolbar::before {
  color: highlight;
  content: "double-click to edit URL";
}



#modal { 
  display: none;
  background-color: rgba(0,0,0,.4);
  position: fixed !important;
  top:0;
  bottom:0;
  width:100%;
  overflow: hidden;
  z-index:1500;
}

#modalcontent { 
  background-color: white;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  max-height: 90vh;
  overflow: auto;
  padding: .5em;
/*  text-align: center;*/
  border-radius: 10px; 
}

#modalcontent input { max-width: 99%; }
#okcaption, #cancelcaption { width: 48%; }
#modalcontent .modalbuttons {
  display:flex;
  justify-content: space-between;
  margin-top:1ex;
}

input[name^="WorseCollapse"] { vertical-align: middle; }

.worse-content:not(.forum) h3[id]:hover::before,
.worse-content:not(.forum) h2[id]:hover::before {
  content: '#' attr(id);
  display: block;
  position: absolute;
  top: -1em;
  font-size: 1rem;
  color: #888;
}

.viseditquickref {
  border: 1px dashed  var(--link-color);
  border-radius: 3px;
}

.trix-content ul .attachment--preview, .trix-content ol .attachment--preview {
    width: auto;
}

.trix-content table td, .trix-content table th {
  vertical-align: top;
}

.worse-content .attachment--file.attachment--mp4 {
  width: 100%;
  border: none;
  background-image: none;
  padding: 0;
}

.worse-content .attachment--file.attachment--mp4 video {
  border: 1px solid var(--ccc);
}

a[data-embed-provider] img {
  border: 1px solid var(--ccc);
}


figure a[href^="https://youtu.be/"],
figure a[href^="https://www.ted.com/"],
figure a[href^="https://vimeo.com/"],
a[data-embed-provider] {
  position: relative;
  display: inline-block;
}

figure a[href^="https://youtu.be/"]::before,
figure a[href^="https://www.ted.com/"]::before,
figure a[href^="https://vimeo.com/"]::before,
a[data-embed-provider]::before {
  content: "▷";
  display: block;
  position: absolute;
  line-height: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6em;
  color: white;
  text-shadow: 2px 2px 8px #000;
}

/*a[data-embed-provider$="Calendar"]::before {
  content: "👀";
}*/

a[data-embed-provider]::after {
  content: attr(data-embed-provider);
  display: block;
  position: absolute;
  line-height: 1;
  top: 14px;
  right: 8px;
  color: white;
  background-color: rgba(0,0,0,.5);
  padding: 5px;
  border-radius: 5px;
}


a[data-embed-provider$="Calendar"]::before {
  content: "";
}

a[data-embed-provider$="Calendar"]::after {
  content: "Tap to load " attr(data-embed-provider);
}


.ytframe {
  border: 1px solid var(--ccc);
  max-height: calc( 100vw / 16 * 9 );
}

.ytframe[src^="https://open.spotify.com/embed"] {
  max-height: 234px;
  border: none;
}
.ytframe[src^="https://www.canva.com"] {
  max-height: min( 95vh, calc( 100vw * 1.4142 ) );
/*   border: none; */
}
div.childrenlist li {
  position: relative;
}

div.childrenlist li.hascomments::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 8px;
  height: 8px;
  display: inline-flex;
  border-radius: 50%;
  background: var(--orangered);
}

#linktopage .worse-tree-links {
  max-height: 40vh;
  overflow: auto;
}

#linktopage .worse-tree-links ul li {
  font-size: 12px;
  line-height: 12px;
}

#linktopage .worse-tree-links li a {
  display: block;
  margin: 1mm 0;
  padding: 1mm;
}

#linktopage .worse-tree-links > p:first-child > a {
  display: block;
}
#linktopage a:hover {
  background-color: var(--theme-bgcolor-light);
}




/*@media screen  and (max-width:1px) {
  .worse-content table.simpletable, 
  .worse-content table.simpletable td, 
  .worse-content table.simpletable th, 
  .worse-content table.simpletable tr {
    display: block;
    text-align: left;
  }
  
  .worse-content table.simpletable tr {
    border: 1px solid #888;
  }
  
  .worse-content table.simpletable td, 
  .worse-content table.simpletable th {
    border-width: 0 0 1px 0;
  }
  
  .worse-content table.simpletable th::before {
    content: "Column: ";
    color: var( --link-color );
    font-weight: normal;
  }
  
  .worse-content table.simpletable td::before {
    content: attr(data-colname);
    display: block;
    color: var( --link-color );
  }
  
}*/

.demotable {
  font-family: monospace;
  float: left;
  margin-right: 1em;
  border: 1px dashed  var(--link-color);
  border-radius: 3px;
  font-size: 98%;
}
.demotable mark.demopipe {
  font-weight: 900;
  color: #f00;
}


.demotable + table + * {
  clear: both;
}

.wikivisualedit[data-fullname="NPH-Allegro.HomePage"] {
  margin-top: 96px;
}

.worse-content input[data-jets] {
  padding: 4px;
  margin: 6px 0;
}

#toolbox-forum {
  display: none;
  padding: 8px;
}

.worse-content #toolbox-forum {
  display: block;
}

.worse-content > #toolbox-forum trix-editor {
/*   height: 12em; */
/*   max-height: 12em; */
}
.worse-content details #toolbox-forum trix-editor {
/*   height: 6em; */
/*   max-height: 6em; */
}
#toolbox-forum [data-trix-attribute="heading1"] {
  display: none;
}

.worse-content.editing a.forum-thread,
.worse-content.editing a.forum-reply {
  display: none;
}

.worse-content.forum > details {
/*   border: 2px solid #888; */
/*   border-radius: 4px; */
  margin-top: 1em;
}

.worse-content.forum > details > details {
  border: 1px dotted #888;
  margin: 8px 0 8px 16px;
  padding-bottom: 8px;
  border-radius: 4px;
}

.worse-content.forum h2 em {
  color: #888;
  font-size: 1rem;
  font-style: normal;
  margin-left: 8px;
}
.worse-content.forum h3 {
  color: #888;
  font-size: 1rem;
  background-color: transparent;
}
.worse-content.forum details > details summary {
  background-color: transparent;
}
.worse-content.forum summary {
  margin: 0;
}

.worse-content.forum details > *:not(summary):not(details) {
  margin: 0 8px;
}
.worse-content.forum details #toolbox-forum #worsetitle {
  display: none;
}

.trix-content.forum summary > h2, .trix-content summary > h3 {
  line-height: 1rem;
  background-color: transparent;
}
.trix-content.forum summary *[title] {
  border-bottom: 1px dotted #888;
}

.trix-content.forum summary {
  padding-top: 4px;
/*   background-color: transparent; */
}


details.forumnew {
  background-color: #ffd;
}
details.forumnew > summary {
  background-color: #feb;
}

a.forum-thread, a.forum-markread, a.forum-reply, #forumsort {
  display: inline-block;
  border: 1px solid #08acfe;
  padding: 4px 8px;
  border-radius: 4px;
  color: #08acfe;
/*   font-weight: bold; */
  margin: 1em 0;
}
.worse-content.forum details > a.forum-reply {
  margin-left: 8px;
}

.worse-content.forum details > details + a.forum-reply {
  margin-left: 16px;
}

.worse-content.forum > details > summary {
  border-radius: 4px;
}

.worse-content.forum > details > details {
  border-radius: 4px;
}

.worse-content.forum > details > details > summary {
  border-radius: 5px 5px 0 0;
}
.worse-content.forum span.nbreplies {
  float: right;
  padding: 4px;
/*   border: 1px solid #08acfe; */
/*   border-radius: 4px; */
}

#forum-summary td[data-col="by"] {
  text-align: left;
}

details.unseen > summary {
  background-color: #feb !important;
}

.worse-content .synclist_filter {
  margin-top: 1em;
}

.guitable .gui-date, .guitable .gui-size {
  text-align: right;
}

.guitable {
  margin-bottom: 1em;
}


.guitable .gui-name {
  text-align: left;
}

.guitable tr.uptodate .gui-date { color: green; }

.guitable tr.expired { }
.guitable tr.expired .gui-date {  color: #800; font-weight: bold; }

.guitable tr.duesoon .gui-date { font-weight: bold; color: #f60; }



.trix-dialog.trix-dialog--contacts {
  max-width: 35em;
}

.trix-dialog.trix-dialog--contacts input {
  width: 100%;
}


.worsecontacts, #syncfolders {
  padding: 0;
  margin: .3em 0 0 0;
  list-style-type: none;
  max-height: 30vh;
  overflow: auto;
  font-size: .9em;
}

.worsecontacts li {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  border-top: 1px solid #aaa;
  padding: 1mm;
  color: #888;
}


.worsecontacts li strong {
  font-weight: normal;
  color: black;
  background-color: transparent;
}

.worsecontacts li[data-role="list-divider"] {
  column-span: all;
  background-color: var(--eee);
  font-weight: bold;
  color: var(--text-color);
}


ul.ref-contacts li.cname, 
trix-editor figure.attachment--content[data-trix-content-type="allegro/contactcat"],
trix-editor figure.attachment--content[data-trix-attachment*="WorseContactCatId:"] {
  background-image: url(fontawesome-user-friends-solid.svg);
  column-span: all;
  background-color: var(--eee);
  padding: 1mm 1mm 1mm calc(2mm + 24px + 0.5em);
  background-repeat: no-repeat;
  background-position: 2mm 50%;
  background-size: 24px;
  display: block !important;
  width: 100%;
  line-height: 1.67;
  border-radius: 8px 8px 0 0;
  grid-column: 1 / -1;
}

trix-editor figure.attachment--content[data-trix-content-type="allegro/contact"],
trix-editor figure.attachment--content[data-trix-attachment*="WorseContactId:"]  {
  background-image: url(fontawesome-user-regular.svg);
}

trix-editor figure.attachment--content[data-trix-content-type="allegro/contact"]:hover,
trix-editor figure.attachment--content[data-trix-attachment*="WorseContactId:"]:hover,
trix-editor figure.attachment--content[data-trix-content-type="allegro/contactcat"]:hover,
trix-editor figure.attachment--content[data-trix-attachment*="WorseContactCatId:"]:hover,
span.onecontact:hover {
  background-color: #ffa;
}


trix-editor figure.attachment--content[data-trix-content-type*="allegro/contact"],
span.onecontact, trix-editor figure.attachment--content[data-trix-attachment*="WorseContactId:"]{
/*   display: inline; */
  background-image: url(fontawesome-user-regular.svg);
  background-repeat: no-repeat;
  padding: 0mm 0mm 0mm 7mm;
  margin: 0;
  line-height: inherit;
  background-position: 1mm 0.7mm;
  background-size: 1em 1em;
}

ul.ref-contacts a.email,  ul.ref-contacts a.url {
  color: #005eb8 !important;
}

trix-editor figure.attachment--content[data-trix-content-type="allegro/contactcat"],
trix-editor .attachment.attachment--content[data-trix-attachment*="WorseContactCatId"] {
  width: 100%;
}

ul.ref-contacts {
  list-style-type: none;
  margin: .3em 0;
  padding: 0;
/*   column-width: 20em; */
  display: grid;
  grid-template-columns: auto auto;
}


ul.ref-contacts li {
  padding: 2mm 2mm;
  border-bottom: 1px solid var(--ddd);
  margin:0;
}

ul.ref-contacts li span.contactname {
  font-weight: bold;
}
ul.ref-contacts li span.note {
  color: var(--orangered);
}


ul.ref-contacts li.cname a {
  font-size: 90%;
}

.maplabel {
  width: calc(100% - 4em);
  display: block;
  text-align: center;
  border: none;
}

#iframe_ape_id_9999 {
  display: block; 
  width: 480px; 
  height: 360px;
  margin: 0 auto;
  border: none;
  border-radius: 0px !important;
}
.trix-dialog--map {
  width: 500px;  
}
#ape_id_9999 {
  display: none;
}


a[data-embed-provider="OpenStreetMap"]::before {
  content: "";
}

.trix-button--icon-map::before {
  background-image: url(/dr-toolbox/pub/ape/images/marker-icon.png);
}


a[data-embed-provider="OpenStreetMap"]::after {
  content: "Tap to load OpenStreetMap";
}


.closevideo ~ figcaption {
  display: none;
}

.trix-content .attachment--preview .attachment__caption:not(.attachment__caption--editing):not(.attachment__caption--edited) {
  display: none;
}

figcaption ::placeholder  { 
  color: red;
  opacity: 1;
}

.trix-content .attachment__preview .attachment__caption.attachment__caption--edited {
  padding-bottom: 1em;
  margin: 5px 0 10px;
  color: inherit;
  font-size: inherit;
}


.worse-content figure[data-trix-content-type="video/mp4"] {
  border: none;
  padding: 0;
  display: block;
  margin: 2mm auto;
  text-align: center;
  background-image: none;
}


.trix-dialog--embed {
  width: 100%;
  max-width: 21em;
}

.trix-dialog--embed button {
  display: block;
  line-height: 2;
  font-size: 0.8rem;
  width: 100%;
  margin-top: 5px;
  text-align: left;
  border: none !important;
  font-weight: normal;
}

.trix-dialog--embed button:hover {
  background-color: #c9edff;
}

#worsecsum {
  width: 100%;
  padding: 4px;
  border: 2px solid  var(--link-color);
  border-radius: 3px;
}


.listcalendarcats {
  width: calc( 100% - 5.3em );
  list-style-type: none;
  padding: 0;
  margin: 0;
  column-width: 15em;
  user-select: none;
}

.listcalendarcats > li {
  width: 15em;
}


.trix-dialog__link-fields.ccats {
  justify-content: space-between;
}

.trix-dialog--calendar h5:first-child {
  margin-top: 0;
}

.attachment.attachment--content[data-trix-attachment*="WorseCalendarCatId"] {
  width: calc(100% - 1em);
  border: 2px dotted var(--link-color);
  padding: 6px;
}

.attachment.attachment--content[data-trix-attachment*="WorseCalendarCatId"]:before {
  content: "📅";
  margin-right: 6px;
}

.listcalendarcats li:first-child[data-checked="true"] ~ li {
  opacity: .5;
  pointer-events: none;
}

#commentadd, #commentdel {
  border: 1px outset var(--ccc);
  border-radius: 3px;
  float: none;
  margin-right: 1em;
}
#commenttext {
  font-family: inherit;
}
.trix-dialog--comment {
  width: 40em;
  max-width: 100%;
}

#commenttext {
  background-color: rgba(255,255,128,.9);
}

.trix-content div.inline-comment  {
  display: none;
  white-space: pre-wrap;
  position: absolute;
  top: 1.3em;
  left: 0px;
/*   transform: translateX(-50%); */
  z-index: 2;
  background-color: rgba(255,255,128,.9);
  border: 1px solid var(--ddd);
  padding: 4px;
  border-radius: 4px;
  width: 400px;
  max-height: 5.2em;
  font-size: .9em;
  line-height: 1.3;
  overflow: auto;
}
trix-editor div.inline-comment::before {
  content: "Double-click to edit note, 'DEL' to delete";
  display: block;
  color: red;
  text-align: right;
}

.trix-content figure[data-trix-mutable] > div.inline-comment {
  display: block;
}


.worse-content abbr.comment {
  color: red;
  font-weight: bold;
  padding: 0 0.2em;
  border: 1px solid #999;
  border-radius: .2em;
  background-color: yellow;
  text-decoration: none;
}
.trix-content figure.attachment--content[data-trix-attachment*="WorseInlineComment"]:before {
  content: 'N';
  color: red;
  font-weight: bold;
  padding: 0.3em;
}
.trix-content figure.attachment--content[data-trix-attachment*="WorseInlineComment"] {
  background-color: yellow;
}
.trix-content figure.attachment--content[data-trix-attachment*="WorseInlineComment"] > .attachment__toolbar {
  display: none;  
}


.trix-dialog--syncdirs .worse-tree-links li {
  font-size: inherit;
  margin: 1mm 0;
}
.trix-dialog--syncdirs .worse-tree-links li .dname {
  cursor: pointer;
  display: block;
  padding-left: 1mm;
}

.trix-dialog--syncdirs .worse-tree-links li .dname:hover {
  background-color: var(--theme-bgcolor-light);
}


.trix-dialog--syncdirs li[data-role="list-divider"] {
  cursor: pointer;
}

.trix-dialog--syncdirs {
  width: 100%;
  max-width: 37em;
}

.trix-dialog .synclist {
  max-height: 40vh;
  overflow: auto;
}

.trix-dialog .synclist li {
  cursor: pointer;
}

.trix-dialog .synclist li:hover {
  background-color: #ffb;
}

.attachment.attachment--content[data-trix-attachment*="worseSyncDir"],
.attachment.attachment--content[data-trix-content-type="allegro/sync"] {
  width: 100%;
  padding: 0.5em;
  background-color: var(--eee);
  border-radius: .5em .5em 0 0;
}

.attachment.attachment--content[data-trix-attachment*="worseSyncDir"]:before,
.attachment.attachment--content[data-trix-content-type="allegro/sync"]:before {
  content: "📁 Shared folder: ";
  font-weight: bold;
}







.worsecustomform .inputbox, .worsecustomform .inputbutton, .worsecustomform textarea, .worsecustomform select {
  line-height: 1.7em;
  padding: 6px 10px;
  font-family: inherit;
}

.worsecustomform p {
  min-height: 1em;
}



.worsecustomform span.status {
  display: block;
  cursor: pointer;
  font-weight: bold;
}
.worsecustomform.sending span.status:before {
  content: "Sending form, please wait...";
  color: orange;
}

.worsecustomform.sent span.status:before {
  content: "Form sent successfully. (Click to close.)";
  color: green;
}

.worsecustomform.error span.status:before {
  content: "Form could not be sent, please contact support. (Click to close.)";
  color: red;
}
.worsecustomform.invalid span.status:before {
  content: "(*) Unchecked, empty or invalid required field(s)";
  color: red;
}

.worsecustomform .req {
  color: red;
}
.worsecustomform p {
  transition: all 1s ease;
}
.worsecustomform .hlreq {
  background-color: #faa;
}


.worsecustomform label {
  cursor: pointer;
}

.worsecustomform input:disabled {
  opacity: .3;
}

.worsecustomform-demo,
.worsecustomform-demo + .worsecustomform {
  border: 2px dotted var(--link-color);
  padding: 1em;
  margin-bottom: 1em;
  border-radius: 5px;
}

.worsecustomform-demo > li > strong {
  font-weight: normal;
  font-family: monospace;
  padding: 0 3px;
  background-color: #afa;
}


.worsecustomform input[type="range"] {
  vertical-align: middle;
  margin-right: 1em;
}

.worsecustomform input[type="range"] + span {
  font-weight: bold;
  vertical-align: middle;
  display: inline-block;
}


.attachment.attachment--content[data-trix-content-type="allegro/form"],
.attachment.attachment--content[data-trix-attachment*="wform"] {
  width: calc(100% - 1em);
  border: 2px dotted var(--link-color);
  padding: 6px;
}
.attachment.attachment--content[data-trix-content-type="allegro/form"]:before {
  content: "Form: ";
  font-weight: bold;
}

.trix-dialog__sync-list li.embedfolder .foldername {
  cursor: pointer;
  display: block;
  padding: 1px 3px;
}
.trix-dialog__sync-list li.embedfolder .foldername:hover {
  background-color: var(--theme-color-light);
}

#worsesave, #worsecancel {
  color: var(--text-color);
}

textarea.attachment__caption-editor {
  white-space: pre-line;
}





trix-toolbar .trix-button--icon-attach::before {
  background-image: url(icon-trix-attach.svg);
}

trix-toolbar .trix-button--icon-bold::before {
  background-image: url(icon-trix-bold.svg);
}

trix-toolbar .trix-button--icon-italic::before {
  background-image: url(icon-trix-italic.svg);
}

trix-toolbar .trix-button--icon-link::before {
  background-image: url(icon-trix-link.svg);
}

trix-toolbar .trix-button--icon-strike::before {
  background-image: url(icon-trix-strike.svg);
}

trix-toolbar .trix-button--icon-quote::before {
  background-image: url(icon-trix-strike.svg);
}

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(icon-trix-h1.svg);
}

trix-toolbar .trix-button--icon-code::before {
  background-image: url(icon-trix-code.svg);
}

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(icon-trix-bullet.svg);
}

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(icon-trix-number.svg);
}

trix-toolbar .trix-button--icon-undo::before {
  background-image: url(icon-trix-undo.svg);
}

trix-toolbar .trix-button--icon-redo::before {
  background-image: url(icon-trix-redo.svg);
}

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url(icon-trix-outdent.svg);
}

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url(icon-trix-indent.svg);
}

trix-editor .trix-button--remove::before {
  background-image: url(icon-trix-remove.svg);
}



.worse-tree-toggle {
  font-weight: normal;
  color: var(--link-color);
  cursor: pointer;
}

figure, img, video {
  page-break-inside: avoid;
  break-inside: avoid;
}

.background-color-inherit {
  background-color: inherit;
}

@media screen and (max-width:36em) {
  .childrenlist ul, .siblingslist ul {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  } 
  ul.ref-contacts {
    grid-template-columns: auto;
  }
}

@media screen and (max-width:22em) {
  .childrenlist ul, .siblingslist ul {
    grid-template-columns: auto;
  }
}


.worse-content.worse-draft,
#worseform:has(#wdraft:checked) trix-editor {
  border-color: #f00;
  border-style: dashed;
}
.worse-content.worse-draft:before,
#worseform:has(#wdraft:checked) trix-editor::before {
  content: "Draft page: Text is visible only to editors and only on the website.";
  display: block;
  background-color: #fdd;
  margin: -12px 0px 1em 0;
  padding: .25em .5em;
}

trix-editor figure:has(a[href$=".doc"],a[href$=".docx"],a[href$=".ppt"],a[href$=".pptx"]) {
  border: 1px dashed #f50 !important;
  background-color: #fed;
}

#worseform:has(trix-editor figure a[href$=".doc"], trix-editor figure a[href$=".docx"], trix-editor figure a[href$=".ppt"], trix-editor figure a[href$=".pptx"]) trix-toolbar:after {
  content: "⚠️ Please attach PDF files unless users need to edit them.";
  display: inline-block;
  border: 1px dashed #f50;
  border-radius: 5px;
  margin-bottom: .5em;
  padding: 0 .5em;
  background-color: #fed;
}