html      { height:100% }
body      { font:100% 'Open Sans', sans-serif; height:100%; margin:0 }
pre       { margin-left:1em; background:#ececec; padding:0.6em }
td>pre    { background:transparent }
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:#f2f2f2 }
h6        { font-size:9pt; margin:0; font-weight:bold }
a         { text-decoration:none; color:#172e2c }
a:visited { color:#172e2c }
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% 'Open Sans', sans-serif }
textarea  { width:97.5%; font:100% 'Open Sans', sans-serif; border:1px solid #d0d0d0;
background-color:white; margin-bottom:0.5em; transition:height 0.2s}
label,
.asLabel  { color:#172e2c; 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-type:"‣" }
li        { margin:0; padding:2px 0.5em }
img       { border:0; vertical-align:middle; transition:opacity 0.3s }
audio     { margin:2px 0 }
select    { border:none; border-bottom:1px solid grey;
outline:unset; overflow-y:auto; background-color:transparent;
font-family:'Open Sans', sans-serif; font-size:110%; padding:0.1em 0.2em 0.1em;
margin: 0 0.1em 0 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:0 }
input[type=button],
input[type=submit]   { border:1px solid #abab4e; margin:0 5px;
padding:3px 10px; background-color:transparent;
color:white; cursor:pointer;
text-transform:uppercase }
input[type=text],
input[type=number],
input[type=password] { outline:none; cursor:text;
border:none; padding:3px 0; margin:0 2px 0 0;
border-bottom:1px solid grey;
line-height:1.4em; font-family:'Open Sans', sans-serif;
background-color:transparent }
input[type=date]     { width:9em; margin-bottom:0.2em;
margin-bottom:0 }
input[type=datetime-local] { width:12em; margin-bottom:0.4em;
margin-bottom:0 }
input::placeholder   { color:#666666 }
input:invalid,
select:invalid       { background-color:#ebf0f0 }
input[type=text]:read-only
{ background-color:lightgrey; cursor:not-allowed }
select[multiple]     { border:1px solid grey; margin:0;
background-image:none; padding:0.1em 0.3em }
form[name=search] input[type=button] { margin:0 }
div[contenteditable=true] { text-align:left }
div[contenteditable=true]:empty:before { content:attr(data-placeholder);
color:#b0b0b0 }
.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:left }
.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:#e15151; font-weight:bold }
.hourSel::before { content:':'; margin-right:1px }
.auto { width:auto }
.mono { font-family:monospace; font-size:120% }
.alert { color:darkred; padding-right:0.5em; font-style:italic;
text-transform:none }
/* Actions to be added in a td cell, on the right */
.tdr { display:flex; float:right; gap:1em; font-weight:bold }
/* Buttons */
input.button {
color:#172e2c; height:24px; cursor:pointer; padding:0 8px 0 30px;
background-color:transparent; 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:transparent }
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:#e15151; 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:#f0f0f0 }
.xhtmlE { border:1px solid lightgrey; background-color:white; padding:5px 10px;
font-size:90%; transition:0.5s }
.xhtmlE:focus, textarea:focus { border:1px solid grey }
[contenteditable]:focus, textarea:focus { outline: 0px solid transparent }
.xhtmlV { padding:5px; font-size:105% }
.list .xhtmlV { padding:0 }
.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 #172e2c !important; padding: 4px !important;
color:#172e2c }
.clickable, .calicon { cursor:pointer !important }
.disabled { opacity:0.3 }
.unclickable { pointer-events:none; cursor:default }
.editable { cursor:crosshair !important }
.help { cursor:help !important}
.unallowed { cursor:not-allowed !important}
.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 grey }
.nbref { text-align:center }
.buttons { margin-left:4px }
.noPreview { text-align:center; font-style:italic; margin-top:1em }
.noPreview > div { margin-bottom:1em; color:grey; font-size:90% }
.rel { position:relative }
.focus { margin:7px 0; padding:7px; background-color:#ced0d8;
border-radius:2px 2px 2px 2px; box-shadow:0 2px 4px #A9A9A9;
font-weight:bold; color:#172e2c; text-transform:none }
.focus td { padding:4px 0px 4px 4px }
.test { font-weight:bold; color:#172e2c; text-transform:uppercase;
padding:0.5em 0 }
.discreet { font-size:95%; color:#555555; margin:0; text-transform:none }
.discreet table td, .discreet table th { border:1px solid grey; padding:3px }
.titlet { vertical-align:top }
.subTitle { font-size:90%; color:#172e2c }
.subTitle table { margin: 1em 0 }
.subTitle table table { margin: 0 }
.subTitle table>tbody>tr>th,
.subTitle table>thead>tr>th { background-color:#172e2c; color:white}
.subTitle table>tbody>tr>td { background-color:white }
.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:#172e2c; padding:20px;
position:fixed; top:50%; left:50%; z-index:100; color: white;
line-height: 1.3em; transform: translate(-50%,-50%) }
#confirmActionPopup { max-height:500px; overflow-y:auto }
.popupI { display:block; margin:0px auto 1em auto; width:50%; cursor:move }
.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% }
.dropdownMenu .vdown { font-size:90%; min-width:17em }
.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 }
.inlineIconL { float:left; cursor:pointer; padding:2px 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 }
.iconSEL { width:21px; cursor:pointer }
.iconU8 { cursor:pointer; font-style:normal; padding:0 0.2em }
.icons { display:inline-flex; gap:0.3em }
.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:#abab4e }
.fdown > :nth-child(even) { background-color:rgba(243,243,247,0.7) }
.fdown > :nth-child(odd) { background-color:rgba(255,255,255,0.5) }
.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:rgba(243,243,247,0.7) }
.list>tbody>tr:nth-child(odd) { background-color:rgba(255,255,255,0.5) }
.list>tbody>tr>td,
.list>tbody>tr>th,
.list>thead>tr>th { color:#172e2c; 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 #172e2c; z-index:2 }
.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:#e9f2f3; z-index:1 }
.grid>tbody>tr>th,
.grid>thead>tr>th,
.grid>tbody>tr>td { padding:0 4px }
.grid input, .grid select { margin-bottom:0 }
.small { text-align:left; margin:8px 0 }
.small th { background-color:#172e2c; padding:1px 5px; height:unset;
border:1px solid grey; color:white; position:sticky;
top:-25px; z-index:1 }
.small td { border:1px solid darkgrey; padding:1px 5px }
.small th, .small td { vertical-align:top }
.small label { font-size:80% }
.small ul { margin:0 0 0.1em 0.5em }
.small li { padding:0 2px 0 10px; text-align:left }
.list .small { margin:0 }
.popup .grid th, .popup .grid td { border:1px solid grey }
.calTable { font-size:95% }
.calTable>tbody>tr>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 }
.calSlot { border:1px dashed grey; margin:2px 0; padding:2px; color:grey;
font-size:90%; text-align:center }
#summary { margin:8px }
#commentArea { margin:5px 0 }
#commentArea > div { font-style:italic; font-size:90%; padding-bottom:5px }
.timeline { font-family:Abel,monospace; color:#555555; font-size:85% }
.timeline>tbody>tr { height:22px }
.timeline>tbody>tr>th { background-color:white; 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 }
/* For a calendar displaying events hour after hour */
.houred td, .houred th { padding:0.2em 0.6em }
.houred>thead>tr:first-child { background-color:#f7f8fb; position:sticky;
top:0.4em; z-index:1 }
.houred>tbody>tr { vertical-align:top }
.houred>tbody>tr>td:not(:last-child) { border-right:1px solid grey }
.houred>tbody>tr:not(:last-child)>td { border-bottom:1px solid lightgrey }
.houred>thead>tr>th:first-child, .houred>thead>tr>th:last-child { width:2em }
.houred>tbody>tr>td:first-child,
.houred>tbody>tr>td:last-child { text-align:center }
.houred .current { background-color:#eeeeee}
.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:#e9f2f3; font-style:italic;
font-weight:normal }
.cellGap { padding-right:0.4em }
.cellWE { color:#172e2c; font-style:italic;
background-color:#e9f2f3 !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; align-items:center }
.flexc { display:flex; gap:0.2em; align-items:center; flex-direction:column;
width:100% }
.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:row-reverse }
.shead { font-size:90%; margin:0; color:#172e2c }
th input { margin:0 !important}
.hidden { visibility:hidden }
.simpleLabel { text-transform:none; padding-right:3px; color:white }
.trLabel { margin:0.5em 0; border-bottom:1px dashed #abab4e }
.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:#172e2c; text-align:center; color:white;
padding:8px 5px; margin-top:15px }
.even { background-color:rgba(243,243,247,0.7) }
.odd { background-color:rgba(255,255,255,0.5) }
/* 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:rgba(243,243,247,0.7) }
/* Dropdown class being specific to *s*earches */
.sdrop { width:13em; font-size:80%; margin:0.3em 0 0 0.8em }
.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 }
.groupD { padding:0.5em 0 1em 0 }
.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% }
.pure select { margin:0 }
.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:80%; font-weight:bold;text-transform:uppercase;
border-radius:5px 5px 0 0; border-bottom:1px solid lightgrey }
.tabs a  { color: white }
.tabRow  { display:block; border-bottom:1px solid lightgrey; margin:1.5em 0 1em 0 }
.tabRowP { display:block; border-bottom:unset; margin:0 0 6px 0}
.tabCur  { border-top:unset; border-right:unset;
border-left:unset; background-color:#7e897b;
border-bottom:none !important }
.tab     { background-color:#172e2c }
.navText { display:inline-flex; flex-wrap:nowrap; font-weight:bold;
color:#172e2c; padding:0 0.5em }
.navSep { color:#abab4e; margin:0 0.3em }
.hourSep { 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:#172e2c; color:white;
opacity:0.2}}
.blinkBg { animation:blinkingBg 1s infinite }
@keyframes blinkingT {50% { color:#f0f0f0 }}
.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 }
@keyframes shakeSlow {
0% { transform:rotate(0deg); filter:sepia(0) }
95% { transform:rotate(0deg); filter:sepia(0) }
97% { transform:rotate(10deg); filter:sepia(1) }
99% { transform:rotate(-10deg); filter:sepia(0.6) }
100% { transform:rotate(0deg); filter:sepia(0.3) }
}
@keyframes shakeTilt {
0% { transform: rotate(0deg) }
25% { transform: rotate(5deg) }
50% { transform: rotate(0eg) }
75% { transform: rotate(-5deg) }
100% { transform: rotate(0deg) }
}
.shakeOnce { animation:shakeTilt 0.15s 2 }
/* Bugfix for the calendar class from jscalendar */
.calendar { z-index: 10 }
/* Searches */
.sTop    { display:flex; align-items:center; gap:1em; font-size:106%;
padding:42px 30px 18px 30px; margin:-34px -30px 20px -30px;
border-bottom:1px solid lightgrey; background-color:white }
.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 grey;
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 #172e2c;
font-weight:bold; background-color:rgba(255,255,255,0.5) }
/* 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:white;
background-color:#172e2c; border:1px solid; width:fit-content;
padding:3px; font-size:12px; text-align:left }
}