.wcs-timetable--monthly-calendar{
	display: flex;
	flex-direction: column;
	width: 100%;
	flex-grow: 1;

	.wcs-spinner{
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.wcs-spinner > div{
		background-color: currentColor;
	}

	.wcs-calendar__header{
		display: flex;
		width: 100%;
		margin-bottom: 1em;
		flex-wrap: wrap;
		justify-content: center;

		h3{
			flex-basis: 100%;
			margin: 0;
			font-weight: bold;
			padding-bottom: 10px;
			order: 0
		}

		> div{

			opacity: 0.5;
			text-transform: uppercase;
			padding: 0 10px;

			&.wcs-modal-call{
				opacity: 1;
			}
			i::before{
				position: relative;
				bottom: -0.1em;
			}
			.ti-angle-right{
				margin-left: .35em;
			}
			.ti-angle-left{
				margin-right: .35em;
			}

			&:first-of-type{
				order: 1;
			}
			&:last-of-type{
				order: 2;
			}
		}
		.wcs-calendar-nav{
			font-size: 90%;
			letter-spacing: 1px;
			white-space: nowrap;
		}
		.wcs-calendar-nav-prev{
			text-align: right;
		}

		.wcs-calendar-nav-next{
			text-align: left;
		}

		@media(min-width: 768px){
			flex-wrap: nowrap;
			align-items: baseline;
			justify-content: normal;
			margin-bottom: 2em;

			h3{
				order: initial;
				flex-grow: 3;
				flex-basis: 70%;
				padding-bottom: auto;
			}

			> div{
				padding: auto;
				flex-grow: 1;
				flex-basis: 15%;

				&:first-of-type,
				&:last-of-type{
					order: 0;
				}
			}
		}

	}

	&.wcs-timetable{
		&--side-agenda{
			flex-direction: row;
			flex-wrap: wrap;


			.wcs-timetable{
				&__main-col{
					flex-grow: 5;
					flex-shrink: 1;
					max-width: 100%;
				}
				&__side-col{
					flex-grow: 1;
					flex-shrink: 1;
					position: relative;
					margin-top: 2em;

					@media(min-width: 768px){
						flex-shrink: 0;
						flex-basis: 24em;
						margin-top: auto;
					}

					&::before{
						content: '';
						display: block;
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						opacity: 0.05;
						background-color: currentColor;
						z-index: 0;
					}
				}
			}

			@media(min-width: 768px){
				margin: 0 -15px;
				position: relative;

				.wcs-timetable{
					&__main-col{
						margin: 0 15px;
					}
					&__side-col{
						margin: 0 15px;
					}
				}

			}

			.wcs-day-agenda{
				padding: 6.5%;
			}

		}

		&--side-agenda-left{
			flex-direction: row-reverse;

			.wcs-timetable{
				&__main-col{
				}
				&__side-col{
				}
			}

		}

		&--inside-agenda:not(.wcs-timetable--highligh-round){
			.wcs-date--selected{
				&::after{
					content: '';
					display: block;
					top: 100%;
					border-left: 1em solid transparent;
				  border-right: 1em solid transparent;
					width: 0;
					height: 0;
					left: 50%;
					transform: translateX(-50%);
					border-top: 20px solid #f00;
					position: absolute;
				}
			}
			&.wcs-timetable--alternate .wcs-day-agenda{
				&::after{
					content: '';
					display: block;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					position: absolute;
					border: 1px solid currentColor;
					opacity: 0.1;
				}
			}
		}

	}

	.wcs-table{
		position: relative;

		&-td{
			position: relative;
			z-index: 1
		}
		&-td--full{
			position: relative;

			&::before{
				content: '';
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				opacity: 0.075;
				background-color: currentColor;
			}

			.wcs-day-agenda{
				padding: 3em 0;
			}
		}
	}


	.wcs-day{
		&::before{
			content: attr(data-day);
			display: block;
			font-weight: bold;
		}
		@media(min-width: 768px){
			&::before{
				display: none;
			}
		}
	}
	.wcs-day__title{
		font-size: 110%;
		white-space: nowrap;
	  	overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	.wcs-date{

		span{
			display: block;
			font-size: 115%;
			width: 100%;
			height: 100%;
			padding-bottom: 1em;

			&::after{
				content: '';
				display: block;
				width: .55em;
				height: .55em;
				border-radius: 100em;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				opacity: 0;
				margin-top: .25em;
			}
		}

		&--past-month,
		&--future-month{
			span{
				opacity: 0.35;
			}
		}
		&--today{

		}
		&--selected{
			position: relative;

			span::after{
				content: '';
				display: block;
				position: absolute;
				top: -1px;
				right: 0;
				bottom: 0;
				left: 0;
				width: auto;
				height: auto;
				border-radius: 0;
				z-index: -1;
				transform: none;
				opacity: 1;
				margin-top: 0;
			}
		}
		&--with-events:not(.wcs-date--past-month):not(.wcs-date--future-month){

			span::after{
				opacity: 1;
			}

		}
		&--with-events:not(&--past-month):not(&--future-month){
			//font-weight: bold;
		}
	}

	.wcs-day-agenda{
		padding: 2em 0;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 37.5em;
		margin: 0 auto;
		position: relative;

		&__title{
			margin-bottom: 4vh;
			padding-bottom: 0.5em;
			position: relative;

			&::before{
				content: '';
				display: block;
				bottom: 0;
				top: 100%;
				left: 0;
				right: 0;
				border-bottom: 3px solid currentColor;
				opacity: 2;
				position: absolute;
			}
		}
	}

	&.wcs-timetable{
		&--no-borders{

		}
		&--horizontal-borders{
			.wcs-table{
				&-tr:not(:last-child){
					position: relative;

					&::after{
						content: '';
						display: block;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						border-bottom: 1px solid currentColor;
						position: absolute;
						opacity: 0.2;
						z-index: 0;
					}
				}
			}
		}
		&--vertical-borders{
			.wcs-table{
				&-td:not(:first-child){
					position: relative;

					&::after{
						content: '';
						display: block;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						border-left: 1px solid currentColor;
						position: absolute;
						opacity: 0.2;
						z-index: 0;
					}
				}
			}
		}
		&--all-borders{
			.wcs-table{
				&-tr,
				&-td{
					position: relative;

					&::after{
						content: '';
						display: block;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						position: absolute;
						opacity: 0.2;
						z-index: 0;
					}
				}
				&-tr::after{
					border-bottom: 1px solid currentColor;
				}
				&-td::after{
					border-right: 1px solid currentColor;
				}
				&-td:first-child::after{
					border-left: 1px solid currentColor;
				}
				&-thead .wcs-table-td{

					&::after{

						border-top: 1px solid currentColor;

					}
				}
			}
		}
		&--alternate{
			.wcs-table{
				&-tr:nth-child(2n+1){
					position: relative;

					&::after{
						content: '';
						display: block;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						background-color: currentColor;
						position: absolute;
						opacity: 0.075
					}
				}
			}
		}

		&--highligh-round{
			.wcs-date--selected::before{
				display: none;
			}

			.wcs-date--selected span:after{
				width: 2.85em;
				height: 2.85em;
				opacity: 1;
				z-index: -1;
				top: 50%;
				bottom: auto;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 200em;
			}
			.wcs-date--selected span{
				padding-bottom: 0;
			}
		}

		&--loading{
			.wcs-spinner{
				display: block;
			}
			.wcs-table-tr{
				opacity: 0.6;
			}
		}

		&--past-hidden{
			.wcs-date{
				&--past{
					span{
						opacity: 0.35;
					}
				}
			}
		}

	}

	.wcs-class{
		display: flex;
		width: 100%;
		align-content: flex-start;
		justify-content: flex-start;

		& + .wcs-class{
			margin-top: 3em;
			position: relative;

			&::before{
				content: '';
				display: block;
				top: -1.5em;
				left: 0;
				right: 0;
				width: 100%;
				border-top: 1px dashed currentColor;
				opacity: .2;
				position: absolute;
			}
		}

		&--canceled{
			.wcs-class__inner,
			.wcs-class__image{
				opacity: 0.45;
				text-decoration: line-through;
			}

		}

		&__image{
			flex-basis: 18%;
			height: 4.5em;
			flex-grow: 0;
			flex-shrink: 0;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			align-self: flex-start;

			@media(max-width: 767px){
				display: none;
			}

			@media(min-width: 768px){
				& + .wcs-class__inner{
					margin-left: 6%;
					align-self: center;
				}
			}
		}
		&__inner{
			flex-grow: 4;
			text-align: left;

		}

		&__title{
			font-size: 110%;
			margin: .25em 0 !important;
		}

		&__meta{
			font-size: 90%;
		}
		&__time-duration{
			font-size: 90%;
		}
	}
}
