@import 'base';

.calendar-panel {
	margin-bottom: 3rem;
}

.fullcalendar,
#fullcalendar{
	margin-bottom: 24px;
	background: #fff;
	padding: 24px 16px;
	@include box-shadow;
}

.fc th.fc-day-header{
	color: $brand-success;
	padding: 12px 0;
	border: none;
	text-align: left;
	font-size: 14px;
	font-weight: 500;
}

.fc .fc-row.ui-widget-header,
.fc .fc-row.fc-week.ui-widget-content {
	margin-right: 0 !important;
	border-width: 0 !important;
}

.fc-day{
	background-color: #fff;
}


.fc-basic-view .fc-day-number{
	font-size: 16px;
	color: gray;
	padding-top: 8px !important;
	padding-right: 16px !important;
	display: none;
}

.fc-head > tr > td {
	border: none;
}

.fc th, .fc td{
	border-color: $border-color-default;
}

/* fullCalendar toolbar */
.fc-toolbar{
	margin-bottom: 24px;
}

.fc-toolbar .fc-center h2{
	font-size: 16px;
}

.fc-toolbar .ui-button{
	border: none;
	box-shadow: 0 0 2px #ccc;
	background: #fff;
	color: #6a6c6f;
	height: 35px;
	border-radius: 2px;
}

.fc-toolbar .ui-button:hover{
	background: $body-bg;
}

.fc-toolbar .ui-state-disabled{
	color: #ccc;
	box-shadow: none;
	border: 1px solid #eee;
}
.fc-toolbar .ui-state-disabled:hover{
	background: #fff;
}

.fc-today-button{
	width: 70px;	
}


/* Event Styling*/
.fc-content-skeleton .fc-event-container{
	padding: 12px;
}

.fc-event-container .fc-event{
	padding: .5rem;
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 8px;
	border-radius: 2px;
	border: none;
	color: #fff !important;
}

.external-events-wrap {
	border: 1px solid $border-color-default;
	padding: 1rem;
	border-radius: $border-radius;
}

// darggable-events
.external-events{
	display: flex;
	flex-flow: row wrap;
	.external-event {
		flex-grow: 1;
		flex-basis: 20%;
		margin-right: 1.5rem;
		color: #fff;
		width: 100%;
		padding: 8px 16px;
		font-size: 14px;
		font-weight: 400;
		margin-bottom: 8px;
		border-radius: 2px;
		&:nth-child(4n),
		&:last-child {
			margin-right: 0;
		}
		&.ui-draggable-dragging{
			z-index: 999;
		}
		cursor: move;
	}

	@media (max-width: map-get($grid-breakpoints, md)) {
		.external-event {
			flex-basis: 40%;
			&:nth-child(2n) {
				margin-right: 0;
			}
		}
	}

	@media (max-width: map-get($grid-breakpoints, sm)) {
		flex-flow: column nowrap;
	}
}

.new_event_cat_form {
	.btn {
		height: 40px;
	}
	.form-control {
		height: 40px !important;
		@media (max-width: map-get($grid-breakpoints, md)) {
			margin-bottom: 1rem;
		}
	}
}