html      { height:100% }
body      { font:|fontSize| |fonts|; height:100%; margin:0 }
pre       { margin-left:1em; background-color:#ececec; padding:0.6em }
h1        { font-size:14pt; letter-spacing:2px; font-weight:normal;
            padding:0 0 1em 0 }
h2        { font-size:13pt; margin:6px 0 6px 0; font-style:italic;
            font-weight:normal }
h3        { font-size:12pt; margin:4px 0 4px 0; font-weight:bold }
h4        { font-size:11pt; margin:4px 0 4px 0 }
h5        { font-size:9pt; margin:0; font-style:italic; font-weight:normal;
            background-color:#d7dee4 }
h6        { font-size:9pt; margin:0; font-weight:bold }
a         { text-decoration:none; color:|linkColor| }
a:visited { color:|visitedColor| }
a:focus   { outline-width:0 }
a > img   { display:inline-block }
table     { font-size:100%; border-collapse:collapse }
td        { padding:0 }
p         { margin:0 0 5px 0 }
abbr      { cursor:help; text-decoration:none }
form      { margin:0; padding:0 }
acronym   { cursor:help }
input     { font:100% |fonts| }
textarea  { width:99%; font:100% |fonts|; border:1px solid #d0d0d0;
            background-color:white; margin-bottom:0.5em }
label     { color:|linkColor|; padding:0.2em 0.6em 0 0;
            text-transform:uppercase; font-size:95% }
.subLabel { text-transform:none; padding-left:5px }
legend    { padding-bottom:2px; padding-right:3px; color:black }
ul        { line-height:1.2em; margin:0 0 0.2em 0.6em;  padding:0;
            list-style:none outside none }
ul li     { margin:0; background-image:url("../appy/li.gif");
            padding:0 0 5px 20px; background-repeat:no-repeat;
            background-position:0 6px }
img       { border:0; vertical-align:middle }
audio     { margin:2px 0 }
select    { border:none; border-bottom:1px solid |itextBottomColor|;
            outline:unset; overflow-y:auto; background-color:transparent;
            font-family:|fonts|; font-size:110%; padding:0.1em 0.2em 0.1em;
            margin: 0 0.1em |fieldBottom| 0 }
option    { color:black; font-size:90% }

input[type=image]    { border:0; background:none; cursor:pointer }
input[type=checkbox] { border:0; background:none; cursor:pointer }
input[type=radio]    { border:0; background:none; cursor:pointer }
input[type=file]     { border:0px solid #d0d0d0; cursor:pointer; font-size:80%;
                       margin-bottom:|fieldBottom| }
input[type=button],
input[type=submit]   { border:1px solid |altColor|; margin:0 5px;
                       padding:3px 10px; background-color:transparent;
                       color:|buttonColor|; cursor:pointer;
                       text-transform:|buttonCase| }
input[type=text],
input[type=password] { outline:none; cursor:text;
                       border:none; padding:3px 0; margin:0 2px |fieldBottom| 0;
                       border-bottom:|itextBottom| |itextBottomColor|;
                       line-height:1.4em; font-family:|fonts|;
                       background-color:transparent }
input[type=date]     { width:9em; margin-bottom:0.2em }
input[type=datetime-local] { width:12em; margin-bottom:0.4em }
input::placeholder   { color:#666666 }
select[multiple]     { border:1px solid |itextBottomColor|; margin:0;
                       background-image:none; padding:0.1em 0.3em }
form[name=search] input[type=button] { margin:0 }

.main { width:100%; border:0 }
.mainC { font-size:93% }
.payload { display:flex; width:100%; bottom:0; position:absolute;
           overflow-y:auto; overflow-x:auto }
.payloadP { top:0; height:100% }
.row { display:table-row }
.wrongBrowser {
  color:darkred; font-size:120%; padding:2em; text-align:center;
  position:fixed; z-index:5; margin:auto; left:0; right:0;
  background-color:white; height:100% }
.sticky { position:sticky; top:0; z-index:3 }
.lang { margin-right:6px }
.changePassword { color:#494949 !important; font-style:italic; font-size:90% }
.pageTitle { display:flex; flex-wrap:wrap; align-items:center; gap:0.1em;
             text-transform:uppercase; font-weight:bold; position:relative }
.pageTitleP { text-align:|bcTitleAlignP| }
.breadTitle { padding:0 0 30px 0; align-items:flex-start; gap:0.4em }
.pageIcons { text-transform:uppercase; font-weight:bold; font-size:96% }
.prePods { display:flex; gap:1em; margin-left:auto }
.required { color:|warnColor|; font-weight:bold }
.hourSel::before { content:':'; margin-right:1px; }
.auto { width:auto }

/* Buttons */
input.button {
  color:|darkColor|; height:24px; cursor:pointer; padding:0 8px 0 30px;
  background-color:|abuttonBgColor|; background-repeat:no-repeat;
  background-position:6px 50%; border:none; border-bottom:1px solid grey;
  text-transform:none }
.ibutton { display:flex; align-items:center }
.ibutton > div {
  border:none; border-bottom:1px solid grey; margin:0 0 0 -1.5em;
  padding:0.2em 0.5em 0.2em 2em; font-size:93%; cursor:pointer }
.ibutton .iconS { margin:0 0 3px 0 }
div.button {
  padding:4px 8px 4px 35px; background-color:transparent; margin-right:5px;
  background-repeat:no-repeat; border:none; border-bottom:1px solid grey }
input.buttonSmall, div.buttonSmall {
  font-size:95%; background-color:|abuttonBgColorS| }
input.noIcon, div.noIcon { padding:0; margin-left:0.2em }
input.buttonIcon { vertical-align:bottom; margin:0; border:0;
                   background-position:0 50%; padding-left:10px;
                   background-color:transparent }
input.buttonFixed { width:150px; padding:0 0 0 10px; margin-bottom:6px }
.lbutton { float:left }
div.rbutton { float:right }
.fake, input.fake { color:|warnColor|; cursor:not-allowed; font-style:italic }

/* Rich fields */
.xhtml { background-color:transparent; padding:4px }
.xhtml p { margin:3px 0 7px 0 }
.xhtml h1 { padding:0.5em 0; font-size:130% }
.xhtml h2 { padding:0.4em 0; font-size:120% }
.xhtml h3 { padding:0.4em 0; font-size:112% }
.xhtml h4 { padding:0.4em 0; font-size:109%; font-style:italic }
.xhtml img { margin:10px 5px }
.xhtml .picto { float:right; width:40px; height:40px}
.xhtml a { font-weight:bold }
.xhtml .docstring { color:#006dc1 }
.xhtml .comment { color:#006a71 }
.xhtml table { margin:20px 0 }
.xhtml table td, .xhtml table th { border:1px solid grey; padding:3px }
.xhtml table th { background-color:|lightColor| }
.xhtmlE { border:1px solid lightgrey; background-color:white; padding:5px 10px;
          font-size:90% }
.xhtmlV { padding:5px; font-size:105% }
.xhtmlE div, .xhtmlV div { padding-bottom:0.3em }
.xhtmlE code, .xhtmlV code { background-color:lightgrey }
.xhtmlE table td, .xhtmlE table th,
.xhtmlV table td, .xhtmlV table th {
  border:1px solid |darkColor| !important; padding: 4px !important;
  color:|darkColor| }
.clickable { cursor:pointer !important }
.disabled { opacity:0.3 }
.unclickable { pointer-events:none; cursor:default }
.editable { cursor:crosshair !important }
.help { cursor:help }
.unallowed { cursor:not-allowed }
.refLink { font-style:italic; padding-left:5px; font-size:90%; color:#555555 }
.refSel { font-size:95%; padding:2px 20px; margin:0 10px;
          border-bottom:1px dashed |itextBottomColor| }
.nbref { text-align:center }
.buttons { margin-left:4px }
.rel { position:relative }
.focus { margin:7px 0; padding:7px; background-color:|focusColorBg|;
         border-radius:2px 2px 2px 2px; box-shadow:0 2px 4px #A9A9A9;
         font-weight:bold; color:|darkColor| }
.focus td { padding:4px 0px 4px 4px }
.test { font-weight:bold; color:|linkColor|; text-transform:uppercase;
        padding:0.5em 0 }
.discreet { font-size:95%; color:#555555; margin:0 }
.discreet table td, .discreet table th { border:1px solid grey; padding:3px }
.titlet { vertical-align:top }
.subTitle { font-size:90%; color:|darkColor| }
.subTitle table { margin: 1em 0 }
.subTitle table table { margin: 0 }
.subTitle table>tbody>tr>th,
.subTitle table>thead>tr>th { background-color:|thBgColor|; color:|thColor|}
.subTitle table>tbody>tr>td { background-color:|brightColor| }
.subTitle table>tbody>tr>th,
.subTitle table>thead>tr>th,
.subTitle table>tbody>tr>td { padding:0.3em; border:1px solid darkgrey }
.flext>tbody>tr>td { display:flex; gap:0.3em }

.current { font-weight:bold }
.inputSearch { height:15px; width:120px; margin:0 0 5px 5px !important }
.content { padding:30px; width:100% }
.contentP { width:100% }
.public { width:100% }
.subbed { width:100% }
.subbed .topBase { position:static }
.subbed .content { width:auto }
.popup { display:none;  background-color:|darkColor|; padding:20px;
         position:fixed; top:50%; left:50%; z-index:100; color: |brightColor|;
         line-height: 1.3em; transform: translate(-50%,-50%) }
.popupI { display:block; margin:-10px auto 10px auto; width:50% }
#iframePopup { background-color:white; border:1px |darkColor| solid }
#iframeMask { position:fixed; width:100%; height:100%; z-index:0;
              background-color:white; opacity:0; transition:opacity 0.4s }
.iClose { position:absolute; top:15px; right:15px }
#confirmActionPopup { max-height:500px; overflow-y:auto }
.dropdown { display:none; position:absolute; top:18px; left:2px;
            border:1px solid #cccccc; background-color:white;
            padding:8px; font-weight:lighter; font-size:80%;
            text-align:left; z-index:15; line-height:normal }
.dropdownMenu { cursor:pointer; position:relative; display:flex;
                align-items:center; gap:0.2em }
.dropdownMenu .dropdown { font-size:100% }
.dropdown a:hover { text-decoration:underline }
.rmenu { display:flex; gap:0.3em }
.addForm { display:inline-flex; flex-wrap:wrap }
.addFormMenu { display:inline-flex; padding:0 5px 0 3px }
.inline { display:inline }
.inlineIcon { float:right; cursor:pointer; padding:0 3px 10px 0 }
.icon { width:35px }
.iconL { width:35px }
.iconM { width:24px }
.iconS { width:18px; margin:0 2px }
.iconST { width:18px; margin:0 2px }
.iconXS { width:15px }
.iconXXS { width:10px }
.iconERR { width:24px; margin:0 10px 10px 0 }
.iconSEL { width:21px; cursor:pointer }
.fdrop { display:inline-flex }
.fdrop > img { width: 16px }
.fdown { width: 100%; left:auto; right:-1em; text-align:right; margin-top:-2px }
.fdown > div { font-size:90%; cursor:pointer; color:|altColor| }
.fdown > :nth-child(even) { background-color:|evenColor| }
.fdown > :nth-child(odd) { background-color:|oddColor| }
.back { width:16px; transform:rotate(180deg); margin-right:5px }
.list { margin-bottom:3px; border-collapse:separate; border-spacing:0 }
.list>tbody>tr:nth-child(even) { background-color:|evenColor| }
.list>tbody>tr:nth-child(odd) { background-color:|oddColor| }
.list>tbody>tr>td,
.list>tbody>tr>th,
.list>thead>tr>th { color:|darkColor|; padding:10px; max-width:50em }
.list>tbody>tr>td { font-size:94% }
.list>tbody>tr>th,
.list>thead>tr>th { font-weight:bold; background-color:rgba(255,255,255,0.8);
                    position:sticky; top:-30px; height:3em;
                    border-bottom:2px solid |darkColor|; z-index:1 }
.list a { font-weight:bold }
.list a.pop { font-weight:normal; float:right; font-size:150%; color:lightgrey;
              margin:-6px 0 0 6px }
.compact { font-size:95%; width:100% }
.compact th, .compact td { padding:5px }
.compact tr { vertical-align: middle }
.grid { border-collapse:separate; border-spacing:0px }
.grid>thead>tr>th,
.grid>tbody>tr>th { font-size:90%; text-align:left; position:sticky; top:-2px;
                    background-color:|altColorLight|; z-index:1 }
.grid>tbody>tr>th,
.grid>thead>tr>th,
.grid>tbody>tr>td { padding:|gridPadding| }
.small { text-align:left; margin:8px 0 }
.small th { background-color:|darkColor|; padding:1px 5px; height:unset;
            border:1px solid grey; color:|brightColor|; position:inherit }
.small td { border:1px solid darkgrey; padding:1px 5px }
.small label { font-size:80% }
.small ul { margin:0 0 0.1em 0.1em }
.small li { padding:0 2px 0 10px; text-align:left }
.popup .grid th, .popup .grid td { border:1px solid grey }
.calTable { font-size:95% }
.calTable td { border:5px solid white; color:#555555; padding:10px }
.calEvt { width:100% }
.calEvt td { border:0; padding:0 3px 0 1px; margin:0 }
.calMany { background-color:#c1c5c7 }

#summary { margin:8px }
#commentArea { margin:5px 0 }
#commentArea > div { font-style:italic; font-size:90%; padding-bottom:5px }
.timeline { font-size:85%; color:#555555 }
.timeline>tbody>tr { height:18px }
.timeline>tbody>tr>th { background-color:|brightColor|; text-align:center;
                        border:none; height:auto; padding:0 1px !important }
.timeline>tbody>tr>td { text-align:center; padding:0 1px;
                        border:2px solid #f7f7f7 }
.timeline a { font-size:100% !important }
.tlLeft { text-align:left !important; padding-left:1px !important }
.tlRight { text-align:right !important; padding-right:1px !important }
.msgTable { margin:6px 0; width:100%; font-size:93% }
.msgTable tr { vertical-align:top }
.msgTable td, .msgTable th { border:1px solid grey; color:#555555;
                             padding:0px 5px; text-align:left }
.msgTable th { background-color:|altColorLight|; font-style:italic;
               font-weight:normal }
.cellGap { padding-right:0.4em }
.cellWE { color:|darkColor|; font-style:italic;
          background-color:|altColorLight| !important }
.no td, .no th {
  border:0 !important; padding:0 !important; margin:0 !important;
  background-color:transparent !important; font-size:95% }
.no a { font-weight:normal }
/* One-line flex-box CSS classes */
.flex1 { display:flex; align-items:baseline }
.iflex1 { display:inline-flex; position:relative }
.flexg { display:flex; gap:0.2em }
.ghead { display:inline-flex; align-items:center; gap:0.2em }
.ghead > :nth-child(2) { padding-left:0.7em }
.rhead { display:inline-flex; align-items:flex-start; gap:0.4em }
.thead { display:inline-flex; font-size:89%; gap:0.3em; align-items:center }
.fhead { display:inline-flex; flex-direction:|sfDirection| }
.shead { font-size:90%; margin:0; color:|darkColor| }
th input { margin:0 !important}
.hidden { visibility:hidden }
.simpleLabel { text-transform:none; padding-right:3px; color:|selectColor| }
.trLabel { margin:0.5em 0; border-bottom:1px dashed |altColor| }
.trLabel img { width:18px; margin:0 10px 5px 0 }
.section1 { font-size:120%; margin:0.45em 0em 0.1em 0;
            padding:0.3em 0em 0.2em 0.1em; background-color:#eef3f5;
            border-top:1px solid #8CACBB; border-bottom:1px solid #8cacbb }
.section2 { font-size:14pt; padding:15px 0; text-transform:uppercase;
            border-top:1px dashed #cccccc; background-color:#f9f9f9 }
.section3 { font-size:90%; font-weight:bold; text-transform:uppercase;
            background-color:|darkColor|; text-align:center; color:white;
            padding:8px 5px; margin-top:15px }
.even { background-color:|evenColor| }
.odd { background-color:|oddColor| }

/* Dropdown class being specific to *r*ef menus */
.rdrop > div { display:flex; gap:0.3em; align-items:center; font-size:90%;
               justify-content:space-between; padding:0.2em 0 }
.rdrop > div:nth-child(even) { background-color:|evenColor| }

/* Dropdown class being specific to *s*earches */
.sdrop { width:|sdropWidth|; font-size:|asFSize|; margin:|sdropMargin| }
.topSpace { margin-top:15px }
.topSpaceS { margin-top:8px }
.topSpaceF { display:flex; align-items:center; gap:0.4em; margin:0.2em 0 1em 0 }
.topSpaceN { margin-top:-15px }
.bottomSpace { margin-bottom:30px }
.bottomSpaceS { margin-bottom:15px }
.bottomSpaceXS { margin-bottom:5px }
.placE { margin-bottom:15px; font-size:80% }
.tbSpace { margin:15px 0 }
.paraSpace { margin:3px 0 }
.code { font-family:"Lucida Console","Courier New" }
.codePara { background-color:#eeffcc; border-color:grey; color:#333333;
            border-style:solid none; border-width:1px medium; padding:10px;
            line-height:120%; margin:10px 0 10px 0 }
.homeTable { background-color:#e3e3e3; border-top:1px solid grey }
.homeTable td { padding:10px 5px 10px 10px }
.homeTable th { padding-top:5px; font-size:105% }
.first { margin-top:0px }
.error { margin:5px }
.smaller, .smaller select { font-size:95% }
.phase .pod { display:block; padding:10px 0 0 0 }
.phase .smaller { font-size:100% }
.phase .iconS { width:55px }
.hide { display:none }

/* Fields within tabs */
.tabs    { position:relative; bottom:-2px; border-collapse:separate;
           border-spacing:0.5em 1px }
.tabs td { padding:0.3em 1.3em 0.2em 1.3em; text-align:center;
           font-size:|tabFSize|; font-weight:bold;text-transform:|tabTransform|;
           border-radius:|tabBorderRadius|; border-bottom:|tabBorderBottom| }
.tabs a  { color: |tabColor| }
.tabRow  { display:block; border-bottom:|tabBorderBottom|; margin:|tabMargin| }
.tabRowP { display:block; border-bottom:|tabBorderBottomP|; margin:|tabMarginP|}
.tabCur  { border-top:|tabBorder|; border-right:|tabBorder|;
           border-left:|tabBorder|; background-color:|tabBgS|;
           border-bottom:none !important }
.tab     { background-color:|tabBg| }

.navText { display:inline-flex; flex-wrap:nowrap; font-weight:bold;
           color:|linkColor|; padding:0 0.5em }
.navSep { color:|altColor|; margin:0 0.3em }
.highlight { background-color:yellow }
.highlightRow { font-weight:bold; background-color:yellow; opacity:0.6 }
.globalActions { display: flex; margin-bottom:0.5em }
.objectActions { display: flex; flex-wrap:wrap; align-items:flex-start;
                 margin:0.4em 0; gap:0.2em }
.alignedActions { display:flex; flex-wrap:wrap; align-items:center; float:right;
                  gap:0.3em; padding-left:0.8em }
.inlineActions { display:inline-flex; align-items:center; padding-left:0.5em;
                 gap:0.3em }
.menuActions { display:inline-flex; align-items:center;
               margin:0.2em 0; float:right }
.moveIcons { display:flex; align-items:center }
.sahist { margin: 0 0 0 1em } /* *s*tand-*a*lone history */
.smallbox { margin:0; vertical-align:middle }
.ct { color:white; font-family:sans-serif; mix-blend-mode:difference }
.legend { font-size:90%; color:grey }
.legendRight { float:right; margin-left:10px }
.legend td { padding:1px 0px; border:0 !important }
.fmt { font-size:62%; position:absolute; right:0; top:-5px }

/* Animations */
@keyframes blinkingBg {50% { background-color:|darkColor|; color:|brightColor|;
                             opacity:0.2}}
.blinkBg { animation:blinkingBg 1s infinite }
@keyframes blinkingT {50% { color:|lightColor| }}
.blinkT { animation:blinkingT 2s infinite }
@keyframes blinkingP {50% { opacity:0.1 }}
.blinkP { animation:blinkingP 2s infinite }

@keyframes fadeIN {
 0% { opacity: 0 }
 100% { opacity: 1.0 }
}
.fadedIn { animation: fadeIN 0.4s 1; animation-fill-mode: forwards }

/* Bugfix for the calendar class from jscalendar */
.calendar { z-index: 10 }

/* Searches */
.sTop    { display:flex; align-items:center; gap:1em; font-size:|sTopFSize|;
           padding:|sTopPadding|; margin:|sTopMargin|;
           border-bottom:|sTopBorderB| }
.contentP .sTop { margin-right:0; padding-right:0 }
.sdetail { cursor:help; width:16px; padding-left:1em }
.smodes  { display:flex; flex-wrap:wrap; grid-gap:15px }
.snav    { display: flex; align-items:center; justify-content:center }
.snab    { padding: 1em 0 }
.spod    { margin-left:auto; display:flex; gap:1em }
.tbot    { height:6px; width:100%; position:absolute; left:0; bottom:0 }
.btot    { font-weight:normal }

/* Classes for gridder's thumbnails */
.thumbnail {
  font-size:105%;  background-color:white; padding:10px; border-radius:15px;
  min-height:300px; max-height:350px; overflow:hidden; position:relative
}
.thumbmore {
  position:absolute; bottom:0; left:0; width:100%; margin:0; text-align:right;
  background-image:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 80%);
  padding:50px 0 25px 0
}
.thumbmore img { padding-right:30px }
.thumbtable { width:100% }
.thumbtable td { padding:0 5px 3px 5px }

/* Zones for toggling checkboxes */
.divAll { margin:3px 0 7px 0; border-bottom:1px dashed |itextBottomColor|;
          text-align:left }
.divAll label { text-transform:none; font-style:italic; font-size:85% }
.checkAll { vertical-align:middle; margin-right:8px }
.total td { text-align:center; border-top:2px solid |darkColor|;
            font-weight:bold; background-color:|oddColor| }

/* Make "title" attributes appear on mobile devices */
@media (pointer:coarse), (hover:none) {
  [title] { position:relative; display:inline-flex; justify-content:center }
  [title]:hover::after {
    content:attr(title); position:absolute; top:90%; color:|brightColor|;
    background-color:|darkColor|; border:1px solid; width:fit-content;
    padding:3px; font-size:12px; text-align:left }
}
