.nas-wrapper {

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }


    .nas-search-form {
        position: relative;

        &:before {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            line-height: 1;
            vertical-align: -.125em;
            font-family: "nbt-fonts";
            font-weight: 300;
            line-height: inherit;
            vertical-align: baseline;
            content: '\e80f';
            color: #6d6d6d;
            position: absolute;
            top: 50%;
            right: 1em;
            margin-top: -7px;
            line-height: 1;
        }

        label {
            margin-bottom: 0;
            font-weight: 400;
            width: 100%;

            .screen-reader-text {
                border: 0;
                clip: rect(1px,1px,1px,1px);
                -webkit-clip-path: inset(50%);
                clip-path: inset(50%);
                height: 1px;
                margin: -1px;
                overflow: hidden;
                padding: 0;
                position: absolute;
                width: 1px;
                word-wrap: normal!important;
            }

            input[type=search] {
                padding: .6180469716em;
                color: rgba(0,0,0,0.4);
                outline: 0;
                -webkit-appearance: none;
                box-sizing: border-box;
                font-weight: 400;
                width: 100%;
                font-size: 14px;
                margin: 0;
                vertical-align: baseline;
            }
        }

        .nas-search-submit {
            border: 0;
            clip: rect(1px,1px,1px,1px);
            -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
            word-wrap: normal!important;
            top: 0;
            right: 0;
            text-decoration: none;
            font-weight: 600;
            text-shadow: none;
            display: inline-block;
            outline: 0;
            -webkit-appearance: none;
            border-radius: 0;
        }

        .nas-results {
            visibility: hidden;
            background: #fff;
            padding: 15px;
            position: absolute;
            z-index: 999;
            opacity: 0;
            left: 0;
            right: 0;
            -webkit-transform: scale(.85);
            -moz-transform: scale(.85);
            -ms-transform: scale(.85);
            transform: scale(.85);
            -webkit-transform-origin: center;
            -moz-transform-origin: center;
            -ms-transform-origin: center;
            transform-origin: center;
            -webkit-transition: 300ms ease all;
            -moz-transition: 300ms ease all;
            transition: 300ms ease all;
            color: #000;
            -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
            box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
            height: 312px;

            &.mCustomScrollbar {
                margin-right: 0;
                padding-right: 5px;

                .mCSB_container {
                    margin-right: 10px;
                }

                .mCSB_scrollTools {
                    .mCSB_dragger_bar {
                        margin-right: 0;
                    }

                    .mCSB_draggerRail {
                        margin-right: 1px;
                    }
                }
            }
            

            .nas-empty-result {
                margin: 0;
                font-size: 14px;
            }

            .nas-items {
                border-bottom: 1px solid #e5e5e5;
                display: table;
                padding: 10px 0;
                width: 100%;

                &:last-child {
                    border: none;
                }

                > div {
                    display: table-cell;
                    vertical-align: middle;
                }

                .nas-item-thumb {
                    position: relative;
                    width: 50px;
                    overflow: hidden;
                    transition: all 0.5s ease-out 0s;
                    -webkit-transition: all 0.5s ease-out 0s;

                    .nas-item-link {
                        display: block;
                        position: relative;
                        overflow: hidden;

                        &:before {
                            background: rgba(0, 0, 0, 0.2);
                            opacity: 0;
                            z-index: 1;
                            position: absolute;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            content: "";
                            transition: all 0.5s ease-out 0s;
                            -webkit-transition: all 0.5s ease-out 0s;

                            img {
                                width: 100%;
                                max-width: 100%;
                                transition: all 0.5s ease-out 0s;
                                -webkit-transition: all 0.5s ease-out 0s;
                                height: auto;
                            }
                        }
                    }

                }

                .nas-item-title {
                    padding: 0 10px;
                    vertical-align: top;

                    .nas-item-title-heading {
                        margin-bottom: 4px;
                        line-height: 19px;
                        text-transform: capitalize;
                        font-weight: 400;

                        a {
                            font-size: 14px;
                            text-decoration: none;
                            box-shadow: none;
                            white-space: nowrap;
                            transition: all 0.5s ease-out 0s;
                            -webkit-transition: all 0.5s ease-out 0s;
                        }
                    }
                }

                .nas-item-price {
                    text-align: right;

                    .product-price {
                        margin: 0 -2px 7px;
                        color: #f00;

                        * {
                            margin: 0 2px;
                        }

                        del {
                            color: #999;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }


    .nas-layout-overlay {
        background: transparent;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: opacity 0.3s 0.2s, visibility 0s 0.6s;
        transition: opacity 0.3s 0.2s, visibility 0s 0.6s;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 100;

        > svg {
            position: absolute;
            top: 0;
            left: 0;
            
            .nas-overlay-path {
                fill: rgba(0, 0, 0, 0.75);
            }
        }

        .nas-overlay-close {
            opacity: 0;
            -webkit-transition: opacity 0.3s;
            transition: opacity 0.3s;
            position: absolute;
            right: 20px;
            top: 15px;
            font-size: 20px;
            overflow: hidden;
            z-index: 1002;
            color: #fff;

            i {
                color: #fff;
            }
        }
        

        .nas-block-element {
            opacity: 0;
            -webkit-transform: scale(0) translateY(-50%);
            transform: scale(0) translateY(-50%);
            transition: all 0.5s ease-out 0s;
            -webkit-transition: all 0.5s ease-out 0s;
            position: relative;
            top: 30%;

            .nas-search-form {
                background: #fff;
                margin: auto;
                border: none;
                border-radius: 0;
                max-width: 670px;
            }
        }


    }

    &.nas-searching {
        .nas-search-form {
            &:before {
                content: '\e834';
                -moz-animation: spin 2s infinite linear;
                -o-animation: spin 2s infinite linear;
                -webkit-animation: spin 2s infinite linear;
                animation: spin 2s infinite linear;
                display: inline-block;
            }
        }
    }

    &.nas-active {
        .nas-results {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
        }
    }

    &.nas-layout-popup {
        &.nas-overlay-active {
            .nas-layout-overlay {
                visibility: visible;
                opacity: 1;
                -webkit-transition: opacity 0.3s;
                transition: opacity 0.3s;
                z-index: 1000;

                .nas-block-element {
                    opacity: 1;
                    -webkit-transition-delay: 0.3s;
                    transition-delay: 0.3s;
                    -webkit-transform: scale(1) translateY(-50%);
                    transform: scale(1) translateY(-50%);
                }

                .nas-overlay-close {
                    opacity: 1;
                    -webkit-transition-delay: 0.3s;
                    transition-delay: 0.3s;
                }
            }
        }
    }

}

