#app {
    padding: 40px 0;
}

.select-date>.date {
    display: flex;
}

.hoverArea {
    margin-right: 20px;
}

.picker-month .ivu-date-picker-header {
    display: none;
}

.ivu-input-with-suffix {
    height: 34px;
    border: 1px solid rgba(215, 215, 215, 1);
    border-radius: 0;
    padding-left: 12px;
}

.picker-year,
.picker-month {
    width: 217px;
}

.ivu-date-picker-focused input:not([disabled]) {
    border-color: #f787cf;
    outline: 0;
    -webkit-box-shadow: 0 0 0 2px #f787cf25;
    box-shadow: 0 0 0 2px #f787cf25
}

.ivu-input:hover {
    border-color: #f787cf
}

.ivu-input:focus {
    border-color: #f787cf;
    outline: 0;
    -webkit-box-shadow: 0 0 0 2px #f787cf25;
    box-shadow: 0 0 0 2px #f787cf25
}

.ivu-date-picker-cells-cell-selected em,
.ivu-date-picker-cells-cell-selected:hover em {
    background: #f787cf;
    color: #fff
}

.ivu-date-picker-cells-month .ivu-date-picker-cells-cell-focused,
.ivu-date-picker-cells-year .ivu-date-picker-cells-cell-focused {
    background-color: #f787cf25
}

.ivu-date-picker-cells-cell:hover em {
    background: #f787cf25
}

.ivu-picker-panel-icon-btn:hover {
    color: #f787cf
}

.ivu-date-picker-header-label:hover {
    color: #f787cf
}

@media (max-width:1024px) {
    #app {
        padding: 15px 0;
    }

    .search-form {
        flex-direction: column;
        width: 100%;
    }

    .select-date {
        margin-bottom: 10px;
    }

    .hoverArea {
        margin-right: 0px;
        width: 49%;
    }

    .select-date>.date {
        justify-content: space-between;
    }

    .picker-year,
    .picker-month {
        width: 100%;
    }

    .date-input-search {
        top: 74%;
        right: 6px;
    }

    .ivu-select-dropdown,
    .ivu-picker-panel-body,
    .ivu-date-picker-cells {
        width: 100%;
    }

    .ivu-date-picker-cells {
        margin-right: 0;
        margin-left: 0;
    }

}