@import url('Include/css.css?v=4');
:root
{
  --padding: 5px;
  --paddingLarge: 10px;
  --margin: 10px;
  --titleColor: #006265;
}
.Compact
{
  --padding: 2.5px;
  --paddingLarge: 5px;
  --margin: 5px;
}
html
{
  height:98%;
  background:#fff;
  font-family:century gothic, Arial;
  color:#030304;
  font-size:10pt;
}
html.fullPage
{
  height: 100%;
}
html.fullPage > body
{
  height:100%;
  margin: 0px;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
body
{
  margin: 8px;
}
p, .p
{
  margin:0px;
  margin-bottom:var(--margin);
}
button,
input
{
  margin:0px;
  box-sizing: border-box;
  padding:5px;
}
input[type=submit],
input[type=button],
.Button,
button
{
  background-color: #bdd7d8;
  color: #030304;
  border: 1px solid #bdd7d8;
  padding: var(--paddingLarge);
    border-radius:5px;
  cursor:pointer;
  letter-spacing: 0.1em;
  transition: background-color 0.5s ease-out, border-color 0.5s ease-out, opacity 0.25s ease-out;
  font-family:century gothic, Arial;
}
input[type=submit]:focus,
input[type=button]:focus,
.Button:focus,
button:focus,
input[type=submit]:hover:not(:disabled),
input[type=button]:hover:not(:disabled),
.Button:hover:not(:disabled),
button:hover:not(:disabled)
{
  background-color: #abc2c3;
  border-color: #abc2c3;
  text-decoration: none;
}
button.Checked,
button.Checked:hover,
input[type=submit].Primary,
input[type=button].Primary,
.Button.Primary,
button.Primary
{
  background-color: #006265;
  color: #c6e2e3;
  border: 1px solid #006265;
}
input[type=submit].Primary:focus,
input[type=button].Primary:focus,
.Button.Primary:focus,
button.Primary:focus,
input[type=submit].Primary:hover:not(:disabled),
input[type=button].Primary:hover:not(:disabled),
.Button.Primary:hover:not(:disabled),
button.Primary:hover:not(:disabled)
{
  background-color: #00595b;
  border-color: #00595b;
}
input[type=submit]:disabled,
input[type=button]:disabled,
.Button:disabled,
button:disabled
{
  opacity: 0.5;
  cursor: auto;
}
button.Checked
{
  cursor: default;
}
textarea
{
  overflow:auto;
}
th,
td
{
  padding:1px;
  margin:0px;
  border:0px;
  font-size:10pt;
}
form
{
  margin:0px;
  padding:0px;
}

h1,
h2,
h3,
.h1,
.h2,
.h3
{
  color:#006265;
  font-weight: bold;
}

h1,
.h1
{
  font-size:16pt;
  border-left:3px solid #006265;
  padding-left: 5px;
}

h2,
.h2
{
  font-size:12pt;
  margin:0px;
  padding:10px;
}
h2.Section
{
  margin-top:20px;
  padding-left: 0px;
}

h3,
.h3
{
  font-size:11pt;
  margin:var(--margin);
  padding:0px;
}
h3.Section
{
  margin-left:0px;
}

.line
{
  border-bottom:1px solid #006265;
}
.dottedLine
{
  border-bottom:1px dotted #006265;
}
.Sticky
{
  position: sticky;
  top: 0;
  background:#fff;
  z-index: 2;
}
div.replySeparator
{
  margin-top:var(--margin);
  margin-bottom:var(--margin);
  border-bottom:2px solid #c6e2e3;
}

td.newArts,
tr.newArts
{
  background-color:#CCC;
}

tr.newArts
{
   display:none;
}

.otherItem
{
  font-style:italic;
  font-size:10pt;
}

li.ui-menu-item,
a.ui-corner-all,
.ui-menu .ui-menu-item a
{
  font-size:10pt;
  line-height:1;
}

li.ui-autocomplete-category
{
  font-size:10pt;
  font-style:italic;
  font-weight:bold;
  border-bottom:1px solid black
}

div.ui-dialog-titlebar
{
  font-size:10pt;
}

.ui-dialog div.ui-dialog-content
{
   font-size:10pt;
   margin:5px;
   padding:0px;
}

.ui-dialog .ui-dialog-buttonpane button
{
  margin:0px;
  margin-left:5px;
  margin-right:5px;
  padding:0px;
  font-size:10pt;
  vertical-align:center;
}

.ui-button-text-only .ui-button-text
{
  line-height:1;
}

.ui-autocomplete
{
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

a.newLogin
{
  color:#006265;
  text-decoration:none;
  font-size:13pt;
  font-weight: bold;
}
a.newLogin:hover
{
  text-decoration:underline;
}

span.kern
{
  font-style:italic;
  font-weight: bold;
  font-size:11pt;
}

table.body
{
  width:100%;
}

ul.MyRoMenu,
div.success,
p.success,
:not(input).error,
.warning,
.ErrorPopup,
.ErrorInfo,
table.MyRoMenu,
table.leden,
table.studentBody,
table.personBody,
table.studentCheck,
table.studentHeader,
div.options,
table.periodInput,
table.optionInput,
table.location,
div.communicationTargetFrame,
div.location,
div.tutorFrameLeft,
div.fileContent,
div.fileContentWithReply > div.subFileContent1,
#MessageFrame,
.MessageFrame,
#CommunicationTree,
.aboutbox,
.box,
.Help,
.LoginBadge
{
  border-collapse: separate;
  padding:var(--padding);
  margin-bottom:var(--margin);

  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -khtml-border-radius:5px;
  -o-border-radius:5px;

  behavior: url(border-radius.htc);
}
#CommunicationTree,
.MessageFrame
{
  padding:var(--margin);
}
.FlexColumn > .MessageFrame
{
  margin-bottom: 0px;
}
div.fileContent
{
  color:#030304;
  padding:var(--paddingLarge); 
}
div.fileContent img:not(.Command)
{
  max-width: 100%;
  object-fit: contain;
}
div.fileContent div.fileContent
{
  margin-left: 1em;
}
div.fileContent.Alternate
{
  background-color:#C4E2C9;
}
div.AnswerVariant.Alternate,
div.AnswerVariant.Alternate2
{
  padding:var(--paddingLarge);
  background-color:#C4E2C9;
  color:black;
  margin-bottom: 10px;
  border-radius:5px;
}
div.AnswerVariant.Alternate2
{
  background-color:#c6e2e3;
  color:#030304;
}
div.box
{
	display: inline-block;
}
.HelpTip,
.HelpContent,
.HelpContentInline
{
  padding:5px;
  margin-bottom:var(--margin);

  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -khtml-border-radius:5px;
  -o-border-radius:5px;
}
.HelpContentInline h2
{
  color:#c6e2e3;
}
.HelpContentInline a
{
  color:#fff;
  font-style: italic;
}
div.titleOptions
{
  font-weight: bold;
}
ul.MyRoMenu,
div.MyRoMenu,
p.success,
div.success,
:not(input).error,
.warning,
.ErrorPopup,
.ErrorInfo,
table.MyRoMenu,
table.leden,
table.studentHeader,
div.options,
.aboutbox,
.Help,
.HelpTip,
.HelpContent,
.HelpContentInline,
.LoginBadge
{
  border:2px solid #006265;
  background-color:#006265;
  color:#fff;

}
div.success,
p.success
{
  border-width:1px;
}
.Help > a
{
  color:#c6e2e3;
}

div.tutorPage
{
  display: flex;
  gap: var(--margin);
}

div.tutorFrameLeft
{
  overflow:auto;
  vertical-align: top;
  margin-bottom:0px;
  box-sizing: border-box;
}

@media screen and (min-width:800px)
{
div.tutorFrameLeft
{
  display:inline-block;
  max-width: 400px;
  height: 600px;
  flex-shrink:0;
  flex-grow:1;
  position: sticky;
  top: 0px;
}

div.tutorFrameRight
{
  display:inline-block;
  vertical-align: top;
  flex-grow: 1;
}
}

@media screen and (max-width:799px)
{
div.tutorPage
{
  flex-direction: column;
}
div.tutorFrameLeft
{
  max-height:100%;
  background:yellow;
  border-color: 5pt solid yellow;
  max-height:33vh;
}

}

table.periodInput,
table.optionInput,
table.studentCheck,
table.studentBody,
table.personBody,
table.location,
div.location,
div.tutorFrameLeft,
div.fileContent,
div.fileContentWithReply > div.subFileContent1,
div.communicationTargetFrame,
#MessageFrame,
.MessageFrame,
#CommunicationTree,
.box
{
  border:2px solid #c6e2e3;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color:#c6e2e3;
}
#CommunicationTree
{
  margin-bottom:0px;
  box-sizing: border-box;
}
#MessageHolder
{
  box-sizing: border-box;
}
@media screen and (min-width:800px)
{
  #CommunicationTree
  {
    overflow-y: scroll;
    overflow-x: hidden;
  }
  #MessageHolder
  {
    min-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
thead.Sticky,
table.CommunciationTree > thead
{
  position:sticky;
  z-index: 1;
}
table.CommunciationTree > thead
{
  top:-10px;
  background-color: #c6e2e3;
}
table.CommunciationTree th
{
  overflow:hidden;
  padding: var(--padding);
}
table.CommunciationTree > tbody > tr.Active,
table.CommunciationTree > tbody > tr:hover
{
  background-color:#95C21B;
  cursor:pointer;
}
table.CommunciationTree td
{
  padding: var(--padding); 
}
input#userSearch,
div.communicationTargetClasses,
div.CommunicationSearchFrame
{
  margin-bottom:var(--margin);
}
div.CommunicationSearchFrame > form
{
  display: flex;
  align-items: center;
  gap: var(--margin);
  width: 100%;
}
div.CommunicationSearchFrame > form > input[type="text"]
{
  flex-grow:1;
}
div.CommunicationContactsWithMessages,
div.CommunicationTreeWithMessages
{
  display: flex;
  flex-direction:row;
  gap: var(--margin);
}
div.CommunicationTreeWithMessages > div:nth-child(1)
{
  flex:4 1 0;
}
div.CommunicationTreeWithMessages > div:nth-child(2)
{
  flex:6 1 0;
}
div.CommunicationContactsWithMessages > div:nth-child(1)
{
  flex:0 0 auto;
}
div.CommunicationContactsWithMessages > div:nth-child(2)
{
  flex:7 1 auto;
}
div#CommunicationMessageFrame
{
  display: flex;
  flex-direction: column;
}
@media screen and (max-width:599px)
{
  div.CommunicationContactsWithMessages,
  div.CommunicationTreeWithMessages
  {
    flex-direction:column;
  }
}
div.communicationTargetFrame
{
  overflow-x: auto;
}
div.options
{
  float:right;
  margin-left:var(--margin);
}

table.MyRoMenu
{
  margin-bottom:15px;
}

table.studentBody,
table.personBody,
{
  padding-top:0px;
}

table.studentCheck
{
  padding:0px;
}

table.location,
table.studentBody,
table.personBody,
div.location
{
  min-width:200px;
}

table.communicationTarget
{
  width:100%;
}

td.max
{
  min-width: 20px;
  white-space: nowrap;
}
td.date
{
  min-width: 63px;
}
tr.reportPoint,
span.SaldoToReceive,
td.Saldo
{
  background-color:#FFCC99;
}
tr.subPoint
{
  background-color:#E3E3E3;
}
tr.report td,
tr.point td,
div.communicationTarget,
div.fileBlock,
div.tutorBlock
{
  padding:var(--padding);
  padding-left: 30px;
  border-bottom:1px solid #8EAA92;
}
div.tutorBlock:last-child
{
  border-bottom:0px;
}
div.tutorBlock1
{
  padding-left:10px;
}
div#optionTableHolder img.Command,
div.tutorBlock img.Command  
{
  vertical-align: middle;
}
div.tutorBlock.Old
{
  opacity: 0.5;
}
.separator
{
  padding-bottom:10px;
  padding-top:10px;
  margin-top: 10px;
  border-top:3px solid #8EAA92;
}
li.communicationTarget,
div.communicationTarget
{
  cursor: pointer;
  display: flex;
  gap:var(--margin);
  align-items:center;
}
li.communicationTarget:hover,
div.communicationTarget:hover
{
  background-color: #ebf6f7;
}
li.communicationTarget > span.communicationTargetName,
div.communicationTarget > span.communicationTargetName
{
  flex-grow:1;
}
tr.point td.max
{
  padding-left:0px;
}

tr.point td.point
{
  padding-right:0px;
  text-align:right;
  font-weight:400;
}

tr.point td.tekort,
span.SaldoToPay
{
  color:red;
  font-weight:400;
}

.info,
tr.point td.average
{
  color:#777;
}
.Info hr
{
  border:1px solid #006265;
  border-bottom-width: 0px;
}

tr.point td.comment
{
  white-space: pre-line;
}

span.Weight
{
  color:#777;
}

td.averageTitle
{
  padding-left:8px;
  padding-top:10px;
  color:#416347;
}

:not(input).error,
.ErrorPopup
{
  border-width:1px;
  border-color:#E1C3C3;
  background-color:#E1C3C3;
  color:#030304;
}
input.error,
div.Error
{
  color: #a40e0e;
}
.ErrorPopup,
div.Error
{
  font-weight: bold;
}
.ErrorInfo
{
  border-color:#006265;
  background-color:#fff;
  color:#030304;
}
.InlineError,
tr.RowError
{
  color: red;
}
td.studentCheck,
td.studentHeader,
td.MyRoMenu,
td.MyRoMenuUnactive,
span.studentHeader
{
  padding:0px 10px 0px 10px;
  font-size:12pt;
}
ul.MyRoMenu
{
  display:inline-flex;
  flex-wrap:wrap;
  margin: 0px;
  list-style-type: none;
  padding: 8px 10px 8px 10px;
  gap: var(--margin);
  column-gap: calc(1.5*var(--margin));
}
ul.MyRoMenu a,
span.studentHeader,
a.MyRoMenu
{
  font-size:12pt;
  color:#c6e2e3;
}
ul.MyRoMenu a,
a.MyRoMenuUnactive
{
  font-size:12pt;
  color:#fff;
}
table.MyRoMenu
{
  padding:0px var(--padding) 0px var(--padding);
}
ul.MyRoMenu li,
span.MyRoMenu,
span.MyRoMenuUnactive,
span.MyRoMenuHover
{
  font-size:12pt;
  cursor: hand;
  cursor: pointer;
  line-height:1em;
}
ul.MyRoMenu li.itemselected,
ul.MyRoMenu li.itemselected a,
span.MyRoMenu
{
  color:#c6e2e3;
}
ul.MyRoMenu li,
ul.MyRoMenu a,
span.MyRoMenuUnactive
{
  color:#fff;
}
span.MyRoMenuHover
{
  color:#c6e2e3;
}

td.studentCheck
{
  color:#AAA;
  font-size:10pt;
}

ul.MyRoMenu li.itemselected a:hover,
ul.MyRoMenu a:hover,
td.studentCheck:hover,
td.studentCheckSelect,
td.studentHeader:hover,
td.studentHeaderSelect,
span.studentHeader:hover,
a.MyRoMenu:hover, a.MyRoMenuUnactive:hover,
.LoginBadgeHolder:hover:not(.Disabled) > .LoginBadge,
*:not(.Disabled) > .LoginBadge:hover
{
  color:#c6e2e3;
  text-decoration:none;
  cursor:hand;
  cursor:pointer;
}

@media print
{
  table.studentHeader
  {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
     box-shadow: none;
  
    behavior: none;
  }
}

td.studentCheckSelect,
td.studentHeaderSelect
{
  font-weight:bold;
}

td.reportYear,
td.courseName,
div.communicationCategory
{
  padding-top:15px;
  font-weight:bold;
}

td.courseName
{
  color:#416347;
  padding-top: 50px;
}

tr.courseName
{
  background-color: #E3E3E3;
}

td.reportYear
{
  cursor:pointer;
  cursor:hand;
}

td.file,
div.communicationCategory
{
  padding-top:5px;
}

td.lidItem
{
 font-size:12pt;
 border-bottom:1px solid #416347;
 padding-right:30px;
}

h2.subItem
{
  margin:0px;
}

input.hint
{
  color:#AAA;
  font-style:italic;
}

img.Command,
a,
.hand
.pointer
{
  color: inherit;
  cursor:pointer;
  cursor:hand;
  text-decoration:none;
}
a:hover
{
  text-decoration: underline;
}

input.submit
{
  margin-top:10px;
}
p.Info, div.Info, td.Info, ul.Info, span.Info, .ImportantInfo
{
  color:#006265;
}
a.Info,
.Info > a
{
  color:#006265;
  font-style:italic;
}
div.Command,
div.Info
{
  margin-bottom: 10px;
}
.ImportantInfo
{
  font-weight:bold;
}
div.ErrorInfo
{
  color:#863F3F;
  font-style:italic;
}
td.students,
td.options
{
  vertical-align:top;
}

form.options
{
  float:right;
}

td.period,
td.count,
td.option
{
  color:#c6e2e3;
  text-align:right;
}
select.count,
input.count
{
  margin-left:var(--margin);
  opacity:0.8;
  filter:alpha(opacity=80); /* For IE8 and earlier */
}

table.periodInput,
table.optionInput
{
  padding:var(--padding);
  opacity:0.8;
  filter:alpha(opacity=80); /* For IE8 and earlier */
}

table.periodInput td,
table.optionInput td
{
  padding-right:var(--padding);
  border-right:1px solid black;
}

table.periodInput td.nextPeriod,
table.optionInput td.lastOption,
table.optionInput td:last-child
{
  border:0;
}

table.periodInput a,
table.optionInput a
{
  color:#444;
  cursor:pointer;
  font-style:italic;
}

table.periodInput a.periodSelected,
table.periodInput a:hover,
table.optionInput a.optionSelected,
table.optionInput a:hover
{
  color:black;
  background-color:#95C21B;
  cursor:pointer;
  font-style:italic;
}

table.periodInput a.unavailable:hover,
table.periodInput a.unavailable,
table.optionInput a.unavailable:hover,
table.optionInput a.unavailable
{
  color:#999;
  background-color:transparent;
  pointer-events: none;
  cursor:default;
}

td.schoolInfo
{
  vertical-align: top;
}

table.header
{
  width:100%;
}

table.subfiles
{
  width:100%;
}

table.fileAttachments
{
  margin-left:20px;
  margin-bottom: 12pt;
}

@media print
{
  .noPrint,
  table.MyRoMenu,
  ul.MyRoMenu,
  div.communicationTargetFrame,
  div.communicationTargetClasses,
  div#tf_hui_container,
  #virtualScroll
  {
    display:none !important;
  }
}
table.sortable > thead th,
tr.Footer > td,
tr.Header > td,
td.Footer,
td.Header,
td.RestoHeader,
td.AgendaHeader,
td.StatisticHeader,
td.TaskHeader,
td.StatisticHeaderEven,
td.StatisticHeaderOdd,
td.parentHeader,
div.Header
{
  font-weight:bold;
  background-color: #c6e2e3;
  padding:5px 10px 5px 10px;
  vertical-align:top;
}
td.StatisticHeaderEven,
tr.StatisticHeaderEven td.StatisticHeader,
tr.Task:nth-child(2n) td, 
{
  background-color: #ebf6f7;
}
td.RestoHeader
{
  text-align:center;
}
td.StatisticNrOdd
{
  color: DarkGray;
}
td.StatisticNrEven
{
  color: DarkGray;
  background-color: #ebf6f7;
}
td.TaskTotal
{
  font-weight: bold;
}
td.Odd,
td.RestoOdd,
td.AgendaOdd,
td.StatisticOdd,
td.StatisticDataOdd,
td.parentOdd2,
td.parentOdd,
tr.Alternate td
{
  padding-left:6px;
  padding-right:6px;
}
td.parentOdd2,
tr.InvoiceOdd
{
  background-color: #c6e2e3;
}
tr.InvoiceFooter
{
  background-color: #c6e2e3;
}
.InvoiceTotalLbl, .InvoiceTotal
{
  font-weight: bold;
  background-color: #c6e2e3;
}
.InvoiceTotal
{
  text-align: right;
}
table.Invoice
{
  padding-bottom: 1em;
  width: 98%;
}
table.UnpaidInvoices
{
  border-collapse:collapse;
}
table.UnpaidInvoices > tbody > tr > td
{
  border: 1px solid black;
  padding: var(--padding);
}
td.InvoiceHeader
{
  font-weight: bold;
}
td.InvoiceNew
{
  color: #006400;
  font-weight: bold;
  text-align: center;
}
td.InvoiceUnpaid
{
  color: #ae0000;
  font-weight: bold;
  text-align: center;
}
td.Even,
td.RestoEven,
td.AgendaEven,
td.StatisticEven,
td.StatisticDataEven,
td.parentEven,
tr.Alternate:nth-child(2n+1) td:not(.NoAlternate)
{
  background-color: #ebf6f7;
  padding-left:6px;
  padding-right:6px;
}
td.StatisticTotalCount
{
  padding-left:15px;
}
div.RestoListColumn
{
  display: grid;
  vertical-align: top;
  grid-template-columns: 0fr 1fr 0fr;
  gap: var(--margin);
}
div.RestoListColumn > div.RestoListActions
{
  border: 0px;
}
div.RestoListClass,
div.RestoListActions
{
  white-space: nowrap;
}
div.RestoListCheck
{
  width: 2em;
}
@media print
{
  div.RestoList
  {
    justify-content: space-between;
  }
  div.RestoListColumn
  {
    grid-template-columns: 1fr 0fr 0fr;
    gap: 0px;
  } 
  div.RestoListColumn > div
  {
    border: 1px solid black;
    margin-right: -1px;
    margin-bottom: -1px;
    padding: var(--padding);
  }
}
@media not print
{
  div.RestoListCheck
  {
    display: none;
  }
}
div.TutorDate
{
  font-style:italic;
  font-size: 8pt;
  color:#777;
  display: flex;
	align-items: center;
	gap: var(--margin);
	justify-content: right;
}
div.CommunicationDate
{
  font-style:italic;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: var(--margin);
  font-size: 8pt;
  color:#777;
}

div.QLabel
{
  font-style:italic;
  margin-top:10px;
  margin-bottom:10px;
}
div.QLabel > *
{
  font-style:normal;
}
h1.QLabel
{
  padding-top:18px;
  padding-bottom:10px;
  font-size:12pt;
}

td.attachmentUrl
{
  text-decoration:underline;
}
td.studentFrameLeft, td.studentFrameRight
{
  vertical-align: top;
}
.pointer, .pointerUnderline
{
  cursor:hand;
  cursor:pointer;
}
.pointerUnderline
{
  font-style: italic;
}
:hover.pointerUnderline
{
  text-decoration: underline;
}
td.fileSelection
{
  cursor:hand;
  cursor:pointer;
  font-style:italic;
}
table.fileTitle
{
  width: 100%;
}
td.fileSelection
{
  text-align: right;
}
ul.TutorStatistic
{
  margin-left: auto;
  list-style-type: none;
  width: 120px;
}
li.TutorStatistic
{
  display: inline;
  padding-right: 5px;
  padding-left: 5px;
  width: 70px;
  border-bottom: 1pt solid black;
  font-weight: bold;
  background-color: #D6CEC8;
  text-align: center;
}
li:hover.TutorStatistic
{
  background-color: #B4ABA4;
}
.CellInfo, .CellHeader,
.CellDisabledUnselect, .CellDisabledSelect, 
.CellUnselect, .CellSelect
{
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 5px;
  padding-right: 5px;
  line-height: 20px;
  text-align:center;
  border:2px solid #006265;
  border-radius:2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  -khtml-border-radius:2px;
  -o-border-radius:2px;  
  
  behavior: url(border-radius.htc);
}
:hover.CellUnselect
{
  background-color:#95C21B;
}
.CellHeader
{
  background-color:#c6e2e3;
  font-weight: bold;
}
.CellSelect, .CellUnselect
{
  cursor:hand;
  cursor:pointer;
}
.CellSelect
{
  font-weight: bold;
  color: #c6e2e3;
  background-color:#006265;
}
.CellDisabledSelect
{
  color:#fff;
  background-color:#006265;
}
.CellDisabledUnselect
{
  background-color:#E1C3C3;
  border:1px solid #E1C3C3;
}
.CellInfo
{
  color:#777;
  border:1px solid #c6e2e3;
}
.Unsatisfied
{
  color:#777;
  text-decoration: line-through;
}
td.CheckTable
{
  text-align: center;
}
td.TeacherTitle
{
  color: #A9A9A9;
  font-size: smaller;
}
span.Blocked,
td.Blocked,
td.Deleted,
div.Deleted
{
  text-decoration: line-through;
  color:#006265;
}
span.Refused,
td.Refused
{
  color:#006265;
}
span.Unconfirmed,
td.Unconfirmed
{
  font-style: italic; 
  color:#006265;
}
table.Form
{
  border-collapse: separate;
  border-spacing: var(--margin);
}
table.Form > tbody > tr > td
{
  vertical-align: baseline;
}
textArea.QText
{
  height:35px;
  width: 100%;
  box-sizing: border-box;
  /* For IE9: */
  overflow: hidden;
}
div.QForm
{
  display:grid;
  grid-template-columns: fit-content(50%) 1fr;
  row-gap: var(--margin);
  column-gap: var(--margin);
  margin-bottom: var(--margin);
}
div.Form
{
  margin-bottom: var(--margin); 
}
div.QFormText,
div.QFormFieldFull,
div.QFormLabelFull
{
  grid-column: 1 / -1;
}
div.QFormLabelFull,
div.QFormLabel
{
  font-weight:bold;
  display: flex;
  gap: var(--margin);
  align-items: center;
}
div.QCombobox > span,
div.QDateTime > span,
div.QUploadFile > span
{
  font-weight:normal;
}
div.QParentMeeting
{
  margin-left: 20px;
}
div.QFormTableHeader
{
  writing-mode: sideways-lr;
  justify-self: center;
}
div.InputBoxDisabled
{
  background-color: rgba(255, 255, 255, 0.3);
  padding: var(--padding);
}

div.footer
{
  height: 20px;
}
.Wt-popup div.footer
{
  height: initial;
  display: flex;
  justify-content: left;
  padding: var(--paddingLarge);
  gap: var(--margin);
}
ul.Wt-popupmenu
{
  border-radius:5px;
}
ul.Wt-popupmenu > li a
{
  padding: var(--paddingLarge);
  color: #030304;
  text-decoration:none;
}
ul.Wt-popupmenu > li.active
{
  background-color:#abc2c3;
}
ul.Wt-suggest
{
  font-size: inherit;
  background-color: #fff; 
}
ul.Wt-suggest > li
{
  padding: 5px;  
}
ul.Wt-suggest .active
{
  border:2px solid #006265;
  background-color:#006265;
  color: #c6e2e3; 
}
ul.Wt-suggest .active  > a
{
  color: #c6e2e3;
}
@media screen and (max-width:1170px)
{
  div.footer
  {
    height: 40px;
  }
}
@media screen and (max-width:590px)
{
  div.footer
  {
    height: 80px;
  }
}
div.cookie
{
  position:fixed;
  bottom: 0px;
  left: 0px;
  border-top:1px solid #006265;
  background-color:#c6e2e3;
  color:#006265;
  width: 100%;
  text-align:center;
}
p.TutorReplyTo
{
  font-style:italic;
}
input.TutorReplySubject,
td.TutorReplySubject,
table.TutorReply
{
  width:100%;
} 

div.InProgress,
div.TutorReplyInProgress
{
  display:none;
}
div.TutorFileSubscription,
div.TutorReplyButton,
div.TutorButton
{
  justify-content: flex-end;
  padding:var(--padding) 0px var(--padding) 0px;
  display: flex;
  gap: var(--margin);
}
div.TutorFileSubscription
{
  margin:1px;
}
div.subFileContent
{
  margin-left:30px;
  font-size:9pt;
}
div.Message.Highlight
{
  border-left:3px solid #006265;
  padding-left: var(--margin);
  margin-left: -10px;
}
div.MessageFrame div.subFileContent
{
  margin-left: 0px;
} 
div.subFileContent1
{
  margin-left:0px;
  font-size:10pt;
}
div.subFileContent > h3
{
  font-size:10pt;
}
div.subFileContent1 > h3
{
  font-size:11pt;
}
div.moreCommunication
{
  text-align:center;
  font-style:italic; 
}
div.moreToPdf
{
  float: right;
}
div.ReplyTo
{
  font-weight:bold;
}

td.formLabel
{
  vertical-align:top;
}
span.MailCommunicationAdd
{
  display:none;
}
span.CommunicationDownload
{
  padding: var(--padding);
}
span.DeleteContact
{
  color: darkred;
  font-size: smaller;
  cursor: pointer;
  font-style:italic;
  position: relative;
  top: -4pt;
  left:3px;
  margin-left: 1pt;
}
span.Contact
{
  border: 1pt dotted gray;
  padding-left: 2pt; 
  padding-right: 2pt;
  margin-right: 2pt;
  margin-bottom: 2pt;
  border-radius: 5px;
}
tr.subTree
{
  display:none;
}
table.subTree
{
  margin-left:20px;
  table-layout: fixed;
}
table.mainTree
{
  margin-left:0px;
  display:block;
}
td.treeExpander
{
  width:15px;
}
span.noTreeExpander,
span.treeExpander
{
  width:15px;
  height:15px;
  line-height:15px;
  font-size:17px;
  text-align:center;
  vertical-align:middle;
  display:table-cell;
  margin-right:5px;
  cursor:pointer;
  font-style:italic;
}
span.treeExpander
{
  border:1px solid black;
}
td.treeExpanderRight
{
  display:table-cell;
  white-space:nowrap;
}
input.treeCheckbox
{
  margin-left:2px;
  margin-right:2px;
}
tr.Registration.Hidden,
tr.RegistrationEmpty.Hidden,
tr.RegistrationClosed.Hidden
{
  display:none;
}
td.RegistrationRowHeadEmpty,
td.RegistrationRowHead
{
  font-weight:bold;
  color: white;
  background-color:#999;
  text-align: left;
}
table.DisableMulti td.RegistrationRowHead,
table.DisableMulti td.RegistrationHeaderEmpty:first-child,
table.DisableMulti td.RegistrationHeader:first-child,
table.DisableMulti td.RegistrationHeader > span.RegistrationAction,
table.DisableMulti td.RegistrationRowHeadEmpty
{
  display: none;
}
table.DisableMulti td.RegistrationHeader
{
  cursor: default;
}
td.RegistrationExtraHeader,
td.RegistrationHeaderEmpty,
td.RegistrationHeader
{
  font-weight:bold;
  color: white;
  background-color:#999;
  min-width: 40px;
  text-align: center;
}
td.RegistrationRowHead,
td.RegistrationHeader,
td.Registration,
table.EditAll td.RegistrationClosed.Selected,
table.EditAll td.RegistrationClosed.SelectedOther,
table.EditAll td.RegistrationClosed.ShoppingCart,
table.EditAll td.RegistrationClosed.ShoppingCartOther
{
  cursor: pointer;
}
div.Registration,
td.Registration
{
  border: none;
  text-align: center;
  vertical-align:top;
  padding:var(--padding);
}
td.Registration
{
  background-color: #DDD;
}
td.Registration.Alternate
{
  background-color: #BBB;
}
td.Registration.Active
{
  border: 10px solid #4765A2;
}
td.Registration.Pending.Active,
td.Registration.Selected.Active,
td.Registration.ShoppingCart.Active
{
  border-color: #DDD;
}
td.Registration.Pending.Alternate.Active,
td.Registration.Selected.Alternate.Active,
td.Registration.ShoppingCart.Alternate.Active
{
  border-color: #BBB;
}
div.Registration.Pending,
td.Registration.Pending,
td.RegistrationClosed.Pending
{
  background-color: #7e47a2;
  color: white;
  cursor: auto;
}
div.Registration.PendingOther,
td.Registration.PendingOther,
td.RegistrationClosed.PendingOther
{
  background-image: repeating-linear-gradient(-45deg, #7e47a2, #7e47a2 10px, #6e438b 10px, #6e438b 20px);
  color: white;
  cursor: auto;
}
div.Registration.Selected,
td.Registration.Selected,
td.Registration.ShoppingCart,
td.RegistrationClosed.ShoppingCart
{
  background-color: #4765A2;
  color: white;
}
div.Registration.SelectedOther,
td.Registration.SelectedOther,
td.Registration.ShoppingCartOther,
td.RegistrationClosed.ShoppingCartOther
{
  background-image: repeating-linear-gradient(-45deg, #4765A2, #4765A2 10px, #677184 10px, #677184 20px);
  color: white;
}
div.RegistrationEmpty.Selected,
td.RegistrationEmpty.Selected,
div.RegistrationClosed.Selected,
td.RegistrationClosed.Selected
{
  background-color: #869BC5;
  color: white;
}
div.RegistrationEmpty.SelectedOther,
td.RegistrationEmpty.SelectedOther,
div.RegistrationClosed.SelectedOther,
td.RegistrationClosed.SelectedOther
{
  background-image: repeating-linear-gradient(-45deg, #869BC5, #869BC5 10px, #949caa 10px, #949caa 20px);
  color: white;
}
div.RegistrationEmpty,
div.RegistrationClosed,
div.RegistrationExcluded,
td.RegistrationEmpty,
td.RegistrationClosed,
td.RegistrationExcluded
{
  background-color: #B06868;
  color: white;
  text-align: center;
  vertical-align: top;
  padding:var(--padding);
}
table.Registration
{
  margin: -2px;
}
table.Registration td
{
  padding:var(--padding);
}
div.RegistrationDay
{
  margin-bottom:var(--margin);
}
td.RegistrationExcluded > div.RegistrationDay
{
  font-weight:normal;
} 
div.RegistrationBadges
{
  justify-content: center;
}
table.Registration div.RegistrationBadges > span
{
  text-overflow: "";
  overflow: hidden;
  max-width: 16vw;
  max-width: calc(20vw - 20px);
  box-sizing: border-box;
}
div#availableMenusHolder
{
  align-items: stretch;
  transition: opacity 0.2s;
  min-height: 300px;
  overflow: auto;
}
div.RegistrationItem
{
  text-align: center;
}
button.Registration.Checked
{
  background-color: #4765A2;
  border-color: #4765A2;
  color: white;
}

.ContentEditable
{
  border:1px solid black; 
  resize: both; 
  overflow:auto; 
  background-color:white;
}
select:invalid,
textarea:invalid ~ div.tox-tinymce,
textarea:invalid,
input:not([type=file]):invalid,
input.Wt-invalid
{
  box-shadow: 0px 0px 3px 1px #E1C3C3;
  border: 1px solid #E1C3C3;
}
div.Help, span.Help
{
  font-style:italic;
  font-size:12pt;
}
span.Help
{
  cursor:hand;
  cursor:pointer;
  margin: 0px;
}
div.HelpContent
{
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px;
} 
div.HelpContentInline
{
  display:none;
  position: relative;
  z-index:100;
  margin-right: 10px;
} 
div.HelpNavigator
{
  position: fixed; 
  bottom: 0px; 
  left:0; 
  right:0;
  z-index: 1000; 
  justify-content: space-between;
  font-size:14pt;
  font-weight: bold;
  border:2px solid #006265;
  background-color:#006265;
  color:#fff;
}
div.HelpNavigator .close
{
  position: relative;
  display: inline-block;
  top: -20px;
}
div.HelpFrame
{
  position: fixed;
  top: 0px;
  left: 0px;
  width:100%;
  height:100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 99;
  display: none;
}
.close 
{
  background-color: #006265;
  color: #fff;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  font-weight: bold;
  border-radius: 12px;
  cursor: pointer;
  font-style:italic;
}
.close:hover 
{ 
  background-color:#006265;
  color: #c6e2e3; 
}
.HelpTip
{
  display: none;
  position: relative;
  text-align:center;
  font-weight:normal;
  top: 20px;
  left: 20px;
  min-width:120px;
  z-index: 100;
  cursor:default; 
}

#dialog-mailConfirm,
#dialog-mailSent,
#dialog-mail
{
  display:none;
}


a.DemoItem
{
  margin:10px;
  float:left;
}

img.DemoItem
{
  border-radius:5px;
  border:1px solid #c6e2e3;
  width:300px;
}

div.DemoItem
{
  position:relative;
  width:300px;
}

div.DemoOverlay
{
  border-radius:5px;
  position:absolute;
  top:0px;
  right:-2px;
  left:0px;
  bottom:2px;
  z:1;
}
div.DemoOverlay:hover
{
  background-color: rgba(0,0,0,0.2);
}

p.DemoText
{
  position:absolute;
  font-size:12pt;
  color:#006265;
  font-weight:bold;
  text-align:center;
  text-shadow: 1px 1px #888;
  width:100%;
  bottom:15px;
}
td.Euro
{
  text-align: right;
}
table.sortable > tbody > tr > td
{
  padding: 5px 10px 5px 10px;
}
table.sortable > tbody > tr:nth-child(2n) td 
{
  background-color: #ebf6f7;
}
table.StatisticTotal > tbody > tr:nth-child(2n) td 
{
  background-color: #e6f2ff;
}
table.NextTable
{
  border-top:1px solid #006265;
  padding-top: 18pt;
}
div.Popup
{
  position: fixed;
  margin-top: 5px;
  margin-right: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  right: 0px;
  top: 0px;
  border:2px solid #006265;
  background-color:#ebf6f7;

   overflow: auto;
}
div.PopupClose
{
  background-color: black;
  font-weight: bold;
  color: white;
  text-align: center;
  /*position: absolute;*/
  right:0px;
  top:0px;
  width: 20px;
  height: 20px;
  cursor: hand;
  cursor: pointer;
  font-style:italic;
  float: right;
}
.FileRemoved
{
  color: #999;
  text-decoration:line-through; 
}
span.CoAccount
{
    color: #999;
}
#CommunicationTargetFrame
{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.6);
  text-align:center;
  z-index:10;
}
#CommunicationsToFrame
{
  background:#fff;
  border:2px solid #006265;
  max-height: 90vh;
  margin-top: 5vh;
  margin-left: 5%;
  padding-top: 10px;
  overflow-y: auto;
  box-sizing: border-box;

  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -khtml-border-radius:5px;
  -o-border-radius:5px;

  padding-left: 10px;
  padding-right: 10px;

  behavior: url(border-radius.htc);
  max-width: 300px;
}
span.Empty
{
  color: #A9A9A9;
  cursor: pointer;
  font-style:italic;
}
span.AllTo
{
  display: none;
  cursor: pointer;
}
span.ShowAllTo
{
  cursor: pointer;
  font-style:italic;
}
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button
{
  font-family:century gothic, Arial;
}
span.TaskHeader
{
  color:#006265;
}
span.TaskItem
{
  color:#006265;
  font-weight: bold;
}
span.TaskBuilding
{
  color:#006265;
}
table.Steps, td.Steps
{
  border:1pt solid #c6e2e3;
}
table.ReservationTable > thead
{
  position:sticky;
  top: -8px; /*parent padding*/
  background:#fff;
}
table.ReservationTable tr
{
  break-inside: avoid;
}
td.OtherTeacherName,
td.TeacherName
{
  font-size:11pt;
}
td.TeacherName,
span.Titular
{
  color:#006265;
  font-weight:bold;
}
td.TeacherName.Invited
{
  color:#006265;
  background-color:#006265;
  color:#c6e2e3;
  border:2px solid #006265;
  font-weight:normal;
  padding:5px;
}
ul.InvitedTeachers
{
  font-weight:bold;
}
span.TitleDate, span.TitleName
{
  color:#006265;
}
p > a
{
  font-style:italic;
}
div.bottom
{
  position:absolute;
  bottom: 0px;
  border-top:1px solid #006265;
  background-color:#c6e2e3;
  color:#006265;
  left: 0px;
  right: 0px;
  width: 100%;
  text-align:center;
  margin-left: auto;
  margin-right: auto;
}
div.topRight
{
  position:absolute;
  top: 0px;
  bottom: auto;
  left: auto;
  right: 0px;
  margin-left: auto;
  margin-right: 0;
}
div.chooseLanguage
{
  width: 30px;
  border-top:1px solid #006265;
  border-bottom:1px solid #006265;
  color:#006265;
  text-align: center;
}
td.BaseAccountDimmed
{
  color: #999;
}
div.LegendBorder
{
  border: 1px solid #006265;
  padding-left: var(--padding);
  color:#006265;
  border-radius: 5px;
}
.LoginBox
{
  border: 1px solid #006265;
  border-radius: 5px;
  margin-bottom: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  min-height: 52px;
}
@media screen and (min-width:400px)
{
  .LoginBox
  {
    min-width: 95%;
    width: 5%;
  }
}
@media screen and (min-width:800px)
{
  .LoginBox
  {
	  width: 20%;
    min-width: 600px;
  }
}
span.InputBoxDisabled
{
 
}
div.Connect
{
  border: 1px solid #006265;
  border-radius: 5px;
  margin-top: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  cursor: hand;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
  min-height: 29px;
}
td.bankMark
{
  text-align: center;
}
input.QTextLine
{
  width: 100%;
}
div.SubmitAnswer
{
  background-color: #E2F36C;
  text-align: center;
  padding-top: 6pt;
  padding-bottom: 6pt;
  font-size:14pt;
  border-radius:0 0 5px 5px;
  -moz-border-radius:0 0 5px 5px;
  -webkit-border-radius:0 0 5px 5px;
  -khtml-border-radius:0 0 5px 5px;
  -o-border-radius:0 0 5px 5px;
  background: -webkit-linear-gradient(#C4E2C9, #E2F36C 60%);
  background:    -moz-linear-gradient(#C4E2C9, #E2F36C 60%);
  background:         linear-gradient(#C4E2C9, #E2F36C 60%);  
}
div.SubmitAnswer > input
{
  font-weight: bold;
}
#CommunciationTreeTable
{
  width: 100%;
}
#CommunciationTreeTable tr td
{
  border-bottom:1px dotted #8EAA92;
}
.MarkFilter
{
  background-color: #FFCC99;
}
td.TreeHidden
{
  white-space: nowrap;
}
div.HelpBody
{
  padding-left: 15px;
  padding-top: 15px;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -khtml-border-radius:5px;
  -o-border-radius:5px;
  border: 1px solid #006265;
  background:#fff;
 z-index: 10;
}
#PhotoFrame, .screenBackground
{
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: #e1e1e1e5;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#PhotoHolderFrame
{
  top: 0;
  left: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background-color:#c6e2e3;
  padding:10px 10px 10px 10px;
}
#PhotoLabel
{
  font-weight: bold;
  text-align: center;
  color: #006265;
}
div.bottomWarning
{
  position:fixed;
  bottom: 0px;
  border:2px solid #006265;
  background-color:#006265;
  color:#fff;

  left: auto;
  right: auto;
  width: 90%;
  text-align:center;
  padding-left: auto;
  padding-right: auto;
  margin-left: auto;
  margin-right: auto;
}
.InvisibleReport
{
  color:#fff;
}
.Currency
{
  text-align: right;
}

p.SIYear
{
  font-size:12pt;
  Font-weight:700;
  background-color:#006265;
  color:#c6e2e3;
  padding-left:5pt;
  padding-right:5pt;
  margin-bottom:0pt;
  margin-top:0pt;
  padding-bottom:0pt;
  padding-top:0pt;

  border-top-left-radius:5px;
  -moz-border-top-left-radius:5px;
  -webkit-border-top-left-radius:5px;
  -khtml-border-top-left-radius:5px;
  -o-border-top-left-radius:5px;

  border-top-right-radius:5px;
  -moz-border-top-right-radius:5px;
  -webkit-border-top-right-radius:5px;
  -khtml-border-top-right-radius:5px;
  -o-border-top-right-radius:5px;
}

p.SITitel
{
  Font-weight:700;
  text-decoration:underline
}

b.Fiche
{
  background-color:#006265;
  color:#c6e2e3;
  padding-left: 0.2em;
  padding-right: 0.2em;
  display: block;

  border-top-left-radius:5px;
  -moz-border-top-left-radius:5px;
  -webkit-border-top-left-radius:5px;
  -khtml-border-top-left-radius:5px;
  -o-border-top-left-radius:5px;

  border-top-right-radius:5px;
  -moz-border-top-right-radius:5px;
  -webkit-border-top-right-radius:5px;
  -khtml-border-top-right-radius:5px;
  -o-border-top-right-radius:5px;
}

div.FicheBody > table
{
  width: 100%;
}
span.FicheLabel
{
  color:#777;
}
h3.QLabel
{
	color:#E1C3C3;
}
table.Question
{
  width: 100%;
}
td.QuestionLabel
{
  width: 50px;
  white-space: nowrap;
}
div.Trusto
{
	border-top:1px solid #006265;  
  background-color: #c6e2e3;
  padding: var(--padding);
  vertical-align:top;
}
div.TrustoTitle
{
  font-weight: bold;
  color:#006265;
  font-size:13pt;
}
div.TrustoBlock
{
	border:1px solid #006265;
	font-weight: bold;
  padding:5px;
  margin-bottom:var(--margin);
  margin-top: 0.5em;

   border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -khtml-border-radius:5px;
  -o-border-radius:5px;

  behavior: url(border-radius.htc);

}
td.title
{
  /*width: 11em;*/
  white-space: pre-wrap;
}
div.SurveyTime
{
	border:2px solid #006265;
  border-radius:5px 5px 0px 0px;
  -moz-border-radius:5px 5px 0px 0px;
  -webkit-border-radius:5px 5px 0px 0px;
  -khtml-border-radius:5px 5px 0px 0px;
  -o-border-radius:5px 5px 0px 0px;

  behavior: url(border-radius.htc);

   margin-bottom: 0.5em;
}

div.SurveyTimeTitle,
div.SurveyTimeTitleDimmed
{
  font-weight: bold;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 3em;
  background-color:white;
  position: sticky;
  top: 0;

  border-radius:5px 5px 0px 0px;
  -moz-border-radius:5px 5px 0px 0px;
  -webkit-border-radius:5px 5px 0px 0px;
  -khtml-border-radius:5px 5px 0px 0px;
  -o-border-radius:5px 5px 0px 0px;
}
@media print
{
  div.SurveyTimeTitle,
  div.SurveyTimeTitleDimmed
  {
    position: static;
  }
}

div.SurveyTimeTitle,
td.ReplaceHeader
{
  background-color:#006265;
  color:#c6e2e3;
}
div.SurveyTimeTitleDimmed
{
  color:#006265;
}
td.Replacer,
span.RoomReplacer
{
  font-weight: bold;
}
td.Replaced
{
}
td.ReplaceHeader
{
  padding-left: 6px;
}
td.PMDay
{
  text-align: center;
  background-color:#006265;
  color:#c6e2e3;
  font-size:14pt;
  font-weight: bold;
}
.Loading
{
  font-size:20pt;
  font-weight: bold;
  color:#777;
}
.openSubFiles::before {
  content: "\25B6";
  display: inline-block;
  margin-right: 6px;
}
.ScanParticipantRelation.warning,
.warning
{
  border-width:1px;
  border-color:#F4CC9C;
  background-color:#F4CC9C;
  color:#030304;
}
div.AskMandate
{
  border-color:#F4CC9C;
  background-color:#F4CC9C;
  color:#030304;
}
div.AskDoubtfullMandate
{
  color:#777;
}
div.Mandate_Info
{
  font-weight: bold;
}
div.Mandata_Error
{
  background-color:#F4CC9C;
  color:#030304;
}
.custom-combobox 
{
  margin-right: 40px;
}
.ReadReceiptReceivedAll,
.ReadReceiptReceived,
.UnreadMark,
.Unread
{
  font-weight: bold;
}
.ReadMark::before,
.UnreadMark::before
{
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  content: '\00A0';
  width: 8px;
  display: inline-block;
  height: 8px;
  border-radius: 4px;
  margin: 0px 5px 3px 2px;
  vertical-align: middle;  
}
.UnreadMark::before
{
  background-color:#416347;
}
.ReadReceiptIgnored,
.NoReadReceipt,
.ReadMark,
.Read
{
  font-weight: normal;
}
.ReadMark::before
{
  border: 1px solid gray;
}
td.ReadReceiptReceivedAll,
td.FileCategory,
td.ReadMark,
td.UnreadMark
{
  width: 10px;
}
.ReadReceiptReceivedAll::before,
.ReadReceiptReceived::before,
.NoReadReceipt::before,
.ReadReceiptIgnored::before
{
  content: '\2713';
  margin: 0px 5px 3px 2px;
  color: gray;
}
.ReadReceiptIgnored
{
  opacity: 0.5;
}
.ReadReceiptReceivedAll::before
{
  content: '\2713\2713';
  letter-spacing: -5px;
  padding-right: 5px;
}
.ReadReceiptReceivedAll::before,
.ReadReceiptReceived::before
{
  color:#416347;
}
div.fileTitleWithReply
{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
div.FileCategoryChooser
{
  position: absolute;
  left: -5px;
  top: -5px;
  display: grid;
  grid-template-columns: repeat(5, 0fr);
  background-color:#95C21B;
  padding: var(--padding);
  gap: var(--margin);
  z-index: 1;
}
span.FileCategoryMark
{
  position: relative;
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 2px;
  border-color: gray;
  border: 1px solid gray;
  margin: 0px 2.5px;
}
.fileTitle.Unread
{
  color: #030304;
}
table.sortable > thead > tr:first-child
{
  cursor:pointer;
}
textarea.inplace,
input.inplace
{
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  background-color: inherit;
  border: 1px solid #808080;
  padding: 2px;
  width:100%; 
  box-sizing: border-box;
  font-family: inherit;
}
textarea.inplace:hover,
input.inplace:hover
{
  box-shadow: 0px 0px 3px 0px gray; 
}
textarea.inplace:focus,
input.inplace:focus
{
  box-shadow: 0px 0px 5px 0px gray; 
}

th.AbsentPresent,
td.AbsentPresent
{
  background-color:#5cd75c !important;
}
th.AbsentTooLate,
td.AbsentTooLate
{
  background-color:#ffb300 !important;
}
th.AbsentAbsent,
td.AbsentAbsent
{
  background-color:red !important;
}
th.AbsentAbsentAuthorised,
td.AbsentAbsentAuthorised
{
  background-color:#ff8080 !important;
}
th.AbsentAbsentNotAuthorised,
td.AbsentAbsentNotAuthorised
{
  background-color:#A00000 !important;
}
th.AbsentNotExpected,
td.AbsentNotExpected
{
  background-color:#b6daff !important;
}
div.loader 
{
  border: 8px solid #fff;
  border-top: 8px solid #006265;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}

@keyframes spin 
{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

div.StudyObjectiveFrame
{
  display:grid;
  grid-template: "selector total" "pdf pdf" "tree tree" / fit-content(100%) 1fr;
}
div.StudyObjectiveTotal
{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
img.StudyObjectiveMark
{
  height:15px;
}
img.StudyObjectiveMarkOri
{
  height:10px;
  opacity:0.5;
}
div.StudyObjectiveTotal img.StudyObjectiveMark
{
  height:40px;
}
div.StudyObjectiveTotal img.StudyObjectiveMarkOri
{
  height:15px;
}
div.StudyObjectiveTotal span.StudyObjectiveSkipped
{
  height:36px;
  width:36px;
  border-width:6px;
}
div.StudyObjectives2
{
  display:grid;
  grid-area: tree;
  grid-template-columns: 0fr fit-content(75%) 1fr;
}
div.StudyObjectives
{
  display:grid;
  grid-template-columns: fit-content(75%) 1fr;
}
div.StudyObjectivesSchedule
{
  display:grid;
  grid-area: tree;
  grid-template-columns: fit-content(75%) repeat(12, 1fr);
}
span.StudyObjectiveDetail,
div.StudyObjectiveClassTitle
{
  grid-column: 1 / -1;
}
div.StudyObjectiveBulkSub
{
  margin-top: 25px;
  position: relative;
}
div.StudyObjectiveBulk,
div.StudyObjectiveClassTitle
{
  margin-top: 30px;
  position: relative;
}
div.StudyObjectiveClassTitle.Highlight
{
  background-color:#006265;
  color:#fff;
  padding:var(--padding);
}
div.StudyObjectives2 > div.StudyObjectiveClassTitle,
div.StudyObjectives2 > span.StudyObjectiveDetail
{
  grid-column: 3 / -1;
}
div.StudyObjectives2 > span.StudyObjectiveDetailPrefix
{
  grid-column: 1 / 3;
}
div.StudyObjectivesConfig > span:nth-of-type(2n),
div.StudyObjectives2 > span.Alternate,
div.StudyObjectives > span:nth-of-type(6n + 4),
div.StudyObjectives > span:nth-of-type(6n + 5),
div.StudyObjectives > span:nth-of-type(6n + 6),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 28),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 29),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 30),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 31),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 32),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 33),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 34),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 35),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 36),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 37),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 38),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 39),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 40),
div.StudyObjectivesSchedule > span:nth-of-type(28n + 41)
{
  background-color: #ebf6f7;
}
div.StudyObjectivesConfig > span.ChangedStudyObjective
{
  background-color: #d3dfe6;
}
div.StudyObjectivesConfig > span.ChangedStudyObjective:nth-of-type(2n)
{
  background-color: #a3c3d2;
}
div.StudyObjectivesConfig > span.OwnStudyObjective
{
  background-color: #cce1cc;
}
div.StudyObjectivesConfig > span.OwnStudyObjective:nth-of-type(2n)
{
  background-color: #a4d2a3;
}
tr.MainStudyObjective,
div.StudyObjectives2 > span.MainStudyObjective,
div.StudyObjectives > span.MainStudyObjective,
div.StudyObjectivesSchedule > span.MainStudyObjective,
div.StudyObjectivesConfig > span.MainStudyObjective
{
  color: inherit;
  background-color: #fff8d4;
}
div.StudyObjectivesConfig > span.MainStudyObjective:nth-of-type(2n),
div.StudyObjectives2 > span.MainStudyObjective.Alternate,
div.StudyObjectives > span.MainStudyObjective:nth-of-type(6n + 4),
div.StudyObjectives > span.MainStudyObjective:nth-of-type(6n + 5),
div.StudyObjectives > span.MainStudyObjective:nth-of-type(6n + 6),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 28),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 29),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 30),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 31),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 32),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 33),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 34),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 35),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 36),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 37),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 38),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 39),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 40),
div.StudyObjectivesSchedule > span.MainStudyObjective:nth-of-type(28n + 41)
{
  background-color: #e1d387;
}
tr.ExtensionStudyObjective,
div.StudyObjectives2 > span.ExtensionStudyObjective,
div.StudyObjectivesSchedule > span.ExtensionStudyObjective,
div.StudyObjectivesConfig > span.ExtensionStudyObjective
{
  color: #666666;
  background-color: transparent;
}
div.StudyObjectivesConfig > span.ExtensionStudyObjective:nth-of-type(2n),
div.StudyObjectives2 > span.ExtensionStudyObjective.Alternate
{
  background-color: #ebebeb;
}
span.LinkedStudyObjective
{
  opacity: 0.5;
}
@media print
{
  div.StudyObjectives2
  {
    grid-template-columns: 0fr 1fr 0fr;
  }
  div.StudyObjectives
  {
    grid-template-columns: 1fr 0fr;
  }
  div.StudyObjectivesSchedule
  {
    grid-template-columns: 1fr repeat(12, 0fr);
  }
  div.StudyObjectives2 > span:nth-of-type(4n + 4),
  div.StudyObjectives > span:nth-of-type(3n + 3),
  div.StudyObjectivesSchedule > span:nth-of-type(13n + 19)
  {
    border-bottom: 1px solid #ebf6f7;
  }
}
div.StudyObjectivesConfig
{
  align-self:stretch;
}
div.StudyObjectivesConfig .h2
{
  padding-top: 30px;
}
span.StudyObjective
{
  padding:5px;
}
span.StudyObjectiveDetail
{
  padding:5px 5px 5px 1em;
}
span.StudyObjectiveDetail img.StudyObjectiveMark 
{
  height: 10px;
}
span.StudyObjectiveInitialResult
{
  opacity: 0.5;
}
span.StudyObjectiveResultEditor,
span.StudyObjectiveResult,
span.StudyObjectiveInitialResult,
span.StudyObjectiveValue
{
  padding:5px;
  display:flex;
  align-items: center;
  user-select: none;
  gap:5px;
}
span.StudyObjectiveResult,
span.StudyObjectiveInitialResult
{
  position: relative;
  justify-content: center;
}
span.StudyObjectiveResultEditor
{
  position: absolute;
  z-index: 10;
  top: -100%;
  left: 0;
  background-color:#c6e2e3;
  height: 100%;
  box-sizing: border-box;
  border-radius:5px;
  border:2px solid #c6e2e3;
  box-shadow: 2px 2px 2px #888;
}
span.StudyObjectiveResultEditor:focus
{
  outline:0;
}
span.Alternate span.StudyObjectiveResultEditor
{
  background-color: #ebf6f7;
}
span.StudyObjectiveResult:hover,
span.StudyObjectiveInitialResult:hover,
span.StudyObjectiveValue:hover,
span.StudyObjective:hover
{
  box-shadow: 0px 0px 5px 0px gray;
  z-index: 1;
}
span.StudyObjectiveHeader
{
  text-align:center;
}
div.StudyObjectivesSchedule > span.StudyObjectiveValue
{
  border-left: 1px solid #006265;
}
div.StudyObjectivesSchedule > span.StudyObjectiveValue:nth-of-type(14n+1)
{
  border-left: 0px;
}
span.StudyObjectiveGraded,
span.StudyObjectiveSucceeded,
span.StudyObjectiveFailed,
span.StudyObjectiveSkipped
{
  width:12px;
  height:12px;
  margin:2px 0px 2px 0px;
  display:inline-block;
  border-radius:50%;
  box-sizing: border-box;
  vertical-align:top;
  color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
span.StudyObjectiveSucceeded
{
  background-color:green;
}
span.StudyObjectiveFailed
{
  background-color:red;
}
span.StudyObjectiveSkipped
{
  border:2px solid black;
}
div.Wt-tooltip
{
  border: 1px solid gray;
  background-color: white;
  padding: 5px;
  font-size:10pt;
}
div.DayChooser
{
  display: table;
}
div.DayChooser > div
{
  margin-top:5px;
  display: flex;
  align-items: center;
  padding:0px;
}
div.DayChooser > div > div
{
  margin:5px;
}
div.FullScreenPopup
{
  display:flex;
  position: fixed; 
  top:0; 
  left:0; 
  right:0;
  bottom:0;
  z-index:10;
  background-color:#00000022;
}
div.FullScreenPopup > div
{
  display: flex;
  flex-grow: 1;
  flex-direction:column;
  margin:10px;
  border:2px solid #006265;

}
div.FullScreenPopupHeader
{
  background-color: #006265;
  color:#c6e2e3;
  font-size:12pt;
  padding:5px;
}
div.FullScreenPopupBody
{
  flex-grow: 1;
  background:#fff; 
}
.Wt-progressbar
{
  box-sizing: content-box;
}
button.highlight
{
  box-shadow:0px 0px 5px #006265;
  margin:5px;
}
input[type='submit'].standalone,
input[type='button'].standalone,
button.standalone
{
  margin:5px;
  display:block;
}
label > input[type='checkbox'] ~ span
{
  margin-left: var(--margin);
}
div.dialog-layout
{
  max-height:90vh;
  max-height:90svh;
}
.Wt-dialog div.body 
{
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: var(--paddingLarge);
}
.AgendaCourseChooserDialog
{
  overflow-y: auto;
}
.Wt-dialog div.Wt-msgbox-body
{
  display: block;
}
div.Wt-dialog .Wt-msgbox-icon
{
  margin-bottom: 0px;
}
.Wt-dialog div.titlebar
{
  background-color:#006265;
  color:#fff;
    border-radius:3px 3px 0px 0px;
    min-height: 20px;
  padding-right: 20px;
}
div.Wt-dialog
{
  border:2px solid #006265;
  border-radius:5px;
  background-color:#fff;
  overflow: hidden;
  box-shadow: 2px 2px 2px #888;
} 
div.Wt-dialog.center-on-page
{
  top: 0 !important; 
  left: 0 !important;
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
  transform: translate(calc(50svw - 50%), calc(50svh - 50%));
  min-width: 500px;
  min-width: min(500px, 75%);
}
div.Wt-dialog.full-page
{
  top: 5vh !important;
  top: 5svh !important;
  left: 2% !important;
  width: 95%;
  height: 90vh;
  height: 90svh;
  transform: none;
}
input.Wt-suggest-dropdown
{
  border-width: 1px;
  border-radius: 2px;
  border-color: #8f8f9d;
}
div.TableAlign
{
  display: inline-block;
}
div.TableAlign > table
{
  width:100%;
}
.LoginBadge
{
  box-sizing: content-box;
  height: 1.2em;
  width: 1.2em;
  height: 1lh;
  width: 1lh;
  overflow: hidden;
  font-size: 12pt;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  position: relative;
  padding:7px;
  cursor: pointer;
  margin: 0px;
}
.LoginBadgeHolder.Disabled > .LoginBadge
{
  cursor: default;
}
.LoginBadgeHolder
{
  position: relative;
}
#LoginBadgeInfo
{
  display: none;
  position: absolute;
  z-index: 100;
  right:0px;
  width:300px;
  width:min(300px, 100vw);
  min-height:250px;
}
#LoginBadgeInfo.show {display:block;}
div.AutoScroll
{
  overflow-y: auto;
  min-height: 100px;
    -ms-overflow-style: none;
  scrollbar-width: none;
}
div.AutoScroll::-webkit-scrollbar 
{
  display: none;
}

.AgendaList,
.AgendaDayFull,
.AgendaWeekFull,
.AgendaDays,
.AgendaCourseView
{
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.AgendaHourList,
.AgendaInfos,
.AgendaWeek,
.AgendaHourInfos,
.AgendaDay,
.AgendaShowedInfoCategories,
.AgendaListRight,
.AgendaConfigList
{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.AgendaInfo,
.AgendaConfigItem
{
  display: flex;
  flex-direction: row;
  gap: 5px;
  min-height: 1em;
}
.AgendaConfigItem
{
  display: flex !important; /*ToDo remove this line */
}
.AgendaInfos,
.AgendaDay,
.AgendaWeek,
.AgendaListRight
{
  flex-grow: 1;
  min-width: 100px;
}
.AgendaDays
{
  overflow-x: auto;
}
.AgendaDaysAligned
{
  display: grid;
  column-gap: 10px;
  grid-template-columns: repeat(5, 1fr);
}
.AgendaDaysAligned > .AgendaHeader,
.AgendaDaysAligned .AgendaHour
{
  margin-bottom:10px;
  flex-grow: 1;
}
.AgendaDaysAligned .AgendaHourList
{
  gap: 0px;
}
.AgendaDays > *
{
  flex-grow: 1;
  flex-basis: 0;
}
.AgendaCopyHeader,
.HeaderSlider,
:not(td).AgendaHeader
{
  padding:10px;
  background-color:#006265;
  color:#c6e2e3;
  border-radius:5px;
  font-size:12pt;
  text-align:center;
}
.AgendaCopyHeader,
.HeaderSlider
{
  display:flex;
  flex-direction:row;
  gap:10px;
  justify-content: space-between;
  align-items: center;
}
.AgendaCopyHeader
{
  padding:5px 10px;
}
.AgendaCopyHeader > *:first-child
{
  flex-grow: 1;
}
.AgendaHourTitle
{
  color:#006265;
  font-weight:bold;
}
.HeaderSliderAnchor
{
  cursor:pointer;
}
.AgendaInfos > *,
.AgendaHour
{
  display:flex;
  flex-direction:row;
  gap:10px;
  padding:10px;
  background-color:#bdd7d8;
  border-radius:5px;
}
.AgendaHour
{
  cursor: pointer;
  overflow-wrap: anywhere;
  min-width: 100px;
}
.AgendaHour.Selected
{
  filter: brightness(90%);
}
.AgendaInfos > *.Error,
.AgendaHour.Error
{
	background-color:#E1C3C3;
}
.AgendaHour.NoStudents,
.AgendaHour.Dimmed
{
  opacity: 0.5;
}
.AgendaHour:not(.NoStudents) .ActivityForOther
{
  opacity: 0.5;
}
.AgendaStudentConfiguratorItem,
.AgendaAddCustomHour
{
  display:flex;
  align-items:center;
  gap: var(--margin);
}
.AgendaStudentConfiguratorItem input
{
  margin: var(--padding);
}
.AgendaHourTime
{
  color:#006265; 
  overflow-wrap: normal;
}
.AgendaInfoCategoryMark
{
  width: 10px;
  align-self: stretch;
  flex-shrink: 0;
}
.AgendaDefaultInfoEditor,
.AgendaHourEditor2,
.AgendaHourEditor
{
  width: 90vw;
}
.AgendaHourEditor div.body,
.AgendaHourEditorInfos
{
  gap: var(--margin);
  padding: var(--paddingLarge);
  display: grid;
  grid-template-columns: auto auto auto minmax(50%, 1fr) auto;
  align-items: center;
}
.AgendaDefaultInfoEditor div.body
{
  display: flex;
  flex-direction: row;
  gap: var(--margin);
  align-items: center;
}
.AgendaHourEditorDefaultInfos
{
  display: flex;
  flex-direction: column;
  gap: var(--margin);
  padding: var(--paddingLarge);
}
.AgendaHourEditorTitle
{
  display: flex;
  gap: var(--margin);
  align-items: center; 
}
.AgendaInfoEditor
{
  display: contents;
}
.AgendaDefaultInfoEditor textarea,
.AgendaInfoEditor > textarea
{
  flex-grow: 1;
}
.AgendaDefaultInfo
{
  display: flex;
  gap: var(--margin);
  padding: var(--paddingLarge);
  background-color:#bdd7d8;
  border-radius:5px;
  cursor: pointer;
}
.AgendaDefaultInfo:hover
{
  background-color:#abc2c3;
}
.AgendaCourseChooserDialog > *,
.AgendaInfoCategoryDialog > *
{
  padding: var(--paddingLarge);
  cursor: pointer; 
  display: flex;
  gap: var(--margin);
}
.AgendaCourseChooserDialog > *:hover,
.AgendaInfoCategoryDialog > *:hover
{
  background-color:#95C21B; 
}
.AgendaHourAbsent
{
  height: 25px;
}
.AgendaCalendar
{
  display: grid;
  gap: var(--margin);
}
.AgendaCalendarDay
{
  padding: var(--paddingLarge);
  text-align: center;
  position: relative;
  user-select: none;
  border-radius:5px;
}
.AgendaCalendarDay:hover
{
  background-color:#bdd7d8;
  cursor: pointer;
}
.AgendaCalendarDay.Today
{
  color:#c6e2e3;
}
.AgendaCalendarDay.Today:hover
{
  color:inherit;
}
.AgendaCalendarDay.Today::before
{
  content: ' ';
  background-color: #90AE95;
  border-radius: 100%;
  position: absolute;
  top: calc(50% - 1em);
  left: calc(50% - 1em);
  width: 2em;
  height: 2em;
  z-index: -1;
}
.AgendaCalendarDay.Active:hover,
.AgendaCalendarDay.Active
{
  background-color:#006265;
  color:#c6e2e3;
}
.AgendaCalendarDayItems
{
  display: flex;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 10px;
  overflow: hidden;
}
.AgendaCalendarDayItem
{
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  vertical-align: top;
  margin-right: 2px;
}
.InfoStudentTargetDialog .body,
.AgendaStudentConfigurator .body
{
  gap: var(--margin);
}
.InfoStudentTargetDialog input
{
  margin-right: var(--margin);
}
.SidePanel
{
  display: flex;
  flex-direction: row;
  gap: var(--margin);
}
.SidePanelContents
{
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--margin);
}
.SidePanelHandle
{
  width: 1.5em;
  display: flex;
  background-color: #00000010;
  cursor: pointer;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.25s;
  flex-shrink: 0;
}
.SidePanelHandle:hover
{
  opacity: 1;
}
.SidePanelHandle > span
{
  position: sticky;
  bottom: 25vh;
  top: 25vh;
}

div.form > div > table > tbody > tr > td
{
  padding: 5px;
}
div.form > div > table > tbody > tr > td:first-child:not(.form-fullfield)
{
  font-style: italic;
  padding: 7px;
}
div.form-buttons
{
  padding-top: 10px;
  display: flex;
  gap: 5px;
}
td.form-buttons
{
  padding-top: 10px;
  display: flex;
  gap: 5px;
}
td.form-buttons > img
{
  align-self: center;
}
.box > div.form-buttons
{
  justify-content: center;
}
div.form .error
{
  margin-bottom: 0px;
}
input[type="color"]
{
  width: 25px;
  height: 25px;
  border: 0px;
  padding: 0px;
}
.FlexColumn
{
  flex-direction: column;
  gap: var(--margin);
  align-self: stretch;
  align-items: start;
  display: flex;
}
.FlexColumn > h1
{
  margin-bottom: var(--padding);
}
.FlexColumn.Inline
{
  display: inline-flex;
}
div.box.FlexColumn
{
  display: flex;
  align-self: auto;
}
.FlexColumn.Center
{
  align-items: center;
}
.FlexColumn.NoOverflow
{
  min-width: min-content;
}
.FlexColumn.Stretch
{
  align-items: stretch;
}
.FlexColumn > .Stretch
{
  align-self: stretch;
}
.FlexColumn.LargeSticky,
.FlexColumn.Sticky
{
  align-self: start;
}
.FlexRowWrapCompact,
.FlexRowWrap,
.FlexRow
{
  gap: var(--margin);
  align-self: stretch;
  align-items: center;
  display: flex;
}
span.FlexRow
{
  display: inline-flex;
}
.SmallRow.Wrap,
.FlexRow.Wrap,
.FlexRowWrap
{
  flex-wrap:wrap;
}
.FlexRowWrapCompact
{
  flex-wrap:wrap;
  row-gap:0px;
}
.FlexRowWrap.Center,
.FlexRow.Center
{
  justify-content: center;
}
.FlexRow.Top
{
  align-items: flex-start;
}
.FlexRow.Top > .FlexRow
{
  align-self: flex-start;
}
.FlexColumn > hr
{
  align-self: stretch;
  margin: 0px;
}
.FlexColumn > div.box
{
  margin: 0px;
}
@media screen
{
  #virtualScrollContent
  {
    overflow: hidden;
    height: 100%;
    position: fixed;
    inset: 0;
    padding: 8px;
    box-sizing: border-box;
  }
  body.virtualScroll
  {
    margin: 0px;
  }
}
input[type='time'],
input[type='date'],
input[type='password'],
input[type='number'],
input[type='text'],
input[type=''],
input:not([type]),
textarea
{
  border-radius: 5px;
  border: 1px solid lightgrey;
}
div.LogbookChart
{
  width: 100%; 
  height:300px;
  display:inline-block;
}
div.google-visualization-tooltip 
{
  padding: var(--paddingLarge);
  padding-bottom: 0px;
}
.Indent,
div.ExpandContainer
{
  margin-left: 20px;
}
div#Classes,
div.CellList,
div.SelectClass,
div.SelectDefinition
{
  margin-top: var(--margin);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex-basis: 100%;
}
div.FlexRow > span,
div.FlexRowWrap > span,
div#Classes > span,
div.CellList > span,
div.SelectClass > span,
div.SelectDefinition > span
{
  margin:0px;
}
a.Tooltip
{
  margin-left: var(--margin);
  position: relative;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  font-size:10pt;
}

.InlineImage,
.LoginBadge svg,
ul.MyRoMenu svg,
a.Tooltip > img
{
  height: 1.2em;
  width: 1.2em;
  height: 1lh;
  width: 1lh;
  vertical-align:text-top;
}

span.TooltipHolder
{
  display: none;
  font-weight: normal;
  font-style: normal;
  font-size:10pt;
}

.TooltipContent
{
  background-color: white;
  color: black;
  border-radius: 6px;
  padding: var(--paddingLarge);
  position: absolute;
  z-index: 100;
  bottom: calc(100% + 7px);
  width: max-content;
  max-width: 90vw;
  box-sizing: border-box;
  box-shadow: 2px 2px 10px gray;
  text-align: left;
}

span.TooltipHolder.Below .TooltipContent
{
  bottom: unset;
  top: calc(100% + 7px);
}

span.TooltipHolder::after 
{
  content: "";
  position: absolute;
  top: var(--tooltipTipTop, -7px);
  left: var(--tooltipTipLeft, 50%);
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: white transparent transparent transparent;
  z-index: 100;
}

span.TooltipHolder.Below::after 
{
  top: var(--tooltipTipTop, unset);
  bottom: var(--tooltipTipBottom, -7px);
  border-color: transparent transparent white transparent;
}

.CountIndicator
{
  font-size:8pt;
}

@media screen and (max-width:599px)
{
  td.schoolInfo,
  ul.MyRoMenu.HideUnselected li.item:not(.ToggleAll)
  {
    display:none;
  }
  .HideSmall
  {
    display: none;
  }
  .SmallColumn
  {
    flex-direction: column;
  }
  .SmallRow
  {
    flex-direction: row;
  }
  .SmallContents
  {
    display: contents;
  }
}
@media not screen, (min-width:600px)
{
  ul.MyRoMenu li.ToggleAll
  {
    display:none;
  }
  .ShowSmall
  {
    display: none;
  }
  .LargeSticky
  {
    position: sticky;
    top: 0;
    background:#fff;
    z-index: 1;
  }
}

.ScanParticipants
{
  display: inline-flex; flex-direction: column; gap: 10px; margin-top: 10px;
}
div.DrankParticipant,
div.ScanAnimator,
div.ScanParticipant
{
  border-radius:5px;
  padding: 10px; 
  display: flex; 
  gap: 10px; 
  align-items: center; 
}
.ScanParticipantTitle
{
  width: 200px;
}
.ScanParticipantRelations
{
  border-radius:5px;
  display: flex; 
  flex-wrap: wrap; 
  align-items: stretch; 
  gap: 10px; 
  flex-grow: 1; 
  justify-content: end;
}
.DrankParticipantTitle,
.ScanAnimatorTitle,
.ScanParticipantRelation
{
  padding:10px; 
  border-radius:10px; 
  width: 200px;
  border-radius:5px;
  border:2px solid #006265;
  cursor: pointer;
}
.DrankParticipantTitle:hover,
.ScanAnimatorTitle.Selected,
.ScanAnimatorTitle:hover,
.ScanParticipantRelation.Selected,
.ScanParticipantRelation:hover
{
  color: #c6e2e3;
  background-color:#006265; 
}
.ScanPresent
{
  border-radius:5px; 
  padding: 10px; 
  flex-shrink: 0;
}
.ScanPresent > div
{
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
}
.ScanPresentHolder
{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  white-space: nowrap;
}
tr.OtherShoppingCart,
tr.ActiveShoppingCart
{
  position: relative;
}
tr.OtherShoppingCart::after,
tr.ActiveShoppingCart::after
{
  pointer-events: none;
  position: absolute;
  content: '';
  display: block;
  inset: 0;
}
tr.OtherShoppingCart
{
  font-style: italic;
}
tr.OtherShoppingCart::after
{
  background: rgba(255,255,255,.5);
}
tr.ActiveShoppingCart::after
{
  background: rgba(0,0,255,.1);
}
.SpeelpleinInfo,
.Disease
{
  display: flex; 
  flex-direction: row; 
  flex-wrap:wrap;
  gap: 20px;
}
.NotSubscribed,
.NegativeSaldo,
.NotPaid
{
  font-weight: bold;
  color: #cc0a0a;
}
.ActivityFree
{
  font-weight: bold;
  color: #2b8800;
}
.SpeelpleinInfo > *,
.Disease > *
{
  width: 200px;
}
.SpeelpleinInfo input[type="checkbox"]
{
  margin: 0px;
  margin-right: 5px;
}
table.sortable input[type="checkbox"]
{
  margin: 0px 10px 0px 0px;
}
body
{
  display: flex;
  flex-direction: column;
}
div.SpeelpleinDomRoot
{
  flex-grow:1;
  width: 100%;
  align-self: center;
  max-width: 1024px;
  display: flex;
  flex-direction: column;
}
div.SpeelpleinDomRoot.FullScreen
{
  max-width: unset;
}

div.SpeelpleinRoot,
div.SpeelpleinPublic
{
  display: flex;
  flex-direction: column; 
  flex-grow: 1;
}
div.SpeelpleinRoot > div.Wt-stack
{
  flex-grow:1;
}
div.SpeelpleinTopHeader
{
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  color:#006265;
  font-size:13pt;
  font-variant: small-caps;
  margin-bottom: 10px;
}
div.SpeelpleinTopHeader > a
{
  color:#006265;
  text-decoration: none;
}
img.ActivityMainImage
{
  max-height:calc(50vw);
  max-height:calc(min(50vw, 512px));
  margin-bottom: 10px;
  width: 100%;
  object-fit: cover;
}

div.SpeelpleinCategories
{
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
}

div.SpeelpleinCategories > *
{
  padding: 5px;
  border-radius:5px;
  border: none;
  background-color:#006265;
  color:#fff;
  font-size:13pt;
  height: 50px;
  flex-grow: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  transition: filter 0.5s ease-out, color 0.5s ease-out;
  text-decoration: none;
}

div.SpeelpleinCategories > *:hover
{
  filter: brightness(0.90);
  cursor: pointer;
}

div.SpeelpleinActivities
{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.SpeelpleinBadge
{
  background-color: white;
  border:1px solid #006265;
  box-shadow: 2px 2px 2px #888;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  padding-bottom: 10px;
}
.SpeelpleinBadge:hover
{
  text-decoration: none;
}

.SpeelpleinBadge > img:first-child
{
  width: 100%;
  object-fit: cover;
  aspect-ratio: 2 / 1;
}

.SpeelpleinBadge > span,
.SpeelpleinBadge > .TextWithIcon
{
  padding: 0px 10px;
}

.PopupButton
{
  border:1px solid gray;
  border-radius: 23px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-weight: bold;
  user-select: none;
  gap: 10px;
  cursor: pointer;
}
.PopupButton > img
{
  height: 1em;
}

.PopupButton.Active,
.PopupButton:hover
{
  border:1px solid black;
}

.PopupButton > *:nth-child(2)
{
  flex-grow: 1;
}

.PopupForButton
{
  background-color: white;
  box-shadow: 0px 0px 10px #888;
  background-color:#c6e2e3;
  padding: 10px;
}

.PopupForButton
{
  opacity: 0;
  animation: PopupForButton-out .2s cubic-bezier(.22,.61,.36,1) forwards;
}

.PopupForButton.Active
{
  animation: PopupForButton-in .2s cubic-bezier(.22,.61,.36,1) forwards;
}

.AgeChooserPopup
{
  display: flex;
  flex-wrap: wrap;
  gap: 10px; 
}

.AgeChooserPopup > span
{
  background-color: rgba(0,0,0,0.1);
  border-radius: 23px;
  padding: 10px;
  user-select: none;
  cursor: pointer;
}

.AgeChooserPopup > span:hover
{
  background-color: rgba(0,0,0,0.2);
  border-radius: 23px;
  padding: 10px;
  user-select: none;
}

@keyframes PopupForButton-out {
  from {opacity: 1; transform: translateY(9px);}
  to {opacity: 0; transform: translateY(0px);}
}

@keyframes PopupForButton-in {
  from {opacity: 0; transform: translateY(0px);}
  to {opacity: 1; transform: translateY(9px);}
}

.TextWithIcon > img
{
  height: 1em;
  padding-right: 10px;
}

button.Speelplein
{
  border: none;
  background-color:#006265;
  color:#fff;
  font-weight: bold;
  transition: filter 0.5s ease-out;
  transition: background-color 0.5s ease-out;
  padding: 10px 20px 10px 20px;
  cursor:pointer;
  border-radius: 3px;
  letter-spacing: 0.1em;
  font-family:century gothic, Arial;
}
button.Speelplein:not(:disabled):active,
button.Speelplein:not(:disabled):hover
{
  filter: brightness(0.90);
}
button.Speelplein:disabled
{
  opacity: 0.5;
  cursor: auto;
}
button.Speelplein.Secondary:not(.active)
{
  color:#006265;
  background-color: rgba(0,0,0,0.1);
}
button.Speelplein.Secondary.Active:not(:disabled):hover,
button.Speelplein.Secondary:not(.active):not(:disabled):hover
{
  background-color: rgba(0,0,0,0.2);
}
button.Speelplein.Excluded
{
  background-color: red;
}

div.SpeelpleinSelector
{ 
  display: flex;
  margin-bottom: 10px;
  gap: 10px;
  flex-wrap: wrap;
}

.SpeelpleinCalendar
{
  user-select: none;
}

div.SpeelpleinCalendarHead
{
  display: flex;
  gap: 10px;
  white-space: nowrap;
  align-items: center;
  font-size:12pt;
  font-weight: bold;
  justify-content: space-between;
  margin-bottom: 10px;
}

div.SpeelpleinCalendarHead > img
{
  width: 1em;
  height: 1em;
  padding: 10px;
}

div.SpeelpleinCalendarHead > img,
.SpeelpleinCalendar th > span,
.SpeelpleinCalendar td > span
{
  display: inline-block;
  padding: 10px;
  border-radius: 20px;
  transition: background-color 0.2s ease-out;
  width:1.2em;
  text-align:center;
  margin: 2px;
}
.SpeelpleinCalendar > table
{
  border-collapse: collapse;
}
.SpeelpleinCalendar td.Today > span
{
  border: 2px solid rgba(0,0,0,0.1);
}
.SpeelpleinCalendar td.Weekend
{
  background-color: #ebf6f7;
}
.SpeelpleinCalendar td.Active > span,
.SpeelpleinCalendarHead > img:hover,
.SpeelpleinCalendar td > span:hover
{
  background-color: rgba(0,0,0,0.1);
  cursor: pointer;
}

@media screen and (max-width:799px)
{
  div.SpeelpleinActivities
  {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width:599px)
{
  div.SpeelpleinActivities
  {
    grid-template-columns: 1fr;
  }
}

.Wt-dialogcover,
.SpeelpleinLogin
{
  inset: 0;
  backdrop-filter: blur(6px) grayscale(80%);
  -webkit-backdrop-filter: blur(6px) grayscale(80%);
  display: flex;
  animation: SpeelpleinLogin-out .2s forwards;
}
.Wt-dialogcover
{
  background:none !important;
  opacity:1 !important;
  filter:none !important;
}
@keyframes SpeelpleinLogin-out {
  from {backdrop-filter: blur(0px) grayscale(0%);}
  to {backdrop-filter: blur(6px) grayscale(80%);}
}
.SpeelpleinBookingBody,
.SpeelpleinLoginBody
{
  margin: auto;
  background-color: #fff;
  max-height: 100vh;
  padding: 10px;
  box-shadow: 0px 0px 20px #888;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  border-radius: 3px;
}
.SpeelpleinLoginBody
{
  max-width: 400px;
  min-height: 200px;
}
.SpeelpleinBookingBody > .Wt-stack,
.SpeelpleinBookingBody > .Wt-stack > *,
.SpeelpleinLoginBody > .Wt-stack,
.SpeelpleinLoginBody > .Wt-stack > *
{
  display: flex;
  flex-direction: column;
  min-height: 0px;
}
.SpeelpleinChooseParticipant,
.SpeelpleinLoginOptions
{
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size:11pt; 
}
.SpeelpleinChooseParticipant > *,
.SpeelpleinLoginOptions > *
{
  background-color: rgba(0,0,0,0.1);
  padding: 10px 20px;
  min-height: 50px;
  border-radius: 25px;
  user-select: none;
  transition: background-color 0.5s ease-out;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0px 0px 5px #e8e8e8;
  box-sizing: border-box;
}
.SpeelpleinChooseParticipant > *:not(.Disabled):hover,
.SpeelpleinLoginOptions > *:not(.Disabled):hover
{
  background-color: rgba(0,0,0,0.2);
  cursor:pointer;
}
.SpeelpleinChooseParticipant > *.Selected
{
  background-color:#006265;
  color:#fff;
}
.SpeelpleinChooseParticipant > *.SelectedDimmed
{
  background-color:#c6e2e3;
}
.SpeelpleinChooseParticipant > *
{
  flex-direction: column;
  justify-content: center;
}
.ExternalLoginButton > span
{
  flex-grow: 1;
  text-align: center;
}
.ExternalLoginButton > img
{
  height: 2em;
}
.SpeelpleinLoginFooter
{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.FloatingLineEdit
{
  position: relative;
  margin: 3px;
  font-size:11pt; 
}
.FloatingLineEdit > textarea,
.FloatingLineEdit > select,
.FloatingLineEdit > input
{
  padding: 20px;
  border-radius: 5px;
  width: 100%;
  border:1px solid lightgrey;
  transition: border-color .2s ease-in-out,box-shadow .2s ease-in-out;
  font-size: inherit;
  background-color: #fff;;
  box-sizing: border-box;
}
.FloatingLineEdit > textarea:focus,
.FloatingLineEdit > select:focus,
.FloatingLineEdit > input:focus,
input.Speelplein:focus
{
  border-color: #416347;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(65, 99, 71,.25);
}
.FloatingLineEdit > select:invalid,
.FloatingLineEdit > select.Wt-invalid,
.FloatingLineEdit > textarea:invalid,
.FloatingLineEdit > input:invalid,
.FloatingLineEdit > input.Wt-invalid,
.FloatingLineEdit > input.error,
input.Speelplein:invalid
{
  border-color: #a02626;
  box-shadow: none;
} 
.FloatingLineEdit > select:invalid:focus,
.FloatingLineEdit > textarea:invalid:focus,
.FloatingLineEdit > input:invalid:focus,
.FloatingLineEdit > input.Wt-invalid:focus,
.FloatingLineEdit > input.error:focus,
input.Speelplein:invalid:focus
{
  box-shadow: 0 0 0 3px rgba(160, 38, 38, 0.25);
} 
.FloatingLineEdit > span
{
  position: absolute;
  left: 20px;
  top: 20px;
  transition: top .2s ease-in-out;
  pointer-events: none;
  color: #666;
}
.FloatingLineEdit > textarea:focus ~ span,
.FloatingLineEdit > textarea:not(:placeholder-shown) ~ span,
.FloatingLineEdit > select:focus ~ span,
.FloatingLineEdit > select:not(:placeholder-shown) ~ span,
.FloatingLineEdit > input:not(:placeholder-shown) ~ span,
.FloatingLineEdit > input:focus ~ span
{
  top: 10px;
  color: #888;
  font-size:9pt;
  overflow: hidden;
  white-space: nowrap;
  right: 10px;
  text-overflow: ellipsis;
}
.FloatingLineEdit > textarea:disabled ~ span,
.FloatingLineEdit > select:disabled ~ span,
.FloatingLineEdit > input:disabled ~ span
{
  color: grey;
}
.FloatingLineEdit > textarea:focus,
.FloatingLineEdit > textarea:not(:placeholder-shown),
.FloatingLineEdit > select:focus,
.FloatingLineEdit > select:not(:placeholder-shown),
.FloatingLineEdit > input:not(:placeholder-shown),
.FloatingLineEdit > input:focus
{
  padding-top: 30px;
  padding-bottom: 10px;
}
.FloatingLineEdit > label > input[type=checkbox] ~ span
{
  margin-top:7px;
}
.SpeelpleinInfo .FloatingLineEdit > label > input[type=checkbox] ~ span
{
  margin-top:0px;
}
.FloatingLineEdit > div.error
{
  margin-top:1px;
}
div.Wt-filedropzone
{
  border: thick dashed #c6e2e3;
  background-color: transparent;
  box-sizing: border-box;
}
.SpeelpleinUploadWidget,
.SpeelpleinImageUpload
{
  display: flex;
  gap: 10px;
  align-items: center;
}
.SpeelpleinUploadWidget > .Wt-filedropzone,
.SpeelpleinImageUpload > .Wt-filedropzone
{
  flex-grow: 1;
}
.SpeelpleinUploadWidget > img,
.SpeelpleinImageUpload > img
{
  max-width: 100px;
  max-height: 100px;
}
.SpeelpleinUploadWidget
{
  color:#030304;
}
.FloatingUploadWidget,
.FloatingImageUpload
{
  border: 1px solid lightgrey;
  border-radius: 5px;
  padding: 10px;
  color: #888;
  font-size:9pt;
  padding-left: 20px;
}

ul.SpeelpleinAttachments > li
{
  margin-bottom: 10px;
  list-style: none;
}
.ScrollableEditor
{
  overflow: auto;
}
.Wt-dialog .ScrollableEditor
{
  padding: 10px;
  margin: -10px;
}
.SpeelpleinAgeEditor
{
  display: flex;
  gap: 10px;
  flex-direction: column; 
}
.SpeelpleinAgeOption
{
  border: 1pt solid darkgray; 
  padding:0.5em; 
  border-radius: 5px; 
  width: 48em;
}
.SpeelpleinAgeOption:not(.Checked)
{
  color: darkgray;
}
.SpeelpleinAgeOption.Checked
{
  background-color: #efefef;
}
.SpeelpleinAgeOption > input[type='text']
{
  width: 5em;
  padding: 1px 5px;
}
.SpeelpleinWidgetInfoAppend
{
  height: 10px;
}
.SpeelpleinWidgetInfoAppend.AcceptDrop,
.SpeelpleinWidgetInfo > .AcceptDrop
{
  border-top:1px solid red;
}
.SpeelpleinWidgetInfo > .Info
{
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 2px 2px 4px #ccc;
  display: flex;
  gap: 10px; 
  user-select: none;
  background-color: #fff;
}
.SpeelpleinWidgetInfo > .Info > :first-child
{
  flex-grow: 1;
}
.SpeelpleinWidgetInfo > .Info:not(.AcceptDrop):hover
{
  background-color: #EEE;
  cursor: pointer;
}
.SpeelpleinWidgetInfo > button,
.SpeelpleinWidgetInfo > .Children
{
  margin-left: 20px;
}
.SpeelpleinWidgetInfo .DragHandler
{
  padding-left: 5px;
  padding-right: 5px;
}
.SpeelpleinShoppingCartSwitcherItem,
.SpeelpleinShoppingCartItem
{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr auto;
  box-shadow: 2px 2px 4px #ccc;
  padding: 10px;
  margin:2px;
}
.SpeelpleinShoppingCartSwitcherItem.Active
{
  background-color:#c6e2e3;
}
.SpeelpleinShoppingCartSwitcherItem.Active > button,
.SpeelpleinShoppingCartSwitcherItem.Active > button:hover
{
  background-color: transparent;
  cursor: auto;
}
.SpeelpleinShoppingCartSwitcherItem.Other
{
  opacity: 0.5;
}
.SpeelpleinShoppingCartSwitcherItem.Open
{
  background-color:#F4CC9C;
}
.SpeelpleinShoppingCartTotal
{
  display: flex;
  font-weight: bold;
  padding: 12px;
  align-items: center;
}
.SpeelpleinShoppingCartTotal > *:first-child
{
  flex-grow: 1;
}
.SpeelpleinBookingItems,
.SpeelpleinShoppingCartItems,
.SpeelpleinShoppingCartSwitcher
{
  display: flex;
  flex-direction: column;
  gap:  10px;
}
.SpeelpleinShoppingCartItems
{
  overflow-y: auto;
}
.SpeelpleinShoppingCartItems > .SpeelpleinShoppingCartTotal
{
  padding-top: 0px;
  padding-bottom: 0px;
}
.SpeelpleinBookingItem
{
  display: grid;
  grid-gap: 10px;
  grid-template:
    "a c d" min-content
    "a e b"
    "a f g" 
    "a h h" 1fr / min-content 1fr auto;
  box-shadow: 2px 2px 4px #ccc;
  padding: 10px;
  cursor: pointer;
  align-items: start;
}
.SpeelpleinBookingItem > .Image
{
  height: 100px;
  width: 100px;
  object-fit: cover;
  grid-area: a;
}
.SpeelpleinBookingItem > .Assigned,
.SpeelpleinBookingItem > .OnWaitingList,
.SpeelpleinBookingItem > .Price
{
  grid-area: b;
  white-space: nowrap;
  text-align: right;
}
.Assigned
{
  color: #3d9104;
}
.Rejected,
.OnWaitingList
{
  color: #d54600; 
}
.SpeelpleinBookingItem > .Date
{
  grid-area: c;
}
.SpeelpleinBookingItem > .Participant
{
  grid-area: d;
  font-weight: bold;
  text-align: right;
}
.SpeelpleinBookingItem > .Title
{
  grid-area: e;
  font-weight: bold;
}
.SpeelpleinBookingItem > .info
{
  grid-area: f;
  white-space: pre-wrap;
}
.SpeelpleinBookingItem > .Details
{
  grid-area: h;
}
.SpeelpleinBookingItem > .SpeelpleinLoginFooter,
.SpeelpleinBookingItem > .Remove
{
  grid-area: g;
  white-space: pre-wrap;
  justify-content: right;
}
@media screen and (max-width:599px)
{
  .SpeelpleinBookingItem
  {
    grid-template:
      "a c" min-content
      "a d"
      "a b"
      "a e"
      "a f"
      "a g"
      "a h" / min-content auto;
  }
  .SpeelpleinBookingItem > .Price,
  .SpeelpleinBookingItem > .Participant,
  .SpeelpleinBookingItem > .OnWaitingList
  {
    text-align: left;
  }
}
.ShoppingCart
{
  position: relative;
  align-self: end;
  height:1.5em;
  cursor: pointer;
}
.ShoppingCart > img
{
  height:100%;
}
.ShoppingCart > span
{
  background-color: red;
  display: inline-flex;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 9pt;
  position: absolute;
  top: -10px;
  right: -10px;
  box-shadow: 1px 1px 3px #888;
}
table.AnimatorTask,
table.AnimatorPlanning
{
  border-spacing: 0px;
}
table.AnimatorTask > thead,
table.AnimatorPlanning > thead
{
  position:sticky;
  top:0px;
  z-index:100;
} 
table.AnimatorTask th,
table.AnimatorTask td,
table.AnimatorPlanning th,
table.AnimatorPlanning td
{
  vertical-align: middle;
  text-align:center;
  border: 1px solid #fff;
  background-color: #fff;
  position: relative;
}
table.AnimatorTask > thead th:nth-child(n+3),
table.AnimatorTask > tbody th,
table.AnimatorPlanning > thead th:nth-child(n+4),
table.AnimatorPlanning > tbody th
{
  font-weight:normal;
  background-color: #c6e2e3;
  padding:5px 10px 5px 10px;
  vertical-align:top;
}
table.AnimatorTask > tbody th,
table.AnimatorPlanning > tbody th
{
  white-space:nowrap;
}
table.AnimatorPlanning td > div.Rejected
{
  color: red;
}
table.AnimatorPlanning td > div.WaitingList::before,
table.AnimatorPlanning td > div.Desired::before,
table.AnimatorPlanning td > div.Deleted::before 
{
  content: ' ';
  background-color: red;
  position: absolute;
  inset: 5px;
  opacity: 0.1;
  box-shadow: 0 0 5px 5px rgb(255, 0, 0);
  pointer-events: none;
}
table.AnimatorPlanning td.Editable
{
  cursor:pointer;
}
table.AnimatorPlanning td > div
{
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding-left: var(--padding);
  padding-right: var(--padding);
}
table.AnimatorPlanning td > div > *:nth-child(2)
{
  flex-grow: 1;
}
table.AnimatorPlanning td > div.Desired::before 
{
  background-color: green;
  box-shadow: 0 0 5px 5px green;
}
table.AnimatorPlanning td > div.WaitingList::before 
{
  background-color: orange;
  box-shadow: 0 0 5px 5px orange;
}
table.AnimatorTask > tbody > tr:nth-child(2n) td,
table.AnimatorPlanning > tbody > tr:nth-child(2n) td 
{
  background-color: #ebf6f7;
}
ul.FooterMenu
{
  display:inline-flex;
  flex-wrap:wrap;
  margin: 20px 0px 0px 0px;
  list-style-type: none;
  padding: 8px;
  padding-bottom: 0px;
  color:#006265;
  background-color:#c6e2e3;
}
ul.FooterMenu li
{
  margin-right: 20px;
  margin-bottom: 10px;
}
ul.FooterMenu a
{
  color:#006265;
}
img.PlanningIcon
{
  height: 1.0em;
  vertical-align: middle;
}
.PlanningRectangle
{
  height: 1.0em;
  Width: 1.0em;
  vertical-align: middle;
}
img.BadgeIcon
{
  height: 1.5em;
}
img.Command
{
  vertical-align: middle;
}
.AnimatorGroupItem
{
  padding-left: 20px;
}
tr.ProposedAnimator
{
  color: gray;
}
.AnimatorEvaluationComment
{
  white-space: pre-wrap;
  border-left: 2px solid #006265;
  display: block;
  padding-left: 10px;
}
.PaymentOpvang
{
  border-left: 2px solid blue;
}
.PaymentActivity
{
  border-left: 2px solid green;
}
div.NewInOut
{
  display:block; 
  position: sticky;
  bottom: 0px;
  margin-top: 5px;
}
.Dimmed,
.ItemDisabled
{
  opacity: 0.5;
}
ul.MyRoMenu
{
  margin-bottom: 8px;
}
@media screen and (max-width:599px)
{
  ul.MyRoMenu:not(.HideUnselected)
  {
    flex-direction: column;
  }
}
.Wt-dialog .Wt-stack select
{
  min-height:10em;
}