.magicsearch-wrapper {
    position: relative
}

    .magicsearch-wrapper :not(input) {
        margin: 0;
        padding: 0;
        font-size: 14px;
        font-family: Consolas,Helvetica,Arial,sans-serif;
        box-sizing: border-box
    }

    .magicsearch-wrapper input[disabled] {
        cursor: not-allowed;
        background-color: #eee
    }

    .magicsearch-wrapper input.dropdown {
        padding-right: 24px
    }

    .magicsearch-wrapper.disabled .magicsearch-arrow, .magicsearch-wrapper.disabled .magicsearch-arrow *, .magicsearch-wrapper.disabled .multi-items {
        cursor: not-allowed
    }

    .magicsearch-wrapper .multi-items {
        position: absolute;
        cursor: text
    }

    .magicsearch-wrapper .multi-item {
        position: relative;
        float: left;
        background-color: #e4e4e4;
        padding-right: 15px;
        border-radius: 3px;
        border: 1px solid #aaa
    }

        .magicsearch-wrapper .multi-item span {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            cursor: default;
            text-align: center;
            font-size: 12px;
            display: block;
            height: 100%
        }

    .magicsearch-wrapper .multi-item-close {
        display: block;
        position: absolute;
        width: 12px;
        height: 12px;
        right: 3px
    }

        .magicsearch-wrapper .multi-item-close:after, .magicsearch-wrapper .multi-item-close:before {
            content: '';
            height: 2px;
            width: 12px;
            display: block;
            background-color: #999;
            border-radius: 2px;
            position: absolute;
            top: 5px;
            left: 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

        .magicsearch-wrapper .multi-item-close:after {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .magicsearch-wrapper .multi-item-close:hover:after, .magicsearch-wrapper .multi-item-close:hover:before {
            background-color: #333
        }

    .magicsearch-wrapper .magicsearch-box {
        display: none;
        position: absolute;
        width: 100%;
        overflow: auto;
        max-height: 250px !important;
        background-color: #fff;
        z-index: 2;
        border: 1px solid #ccc;
        padding: 5px 0;
        margin-bottom: 20px;
        border-radius: 5px;
        left: 0;
        box-shadow: 0 5px 10px rgba(0,0,0,.2)
    }

        .magicsearch-wrapper .magicsearch-box.all {
            overflow-y: auto
        }

        .magicsearch-wrapper .magicsearch-box li {
            height: 30px;
            line-height: 30px;
            cursor: pointer;
            padding-left: 10px;
            text-align: left;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-weight: 400
        }

            .magicsearch-wrapper .magicsearch-box li.enabled {
                color: #333
            }

            .magicsearch-wrapper .magicsearch-box li.disabled {
                color: #d43f3a
            }

            .magicsearch-wrapper .magicsearch-box li.selected {
                background-color: #ddd
            }

            .magicsearch-wrapper .magicsearch-box li.ishover {
                background-color: #0097cf;
                color: #fff
            }

            .magicsearch-wrapper .magicsearch-box li span.keyword {
                font-weight: 700
            }

        .magicsearch-wrapper .magicsearch-box .no-result {
            display: block;
            height: 30px;
            line-height: 30px;
            color: #d43f3a;
            padding-left: 10px;
            text-align: left
        }

    .magicsearch-wrapper .magicsearch-arrow {
        position: absolute;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 24px;
        cursor: pointer
    }

        .magicsearch-wrapper .magicsearch-arrow i {
            position: relative;
            height: 6px;
            width: 12px;
            cursor: pointer;
            display: block
        }

            .magicsearch-wrapper .magicsearch-arrow i:before {
                content: '';
                height: 0;
                width: 0;
                display: block;
                border: 6px solid transparent;
                border-bottom-width: 0;
                border-top-color: #a0a0a0;
                position: absolute;
                top: 0;
                right: 0
            }

        .magicsearch-wrapper .magicsearch-arrow.arrow-rotate-180 {
            -webkit-animation: a .2s 1 linear;
            animation: a .2s 1 linear;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards
        }

        .magicsearch-wrapper .magicsearch-arrow.arrow-rotate-360 {
            -webkit-animation: b .2s 1 linear;
            animation: b .2s 1 linear;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards
        }

        .magicsearch-wrapper .magicsearch-arrow.rotate180 {
            -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg)
        }

    .magicsearch-wrapper .magicsearch-loading {
        background: hsla(0,0%,100%,.3);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        padding: 3px 0
    }

        .magicsearch-wrapper .magicsearch-loading div {
            display: none;
            background-image: url("data:image/gif;base64,R0lGODlhIAAgALMAAP///7Ozs/v7+9bW1uHh4fLy8rq6uoGBgTQ0NAEBARsbG8TExJeXl/39/VRUVAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBQAAACwAAAAAIAAgAAAE5xDISSlLrOrNp0pKNRCdFhxVolJLEJQUoSgOpSYT4RowNSsvyW1icA16k8MMMRkCBjskBTFDAZyuAEkqCfxIQ2hgQRFvAQEEIjNxVDW6XNE4YagRjuBCwe60smQUDnd4Rz1ZAQZnFAGDd0hihh12CEE9kjAEVlycXIg7BAsMB6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YEvpJivxNaGmLHT0VnOgGYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHQjYKhKP1oZmADdEAAAh+QQFBQAAACwAAAAAGAAXAAAEchDISasKNeuJFKoHs4mUYlJIkmjIV54Soypsa0wmLSnqoTEtBw52mG0AjhYpBxioEqRNy8V0qFzNw+GGwlJki4lBqx1IBgjMkRIghwjrzcDti2/Gh7D9qN774wQGAYOEfwCChIV/gYmDho+QkZKTR3p7EQAh+QQFBQAAACwBAAAAHQAOAAAEchDISWdANesNHHJZwE2DUSEo5SjKKB2HOKGYFLD1CB/DnEoIlkti2PlyuKGEATMBaAACSyGbEDYD4zN1YIEmh0SCQQgYehNmTNNaKsQJXmBuuEYPi9ECAU/UFnNzeUp9VBQEBoFOLmFxWHNoQw6RWEocEQAh+QQFBQAAACwHAAAAGQARAAAEaRDICdZZNOvNDsvfBhBDdpwZgohBgE3nQaki0AYEjEqOGmqDlkEnAzBUjhrA0CoBYhLVSkm4SaAAWkahCFAWTU0A4RxzFWJnzXFWJJWb9pTihRu5dvghl+/7NQmBggo/fYKHCX8AiAmEEQAh+QQFBQAAACwOAAAAEgAYAAAEZXCwAaq9ODAMDOUAI17McYDhWA3mCYpb1RooXBktmsbt944BU6zCQCBQiwPB4jAihiCK86irTB20qvWp7Xq/FYV4TNWNz4oqWoEIgL0HX/eQSLi69boCikTkE2VVDAp5d1p0CW4RACH5BAUFAAAALA4AAAASAB4AAASAkBgCqr3YBIMXvkEIMsxXhcFFpiZqBaTXisBClibgAnd+ijYGq2I4HAamwXBgNHJ8BEbzgPNNjz7LwpnFDLvgLGJMdnw/5DRCrHaE3xbKm6FQwOt1xDnpwCvcJgcJMgEIeCYOCQlrF4YmBIoJVV2CCXZvCooHbwGRcAiKcmFUJhEAIfkEBQUAAAAsDwABABEAHwAABHsQyAkGoRivELInnOFlBjeM1BCiFBdcbMUtKQdTN0CUJru5NJQrYMh5VIFTTKJcOj2HqJQRhEqvqGuU+uw6AwgEwxkOO55lxIihoDjKY8pBoThPxmpAYi+hKzoeewkTdHkZghMIdCOIhIuHfBMOjxiNLR4KCW1ODAlxSxEAIfkEBQUAAAAsCAAOABgAEgAABGwQyEkrCDgbYvvMoOF5ILaNaIoGKroch9hacD3MFMHUBzMHiBtgwJMBFolDB4GoGGBCACKRcAAUWAmzOWJQExysQsJgWj0KqvKalTiYPhp1LBFTtp10Is6mT5gdVFx1bRN8FTsVCAqDOB9+KhEAIfkEBQUAAAAsAgASAB0ADgAABHgQyEmrBePS4bQdQZBdR5IcHmWEgUFQgWKaKbWwwSIhc4LonsXhBSCsQoOSScGQDJiWwOHQnAxWBIYJNXEoFCiEWDI9jCzESey7GwMM5doEwW4jJoypQQ743u1WcTV0CgFzbhJ5XClfHYd/EwZnHoYVDgiOfHKQNREAIfkEBQUAAAAsAAAPABkAEQAABGeQqUQruDjrW3vaYCZ5X2ie6EkcKaooTAsi7ytnTq046BBsNcTvItz4AotMwKZBIC6H6CVAJaCcT0CUBTgaTg5nTCu9GKiDEMPJg5YBBOpwlnVzLwtqyKnZagZWahoMB2M3GgsHSRsRACH5BAUFAAAALAEACAARABgAAARcMKR0gL34npkUyyCAcAmyhBijkGi2UW02VHFt33iu7yiDIDaD4/erEYGDlu/nuBAOJ9Dvc2EcDgFAYIuaXS3bbOh6MIC5IAP5Eh5fk2exC4tpgwZyiyFgvhEMBBEAIfkEBQUAAAAsAAACAA4AHQAABHMQyAnYoViSlFDGXBJ808Ep5KRwV8qEg+pRCOeoioKMwJK0Ekcu54h9AoghKgXIMZgAApQZcCCu2Ax2O6NUud2pmJcyHA4L0uDM/ljYDCnGfGakJQE5YH0wUBYBAUYfBIFkHwaBgxkDgX5lgXpHAXcpBIsRADs=");
            background-position: 50%;
            background-size: contain;
            background-repeat: no-repeat;
            height: 100%
        }

@-webkit-keyframes a {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }

    to {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg)
    }
}

@keyframes a {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }

    to {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg)
    }
}

@-webkit-keyframes b {
    0% {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg)
    }

    to {
        -webkit-transform: rotateX(1turn);
        transform: rotateX(1turn)
    }
}

@keyframes b {
    0% {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg)
    }

    to {
        -webkit-transform: rotateX(1turn);
        transform: rotateX(1turn)
    }
}


.magicsearch-wrapper {
    width: 100% !important;
}

    .magicsearch-wrapper .hmeserch {
        width: 100% !important;
        height: auto !important;
    }