@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------------------------- */

button.EditButLayout
  {
<?php 
if ($IsEditable == 'true')
  {
  echo "display:block ;\n" ; 
  echo "visibility:visible ;\n" ;
  }
else
  {
  echo "display:none ;\n" ; 
  echo "visibility:hidden ;\n" ;
  }
?>
  margin: 10px ;
  }
    
/* ----------------------------------------------------------------------- */

div#Kalenderen
  {
  color: black ;
  padding: 4px ;
  background-color: var(--main-bg-color-noalpha) ;
  }

.panel
  {
  background-color: rgb(224, 224, 224) ;
  }

.panel-body 
  {
  padding-top: 0 ;
  }

#Kalenderen
  {
  position: relative ;
  aheight: 100vh ;
  min-height:360px ;
  amax-height:600px ;
  margin-top: 4%;
  overflow: auto;
  }

#KalEvents
  {
  display:flex;
  aheight: 100% ;
  min-height:210px ;
  amax-height:450px ;
  overflow: visible ;
  aborder:1px solid #DDD ;
  border-radius: 4px;
  border-left: none;
  border-right: none;
  font-size:80% ;
  letter-spacing: 1px ;
  flex-wrap: wrap;
  }

#KalEvents > div, #KalEventsOld > div
  {
  flex: 1 1 100%;
  height: max-content ;
  margin: 4px ;
  margin-bottom: 50px;
  apadding-bottom: 4px;
  border : 1px solid black ;
  }
  
@media (max-width: 767px) 
{
#KalEvents
  {
  font-size:80% ;
  }
}
  
#KalEvents > li:nth-of-type(2n-1)
  {
  height: 24px ;
  padding: 4px 10px ;
  font-size: 100% ;
  line-height: 100% ;
  }
  
#KalEvents > li:nth-of-type(2n)
  {
  border-bottom: 2px solid black ;
  }
  
#KalEvents > li:last-of-type
  {
  border-bottom: 1px solid #DDD ;
  }

.KalEntryHead
  {
  font-weight:bold ;
  acursor:pointer ;
  }

.ExpandBody, .CollapseBody
  {
  float:right ;
  padding: 0 4px ;
  aoutline: 1px solid black ;
  }

.ExpandBody
  {
  display:none ;
  }

.KalEntryBody
  {
  background-color:#EEEEEE ;
  margin-top: 4px ;
  padding: 8px ;
  border-top:1px solid black;
  }

@media (max-width: 767px) 
  {
  .KalEntryBody
    {
	width: 80vw ;
    }
  }
	
.KalButPan
  {
  awidth: 100% ;
  atext-align:center ;
  font-size: 80% ;
  line-height: 80% ;
  }

.KalButPan > div
  {
  width:100% ;
  }

.KalButPan > div > label
  {
  display: inline-block;
  width:50% ;
  text-decoration:none ;
  text-align:right ;
  }

#YearSelect, #MonthSelect
  {
  display:inline-block ;
  width:200px ;
  }
  
select.KalSelect, select.KalEventSelect
  {
  border: none;
  text-align:left ;
  color: white ;
  background-color:#333 ;
  }

select.KalEventSelect
  {
  awidth:40% ;
  margin-right: 10px ;
  border: none;
  text-align:left ;
  color: black ;
  background-color:#EEE ;
  }
  
/* ------------------------------------------------------------------------------------*/


.KalEntryHead
  {
  font-weight:bold ;
  cursor:pointer ;
  margin-bottom:4px;
  }

.ExpandBody, .CollapseBody
  {
  float: inline-start ;
  left: 4px ;
  awidth: 15px ;
  text-align: center ;
  margin-right: 4px ;
  padding: 2px ;
	padding-top: 0 ;
  cursor: pointer ;
  background-color: rgb(232, 232, 232) ;
	border: 1px solid black ;
  }

.ExpandBody
  {
  display:none ;
  }

.KalInc, .KalDec
  {
  cursor: pointer ;
  }

/* ------------------------------------------------------------------------------------*/