/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 23.08.2016, 09:28:28
    Author     : scharte
*/

.calender_inner {
    background-color: rgb(231,231,231);
    padding: 16px; 

}

.calender_inner .month_year_select {
    background-color: #ffffff;

    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 155px;
    height: 49px;

}
.calender_inner .month_year_select .month_name{
    width: 40%;
}
.calender_inner .month_year_select .year_number{
    width: 60%;
}
.calender_inner .month_year_select .month_name,
.calender_inner .month_year_select .year_number{

    padding: 10px 9px;    
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    font-family:"ZwoWebPro-Extrabold W011468811";
    font-weight: bold;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;


}

.calender_inner .month_year_select .month_name:hover,
.calender_inner .month_year_select .year_number:hover {

    background-color: #d0d0d0;


}
.calender_inner .active_day {
    background-color: rgb(56,84,145);
    color:#ffffff; 
    padding: 10px 6px;    
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    height: 49px;
    margin: 0 4px;
    width: 2rem;
    line-height: 1;
    /*position: absolute;*/

}
.calender_inner .day_to {
    background-color: #f06162;
    color:#ffffff; 
    padding: 4px 6px;    
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    height: 49px;
    margin: 0 4px;
    width: 2rem;
    position: absolute;

}
.calender_inner .date_scroll_outer {
    background-color: #ffffff;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    height: 49px;


}
.calender_inner .date_scroll_outer .date_scroll_inner .date_select {

    padding: 7px 6px;    
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 2rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    line-height: 1;
    font-size: 1.2rem;

}

.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_start ~ .date_select,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_start {
    background-color: rgb(56,84,145);  
}
.calender_inner.selecting .date_scroll_outer .date_scroll_inner .date_select.date_start ~ .date_select,
.calender_inner.selecting .date_scroll_outer .date_scroll_inner .date_select.date_start {
    background-color: #697fac;  
}
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.last ~ .date_select,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_end ~ .date_select,
.calender_inner.selecting .date_scroll_outer .date_scroll_inner .date_select.last ~ .date_select,
.calender_inner.selecting .date_scroll_outer .date_scroll_inner .date_select.date_end ~ .date_select
/*.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_end*/ 
{
    background-color: transparent;
}


.calender_inner .active_day,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select  .day_name{
    text-align: center;
    font-size: 1rem;

}

.calender_inner .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select  .day_number{
    font-size: 1rem;
    text-align: center;
    font-family:"ZwoWebPro-Extrabold W011468811";

}

.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_start ~ .date_select .day_name,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_start ~ .date_select .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_start .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_start .day_name{
    color: #ffffff;;    
}

.calender_inner .date_scroll_outer .date_scroll_inner .date_select.last ~ .date_select .day_name,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.last ~ .date_select .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_end ~ .date_select .day_name,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_end ~ .date_select .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_end .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_end .day_name
{
    color: inherit;
}

.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_start.date_end .day_name,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_start.date_end .day_number
{
    color:#ffffff;
    // 
}

.calender_inner .date_scroll_outer .date_scroll_inner .date_select.last ~ .date_select.weekend .day_name,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.last ~ .date_select.weekend .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_end ~ .date_select.weekend .day_name,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_end ~ .date_select.weekend .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.weekend.date_end .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.weekend.date_end .day_name,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.weekend .day_name,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.weekend .day_number
{
    color:rgb(105,127,172);
}


.calender_inner .date_scroll_outer .date_scroll_inner .date_select.weekend.date_start ~ .date_select.weekend .day_name,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.weekend.date_start ~ .date_select.weekend .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_start ~ .date_select.weekend .day_name,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_start ~ .date_select.weekend .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.weekend.date_start .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.weekend.date_start .day_name{
    font-weight: bold; 
}
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_end ~ .date_select.weekend .day_name,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.date_end ~ .date_select.weekend .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.weekend.date_end ~ .date_select.weekend .day_name,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.weekend.date_end ~ .date_select.weekend .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.weekend.date_end .day_number,
.calender_inner .date_scroll_outer .date_scroll_inner .date_select.weekend.date_end .day_name
{
    font-weight: normal;
}



.calender_inner .date_scroll_prev,
.calender_inner .date_scroll_next {
    background-color: rgb(208,208,208);

    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    cursor: pointer;
}

.calender_inner .date_scroll_prev {

}
.calender_inner .date_scroll_prev .fa,
.calender_inner .date_scroll_next .fa {
    font-size: 2.9rem;
    padding: 4px 2px;   
    color: rgb(56,84,145);
}

.calender_inner .year_select,
.calender_inner .month_select {
    position: absolute;
    background-color: #ffffff;
    z-index: 10;
    cursor: pointer;

}

.calender_inner .year_select .year,
.calender_inner .month_select .month {
    padding: 4px 6px;
    font-size: 1.4rem;
    border-bottom: 1px solid rgb(231, 231, 231); 
    background-color: #ffffff;
    color:#181818;
    transition: background-color 0.2s, color 0.2s;
}
.calender_inner .year_select .year:hover,
.calender_inner .month_select .month:hover {
    color: #ffffff;
    background-color:#e7e7e7;
}


@media screen and (max-width:520px) {
    .calender_inner .month_year_select{
        width: 100%;
        text-align: center;
    }
    .calender_inner .active_day{
        margin: 10px 4px 0;
    }
    .calender_inner .date_scroll_outer {
        margin-top: 10px;
    }

    .calender_inner .date_scroll_next {
        margin-top: 10px;
    }
}