﻿.SabaFilterBox {
    text-align: center;
    color: #989a9c;
    display: none;
    height: 41px;
    padding: 24px 10px;
    font-size: 16px;
}


.DefaultInner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    /*transform-style: preserve-3d;*/
}

.DefaultBody {
    /*perspective: 1000px;
    transition: transform 0.8s;
    transform-style: preserve-3d;*/
}

.ActiveSabaFilter .DefaultInner {
    transform: rotateX(30deg);
    border: 1px solid #ccc;
    box-shadow: -7px -12px 2px 3px #d8d5d5;
}

.ActiveSabaFilter .SabaFilterBox {
    display: block !important;
}

/*--====================================================================*/
.FilterBoxHeader {
}

    .FilterBoxHeader > span {
        display: inline-block;
        background-color: #ccc;
        width: 20%;
        padding: 4px 3px;
    }


.FilterBoxBody > span {
    display: inline-block;
    width: 20%;
    padding: 4px 6px;
    vertical-align: middle;
    height: 23px;
}

    .FilterBoxBody > span:first-child {
        vertical-align: middle;
        display: inline-block;
        background-color: #ccd0d2;
        text-align: center;
        width: 30px;
    }

    .FilterBoxBody > span:nth-child(2) {
        width: 80px;
    }

    .FilterBoxBody > span:nth-child(3) {
    }

    .FilterBoxBody > span:nth-child(4) {
    }

    .FilterBoxBody > span:first-child > i {
        font-size: 18px;
    }

    .FilterBoxBody > span[data-type="1"] > i {
        color: #65ae98;
    }

    .FilterBoxBody > span[data-type="2"] > i {
        color: #d87171;
    }

    .FilterBoxBody > span[data-type="3"] > i {
        color: #529883;
    }

    .FilterBoxBody > span[data-type="4"] > i {
        color: #4a72a9;
    }

    .FilterBoxBody > span[data-type="5"] > i {
        color: #386f8f;
    }

    .FilterBoxBody > span[data-type="6"] > i {
        color: #6a6f72;
    }

    .FilterBoxBody > span[data-type="1"] > i::before {
        content: "\f115";
    }

    .FilterBoxBody > span[data-type="2"] > i::before {
        content: "\f0f6";
    }

    .FilterBoxBody > span[data-type="3"] > i::before {
        content: "\f274";
    }

    .FilterBoxBody > span[data-type="4"] > i::before {
        content: "\f1c4";
    }

    .FilterBoxBody > span[data-type="5"] > i::before {
        content: "\f24a";
    }

    .FilterBoxBody > span[data-type="6"] > i::before {
        content: "\f1ea";
    }

ul#SabaFilterBoxData_listbox > li {
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: initial !important;
    background-color: #f3f5f6;
    border-bottom: 1px solid #ddd;
    border-radius: initial !important;
}

    ul#SabaFilterBoxData_listbox > li:hover {
        color: #1b7090;
        background-color: #eaebed;
        cursor: pointer;
    }

    ul#SabaFilterBoxData_listbox > li.k-state-selected {
        color: #1b7090 !important;
        background-color: #dadada;
        cursor: pointer;
    }

.k-icon.k-i-arrow-60-down {
    margin: 11px 0px;
}


.BtnSabaFilter {
    font-size: 17px;
    margin-left: 4px;
    color: #aaacae;
}

.k-state-default {
    border-bottom: 1px solid #ddd;
    border-color: white !important;
    box-shadow: initial !important;
    background-color: none !important;
}

.k-dropdown-wrap {
    padding: 0 !important;
}

    .k-dropdown-wrap.k-state-default {
        background-color: white !important;
    }


.k-state-hover {
    background-color: none !important;
}

.k-input {
    box-shadow: initial !important;
    border-bottom: 1px solid #ddd !important;
}


.k-select {
    display: none !important;
}

.k-combobox {
    border: none;
    border-color: initial !important;
}

.k-i-close {
    right: 0 !important
}

.k-i-close:hover {
    cursor:pointer;
}
