/* Override litepicker Style*/


:root {
	--litepicker-day-width: 40px;
	--litepicker-button-prev-month-color-hover: var(--button-color) !important;
    --litepicker-button-next-month-color-hover: var(--button-color) !important;
}
div.litepicker {
	font-family: var(--font-family-default);
}
div.litepicker div.container__months {
	background-color: var(--form-background);
	box-shadow: none;
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.litepicker .container__months .month-item-header .button-next-month:hover, .litepicker .container__months .month-item-header .button-previous-month:hover {
    color: var(--button-color);
    background: none;
    cursor: pointer;
	outline: none;
	border: none;
}


form .litepicker .container__days .day-item.is-start-date {
	background-color: var(--calendar-selected);
	color: var(--link-color);
}
form .litepicker .container__days .day-item.is-in-range {
	background-color: var(--calendar-selected);
    border-radius: 0;
	color: var(--link-color);
}

form .litepicker .container__days .day-item.is-end-date {
	background-color: var(--calendar-selected);
	color: var(--link-color);
}
form .litepicker .container__days .day-item:hover {
	box-shadow: none;
	color: inherit;
	cursor: pointer;
}

/* my css */

form .litepicker .container__months .month-item-header div>.month-item-name,
form .litepicker .container__months .month-item-header div>.month-item-year{
	font-family: var(--beon-font-family) ;
	font-size:var(--beon-14px-font);
	text-transform: uppercase;
	font-weight: var(--beon-medium);
}

form .litepicker .container__days .day-item.is-start-date {
    color: var(--beon-text-color);
    border-radius: 0px;
	box-shadow: -2px 0 0 #222;
}
form .litepicker .container__days .day-item.is-end-date{
	color: var(--beon-text-color);
	border-radius: 0px;
	box-shadow: 2px 0 0 #222;
}
form .litepicker .container__days .day-item.is-in-range{
	color: var(--beon-text-color);
}
form .litepicker .container__months .month-item-weekdays-row>div{
	font-size: var(--beon-14px-font);
	color: #ADB2BD;
}
form .litepicker .container__days .day-item.is-locked{
	color: var(--beon-border-color);
}