/**
 * Modern Event Calendar Custom CSS
 * 
 * Modifies styles for the Modern Event Calendar Plugin. Note that the CSS here applies to the "Full Calendar" Skin in the Classic Style and Monthly Style of "Simple"
 */



/***********************************************************************************************************************
   --- MEC Filter Box styles ---
   Modify the basic styles for the filter box at top of calendar.
***********************************************************************************************************************/
/* Style the filter box
 ************************************/
.mec-wrap.mec-full-calendar-wrap .mec-totalcal-box {
	background-color: var(--bb-content-background-color);
	border-radius: var(--bb-block-radius);
	box-shadow:none;
	border: 1px solid var(--bb-content-border-color);
}
/************************************/

/* Style the search field
 ************************************/
/* Set the search box with to 50% to allow for the monthly/weekly/daily/list buttons inline */
.mec-wrap.mec-full-calendar-wrap .mec-search-form .mec-full-calendar-search-ends .mec-text-input-search.col-md-12 {
	width: 50%!important;
	min-height:37px;
}
/* Adjust border radius */
.mec-wrap.mec-full-calendar-wrap .mec-search-form .mec-text-input-search .mec-sl-magnifier{
	border-top-left-radius: var(--bb-button-radius);
	border-bottom-left-radius: var(--bb-button-radius);
}
.mec-wrap.mec-full-calendar-wrap .mec-search-form .mec-text-input-search input {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-bottom: 0;
}
/************************************/

/* Style the Monthly/Weekly/Daily/List button tabs
 ************************************/
/* Adjust the selected option'stext colour */
.mec-wrap.mec-full-calendar-wrap .mec-totalcalview-selected {
	color: var(--bb-primary-button-text-hover)!important;
}
/* Adjust the radius to match BuddyBoss buttons */
.mec-wrap.mec-full-calendar-wrap .mec-totalcal-view .mec-totalcal-monthlyview {
	border-top-left-radius: var(--bb-button-radius);
	border-bottom-left-radius: var(--bb-button-radius);
}
.mec-wrap.mec-full-calendar-wrap .mec-totalcal-view .mec-totalcal-listview {
	border-top-right-radius: var(--bb-button-radius);
	border-bottom-right-radius: var(--bb-button-radius);
}
/************************************/

/**********************************************************************************************************************/


/***********************************************************************************************************************
   --- MEC Full Calendar styles styles ---
   Modify the basic styles for the full calendar
***********************************************************************************************************************/

/* Style the month navigation buttons
 ************************************/
/* Button Styles */
.mec-wrap.mec-full-calendar-wrap .mec-box-calendar.mec-calendar .mec-calendar-side .mec-next-month,
.mec-wrap.mec-full-calendar-wrap .mec-box-calendar.mec-calendar .mec-calendar-side .mec-previous-month {
	border-width: 1px!important;
    background-color: var(--bb-secondary-button-background-regular)!important;
    color: var(--bb-secondary-button-text-regular)!important;
    border: 1px solid var(--bb-secondary-button-border-regular)!important;
	font-size: 14px!important;
    font-weight: 500!important;
    min-height: 34px!important;
    line-height: 34px!important;
    padding: 0 20px!important;
    border-radius: var(--bb-button-radius)!important;
}
/* button hover styles */
.mec-wrap.mec-full-calendar-wrap .mec-box-calendar.mec-calendar .mec-calendar-side .mec-next-month:hover,
.mec-wrap.mec-full-calendar-wrap .mec-box-calendar.mec-calendar .mec-calendar-side .mec-previous-month:hover {
    background-color: var(--bb-secondary-button-background-hover)!important;
    color: var(--bb-secondary-button-text-hover)!important;
    border: 1px solid var(--bb-secondary-button-border-hover)!important;
    box-shadow: none!important;
}
/* .mec-wrap.colorskin-custom .mec-calendar .mec-calendar-side .mec-next-month:hover .mec-load-month-link */
.mec-wrap.mec-full-calendar-wrap .mec-box-calendar.mec-calendar .mec-calendar-side .mec-next-month:hover .mec-load-month-link,
.mec-wrap.mec-full-calendar-wrap .mec-box-calendar.mec-calendar .mec-calendar-side .mec-next-month:hover .mec-load-month-link i,
.mec-wrap.mec-full-calendar-wrap .mec-box-calendar.mec-calendar .mec-calendar-side .mec-previous-month:hover .mec-load-month-link,
.mec-wrap.mec-full-calendar-wrap .mec-box-calendar.mec-calendar .mec-calendar-side .mec-previous-month:hover .mec-load-month-link i {
	color: var(--bb-secondary-button-text-hover)!important;
	transition: all .33s ease;
}
/************************************/


/* Style the calendar
 ************************************/
.mec-wrap.mec-full-calendar-wrap  .mec-credit-url {
	display:none;
}
/************************************/

.mec-wrap.colorskin-custom.mec-modal-wrap {
	width: 1000px;
}

/**********************************************************************************************************************/