/**
 * 1.0 - Variables
 * -----------------------------------------------------------------------------
 */

$calendar_background: #ffffff;
$calendar_border_color: #ddd;

$months_color: #000;
$months_background: transparent;
$weekdays_color: #999;

$day_text_color: #484848;
$day_hover_background_color: #e6e6e6;

$today_color: #f64747;
$selected_day_color: #446CB3;

$disabled_color: #ddd;



/**
 * 1.0 - Base
 * -----------------------------------------------------------------------------
 */

.flatpickr-wrapper
{
    display: inline-block;
    position: relative;
}

.flatpickr-wrapper input
{
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.flatpickr-calendar
{
    font-size: 13px;
    border-radius: 4px;
    position: absolute; top: 100%; left: 0;
    margin-top: 3px;
    opacity: 0;
    z-index: 0;
    overflow: hidden;
    -webkit-transition: opacity 75ms;
    transition: opacity 75ms;
}

.open .flatpickr-calendar, .inline .flatpickr-calendar
{
    z-index: 100;
    opacity: 1;
}

.inline .flatpickr-calendar
{
    position: static;
}

.flatpickr-months
{
    padding: 4px 0;
    text-align: center;
    font-size: 135%;
}

.flatpickr-prev-month,
.flatpickr-next-month
{
    text-decoration: none;
    cursor: pointer;
    position: absolute
}

.flatpickr-prev-month { left: 0.4em }
.flatpickr-next-month { right: 0.4em }

.flatpickr-current-month
{
    font-weight: 300;
}

.flatpickr-current-month span { font-weight: 700 }



.flatpickr-calendar table
{
    border-collapse: collapse;
    padding: 0;
    width: 100%;
}

.flatpickr-calendar thead { font-size: 90% }

.flatpickr-calendar th,
.flatpickr-calendar td { width: 14.3% }

.flatpickr-calendar th
{
    text-align: center;
    padding: 2px 0 4px;
    font-weight: bold;
}

.flatpickr-calendar tbody td
{
	cursor: pointer;
}

.flatpickr-day
{
	display: block;  
	width: 32px;
	height: 32px;
    line-height: 32px; text-align: center;      
    padding: 0; margin: 0 1px 1px 0;    
    border: 1px solid transparent;
    border-radius: 150px; 
}


.flatpickr-calendar tbody td:first-child .flatpickr-day
{
	margin-left: 1px;
}



.flatpickr-calendar .disabled,
.flatpickr-calendar .disabled .flatpickr-day,
.flatpickr-calendar .disabled:hover .flatpickr-day
{
    background: transparent;
    border-color: transparent;
    cursor: default;
}



/**
 * 3.0 - Flatpicker
 * -----------------------------------------------------------------------------
 */

.flatpickr-calendar
{
	background: $calendar_background;
	color: $day_text_color;
	border: 1px solid $calendar_border_color;
}

.flatpickr-months {
    background: $months_background;
    color: $months_color;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover { color: $today_color }

.flatpickr-calendar th
{
    color: $weekdays_color;
}

.flatpickr-calendar td:hover .flatpickr-day
{
    background: $day_hover_background_color;
    border-color: $day_hover_background_color;
}

.today .flatpickr-day
{
    border-color: $today_color;
}

td.today:hover .flatpickr-day
{
	border-color: $today_color;
	background-color: $today_color;
	color: white
}

.selected .flatpickr-day, td.selected:hover .flatpickr-day
{
    background-color: $selected_day_color;
    color: #fff;
    border-color: $selected_day_color;
}

.flatpickr-calendar .disabled,
.flatpickr-calendar .disabled .flatpickr-day,
.flatpickr-calendar .disabled:hover .flatpickr-day
{

    color: $disabled_color;
}