.diaryContainer{position:relative; min-width:300px; border:2px solid #000; padding: 12px}

.diaryContainer .fas{cursor: pointer; transition:all 300ms ease; font-size:1.4rem}
.diaryContainer .fas:hover{transform:scale(1.2)}

.diaryContainer .fa-plus-circle{color: green; position: absolute; right:4px; bottom:4px}
.diaryContainer .fa-edit{color: green; position: absolute; right:4px; bottom:4px}

.diaryContainer .fa-eye{color: var(--purple); position: absolute; right:4px; top:1px}

.diaryContainer button{border:0; font-size:0.6rem !important; background-color: darkgreen; padding: 3px 10px !important; border-radius:10px !important; color: #fff !important; text-decoration: none}

.diaryHeading{background-color:#edeff2; color:#000; padding:3px; -webkit-align-items:center; align-items:center}
.diaryHeading > div{padding:5px}
.diaryHeading > div img{width:30px; height:30px; margin:3px 0 0}
.diaryHeading > div:nth-of-type(1){text-align:right}
.diaryHeading > div:nth-of-type(2){text-align:center; font-size:14px; text-transform:uppercase; max-width:260px}
.diaryHeading > div:nth-of-type(3){text-align:left}

.daysOfWeek{font-size:12px; display: flex; justify-content: space-between; align-items: stretch}
.daysOfWeek > div{padding:5px; width:14%}

.diaryRow{font-size:12px; background-color:#fff; z-index:1; display: flex; justify-content: space-between; align-items: stretch}
.diaryRow > div{text-align:left; padding:18px 0 0; width:100%; flex-grow:1}

.diaryCell{position:relative; min-height:20px; text-align: center}

.diaryArrow{width:12px}

.diary-back-button{margin: 15px 0 !important; cursor:pointer}

#meeting_url{width:100%; max-width: 600px}

.class-title{color: var(--purple); font-weight:700; font-size:1.2rem}
.class-title i{color:green}
.class-desc{padding:10px 0; font-size:0.9rem}
.class-booked{color: green; padding: 10px 0}
.class-closed{color:var(--pastelblue); padding: 10px 0}
.class-finished{padding: 10px 0}

.class-attendee{display: flex; justify-content: space-between; align-items: center; background: var(--purple); margin: 1px 0; border-radius:5px; padding: 4px; color: #fff}
.class-attendee a{color: #fff; text-decoration: none}
.class-attendee a:hover{opacity:0.8; color: #fff !important}
.class-attendee > div{width:100%}
.class-attendee > div:first-of-type{padding-left:10px}
.class-attendee > div:last-of-type{max-width: 30px; text-align: right}
.class-attendee > div:last-of-type i{opacity: 0.4}
.class-attended{opacity: 1 !important; color: greenyellow}

.fa-calendar-plus{color:var(--purple)}

.cellTaken{}
.cellTop{z-index:2}
.emptycell{background-color:#F5F5F5}

.diaryCell > .num{border:2px solid #fff; border-radius:100px; width:30px; text-align: center; padding: 2px 0}
.diaryCell > .taken{border:2px solid var(--pink); cursor:pointer; transition:all 100ms ease}
.diaryCell > .taken:hover{background-color:var(--pink) !important; color:#fff !important}
.diaryToday > .num{background-color:var(--teal); color: #fff; border-color:var(--teal)}
.cellSelected{background-color:var(--pink); color:#fff}

.flex{display: flex}

#diaryPopup{padding:6px; border-radius:15px; width:210px; position:absolute; background-color:#fff; display:none; border:1px solid #ccc; z-index:10}
#diaryPopupInner{}
#diaryPopupInner > div:nth-of-type(1){ text-align:center; font-size:15px; color:#000; padding:5px 0 8px; font-weight:bold}
#diaryPopupInner .button{margin:0 0 10px; background-color:#5297a0}

.greybutton{background: #ccc !important; cursor:not-allowed !important}

.diaryInput{font-size:11px; color:#000}
.diaryInput > div{padding-bottom:4px}
.diaryInput > div:nth-of-type(1){width:60px !important; text-align:right; padding-right:5px; -webkit-flex-grow:0; flex-grow:0}
.diaryInput input{border-radius:5px; border:1px solid #ccc; background-color:#fff; padding:4px; width:100%; max-width:100%; resize:none; font-size:11px; outline:none}

.dashButton{width:128px; margin:4px auto 0 !important}
.tripButton{ background-image:url(../../images_old/trip-button.svg); background-size:16px; background-position:6px 6px; margin-bottom:15px !important}
.remindButton{ background-image:url(../../images_old/remind-button.svg); background-size:16px; background-position:6px 6px}

.num{position:absolute; top:3px; left:5px}
.caldots{font-size:22px; line-height:1px; padding:0 0 0 10px}

.infoBarFlex{-webkit-align-items:center; align-items:center; margin:15px 0}
.infoBarFlex > div{font-size:12px}
.infoBarFlex > div:first-of-type{width:470px; min-width:400px;}

.colDotFlex{-webkit-align-items:center; align-items:center}
.colDotFlex > div:first-of-type{background-color:#1f305b; border-radius:50px; width:20px; max-width:20px; height:20px; padding:0px}
.colDotFlex > div:last-of-type{padding:0 0 0 5px}

/* Trip bar */
.tripItem{font-size:11px; font-weight:300; color:#fff; width:100%; text-align:left; background-color:#1f305b; padding:11px; margin:3px 0; position:relative; background-position:5px 5px; background-size: 12px; z-index:1}

.tripStart{border-top-left-radius:10px; border-bottom-left-radius:10px; z-index:1}
.tripEnd{border-top-right-radius:10px; border-bottom-right-radius:10px; z-index:1}
.tripIcon{background-image:url(../../images/trip-icon.svg); z-index:1}
.tripIcon .leg{padding-left:10px}
.endCap{height:100%; width:1px; background-color:#1f305b; position:absolute !important; top:0px !important; right:-1px; z-index:1}

.leg{color:#fff; font-size:8px; height:12px; overflow:hidden}
.col_7 .leg{overflow:hidden; width:100%}

.eventItem{background-color:#a49685; color:#fff; padding:5px 2px 6px 10px; margin:3px 0; position:relative; background-position:5px 5px; background-size: 12px; z-index:1; height:22px}
.eventStart{border-top-left-radius:10px; border-bottom-left-radius:10px; z-index:1}
.eventEnd{border-top-right-radius:10px; border-bottom-right-radius:10px; z-index:1}
.eventMe{background-color:#8f97ad}
.eventSome{background-color:#a49685 !important}
.eventAll{background-color:#1f305b}
.eventTrip{background-color:#1f305b}

#calPopup{padding:20px; width:300px; background-color:#ccc; border-radius:30px; position:absolute; top:0px; left:0px; display:none; z-index:200}
#calPopup .button{display:block; width:100%; margin:5px auto}
.calPopupButton{ background-color:#fff; color:#000}
#calDate{text-align:center}

.deskDays{display:flex; font-weight:700}
.deskDays div{border:0px}
.mobDays{display:none}
.mobDays div{border:0px}

.eventAdd{background-color:purple; text-align:center; width:96%; margin:0px 2%; color:#fff; padding:6px 10px; border-radius:10px; position:absolute; bottom:5px; top:auto}
.eventAdd:hover{opacity:0.9}

.HORmonthNav{display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font-size:22px}
.HORmonthNav > div{color:var(--purple)}
.HORmonthNav > div:nth-of-type(2){font-size:1rem; font-weight:700}

.HORmonthNav .fas{cursor:pointer; font-size: 1.2rem; color:var(--pink) !important; position: relative !important; top:auto; right:auto; transition:all 300ms ease}
.HORmonthNav .fas:hover{color:#333 !important; opacity: 1}
#diaryDayLoader{display: none}

.diarybutton{display: inline-block; padding: 5px 20px 5px 10px; margin: 30px 0 0; border-radius:4px; background: var(--dark-blue); color: #fff; cursor: pointer; transition:all 300ms ease}
.diarybutton:hover{opacity: 0.7}

.diaryAddButton{position: absolute; top:32px; right:100px}

.diaryModalInner{padding: 30px}
.diaryModalInner label{display: block; width:100%}
.diaryModalInner input{margin-bottom: 20px; padding: 10px; box-sizing: border-box; border:1px solid #ccc}
.diaryModalInner input[type=button]{border:0px; padding: 10px 30px}
.diaryModalInner input[name=title]{width:100%}
.diaryModalInner textarea{border:1px solid #ccc; font-size:14px; padding: 10px; height: 120px}
.timeflex{display:flex; justify-content:flex-start; align-items: stretch}
.timeflex > div{flex-grow:1; }
.timeflex > div:first-of-type{max-width: 200px}
.timeflex input{min-width:100px; max-width:100px !important}

.diaryPageItem{display:flex; justify-content: space-between; align-items: stretch; border-bottom:1px solid #ccc; background-color: #fff; max-width: 900px; margin: 0 auto}
.diaryPageItem > div{padding: 10px; flex-grow:1; width:100%}
.diaryPageItem > div:nth-of-type(1){max-width:140px}
.diaryPageItem > div:nth-of-type(3){max-width:50px; text-align: right; font-size:20px}
.diaryPageItem > div:nth-of-type(4){max-width:60px; text-align: right; font-size:20px}
.diaryPageItem > div:nth-of-type(5){max-width:60px; text-align: right; font-size:20px; color: green}
.diaryPageItem > div:nth-of-type(6){max-width:50px; text-align: right; font-size:20px; color: crimson}

.diaryPageItem i{cursor: pointer}
.diaryPageItem i:hover{opacity: 0.7}

.class-list{font-size:0.6rem; position: absolute; top: 24px; left: 5px; width:92%; box-sizing: border-box; overflow: auto; max-height: 90px}
.class-list > div{padding:2px 0; border-bottom:1px dashed #ccc}
.class-list > div:last-of-type{border:0}

.class-list .booked{color: limegreen; font-weight:700}
.class-list .booked i{font-size:0.5rem}

.entrycount{position: absolute; bottom:15px; left:5px; font-weight:700; font-size:10px}

#bookingform {max-width: 800px; margin: 0 auto}
#bookingform .flex > div{width:100%; max-width: 50%; text-align: left; padding: 0px 15px 5px}
#bookingform select{width:100%; padding: 10px}

#availabilityChart{background: #f8f8f8; border:1px solid #efefef; border-radius:5px; padding: 5px 15px 15px}

#inviteLoader{background-color: #f8f8f8; border-radius:5px; padding: 15px; margin: 10px auto}

.invitebutton{display: inline-block; background-color: var(--dark-blue); padding: 4px 15px; border-radius:5px; color:#fff; cursor:pointer; transition:all 300ms ease; margin: 4px 10px}
.invitebutton:hover{opacity: 0.6}

#meetingAttendees{background-color: #f8f8f8; border-radius:5px; padding: 15px}

.bookableRoomsList{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; max-width: 900px; margin: 0 auto}
.bookableRoomsList > div{width:100%; max-width:30%; padding: 30px 20px}

#bookingform label{text-align: left; width: inherit; padding: 10px 0 0}
#bookingform select{min-width:200px}

#diaryLoader form{text-align:center}
#diaryLoader label{display: block; padding: 5px 0; font-weight:700}
#diaryLoader input{margin: 0 0 15px}
#diaryLoader input[type=time]{padding: 10px}
#diaryLoader #class_name{width:100%; max-width: 600px}
#diaryLoader #duration{max-width: 90px}
#diaryLoader input[type=submit]{background: var(--purple); font-size:1rem}
#diaryLoader #description{width:100%; max-width: 620px; height: 200px; padding: 10px; color: #000}

#diaryLoader .button{background: var(--purple); color: #fff; display: inline-block; margin: 10px 10px 10px 0; padding:10px 25px; cursor:pointer; text-decoration: none; transition:all 300ms ease}
#diaryLoader .button:hover{background: #666; color: #fff !important}

#diaryAddForm .flex{margin: 15px auto; max-width: 600px}
#diaryAddForm .flex > div{width:100%; max-width: 50%}

.user-history-block{padding:0 30px; width:100%; max-width:900px; border:1px solid #ccc; margin: 0 auto}

.history-table{margin: 0 auto 30px; width:100%}
.history-table th{background: var(--purple); color:#FFFFFF; font-size:0.7rem; text-align: left; padding: 3px 5px}
.history-table tr{border-bottom:1px dashed #ccc; font-size:0.9rem}
.history-table td{padding:3px 5px; border-bottom:1px dashed #ddd}

.download-flex{display: flex; justify-content: center; align-items: center}
.download-flex > div{padding:0 4px}

@media (max-width: 999px) {
	.infoBarFlex{display:none}
	.diaryContainer{margin:5px}
}

@media (max-width: 700px) {
	.class-list{display:none}
}
@media (max-width: 599px) {
	.deskDays{display:none}
	.mobDays{display:flex}
	.diaryCell{height:60px !important; padding-top:15px !important}
	.tripLabel{font-size:7px; max-height:10px; overflow:hidden; left:12px !important}

	.num{font-size:7px}
	
	.todoItem{-webkit-align-items:center; align-items:center; margin-left:2px}
	.diaryContainer .eventItem{height:10px; padding:2px !important; margin:0 0 1px; background-position:2px 1px; background-size: 8px}
	.diaryContainer .todoItem{font-size:6px}
	.diaryContainer .todoItem > div:first-of-type input[type=checkbox]{display:none}
	.diaryContainer .todoItem > div:first-of-type{background-color:#ccc; max-width:5px !important; min-width:5px !important; height:5px}
	.diaryContainer .todoItem > div:last-of-type{padding-left:4px}
	
	 .leg{font-size:5px; height:12px; width:100%; overflow:hidden; height:7px}

	.diaryCell{min-height:inherit}
	
	.timeflex{flex-direction: column}
	..timeflex > div{max-width: 100%}
}
@media (max-width: 359px) {

}