/* Overall wrapper */
.monthly {
	background: #F3F3F5;
	color: #545454;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: relative;
margin-bottom: 30px;
}

/* Top bar containing title, navigation, and buttons */
.monthly-header {
	position: relative;
    text-align: center;
    /* padding: 0.5em; */
    background: #fff;
    box-sizing: border-box;
    background: #b30000;

}
/* Center area of top bar containing title and buttons */
.monthly-header-title {
	text-transform: uppercase;
line-height: 35px;
}

/* Buttons for reverting to "today", and closing event list */
.monthly-header-title a:link,
.monthly-header-title a:visited {
	display: inline-block;
	border: 0px solid #ccc;
	color: #ddd;
	text-decoration: none;
	/*height: 1.75em;*/
	line-height: 36px;
	font-size:16px;
	padding: 0 0.65em 0 0.65em;
	box-sizing: border-box;
	transition: background .1s;
}
/* Add some roundy-ness */
/*.monthly-header-title a:first-of-type {*/
/*	border-top-left-radius: 1em;*/
/*	border-bottom-left-radius: 1em;*/
/*}*/
/*.monthly-header-title a:last-of-type {*/
/*	border-top-right-radius: 1em;*/
/*	border-bottom-right-radius: 1em;*/
/*}*/
.monthly-header-title a:hover {
	background: transparent;
	border: 0px solid #8b8b8b;
	color: #fff;
}
.monthly-header-title a:active {
	background: #9e0000;
	border: 0px solid #222;
	transition: none;
}
/* current month/yr block */
.monthly-header-title-date,
.monthly-header-title-date:hover {
	background: transparent !important;
	border: 0px solid #ccc!important;
	color: #fff !important;
	font-weight:600;
	cursor: default;
}
/* Button to reset to current month */
.monthly-reset {
	border-left: 0!important;
}
.monthly-reset::before {
	content: '\21BB';
	margin-right: 0.25em;
}
/* Button to return to month view */
.monthly-cal {
	border-right: 0!important;
}
.monthly-cal::before {
	content: '\2637';
	margin-right: 0.25em;
}

/* wrapper for left/right buttons to make the clickable area bigger */
.monthly-prev,
.monthly-next {
	position: absolute;
	top: 0;
	width: 3em;
	height: 100%;
	/* opacity: .5; */
}
.monthly-prev {
	left: 0;
}
.monthly-next {
	right: 0;
}
.monthly-prev:hover,
.monthly-next:hover {
	opacity: 1;
}

/* Arrows */
.monthly-prev:after,
.monthly-next:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	border-style: solid;
	border-color: #fff;
	width: 0.6em;
	height: 0.6em;
	margin: -0.4em 0 0 -0.4em;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
/* Left Arrow */
.monthly-prev:after{
	border-width: 0 0 0.2em 0.2em;
}
/* Right Arrow */
.monthly-next:after {
	border-width: 0.2em 0.2em 0 0;
}

/* Day of the week headings */
.monthly-day-title-wrap {
	display: table;
	table-layout: fixed;
	width: 100%;
	background: #fff;
	border:1px solid #ffbfbf;
    height: 40px;
    line-height: 40px;

}
.monthly-day-title-wrap div {
	width: 14.28%!important;
	display: table-cell;
	box-sizing: border-box;
	position: relative;
	text-align: center;
	text-transform: uppercase;
    font-weight: 500;
    font-size: 13px;
}

/* Calendar days wrapper */
.monthly-day-wrap {
	display: table;
	table-layout: fixed;
	width: 100%;
	overflow: hidden;
}
.monthly-week {
	display: table-row;
	width: 100%;
}
/* Calendar Days */
.monthly-day, .monthly-day-blank {
	width: 14.28%!important;
	display: table-cell;
	vertical-align: top;
	box-sizing: border-box;
	position: relative;
	color: inherit;
	background: #fff;
	/* box-shadow: 0 0 0 1px #EBEBEB; */
    border: 1px solid #ddd;
	-webkit-transition: .25s;
	transition: .25s;
	padding: 0;
	text-decoration: none;
}

/* Trick to make the days' width equal their height */
.monthly-day:before {
	content: '';
	display: block;
	padding-top: 100%;
	float: left;
}

/* Hover effect for non event calendar days */
.monthly-day-wrap > a:hover {
	background: #A1C2E3;
}

/* Days that are part of previous or next month */
.monthly-day-blank {
	background: #F3F3F5;
}

/* Event calendar day number styles */
.monthly-day-event > .monthly-day-number {
	position: absolute;
    line-height: 1em;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}
.monthly-day-event > .monthly-day-number span {
    color: var(--black);
    font-size: .875rem;
    font-weight: 500;
    display: block;
    line-height: 30px;
}
.monthly-day-event > .monthly-day-number span.missed {
    /*background-color: beige;*/
    color:#fff;
}
.monthly-day-event>.monthly-day-number span.req {
    color: #37973b;
    font-size: 13px;
}

.caldr-btn, .caldr-request {
   padding: 48px 5px 5px;
    font-size: 10px;
    text-align: center;
    color: #fff;
    border-radius: 0px;
    cursor: pointer;
    text-transform: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.caldr-btn:hover,.caldr-btn:focus{
    color: #fff;
    background:#e63d040f;
}
.caldr-request:hover,.caldr-request:focus{
    color: #fff;
    background:-webkit-linear-gradient(left,#0e4b5d,#0e4b5d);
    border:1px solid #145f76;
}
.caldr-sold{
    padding: 2px 5px;
   font-size: 12px;
   border:1px solid #333333;
   background: -webkit-linear-gradient(left,#333333,#595959);
   color: #fff;
   border-radius: 5px;
   cursor:pointer;
}
.caldr-sold:hover,.caldr-sold:focus{
    color: #fff;
    background:-webkit-linear-gradient(left,#333333,#333333);
    border:1px solid #333333;
}
.btnDesc{
    background: #e0e0e0 !important;
    padding: 8px 0 !important;
    text-align: center !important;
}
@media only screen and (max-width:425px){
    .caldr-btn, .caldr-request{  
        padding: 2px 2px;
        font-size: 8px;
        color: transparent;}
.monthly-day-event>.monthly-day-number span.req {
    display: none;
}
.caldr-btn, .caldr-request:hover {
    padding: 10px 0px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    color: #000;
}
}
.av-icon-rupee:before {margin-right:0.2em;width: 0.5em;}

/* Non-Event calendar day number styles */
.monthly-day-pick > .monthly-indicator-wrap {
	margin: 0;
}

.monthly-day-pick > .monthly-day-number:before,
.monthly-day-pick > .monthly-day-number:after {
	content: '';
	display: block;
	padding-top: calc(50% - 0.8em);
	width: 0;
	height: 0;
}

/* Days in the past in "picker" mode */
.monthly-past-day:after{
	content: '';
	width: 150%;
	height: 2px;
	-webkit-transform-origin: left top;
		-ms-transform-origin: left top;
	        transform-origin: left top;
	-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	background: rgba(0, 0, 0, 0.1);
	position: absolute;
	left: 0;
	top: 0;
}
.monthly-past-day:hover {
	background: #fff!important;
}

/* Current day style */
/* .monthly-today .monthly-day-number {
	color: #FFF;
	background: #EA6565;
	border-radius: 0.75em;
	top: 0.08em;
	left: 0.05em;
	font-size: 0.9em;
	padding: 0;
	width: 1.25em;
	height: 1.25em;
	line-height: 1.25em;
	text-align: center;
} */
.monthly-day-pick.monthly-today .monthly-day-number {
	padding: 0.15em;
	margin: calc(50% - 0.7em) auto auto auto;
	font-size: 1em;
}

/* Wrapper around events */
.monthly-indicator-wrap {
	position: relative;
	text-align: center;
	line-height: 0;
	max-width: 1.5em;
	margin: 0 auto;
	padding-top: 1.2em;
}

/* Event indicator dots */
.monthly-day .monthly-event-indicator {
	display: inline-block;
	margin: 0.05em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 0.25em;
	vertical-align: middle;
	background: #7BA7CE;
}

.monthly-day .monthly-event-indicator span {
	color: transparent;
}

.monthly-day .monthly-event-indicator:hover {
	cursor: pointer;
}
/* Listing of events under calendar */
.monthly-event-list {
	background: rgba(233, 235, 236, 0.9);
	overflow: auto;
	position: absolute;
	top: 3em;
	width: 100%;
	height: calc(100% - 3em);
	display: none;
	-webkit-transition: .25s;
	transition: .25s;
	-webkit-transform: scale(0);
		-ms-transform: scale(0);
	        transform: scale(0);
}

/* Days in Events List */
.monthly-list-item {
	position: relative;
	padding: 0.5em 0.7em 0.25em 4em;
	display: none;
	border-top: 1px solid #D6D6D6;
	text-align: left;
}

.monthly-list-item:after{
    padding: 0.4em 1em;
    display: block;
    margin-bottom: 0.5em;
 }

.monthly-event-list .monthly-today .monthly-event-list-date {
	color: #EA6565;
}

/* Events in Events List */
.monthly-event-list .listed-event {
	display: block;
	color: #fff;
	padding: 0.4em 1em;
	border-radius: 0.2em;
	margin-bottom: 0.5em;
}

.monthly-list-item a:link, .monthly-list-item a:visited {
	text-decoration: none;
}

.item-has-event {
	display: block;
}

.item-has-event:after{
    display: none!important;
}

.monthly-event-list-date {
	width: 4em;
	position: absolute;
	left: 0;
	top: 1.2em;
	text-align: center;
    font-weight: bold;
    line-height: 1.2em;
}

.monthly-list-time-start,
.monthly-list-time-end {
	font-size: .8em;
	display: inline-block;
}
.monthly-list-time-end:not(:empty):before {
	content: '\2013';
	padding: 0 2px;
}

/* Events List custom webkit scrollbar */
.monthly-event-list::-webkit-scrollbar {width: 0.75em;}

/* Track */
.monthly-event-list::-webkit-scrollbar-track {background: none;}

/* Handle */
.monthly-event-list::-webkit-scrollbar-thumb {
	background: #ccc;
	border: 1px solid #E9EBEC;
	border-radius: 0.5em;
}
.monthly-event-list::-webkit-scrollbar-thumb:hover {background: #555;}

/* Language-specific. Default is English. */
.monthly-reset:after		{ content: 'Today'; }
.monthly-cal:after			{ content: 'Month'; }
.monthly-list-item:after	{ content: 'No Events'; }

.monthly-locale-fr .monthly-reset:after		{ content: "aujourd'hui"; }
.monthly-locale-fr .monthly-cal:after		{ content: "mois"; }
.monthly-locale-fr .monthly-list-item:after	{ content: 'aucun événement'; }


/*
Calendar shows event titles if the device width allows for at least 3em per day (rounded
up to 25em total). This assumes the calendar font is close to the baseline font size and
the calendar takes up close to the full media width as the window is made smaller or the
font is zoomed. If one or both of these is not true, this will need to be overridden by
a layout-specific width, or you will need to use a library like css-element-queries to 
establish the rules based on the calendar element width rather than the device width.
*/
@media (min-width: 25em) {
	.monthly-day-event {
		padding-top: 1.3em;
	}
	.monthly-day-event > .monthly-indicator-wrap {
		width: auto;
		max-width: none;
	}
	.monthly-indicator-wrap {
		padding: 0;
	}
	.monthly-day:before {
		padding-top: calc(100% - 1.3em);
	}
	.monthly-day .monthly-event-indicator {
		display: block;
		margin: 0 0 1px 0;
		width: auto;
		height: 1.5em;
		line-height: 1.2em;
		padding: 0.125em 0 0.1em 0.125em;
		border-radius: 0;
		overflow: hidden;
		background-color: #333;
		color: #333;
		text-decoration: none;
		white-space: nowrap;
		box-sizing: border-box;
	}
	.monthly-day .monthly-event-indicator.monthly-event-continued {
		box-shadow: -1px 0 0 0;
	}
	.monthly-day .monthly-event-indicator span {
		display: block;
		width: auto;
		margin: 0;
		color: #fff;
		padding: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

}
@media only screen and (max-width: 425px) {
         .monthly-day-event > .monthly-day-number {
                top: 0;
                left: 0;
                font-size: 10px;
               }
         .monthly-day-event > .monthly-day-number span {
                font-size: 10px;
                line-height: 16px;
}
.monthly-day, .monthly-day-blank {
		height: 14.28%
	}
.monthly-day-event > .monthly-day-number {
line-height: 1.7em;
}
}
@media only screen and (max-width: 320px){
           .monthly-day, .monthly-day-blank {
		height: 14.28%
	}
}