.calendar {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 100%;
}

.calendar-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
}

.calendar-nav-date {
  display: inline-block;
  width: 160px;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  vertical-align: middle;
}

.calendar-content
{
	display: flex;
	flex-grow: 1;
	width: 100%;
}

.calendar-table-block
{
	position: relative;
	width: 100%;
	height: inherit;
}

.calendar-table {
  width: 100%;
	height: 100%;
  display: table;
	table-layout:fixed;
  border-collapse: collapse;
}

.calendar-row:first-child {
	height : 4% !important;
}
.calendar-row {
  display: table-row;
	height : 16%;
}

.calendar-cell {
  width: 14%;
  display: table-cell;
  border: 1px solid lightgray;
  background: white;
}

.calendar-cell:hover {
  background-color: #e6e6e6;
}

.calendar-cell.active {
    background-color:#b1ddd6;
}

.calendar-cell.calendar-header {
  border: 1px solid lightgray;
  text-align: center;
  font-weight: bold;
}

.day-container {
  width: 100%;
	min-height: 80px;
	height : 100%;
  display: flex;
  flex-direction: column;
}

.day-header {
  height: 26px;
  line-height: 20px;
  padding: 3px;
}

.day-header__day--current {
  color: #f2968f;
	font-weight: bold;
	font-size: 18pt;
}

.day-header__day--grey {
  color: lightgray;
}

.day-header .add-event {
  color: white;
  background: #3B353B;
  padding: 3px;
  line-height: 1em;
  font-size: 0.8em;
  border-radius: 3px;
  cursor: pointer;
}

.day-events {
  width: 100%;
	max-height:69px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
	flex-grow: 1;
}



.calendar .day-events-min {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 2px;
}

.calendar .day-events-min .day-event {
    border-radius: 10px;
    cursor: pointer;
    height: 10px;
    margin-bottom: 2px;
    margin-left: 2px;
    width: 10px;
}

.calendar .day-events-min .event-name,
.calendar .day-events-min .event-actions
{
    display: none;
}

.day-event {
  width: 100%;
  height: 20px;
  line-height: 20px;
  display: flex;
  flex-flow: row;
  font-size: 11px;
  padding: 0 3px 0 3px;
}

.day-event .event-name {
  display: inline-block;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  flex-grow: 1;
}

.day-event .event-name, .day-event .event-actions .glyphicon {
  color: white;
  cursor: pointer;
}

.day-event .event-actions {
  font-size: 1.3em;
  white-space: nowrap;
}

.day-event .event-actions .glyphicon {
  line-height: 1.3em;
}

.day-event:not(:last-child) {
  margin-bottom: 3px;
}

.qrcode{
  width: 500px;
	height:500px;
}

@media (max-width: 1040px) {
  .calendar-nav-left {
    display: none;
  }

  .calendar-nav-right {
    display: none;
  }

  .calendar-nav-center {
    margin: auto;
  }
}

@media (max-width: 768px) {
  .calendar .day-container {
    height: 60px;
  }

  .calendar .add-event {
    font-size: 0.6em;
    padding: 2px;
  }

  .calendar .day-header {
    margin-bottom: 0;
    line-height: 15px;
  }

  .calendar .day-events {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 2px 0 2px;
  }

  .calendar .day-events .day-event {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin-left: 2px;
    margin-bottom: 2px;
    cursor: pointer;
  }

  .calendar .day-event .event-name {
    display: none;
  }

  .calendar .day-event .event-actions {
    display: none;
  }
}