/* schedule builder */

div#external-events {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #external-events input{
    color: black;
    
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  #external-events select{
    color:black;
    color: black;
    
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
 
  .fc-event.fc-h-event.fc-daygrid-event.fc-daygrid-block-event {
    background-color: green;
    border-radius: 20px;
    text-align: center;
    font-size: 14px;
    padding: 12px 20px;
    margin-top: 10px;
  }
  
  .alertCont {
    background-color: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    top: 0px;
    position: fixed;
    z-index: 10000000000;
    cursor: pointer;
    opacity: 0;
    transition: all;
    transition-duration: .5s;
}
.alertCont.display{
  opacity: 1;
}
.alertWindow {
  z-index: 10000000001;
  pointer-events: all;
  background: white;
  position: fixed;
  top: 30%;
  left: calc(50% - 200px);
  width: 400px;
  border-radius: 4px;
  cursor: default;
  border: solid 2px rgba(255, 255, 255, 0);
  box-shadow: 5px 5px 30px rgb(0 0 0 / 40%);
}

.alertHeading {
  background: var(--color-dark);
  color: var(--color-light);
  font-family: 'Ladislav-Bold';
  text-align: center;
  padding: 5px 0;
  font-size: 25px;
}



.alertCont .alertMessage{
  padding: 10px;
  font-size: 18px;
}
.alertCont .alertButtonPrimary {
  padding: 10px 20px 10px;
}

.alertCont .note{
  text-align: center;
  padding-bottom:10px;
  cursor: pointer;
}



/* table colors */
/* full table */
.fc-scroller-harness {
  border-bottom: 1px solid #ccc;
}
/* heading - becomes sticky */
.fc .fc-scroller{
  background-color:black;
}

  /* header row of calendar */
  table.fc-scrollgrid{
    padding: 0;
  }
  table.fc-col-header{
    margin-bottom: 0px;
  }
  table.fc-col-header thead tr th {
    padding: 10px;
}
  .fc .fc-scrollgrid-section-sticky th{
    background: 000;
  }

  h2#fc-dom-1{
    
    background-color: var(--color-primiary);
    /*
    padding: 50px 30px;
    margin: 10px 0;
    */
    padding-left: calc(var(--h5-size) / 2);
    padding-right: calc(var(--h5-size) / 2);
    font-size: var(--h5-size);
    line-height: calc(var(--h5-size) * 2);
    color:white;
  }

#filtersBlock{
  display:none;
}
#filtersBlock div#allTags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#filtersBlock div.tag {
  margin: 5px;
  padding: 2px 2px;
  display: flex;
}
#filtersBlock div.tag input{
  display:none;
  /*
  position: relative;
  z-index: 10;
  margin-right: -20px;
  */
}
#filtersBlock div.tag label {
  padding: 10px 15px;
  border-radius: 10px;
  border: 2px solid orange;
  background-color: black;
  cursor: pointer;
  
  color: orange;
  transition: all 0.3s ease;
}
#filtersBlock div.tag label:hover{
  font-size: 19px;
}
#filtersBlock div.tag input:checked + label{
  color: black;
  background-color: orange;
  border-color: orange;
}



/* border on outside */
table.fc-scrollgrid.fc-scrollgrid-liquid,
.fc .fc-timegrid-slot-minor {
  border: none;
  border-top-color: rgba(0,0,0,0);
}

.fc .fc-datagrid-cell-cushion {
  white-space: unset !important;
}
td.fc-timegrid-slot.fc-timegrid-slot-lane {
  border-top: 1px solid #111 !important;
}
.fc-theme-standard td {
  border: none !important;
  border-right: 1px solid #ccc !important;
  
}


/* kill the lines for sub-hour sections (i.e. dotted on 5 and 15 minues */
td.fc-timeline-slot.fc-timeline-slot-minor {
    border-style: none;
}

/* table headings */
  span.fc-datagrid-cell-main,
  a.fc-timeline-slot-cushion.fc-scrollgrid-sync-inner,
  span.fc-col-header-cell-cushion,
  .fc-timegrid-slot-label-cushion.fc-scrollgrid-shrink-cushion,
  a.fc-col-header-cell-cushion{
    color: var(--color-primiary);
  }


  

/* events */
/* force multiple rows on resourceTimelineDay view */
.fc-event-title.fc-sticky {
  white-space: normal !important;
  max-height: 140px;
}

.fc-timegrid-event-harness.fc-timegrid-event-harness-inset:hover{
  
}
.fc-timegrid-event-harness.fc-timegrid-event-harness-inset:hover {
  z-index: 100000 !important;
}

.fc-timegrid-event-harness.fc-timegrid-event-harness-inset {
  margin-bottom: -5px;
}
.fc-event-main {
  overflow: hidden;
}
.fc .fc-event:hover{
  border-color: rgb(255, 255, 255);
  background-color: rgb(66, 66, 66) !important;
}

.doHover .fc-event:hover{
  height: fit-content;
  
  z-index: 100001;
}
.doHover .fc-event:hover .sessionTitle{
  opacity: 1;
}

.fc-event-main .sessionTitle{
  text-decoration: underline;
  padding-left: 3px;
  width: calc(85% - 3px);
  opacity: .9;
  float: left;
}

.sessionFav {
  width: 15%;
  aspect-ratio: 1/1;
  float: right;
  position: relative;
  z-index: 1000;
}


.listDay td.fc-list-event-graphic,
.listWeek td.fc-list-event-graphic {
  display: none;
}
.listDay .sessionFav,
.listWeek .sessionFav{
  width:50px;
}

.listDay .sessionTime,
.listWeek .sessionTime{
  display: none;
}


.sessionFav input+span{
  background-size: contain;
  display: inline-block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-repeat: no-repeat;
}
.sessionFav > input{
  display:none;
}
.sessionFav> input:checked + span{
  background-image: url('star_checked.svg');
  opacity: .8;
}
.sessionFav > input + span{
  background-image: url('star_unchecked.svg');
  opacity: .6;
}

.sessionFav> input:checked + span:hover,
.sessionFav > input + span:hover{
  opacity: 1;
}

.fadeOutAndRemove{
  animation: fadeOutAndRemoveFrames 5s;
  animation-fill-mode: forwards;

}
@keyframes fadeOutAndRemoveFrames {
  0%   {opacity: 1;}
  50%  {opacity: 0;display: flex;}
  51%  {
    display: flex !important;
    opacity: 0;
  }
  100% {
    opacity: 0;
    display: flex !important;
    height:0px;
  }
}

.myProgramState.loading{
  opacity: .4;
}
.myProgramState.loading{
  opacity: .4;
}


.fc-event-main .sessionTime{
  font-style: italic;
  clear: both;
}

/* my program related */ 

tr.fc-list-event.fc-event {
  border-bottom: rgba(150,150,150, .5) dotted;
}

.page-my-program tr {
  background: white;
}

.page-my-program .fc-list-empty-cushion {
  color: white;
  font-family: "Ladislav-Bold";
  font-size: 22px;
}

#calendar.listDay,
#calendar.listDay .sessionTitle,
#calendar.listDay .fc-list-event-time{
  
}
#calendar.listDay .sessionTitle{
  font-family: "Ladislav-Bold";
  font-size: 22px;
}
#calendar.listDay .fc-list-event:hover td .sessionTitle,
#calendar.listDay .fc-list-event:hover .fc-list-event-time{
  
}
#calendar.listDay .fc-list-event:hover .details{
  color:var(--color-primiary);
}

/* .listWeek - is applied on mobile */ 
#calendar .fc-scroller-harness{
  background-color: black;
}
#calendar.listWeek{
  padding-top:20px;
}
#calendar.listWeek .sessionTitle {
  color: white;
}
#calendar.listWeek .sessionPresenter {
  color: #eeeeee;
}
#calendar.listWeek .sessionTime{
  display:none;
}

#calendar.listWeek td.fc-list-event-graphic {
  display: none;
}
#calendar.listWeek .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr{
  /*display:none;*/
}
#calendar.listWeek .fc-button-group{
  padding-top:0px;
}
#calendar.listWeek .fc-button-group button{
  font-size: 18px !important;
}

#calendar.listWeek .fc-button-group button{

}
#calendar td.fc-list-event-time{
  white-space: inherit;
  text-align: center;
}
#calendar.listWeek .fc-event:hover .sessionTitle{
  color:black;
}
#calendar.listWeek .fc-event:hover .sessionPresenter{
  color:rgb(66, 66, 66);
}

/* holding state for filters which can be slow */

div#calendarCont{
  transition: all .5s ease;
}
div#calendarCont.disable{
  opacity: .5;
  
}
div#calendarCont.disable,
#filtersBlock div#calendarCont.disable .tag label,
#filtersBlock div#calendarCont.disable div.tag .label{
  cursor: wait;
}
div#floaterNoter{ /* to remove */
  display: none;
}

.myProgramState .workshopScheduled_detail {
  cursor: pointer;
  border: dashed lightgrey 2px;
  padding-left: 15px;
  margin-left: 0px;
  margin-top: 5px;
  border-radius: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
}

.myProgramState .sessionFav{
  width: 40px;
  margin-right: 10px;
  pointer-events: none;
}

.myProgramState .workshopScheduled_detail:hover {
  border: dashed grey 2px;
}
.myProgramState .workshopScheduled_detail:hover .sessionFav > input + span{
  opacity: 1;
}

div#floaterNoter {
  position: fixed;
  width: 70%;
  z-index: 10000;
  bottom: 50px;
  left: 15%;
}

@media (max-width: 767px){
  #filtersBlock{
    margin: 0px -20px 0 -20px;
  }
  #filtersBlock div#allTags{
    display: flex;
    overflow-x: scroll;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
  }
  #filtersBlock div.tag label {
    padding: 0px 5px;
    font-size: 14px;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    
  }
  #filtersBlock div.tag{
    
    min-width: 110px;
  }


  #filtersBlock div.tag input:checked + label{
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .fc-event-main .sessionTitle{
    width: calc(90% - 3px);
  }
  
  .sessionFav {
    width: 10%;
  }
}

@media (max-width: 991px){
  
}

@media (min-width: 768px) and (max-width: 991px){
 
}


@media (min-width: 992px) and (max-width: 1279px){

}

@media (min-width: 1280px){

}


@media (min-width: 1536px) {

}

#calendar .fc-button-group{
  padding-top: 20px;
}
#calendar button.fc-customDay2-button.fc-button.fc-button-primary {
  border-right: solid rgba(255,255,255,0.1) 2px;
  border-left: solid rgba(255,255,255,0.1) 2px;
}
#calendar .fc-button-group button{
  font-family: Ladislav-Bold !important;
  font-size: 28px !important;
}
#calendar .fc-button-group button.focusDay{
  color: white !important;
  background-color: var(--color-primiary) !important;

}
#calendar .fc-button-group button:active{
  color:var(--color-primiary) !important;
}