/* div tables und calendar start */

div.table {
  display: table;
  width: 100%;
  /*height: 100%;*/
}

div.tr {
  display: table-row;
}

div.td {
  display: table-cell;
}

div.table.calendar,
div.calendarheader,
div.calendar_area{
  /*max-width: 800px;*/
  margin: 0px auto;
  overflow: hidden;
}

div.calendar_area{
  margin:20px auto;
}

div.calendarheader{
    margin-bottom:20px;
}

div.calendarheader.static {
  position: fixed;
  background-color: #ffffff;
  width: calc(100% - 52px);
  z-index: 100;
}

div.calendarheader.static + .table.timeline{
  margin-top:75px;
}

div.td.daytitle.weekend {
  color: #aaaaaa;
}

div.calendarheader.static + div.table.timeline > .tr > .td:first-child {
  padding-top: 0px;
}

div.calendarheader.static + div.table.timeline > .tr > .td:nth-child(2) {
  padding-top: 6px;
}

div.calendarheader_inner{
  width:100%;
  margin:0px auto;
  display:block;
  text-align: center;
}

div.calendar_area .doActions{
  padding:5%;
}

div.calendar_area .doActions button{
  width:100%;
  margin-top:20px;
}

#editorContent .calendar_area_summary{
  padding:20px;
}

.calendar_area_summary .objectpreview a,
.calendar_area_summary .objectpreview a:hover {
  color:#282d67;
  text-decoration:none;
}

div.calendarheader_inner .month_title,
div.calendarheader_inner .employee_title{
  color:#282d67;
  font-size:30px;
}

div.calendarheader i{
  padding:5px;
  margin:10px 5px;
  font-size:22px;
  cursor:pointer;
  color:#282d67;
}

div.table.calendar .td{
    text-align:center;
    /*height:40px;*/
}

div.table.calendar .td {
  text-align: center;
  padding:8px;
}

div.table.calendar .td span{
  display:inline-block;
}

div.table.calendar .td,
div.table.calendar .td span {
  /*width:6vw;
  height:6vw;
  line-height:6vw;*/

  /*font-size:3.5vw;*/
}


@media screen and (min-width:576px)
{
  div.table.calendar .td,
  div.table.calendar .td span {
    /*width:5vw;
    height:5vw;
    line-height:5vw;*/
    /*font-size:2vw;*/
  }
}

@media screen and (min-width:992px)
{
  div.table.calendar .td,
  div.table.calendar .td span {
    /*width:40px;
    height:40px;
    line-height:40px;*/
    /*font-size:20px;*/
  }
}


div.table.calendar .td span.bubble{
  border-radius:50%;
  border:1px solid #FFFFFF;
  cursor:pointer;
}

div.table.calendar .td span.bubble.marked{
  border:1px dashed #0069d9;
  color:#0069d9;
  font-weight:bold;
}

.innerday span.doubleBooking{
  animation: pulseRedFontBlack 2s infinite;
}

div.table.calendar .td span.bubble.dayAppointments,
.innerday span.dayAppointments{
  background-color:#c82389;
    color:#ffffff!important;
}
div.table.calendar .td span.bubble.dayIllness,
.innerday span.dayIllness{
  background-color:#7a262e;
    color:#ffffff!important;
}
div.table.calendar .td span.bubble.daySpecialLeave,
.innerday span.daySpecialLeave{
  background-color:#21888f;
    color:#ffffff!important;
}
div.table.calendar .td span.bubble.dayVacation,
.innerday span.dayVacation{
  background-color:#4fb526;
    color:#ffffff!important;
}
div.table.calendar .td span.bubble.dayHalfDayVacation,
.innerday span.dayHalfDayVacation{
  background-color:#b8f2a0;
    color:#ffffff!important;
}
div.table.calendar .td span.bubble.dayHoliday,
.innerday span.dayHoliday{
  background-color:#cdcdcd;
    color:#ffffff!important;
}
div.table.calendar .td span.bubble.dayOvertimeFree,
.innerday span.dayOvertimeFree{
  background-color:#551a8b;
  color:#ffffff!important;
}

div.table.calendar .td span.bubble.dayEmpty,
.innerday span.dayEmpty{
  background-color:#transparent;
  color:#ffffff!important;
  border:1px solid transparent;
  transition-duration: .4s;
}

div.table.calendar .td span.bubble.dayEmpty:hover,
.innerday span.dayEmpty:hover{
  border:1px solid #c82389;
}


div.table.calendar .tr.legend .td{
  padding-top:30px;
}

/* div tables und calendar end */


/* Drag and drop styling start */

.table 	{display: table;}
.tr 	{display: table-row;}
.td 	{display: table-cell;}

.ddboard{
	width:100%;
}

.ddboard .td{
	text-align:left;
	padding:10px;
	border:0px solid grey;
}

.board-item-content,
.board-item-content *{
text-align:left;}

/*
.board-column{
	width:calc((100vw - 7 * 20px) / 7)!important;
}
*/

.board-column.regular .board-column-header {
  background: #151d3a;
}

/* TODO:AKTUELL DEAKTIVIERT WEIL KALENDARANSICHT VERAENDERT WURDE ==> EVTL SPAETER LOESCHEN
.board-column.regular.vacation, .vacation{
	background-image: linear-gradient(45deg, #cdcdcd 25%, #efefef 25%, #efefef 50%, #cdcdcd 50%, #cdcdcd 75%, #efefef 75%, #efefef 100%);
	background-size: 10px 10px;
    opacity: .5;
}

.board-column.regular.ill, .ill{
	background-image: linear-gradient(45deg, #d69f9f  25%, #a36868  25%, #a36868  50%, #d69f9f  50%, #d69f9f  75%, #a36868  75%, #a36868  100%);
	background-size: 10px 10px;
    opacity: .5;
}*/


.board-column.regular.holiday, .holiday{
}



.board-column.anothermonth{
  opacity:.5;
}

.board-column.anothermonth .board-column-header {
  background: #cdcdcd;
}

.board-column.weekend:not(.anothermonth) .board-column-header {
  background: #999999;
}

.weekdaytitles .td{
	text-align:center;
	font-weight:bold;
	color:#666666;
}

.board{display: table;}
.board-column{display: table-cell;}

.board {
  position: relative;
  margin-left: 1%;
}
.board-column {
  /*position: absolute;*/
  left: 0;
  right: 0;
  margin: 0 1.5%;
  margin:10px;
  background: #f0f0f0;
  border-radius: 3px;
  z-index: 1;
  box-shadow: 1px 1px 3px #cdcdcd;
  width:calc(100% / 7);
}

.board-column.muuri-item-releasing {
  z-index: 2;
}
.board-column.muuri-item-dragging {
  z-index: 3;
  cursor: move;
}
.board-column-header {
  position: relative;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  padding: 0 20px;
  text-align: center;
  background: #333;
  color: #fff;
  border-radius: 3px 3px 0 0;
  font-weight: bold;
}
/*
@media (max-width: 600px) {
  .board-column-header {
    text-indent: -1000px;
  }
}
*/

.board-column-content {
  position: relative;
  border: 10px solid transparent;
  /*min-height: 72px;*/
  min-height: 102px;
  overflow: hidden;
}

.board-item {
  position: absolute;
  width: 100%;
  /*margin: 5px 0;*/
  margin:0px;
}
.board-item.muuri-item-releasing {
  z-index: 9998;
}
.board-item.muuri-item-dragging {
  z-index: 9999;
  cursor: move;
}
.board-item.muuri-item-hidden {
  z-index: 0;
}
.board-item-content {
  position: relative;
  padding: 12px 10px;
  background: #fff;
  border-radius: 4px;
  font-size: 10px;
  text-align:center;
  -webkit-box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
  box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
}
.board-item-content span{
  text-align: left;
}

.board-item, .board-item-content{
  height:100%;
}

.board-item-content span a{
  color:#282d67;
  font-weight:bold;
  font-size:12px;
}

.board-item-content span a:hover{
  color:#c82389;
  text-decoration: none;
}

@media (max-width: 600px) {
  .board-item-content {
    text-align: center;
  }
  .board-item-content span {
    display: none;
  }
}

.setstatusbox{
	display: inline-block;
    position: absolute;
	right:0px;
}

.setstatusbox i{
	margin:5px 5px 0px 0px;
	opacity:.2;
	cursor:pointer;
}

.board-column.vacation .setstatusbox i[data-action=setVacation],
.board-column.ill .setstatusbox i[data-action=setIll]{
	opacity:1;
}

.board-column.vacation .board-item-content,
.board-column.ill .board-item-content{
	animation: pulseRed 2s infinite;
}

.entries-for-day.vacation .display-time,
.entries-for-day.ill .display-time{
  animation: pulseRed 2s infinite;
}


.entries-for-day.booking-vacation .display-time,
.entries-for-day.booking-ill .display-time{
  animation: pulseRed 2s infinite;
}
/*
.entries-for-day.booking-vacation badge-light.day-amount-sum,
.entries-for-day.booking-ill badge-light.day-amount-sum{
  animation: pulseGreen 2s infinite;
}

.entries-for-day.booking-vacation badge-success.day-piecerate-sum,
.entries-for-day.booking-ill .badge-success.day-piecerate-sum{
  animation: pulseGreen 2s infinite;
}



@-webkit-keyframes pulseGreen{
  0% {
    z-index: 1200;
    -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);
    box-shadow: 0 0 0 0 green;
    background: green;
  }

  70% {
    z-index: 1200;
    -moz-box-shadow: 0 0 0 10px rgba(255,0,0, 0);
    box-shadow: 0 0 0 10px rgba(200,35,137,0);
    background: green;
  }
  100% {
    z-index: 1200;
    -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
    box-shadow: 0 0 0 0 rgba(200,35,137,0);
    background: green;
  }
}

@keyframes pulseGreen{
  0% {
    z-index: 1200;
    -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);
    box-shadow: 0 0 0 0 green;
    background: green;
  }

  70% {
    z-index: 1200;
    -moz-box-shadow: 0 0 0 10px rgba(255,0,0, 0);
    box-shadow: 0 0 0 10px rgba(200,35,137,0);
    background: green;
  }
  100% {
    z-index: 1200;
    -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
    box-shadow: 0 0 0 0 rgba(200,35,137,0);
    background: green;
  }
}
*/
@-webkit-keyframes pulseRed {
  0% {
    z-index:1200;
    -webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);
	   background:#c82389;
  }
  70% {
    z-index:1200;
      -webkit-box-shadow: 0 0 0 10px rgba(255,0,0, 0);
	     background:#ffffff;
  }
  100% {
    z-index:1200;
      -webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
	     background:#ffffff;
  }
}
@keyframes pulseRed {
  0% {
    z-index:1200;
    -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);
      box-shadow: 0 0 0 0 rgba(200,35,137,.4);
	    background:#c82389;
  }
  70% {
    z-index:1200;
      -moz-box-shadow: 0 0 0 10px rgba(255,0,0, 0);
       box-shadow: 0 0 0 10px rgba(200,35,137,0);
	     background:#ffffff;
  }
  100% {
    z-index:1200;
      -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
       box-shadow: 0 0 0 0 rgba(200,35,137,0);
	     background:#ffffff;
  }
}

@keyframes pulseRedFontBlack{
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);
      box-shadow: 0 0 0 0 rgba(200,35,137,.4);
	    background:#c82389;
      color:#c82389;
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(255,0,0, 0);
       box-shadow: 0 0 0 10px rgba(200,35,137,0);
	     background:#ffffff;
       color:#c82389;
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
       box-shadow: 0 0 0 0 rgba(200,35,137,0);
	     background:#ffffff;
       color:#c82389;
  }
}

/* Drag and drop styling end */