.big-calendar{
	margin-top: 7em;
	position: relative;
	padding-left: 1em;
	box-sizing: border-box;
	margin-left:auto;
	margin-right:auto;
}

#big-calendar-inner{
	margin-top: 2.3em;
	background: #f9f9f9;
	padding: 1.5rem 1rem;
	position:relative;
}

.month-control{
	font-size: 1.3rem;
	display: flex;
	align-items: center;
}

.change-month{
	flex:1;
	color: #fff;
	font-size: 1.5rem;
}

.arrow-back{
	text-align:right;
}

.change-month i{
	background: #606060;
	padding: 0.4em 0.7em;
	cursor:pointer;
}

.change-month i:hover{
	background: #444444;
}

.month-name{
	margin: 0em 2em;
	font-weight: 300;
}

#big-calendar-table{
	width: 100%;
	text-align: center;
	font-weight: 300;
	font-size: 1.1rem;
	margin-top: 1em;
}

#big-calendar-table th{
	font-weight: 600;
}

#big-calendar-table td, #big-calendar-table th{
	border: 1px solid #d5d5d5;
}

#big-calendar-table td:hover{
	background:#ebebeb;
}

#big-calendar-table td.td-event-day{
	cursor:pointer;
}

.dag-info{
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	border-radius: 100%;
	margin-left: auto;
	margin-right: auto;
}

.dag-info.today{
	background:#ebebeb;
}

.dag-info.event-day{
	background:#606060;
	color:#fff;
	cursor:pointer;
}

.dag-info.holiday-day{
	background:#606060;
	color:#fff;
	cursor:pointer;
}

#big-calendar-table td:hover .dag-info.event-day{
	background: #444444;
}

.events-box{
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	background: #606060;
	color: #fff;
	padding: 1rem;
	width:250px;
	overflow:hidden;
	display:none;
}

.close-box{
	position: absolute;
	right: 1rem;
	top: 0.4rem;
	font-size: 1.8rem;
	background: #444444;
	border-radius: 100%;
	width: 43.19px;
	text-align: center;
	cursor:pointer;
}

.close-box:hover{
	background: #2a2a2a;
}

.box-date{
	font-size: 1.4rem;
	font-weight: 100;
	border-bottom: 1px solid #fff;
	padding-bottom: 0.5rem;
	margin-top: 2rem;
	height: 43px;
}

.event-box{
	border-left: 1px solid #fff;
	padding-left: 1rem;
}

.box-event{
	position:relative;
	margin-bottom: 2rem;
	padding-right:1em;
	cursor:pointer;
}

.box-event.no-cursor{
	cursor:default;
}

.box-event::before{
	content: '';
	position: absolute;
	left: -26px;
	font-size: 80px;
	line-height: 15px;
	height: 20px;
	top: calc(50% - 10px);
	width: 20px;
	background: #fff;
	border-radius: 100%;
}

.box-event:first-child::after{
	content: '';
	background: #606060;
	height: calc(50% - 10px);
	position: absolute;
	width: 1px;
	top: 0;
	left: -17px;
}

.box-event:last-child::after{
	content: '';
	background: #606060;
	height: calc(50% - 10px);
	position: absolute;
	width: 1px;
	bottom: 0;
	left: -17px;
}

.another-scroll-element{
	height:calc(100% - 3.5rem - 43px);
	margin-top: 1.5rem;
}

.slimScrollDiv, .event-box-scroll{
	margin-left: -2.5rem;
	padding-left: 2.5rem;
}

.event-box-scroll{
	padding-left: 3.5rem;
}

.slimScrollBar{
	opacity:1 !important;
}

.box-event-detail{
	display:none;
}

.box-event-detail-name{
	display:none;
}

.box-event-detail-close{
	display:none;
}



@media screen and (min-width: 576px) {


	#big-calendar-table td, #big-calendar-table th{
		padding: 0.5em 0.25em;
	}

	#big-calendar-inner{
		padding: 1.5rem 1.5rem;
	}

	.dag-info{
		height: 45px;
		width: 45px;
	}

	.events-box{
		width:330px;
		padding: 1rem 2.5rem;
	}

	.slick-dots {
		bottom: 30px;
	}

	#big-calendar-table{
		font-size: 1.2rem;
	}

	.td-event-day{
		background: transparent;
	}

	.td-today{
		background: transparent;
	}

}


@media screen and (min-width: 768px) {


	.events-box{
		width:450px;
		overflow: visible !important;
	}

	.box-event{
		font-size: 1.3rem;
		font-weight: 100;
	}

	.another-scroll-element>.slimScrollDiv{
		overflow: visible!important;
	}

	.box-event-detail{
		position: absolute;
		top: -28px;
		left: -314px;
		width: 314px;
		background: #606060f5;
		height:412px;
		padding:10px;
	}

	.box-event-detail-name{
		display:block;
		border-bottom: 1px solid #fff;
		padding-bottom: 10px;
		padding-right: 40px;
	}

	.box-event-detail-close{
		background: #444444;
		position: absolute;
		right: 5px;
		top: 5px;
		border-radius: 100%;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor:pointer;
	}

	.box-event-detail-close:hover{
		background: #2a2a2a;
	}

	.box-event-detail-text{
		margin-top:10px;
		padding-right:15px;
	}

	.box-event-detail-scroll{
		height: calc(100% - 3.5rem - 20px);
		margin-top:15px;
	}

	#big-calendar-table{
		font-size: 1.3rem;
	}


}

@media screen and (min-width: 992px) {

	#big-calendar-table th{
		padding: 1em;
	}

	#big-calendar-table td{
		padding:0.25em 0.5em;
	}

	.dag-info{
		height: 55px;
		width: 55px;
	}

	#big-calendar-table{
		font-size: 1.4rem;
	}

	.box-event-detail{
		top: -25px;
		left: -514px;
		width: 514px;
		height: 496px;
		padding:25px;
	}

	.box-event-detail-close{
		width: 45px;
		height: 45px;
		top: 15px;
		right:20px;
	}

	.box-event-detail-name{
		padding-right: 50px;
		font-size: 1.5em;
		font-weight: 300;
	}


}

@media screen and (min-width: 1200px) {


	.box-event-detail{
		left:-560px;
		width:560px;
	}

	.close-box{
		top: 1rem;
	}

	.box-event-detail{
		left:-720px;
		width:720px;
	}

}
