/**
*  mod_itcs_reservation_calendar_pro - simple reservation calendar by it-conserv.de
* ------------------------------------------------------------------------
* @package     itcs reservation calendar pro
* @author      it-conserv.de
* @copyright   2023 it-conserv.de
* @license     GNU/GPLv3 <http://www.gnu.org/licenses/gpl-3.0.de.html>
* @link        https://it-conserv.de
* ------------------------------------------------------------------------
*/

.itcs_calendar{
	justify-content: center;
	text-align: center;
}

.printable,
.printable.itcs_calendar th,
.printable.itcs_calendar td span{
	color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.vanilla-calendar-grid {
	display: flex;
	flex-grow: 1;
	gap: 1.75rem;
	flex-flow: row wrap;
	justify-content: center;
  }

.itcs_calendar .vanilla-calendar-column,
.itcs_calendar .vanilla-calendar_default{
	border: 0.1em solid rgb(180,180,180);
	border-radius: 1em;
	padding: 0.5em;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  }
  
  .calendar button.vanilla-calendar-day__btn.color1{
	background-color: rgba(var(--bg-calendar-day-color1), var(--bg-opacity1));
	color: #ffffff;
  }
  
  .calendar button.vanilla-calendar-day__btn.color2{
	background-color: rgba(var(--bg-calendar-day-color2), var(--bg-opacity1));
	color: #ffffff;
  }
  
  .calendar button.vanilla-calendar-day__btn.color3{
	background-color: rgba(var(--bg-calendar-day-color3), var(--bg-opacity1));
	color: #ffffff;
  }

  .calendar button.vanilla-calendar-day__btn.hd1 {
	background-image: linear-gradient(-45deg, rgba(var(--bg-hd1-color), var(--bg-opacity1)) 50%, rgba(var(--bg-hd2-color), var(--bg-opacity1)) 50%);
	color: #ffffff;
	background-position: center;
  }
	
  .calendar button.vanilla-calendar-day__btn.hd2 {
	background-image: linear-gradient(90deg, rgba(var(--bg-hd1-color), var(--bg-opacity1)) 100%, rgba(var(--bg-hd2-color), var(--bg-opacity1)) 0%);
	color: #ffffff;
	background-position: center;
  }
	
  .calendar button.vanilla-calendar-day__btn.hd3 {
	background-image: linear-gradient(45deg, rgba(var(--bg-hd1-color), var(--bg-opacity1)) 50%, rgba(var(--bg-hd2-color), var(--bg-opacity1)) 50%);
	color: #ffffff;
	background-position: center;
  }
  
  .calendar button.vanilla-calendar-day__btn.hd3.hd1 {
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M 30,0 0,0 15,30 z" style="fill: rgba(100, 220, 100, 0.8)" /></svg>') !important;
	background-repeat: no-repeat;
	background-color: rgba(var(--bg-hd1-color), var(--bg-opacity1));
	color: #ffffff;
	background-position: center;
  }
  
  /* ******************* */
  .vanilla-calendar-day__btn_disabled.color1,
  .vanilla-calendar-day__btn_disabled.color2,
  .vanilla-calendar-day__btn_disabled.color3,
  .vanilla-calendar-day__btn_disabled.hd1,
  .vanilla-calendar-day__btn_disabled.hd2,
  .vanilla-calendar-day__btn_disabled.hd3
   {
	pointer-events: auto;
	cursor: default !important;
  }
  .vanilla-calendar-day__btn_disabled.color1:active,
  .vanilla-calendar-day__btn_disabled.color2:active,
  .vanilla-calendar-day__btn_disabled.color3:active,
  .vanilla-calendar-day__btn_disabled.hd1:active,
  .vanilla-calendar-day__btn_disabled.hd2:active,
  .vanilla-calendar-day__btn_disabled.hd3:active
   {
	pointer-events: none;
  }

  .calendar button.vanilla-calendar-day__btn.color1:hover,
  .legend p.color1::before{
	background-color: rgba(var(--bg-calendar-day-color1), var(--bg-opacity2));
  }
  
  .calendar button.vanilla-calendar-day__btn.color2:hover,
  .legend p.color2::before{
	background-color: rgba(var(--bg-calendar-day-color2), var(--bg-opacity2));
  }
  
  .calendar button.vanilla-calendar-day__btn.color3:hover,
  .legend p.color3::before{
	background-color: rgba(var(--bg-calendar-day-color3), var(--bg-opacity2));
  }

  .calendar button.vanilla-calendar-day__btn.hd1:hover {
	background-image: linear-gradient(-45deg, rgba(var(--bg-hd1-color), var(--bg-opacity2)) 50%, rgba(var(--bg-hd2-color), var(--bg-opacity2)) 50%);
  }
	
  .calendar button.vanilla-calendar-day__btn.hd2:hover {
	background-image: linear-gradient(90deg, rgba(var(--bg-hd1-color), var(--bg-opacity2)) 100%, rgba(var(--bg-hd2-color), var(--bg-opacity2)) 0%);
  }
	
  .calendar button.vanilla-calendar-day__btn.hd3:hover {
	background-image: linear-gradient(45deg, rgba(var(--bg-hd1-color), var(--bg-opacity2)) 50%, rgba(var(--bg-hd2-color), var(--bg-opacity2)) 50%);
  }
  
  .calendar button.vanilla-calendar-day__btn.hd3.hd1:hover {
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M 30,0 0,0 15,30 z" style="fill: rgba(100, 220, 100, 1)" /></svg>');
	background-color: rgba(var(--bg-hd1-color), var(--bg-opacity2));
  }
  /* ******************* */
  .calendar button.vanilla-calendar-day__btn.vanilla-calendar-day__btn_today{
	background-image: none;
	background-color: rgba(var(--bg-today-color), var(--bg-opacity1));
	color: #ffffff;
  }



/* ##########   L e g e n d e   ############### */
.itcs_calendar .legend{
	display: block;
	margin-top: 0.5em;
	width: 100%;
}

.itcs_calendar .legend > div{
	display: inline-block;
    font-size: 0.7em;
}

.itcs_calendar .legend p{
	margin: 0.3em 0.7em;
	float: left;
	line-height: 1em;
}

.itcs_calendar .legend p::before,
.itcs_calendar td p::before,
.itcs_calendar td span
{
	content:'';
	display: inline-block;
	min-width: 1em;
	height: 1em;
	margin-right: 0.3em;
	opacity: var(--bg-opacity1);
	vertical-align: middle;
	border-radius: 0.25em;
}

.itcs_calendar .legend p.color0::before{
	background-color: rgba(var(--bg-today-color), var(--bg-opacity1));
}

/* ##########   L i s t   ############### */
.itcs_calendar .liste{
	width:100%;
	display: block;
	float: none;
	margin-top:10px;
}