@CHARSET "UTF-8";

:root {
	--cal-cell-height: 40px;
        --cal-cell-start: 0;
        --cal-cell-stop: 24;
}

.calendar {
        max-width: 1200px;     
        padding-bottom: 2em;
        position: relative;
}

.cal_container{
	z-index: 0;
	position: relative;
	display: flex;
        
        overflow: hidden;
}


.calendar[data-presentation="week"] .cal_container{
        height: calc(( var(--cal-cell-stop) - var(--cal-cell-start) ) * var(--cal-cell-height) );
}



.cal_container :not([data-structure="set"])>[data-structure="entity"]>[data-structure="field"] {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0.15em 0.25em;
    outline: none;
    border-radius: 0;
    background-color: transparent;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;

    font-size: 92%;
}


.cal_container :not([data-structure="set"])>[data-structure="entity"]>[data-structure="field"].editable:hover, .cal_container [data-structure="field"].editing {
    border-bottom: 2px solid black;
    margin-bottom: -2px;
}

/* REMOVE DATA VALID ICONS */
/* REMOVES OTHER ICONS AS WELL */
.cal_container .editable[data-valid="true"]:before {
    display: none;
}


.dayOfWeek_Titles {
    /*position: absolute;*/
    display: flex;
    margin-top: 1em;
    margin-bottom: 1em;
    border-bottom: 1px dotted;
}

.dayOfWeek_Title {
    /*position: absolute;*/
    /*margin-top: -2em;*/
    font-weight: bold;
    font-size: 140%;
    border-bottom: 1px dotted white;
    width: 100%;
    margin-bottom: 1em;
}


.cal_day {
    position: relative;
    /*width: 200px;*/
    width: 14.28%;
    /* pointer-events: none; */
    /* background-color: yellow; */
    /* z-index: 0; */
    flex-grow: 0;
    flex-shrink: 0;
    /*margin-top: 3em;*/
    min-height: 200px;
    padding-right: 0.5em;
}

.calendar[data-presentation="week"] .cal_day{
    height: calc( var(--cal-cell-height) * 24);
}




[data-dimension="xs"] .cal_day{
    width: 100%;
}

[data-dimension="xs"] .cal_day:not(.selected){
    display: none;
}


[data-dimension="xs"] .calendar{
    font-size: inherit !important;
}

[data-dimension="xs"] .calendar[data-presentation="weeklist"] [data-field="title"]{
    font-size: 120% !important;
   font-weight: bold;
}



[data-dimension="xs"] .calendar .btnPrint{
    display: none !important;
}


.calendar[data-presentation="week"] .cal_day_container>*{
    margin-top: calc( -1 * var(--cal-cell-height) * var(--cal-cell-start) );
}

.cal_day_events{
	position: relative;
}

.cal_day_bg{
	position: absolute;
	top:  0px;
	left:  0px;
	bottom: 0px;
	right:  0px;
	pointer-events: none;
	z-index: -1;
}

.cal_cell{
   height: var(--cal-cell-height);
   width:  100%;
   outline: solid 1px gray;
   outline-offset: 0px;
}

.editable .cal_cell:nth-child(odd){
	background-color: #e7f8f7;
}

.cal_cell_mini{
   /*--cal-cell-mini-height: calc( var(--cal-cell-height) / 4);*/    
   /*height: var(--cal-cell-mini-height);*/
   height: calc( var(--cal-cell-height) / 4 );
   outline: 1px dotted grey;
   outline-offset: 0px;
}

.cal_cell .cal_cell_hour{
	position: absolute;
	font-size: 80%;
	color: #c7c7c7;
}


.cal_event {
    height: 100px;
    background-color: white;
    color: var(--color-main);
    padding: 4px 0px 5px 1.6em;
    border-radius: 2px;
    min-width: 100%;
    z-index: 1;
    margin: 0px;
    /*margin: 0px !important;*/
    overflow: hidden;
    transition: box-shadow 1s, transform 0.5s;
    /* box-sizing: content-box; */
    /*font-size: 88%;*/
    line-height: 1.25em !important;
    /*outline: 1px solid white;*/
    outline: 1px solid var(--color-headline);
    outline-offset: -1px;
    position: relative;
}


.cal_event:before{
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 1.5em;
    background-color: var(--color-headline);
}


.cal_event:hover {    
    box-shadow: 2px 2px 7px rgba(0,0,0, 0.5);
    /*transform: scale(1.05);*/
    z-index: 9;
    /*height: auto;*/
}

.cal_event[data-status="1"]{
    outline-color: black;
}


.cal_event[data-event-status="open"]{
/*    outline: 3px solid var(--color-highlight);*/
}

.cal_event[data-event-status="restricted"]{
    /*outline: 3px solid purple;*/
}

body.printing .cal_event{
    outline: 0px none transparent !important;
}

.cal_event[data-event-status="full"], .cal_event[data-event-status="closed"]{
    /*outline: 3px solid red;*/
}

.cal_event .cal_status{
    font-size: 80%;
    /*padding: 0em 0.25em;
    max-height: 0px;
    transition: 1s all;
    overflow: hidden;
}
.cal_event:hover .cal_status{*/
    padding: 0.15em 0.25em;
    /*max-height: 4em;*/
}
/*.cal_event[data-event-status="open"] .cal_status{*/
.cal_event .btnRegister{
    color: var(--color-headline);
}



body:not(.printing) .cal_curr_day {
        background-color: rgba(0,0,0, 0.4);
}


.calendar[data-presentation="week"] .cal_event{
    position: absolute !important;    
}
.calendar[data-presentation="weeklist"] .cal_event{
    height: auto !important;    
    top: 0 !important;   
    margin-top: 4px;
    margin-bottom: 4px;
}

.calendar.editable[data-presentation="weeklist"] .cal_event{
    padding-bottom: 2em; /* for controller */
}


.calendar .cal_title{
    font-size: 300%; 
    font-weight: bold;    
}



.calendar .cal_container [data-label]:after{
    display: none !important;
}
.calendar  .cal_container [data-label]{
    min-height: 1em;
}

.calendar[data-presentation="weeklist"] [data-view="calendars_events"][data-field="title"]{
	/*font-weight: bold;*/
        color: var(--color-headline);
        word-break: break-all;
}

[data-view="calendars_events"][data-field="short"]{
    font-size: 80%;
    line-height: 1em !important;
    word-break: break-all;
}

.calendar:not(.editable) [data-view="calendars_events"][data-field="short"]:empty{
    display: none;
}



.calendar[data-presentation="weeklist"] [data-field="start"]{
	display: inline-block;
	width: 3.5em;
	/* margin-top:  -0.2em !important; */
}


.calendar[data-presentation="weeklist"] [data-field="start"]:after {
    content: " - ";
    position: absolute;
    margin-left: 0.25em;
}

.calendar[data-presentation="weeklist"] [data-field="stop"]{
	display: inline-block;
	width: 3.5em;
	/* margin-top: -0.2em !important; */
}

.calendar[data-presentation="weeklist"] [data-field="duration"]{
	display: inline-block;
	position:absolute;
	left: 1px;
	top: 3.5em;
	transform: rotate(-90deg);
	padding: 0px !important;
	font-size: -90%;
	/* line-height: 1em; */
	color: white;
	transform-origin: top left;
	pointer-events: none;
}
.calendar[data-presentation="weeklist"] [data-field="duration"]:after {
    content: ' min';
    display: none;
}
.calendar[data-presentation="weeklist"] [data-field="duration"]:before {
	content: "\f2f2";
	font-family: "FontAwesome";
	padding-right: 0.25em;
}
 

.calendar[data-presentation="weeklist"] [data-field="slots"], .calendar[data-presentation="weeklist"] [data-field="slots_available"], .calendar[data-presentation="weeklist"] [data-field="slots_reserved"], .calendar[data-presentation="weeklist"] [data-field="slots_booked"]{
	display: inline-block;
	width: 3.5em;
}


/*[data-view="calendars_events"] .noEdit {
    opacity: 0.5;
}*/

[data-field="slots_booked"] {
    color: var(--color-headline);
    cursor: pointer;
}



.cal_event:hover .ui-resizable-handle {
     background-color:rgba(0,0,0,0.1);
}
.cal_event .ui-resizable-handle {
     height: 11px;
}

.cal_event.ui-draggable-dragging{
    z-index: 10;
}

.cal_event .controller {
	position: absolute;
	left: 1.5em;
	bottom: 0;
	/* background-color: gray; */
}

.cal_event .controller button.icon {
    color: black;
}



.calendar .btnPrint{
    position: absolute;
    bottom: 1em;
    /*color: inherit !important;*/
    display: none;
}


.calendar .copyTemplate{
    border: 5px solid var(--color-main);
}

/* WEBSITE */


.calendar_customer{
    background-color: rgba(0,0,0, 0.5);
    padding: 3rem;
    border: 2px solid white;
    box-shadow: black 5px 5px 22px;
    
    background-size: cover;
    background-position: center top;
}

.calendar_customer .cal_cell_hour{
    display: none;
}

.calendar_customer .cal_cell {
    outline: none;
}

.calendar_customer .cal_cell_mini {
    outline: none;
}

.calendar_customer.calendar .btnPrint{
    display: inline-block;
    z-index: 1;
}


.calendar_customer [data-view="calendars"][data-field="text"]{
    text-align: right;
    font-weight: bold;
}



[data-structure="set"][data-view="calendars_slots"]{
    counter-reset: section;
}


[data-structure="entity"][data-view="calendars_slots"]{
    counter-increment: section;                  
    display: flex;
}

[data-view="calendars_slots"][data-field="date"]::before{
    content: counter(section) ". ";
    width: 3em;
    display: inline-block;
    color: var(--color-headline);
}


[data-view="calendars_slots"][data-field="date"]{
    /*width: 17em !important;*/
    width: 15em;
}


[data-view="calendars_slots"][data-field="comment"]{
    cursor: pointer;
    font-weight: bold;
    padding: 0px !important;
    margin-left: auto;
    line-height: 1.75em;
    margin-right: 0.75em;
    min-width: 5em;
    text-align: center;
    padding-right: 2em !important;
}



/*  Participants List */
.event_participants [data-field="title"] {
    font-weight: bold;
    color: var(--color-headline);
    word-break: break-all;
}

.event_participants [data-field="start"] {
    display: inline-block;
}
.event_participants [data-field="start"]:after {
    content: " - ";
    display: inline-block;
    /* position: absolute; */
    margin-left: 0.25em;
}

.event_participants [data-field="stop"] {
    display: inline-block;
    /* width: 3.5em; */
}


[data-module="Calendar"] .dayChanger{
    text-align: right; 
    font-size: 162%; 
    position: absolute; 
    padding-right: 3em;  
    width: 100%; 
    z-index: 10;    
    white-space: nowrap;
}

[data-module="Calendar"] .dayChanger .button{
    background-color: transparent;
    box-shadow: none !important;
    padding: 0;
    margin: 0px;
    min-width: auto;
    width: 3em;
}
  


.printing .calendar{
        width: 29.65cm;
        height: 20.95cm;
        
/*        width: 20.95cm;
        height: 29.7cm;*/
       
        /*transform: scale(0.5);*/
        color: white;
        /*padding: 5em;*/
        box-shadow: none;
        border: 0px none;
        overflow: hidden;

        padding: 4em;
        
        font-size: 15px !important;
}

.printing .cal_event:hover {
    box-shadow: none;
}