﻿.date-js {
    position: absolute;
    background-color: #fff;
    width: 320px;
    margin-top: 5px;
    display: flex;
    flex-flow: column;
    z-index: 999;}

    .date-js .show-year {
        width: 100%;
        height: 30px;
        
        display: flex;}

        .date-js .show-year .show-date {
            width: 79%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f3f3f3;
            margin:0 1px;}

        .date-js .show-year .change-date {
            width: 10%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background-color:#f3f3f3;}

            .date-js .show-year .change-date:hover {
                color: #3B87D7;}

    .date-js .show-week {
        width: 100%;
        height: 23px;
        border-bottom: 1px solid #e2e2e2;
        display: flex;}

        .date-js .show-week .week-day {
            width: 45.7px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;}

    .date-js .show-month {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;}

        .date-js .show-month .month-day {
            width: 45.7px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            cursor: pointer;}

            .date-js .show-month .month-day.active {
                background-color: #F5DD25;
                border-radius: 0;
                color: #000;}

            .date-js .show-month .month-day.today {
                color: #3B87D7;}

                .date-js .show-month .month-day.today.active {
                    color: #fff;}

            .date-js .show-month .month-day.active:hover {
                color: #fff;}


            .date-js .show-month .month-day.not-this-month {
                color: #c0c4cc;}

            .date-js .show-month .month-day:hover {
                color: #3B87D7;}

    .date-js .bts {
        width: 100%;
        height: 30px;
        border-top: 1px solid #e2e2e2;
        display: flex;}

        .date-js .bts .bt {
            width: 50%;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;}

            .date-js .bts .bt:first-child {
                border-right: 1px solid #e2e2e2;}

            .date-js .bts .bt:hover {
                background-color: deepskyblue;
                color: #fff;}
