/***** CALENDAR *****/
.hb-calendar, .hb-calendar * 
{ -webkit-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.jef4calendar-jquery-layout
{
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.hb-calendar {
	/* border-right: 1px solid #333; */
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	/* float: left; */
	margin-bottom: 20px;
	/* padding-right: 50px; */
	width: 50%;
	padding: 20px;
	border-radius: 20px;
	background-color: #f9f9f9;
	position: relative;
}
.hb-calendar.hb-calendar-loading
{
    opacity: 0.5;
}
.hb-calendar.hb-calendar-loading:before {
	content: url("spinner.svg");
	display: block;
	width: 23px;
	text-align: center;
	animation: jef4calendar-spinner-rotate 0.8s linear infinite;
	transform-origin: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@keyframes jef4calendar-spinner-rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.jef4calendar-jquery-events {
    width: 50%;
	position: relative;
}


.hb-calendar a { color: inherit; text-decoration: none; transition: .2s; }
/***** MONTHS *****/
.hb-months {
	margin-bottom: 25px;
	position: relative;
	text-align: center;
	margin-top: 15px;
}

.hb-months:after { content: ""; display: table; clear: both; }

.hb-current-month {
	line-height: 2rem;
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: -2px;
	font-weight: 500;
 

}

.hb-current-month span { display: inline-block; margin-left: 10px; line-height: 20px; color: #333 !important; }
.hb-change-month {
	position: absolute;
	top: -8px;
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hb-prev-month { left: 0px;  }
.hb-next-month { right: 0px;  }

.hb-change-month svg { width: 30px; height: 30px; fill: var(--primary-website-color); transition: .2s; }

/***** DAYS *****/
.hb-days {
	/* height: auto; */
	margin: 0 auto;
	/* width: 100%; */
	display: grid;
	grid-template-rows: 8;
	grid-template-columns: 7;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
	/* max-width: 500px; */
	margin: 0;
}
.hb-days:after { content: ""; display: table; clear: both; }
.hb-day { 
    display: inline-block; 
    font-size: 1.7rem; 
    height: 80px; 
    line-height: 80px; 
    text-align: center;
    width: 14%;
    position: relative;
	border-radius: 6px;
	border: 1px solid var(--primary-website-color);
	margin-top: 5px;

	width: 100%;
	height: auto;
}
.hb-day.hb-day-name {
	color: var(--primary-website-color);
	font-size: 14px;
	height: auto;
	line-height: 14px;
	font-weight: 700;
	border-radius: 0;
	border: 0;
	margin-top: 0;
}
.hb-day.hb-day-active
{
    cursor: pointer;
}

.hb-day.hb-day-active::after {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 8px;
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background-color: var(--primary-website-color);
	border-radius: 90px;
}

.hb-day.hb-day-active:hover
{
	opacity: 0.8;
}
.hb-day.hb-day-selected
{
	background-color: var(--primary-website-color);
	color: white;
}
.hb-day.hb-day-selected::after
{
	background-color: white;
}

/*DETAIL CALENDAR*/

.box-calendar { width: 100%; display: inline-block; }
#hb-event-list { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; float: right; padding-left: 50px; width: 50%; }
#hb-event-list h3 { color: #333; display: inline-block; font-size: 32px; font-weight: 300; line-height: 42px; margin-bottom: 30px; text-align: center; text-transform: uppercase; width: 100%; }
#hb-event-list .myrow { float: left; width: 100%; margin-bottom: 30px; }
#hb-event-list .myrow > li { border-bottom: 1px solid #c4c4c4; display: inline-block; padding: 10px 0; width: 100%; }
#hb-event-list .mytesto { color: #999; font-size: 16px; margin-bottom: 5px; margin-top: 5px; }
#hb-event-list .mytesto a { display: none; }
#hb-event-list h5 { font-size: 26px; letter-spacing: 2px; line-height: 26px; margin-bottom: 5px; }
.infoevent { font-size: 12px; font-weight: 700; text-transform: uppercase; }
#hb-event-list .mybutton { float: right; margin: 0; padding: 10px; }
#hb-event-list .mybutton.tocart img { max-width: 15px; }
#hb-event-list .box-calendar > img { float: left; height: auto; margin: 30px 20px 40px 0; width: 30%; }


.eventItem {
	background-color: #FFF;
	border-radius: 8px;
	padding: 10px;
}

.eventItem__left
{
	width: 80px;
}

.eventItem .infoMainDate
{
	background-color: rgba(52, 83, 130, 0.1);
	color: var(--primary-website-color);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 5px 8px;
	border-radius: 6px;
}

.eventItem__thumbnail
{
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.eventItem__thumbnail img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.eventItem .eventItem__title
{
	font-size: 18px;
	font-weight: 600;
	color: var(--primary-website-color);
}

.eventItem__short_description
{
	font-size: 13px;
	color: var(--text-website-color);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eventItem__info .eventItem__info_single
{
	font-size: 14px;
	color: var(--text-website-color);
}
.eventItem__info .eventItem__info_single svg
{
	height: 14px;
	width: 14px;  
}
.eventItem__info .eventItem__info_single.eventItem__venue svg path
{
	fill: var(--text-website-color);
}
.eventItem__info .eventItem__info_single.eventItem__time svg path
{
	stroke: var(--text-website-color);
}



/* LOADER */
.hb-loading:before {
	content: url("spinner.svg");
	display: block;
	width: 23px;
	text-align: center;
	animation: jef4calendar-spinner-rotate 0.8s linear infinite;
	transform-origin: center;
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
}
.hb-error { padding: 10px 15px; background-color: #f2dede; border: 1px solid #ebccd1; border-radius: 3px; color: #b84442; }
/*ASIDE*/
aside .hb-calendar { border-right: 0 none; padding: 0; width: 100%; }
aside .hb-current-month { font-size: 24px; }
aside .hb-day.hb-day-name { font-size: 16px; height: 30px; line-height: 25px; }
aside .hb-day { font-size: 21px; height: 40px; line-height: 40px; }
aside .hb-change-month { background-size: 30px auto; width: 30px; }
aside #hb-event-list { float: left; padding-left: 0; width: 100%; }
#hb-event-list h3 { font-size: 25px; margin-top: 30px; line-height: 32px; }
 @media only screen and (max-width: 960px) {
.hb-current-month { font-size: 19px; line-height: 33px; }
.hb-day.hb-day-name { font-size: 16px; }
.hb-day { font-size:19px; height: 60px; line-height: 60px; }
}
 @media only screen and (max-width: 767px) {
#hb-event-list h3 { font-size: 24px; margin-bottom: 20px; }
.hb-calendar { border-bottom: 1px solid #333; border-right: 0; box-sizing: border-box; float: none; display: block; margin-left: auto; margin-right: auto; margin-bottom: 20px; padding-right: 0; width: 90%; padding-bottom: 20px; }
#hb-event-list { float: none; display: block; margin-left: auto; margin-right: auto; padding-left: 0; width: 90%; }
}
 @media only screen and (max-width: 580px) {
.hb-change-month { width: 35px; background-size: 30px auto; }
}