$dd-height: 40px;

.drop-down {
    position: relative;
    width: 100%;
    height: $dd-height;
    background-color: #fff;
    &:hover {
        .dd-border {
            border: $border2;
            cursor: pointer;
        }
        .dd-place {
            border-left: $border2;
            border-right: $border2;
            border-bottom: $border2;
        }
    }
    &.active {
        z-index: 1000;
        .dd-selected {
            .dd-icon {
                .icon {
                    &:after {
                        top: 8px;
                        @include animate_1();
                        -webkit-transform: rotate(-135deg);
                           -moz-transform: rotate(-135deg);
                            -ms-transform: rotate(-135deg);
                             -o-transform: rotate(-135deg);
                                transform: rotate(-135deg);
                    }
                }
            }
        }
        .dd-border {
            border: $border2;
            cursor: pointer;
        }
        .dd-place {
            border-left: $border2;
            border-right: $border2;
            border-bottom: $border2;
            display: block;
            @include animate_1();
        }
    }
    .dd-border {
        border: $border1;
        border-radius: 5px;
    }
    .dd-selected {
        position: relative;
        width: 100%;
        height: $dd-height;
        display: flex;
        .dd-title {
            position: relative;
            width: calc(100% - 30px);
            padding: 0 15px;
            .title {
                @include post_top(absolute);
                left: 15px;
                font-size: 13px;
                font-weight: 600;
                color: $txt-84-color;
                text-transform: capitalize;
            }
        }
        .dd-icon {
            width: $dd-height;
            .icon {
                position: absolute;
                width: 15px;
                height: 15px;
                border-radius: 2px;
                right: 10px;
                top: 10px;
                opacity: 1;
                &:after {
                    @include animate_1();
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 3px;
                    width: 7px;
                    height: 7px;
                    border: solid rgba($color: #000, $alpha: 0.7);
                    border-width: 0 1.5px 1.5px 0;
                    -webkit-transform: rotate(45deg);
                       -moz-transform: rotate(45deg);
                        -ms-transform: rotate(45deg);
                         -o-transform: rotate(45deg);
                            transform: rotate(45deg);
                }
            }
        }
    }
    .dd-place {
        position: absolute;
        top: 38px;
        left: 0;
        width: calc(100% - 2px);
        border-left: $border1;
        border-right: $border1;
        border-bottom: $border1;
        background-color: #fff;
        // box-shadow: $shadow;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        overflow: hidden;
        display: none;
        ul {
            max-height: 200px;
            overflow-y: auto;
            @include transparantScrollBar();
            li {
                position: relative;
                list-style: none;
                width: calc(100% - 30px);
                padding: 10px 15px;
                font-size: 13px;
                color: $txt-54-color;
                &:hover {
                    background-color: $blue;
                    color: #fff;
                }
                &.selected {
                    background-color: $blue;
                    color: #fff;
                }
            }
        }
    }
}

// date time picker
.m-input-moment {
    .options {
        // options
        button {
            border: 1px solid $blue !important;
            color: $blue !important;
            &.is-active {
                background-color: $blue !important;
                color: #fff !important;
            }
        }
    }
    .tabs {
        .tab {
            .toolbar {
                button {
                    border: 1px solid $blue !important;
                    background-color: $blue !important;
                    color: #fff !important;
                }
                .current-date {
                    color: $blue !important;
                }
            }
        }
    }
    .m-calendar {
        thead {
            td {
                color: $blue !important;
            }
        }
        tbody {
            td {
                &:hover {
                    background-color: $blue !important;
                    color: #fff !important;
                }
            }
        }
        .current-day {
            color: $blue !important;
        }
    }
    .m-time {
        .time {
            background-color: $blue !important;
            color: #fff !important;
        }
        .time-text {
            color: $blue !important;
        }
        .separater {
            color: $blue !important;
        }
        .u-slider-time {
            .value {
                background-color: $blue !important;
            }
            .handle {
                &::after {
                    border: 3px solid $blue !important;
                }
            }
        }
    }
}