.date-picker {
        position: relative;
        width: 100%;
        height: 30px;
        background-color: #FFF;
        margin: 0px auto;

        cursor: pointer;
        user-select: none;
    }

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

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

        display: flex;
        justify-content: center;
        align-items: center;

        color: #313131;
    }

    .date-picker .dates {
        display: none;
        position: absolute;
        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;
    }

    .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 .days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        height: 200px;
    }

    .date-picker .dates .days .day {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #313131;
        margin: -1px -1px 0 0;
    }

    .date-picker .dates .days .day.selected {
        background-color: rgb(51, 125, 237);
    }

    .dates.active {
        z-index: 20;
    }