._date-picker {
    position: relative;
    display:inline-block;
    /*width: 100%;*/
    /*min-width: 220px;*/
    max-width: 320px;
    min-height: 20px;
    /*background-color: #FFF;*/
    /*margin: 30px auto;*/
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
    padding:3px;

    user-select: none;
}

._date-picker:hover {
    background-color: #F3F3F3;
}

._date-picker .selected-date {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #313131;
    font-size: 1rem;
}

._date-picker ._dates {
    display: none;
    position: absolute;
    min-width: 200px;
    z-index:999;
    top: 100%;
    left: 0;
    right: 0;

    background-color: #FFF;
}

._date-picker ._dates.active {
    display: block;
}

._date-picker ._dates .month {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #EEE;
    cursor: pointer;
}

._date-picker ._dates .month .mth {
    white-space: nowrap;
}

._date-picker ._dates .month .arrows {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #313131;
    font-size: 20px;
}

._date-picker ._dates .month .arrows:hover {
    background-color: #F3F3F3;
}

._date-picker ._dates .month .arrows:active {
    background-color: #00CA85;
}

._date-picker ._dates .weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color:#ddd;
    /*height: 200px;*/
}


._date-picker ._dates .weekday {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
}

._date-picker ._dates .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 200px;
}

._date-picker ._dates .days .day:hover:not(.nonselectable) {
    background-color: var(--buttoncolor);
}
._date-picker ._dates .days .day {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #313131;
}

._date-picker ._dates .days .day:not(.nonselectable) {
    cursor: pointer;
}

._date-picker ._dates .days .day.today{
    color:var(--buttoncolor);
    border:1px solid var(--buttoncolor);
}

._date-picker ._dates .days .day.selected {
    background-color: var(--buttoncolor);
}

._date-picker ._dates .days .day.nonselectable{
    color: #bbb;
}