ul,
ol {
    position: relative;

    li {
        //border: 1px solid black;
        position: relative;
        line-height: 26px;
        padding-left: 16px;
        padding-right: 16px;

        &.ls-none {
            list-style: none;
        }
    }

    &.ls-none {
        list-style: none;
    }

    &.vertical {

        li {
            border-bottom: $basic-border;

        }
    }

    &.horizontal {
        padding-left: 0;

        li {
            display: inline-block;

            &.disabled {
                color: rgba(0, 0, 0, 0.54);
                cursor: default;
                &:hover {
                    background-color: transparent;
                }
            }

            li {
                display: block;
            }
        }
    }


    ul,
    ol {
        padding-left: 16px;
        border-top: 0;

        &:before {
            float: left;
            margin-top: 9px;
            color: map-get($brand-colors, primary);
        }

        &.before-none:before {
            content: none;
            float: inherit;
            margin-top: 0;
        }

        li {
            padding-right: 0;
        }
    }

}

.default-list {
    list-style: none;
    padding: 4px 0;
    margin: 0;

    @media (max-width: $screen-xs-max) {
        padding: 8px 0;
    }


    &.hover {
        li{
            cursor: pointer;
            &:hover {
                background-color: map_get($default-colors-transparency, quinary);
            }
            
        }
    }

    li {
        position: relative;
        //z-index: -1;
        display: block;
        padding: 0 16px;
        line-height: 2.5;

        @media (max-width: $screen-xs-max) {
            padding: 0 16px;
            line-height: 3;
        }

        &.link-item {
            padding: 0;

            > a {
                display: block;
                padding: 0 16px;
                line-height: 2.5;

                @media (max-width: $screen-xs-max) {
                    padding: 0 16px;
                    line-height: 3;
                }
            }
        }

        .btn {
            margin: 0;
        }

        &.disabled {
            color: rgba(0, 0, 0, 0.54);
            cursor: default;
            &:hover {
                background-color: transparent;
            }
        }

        &.active {
            background-color: map_get($default-colors-transparency, quinary);
        }

        .field-group {
            padding-top: 4px;

            @media (max-width: $screen-xs-max) {
                padding: 9px;
            }

            label {
                display: none;
            }

            input,
            select {
                font-size: $base-font-size;
                margin: 0;
                line-height: 1;
                background-color: transparent;

                &::-webkit-input-placeholder {
                    color: map_get($default-colors-transparency, secondary);
                }

                &:-moz-placeholder {  /* FF 4-18 */
                    color: map_get($default-colors-transparency, secondary);
                }

                &::-moz-placeholder {
                    color: map_get($default-colors-transparency, secondary);
                } /* FF 19+ */

                &:-ms-input-placeholder {
                    color: map_get($default-colors-transparency, secondary);
                } /* IE 10+ */
            }

            select {
                line-height: 1.4em;
            }

            //select {
            //    padding-top: 0;
            //    line-height: 24px;
            //    padding-bottom: 1px;
            //}
            //
            //.bar {
            //    &:after,
            //    &:before {
            //        bottom: 0;
            //    }
            //}
            //
            &.select:after {
                top: -2px;

            }
        }

        .list-c {
            display: block;
            width: 100%;

            &> div,
            &> .d-inline-block{
                overflow: hidden;
                vertical-align: top;
                padding-right: 16px;
            }

            div[class^="col-"], div[class*=" col-"] {
                padding-left: 0;
                padding-right: 16px;
            }
            
            &:after {
                clear: both;
                content: " ";
                display: table;
            }
        }
    }


    &.icon-list {
        li {
            display: block;
        }

        [class^="mobfont-"], [class*=" mobfont-"] {
            font-size: 1.3em;
        }

        .icon {
            @include vertical-center;
        }

        li > .dropdown {
            position: absolute;
            right: 16px;
            top: 3px;

            > ul {
                margin: 0;
                top: 0;
                left: inherit;
                right: 0;
                z-index: 99999;
            }
        }

        &.left {

            .icon {
                left: 16px;
            }

            .list-c {
                padding-left: 56px;
            }
        }

        &.right {
            .list-c + .icon {
                left: inherit;
                right: 16px;
            }

            .list-c {
                padding-right: 56px;
            }
        }
    }

    &.avatar-list {

        > li {
            padding: 0 16px;
            line-height: 3;

            @media (max-width: $screen-xs-max) {
                padding: 0 16px;
                line-height: 3.5;
            }

            &.link-item {
                padding: 0;

                > a {
                    display: block;
                    padding: 0 16px;
                    line-height: 3;

                    @media (max-width: $screen-xs-max) {
                        padding: 0 16px;
                        line-height: 3.5;
                    }
                }
            }
        }


        li {
            display: block;

            .field-group {
                padding-top: 9px;
                @media (max-width: $screen-xs-max) {
                    padding: 13px;
                }
            }

            div.ava, img.ava {
                position: absolute;
                border-radius: 50%;
                top: 6px;
                width: 36px;
                height: 36px;

                @media (max-width: $screen-xs-max) {
                    width: 40px;
                    height: 40px;
                    top: 8px;
                }

                &.quarder {
                    border-radius: 0;
                }
            }

            div.ava {
                overflow: hidden;
                img {
                    @include center;
                    //min-height: 100%;
                    min-height: 100%;
                    max-height: 120%;
                    width: auto;
                }
            }

            [class^="mobfont-"], [class*=" mobfont-"] {
                font-size: 1.3em;
            }

            div.list-c {
                padding-left: 56px;

                &.icon-right {
                    padding-right: 40px;
                    position: relative;
                }
            }

            i.icon-right,
            span.icon-right {
                @include vertical-center;
                right: 16px;
            }

            > .dropdown {
                position: absolute;
                right: 16px;
                top: 3px;
                padding-right: 0;

                > ul {
                    margin: 0;
                    top: 0;
                    left: inherit;
                    right: 0;
                    z-index: 99999;
                }
            }
        }
    }
}