Sass не работает правильно в Internet Explorer

Question

Я использую загрузчик, но я делаю пользовательские настройки.

Эти настройки создаются с помощью SASS (SCSS), а начальная загрузка и jquery импортируются в SASS и машинопись.

Все мои макеты работают во всех браузерах, кроме интернет-обозревателя. Некоторые части не выровнены и не выровнены с каким-либо событием.

FIREFOX - GOOGLE CHROME- SAFARI - ETC ...

ИНТЕРНЕТ EXPLORER

КОД

@mixin card-accordion-search-data {
    .accordion[data-component-name="card-accordion-search-data"] {
        .card {
            @extend %fixed-bottom;
            background-color: transparent !important;
            border: none !important;

            .card-header {
                @extend %center-item;
                @include padding-vertical(0, 0);
                @include padding-horizontal(0, 0);
                border: none !important;

                button {
                    @extend %border-custom-rounded;
                    @include padding-vertical(auto, 0);
                    background-color: getCustomColor('aliansce-gray');
                    color: getCustomColor('aliansce-green');
                    box-shadow: none !important;
                }
            }

            .card-body {
                @include padding-vertical(.5rem, .5rem);
                @include padding-horizontal(.5rem, .5rem);
                background-color: getCustomColor('aliansce-gray');

                .row[data-element-name="options-row"] {
                    button,
                    select {
                        background-color: transparent !important;
                        border: none !important;
                        box-shadow: none !important;
                        color: white;
                    }

                    button {
                        @include margin-horizontal(auto, .25rem);
                        @include padding-horizontal(auto, .5rem);
                        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -7 12 20'%3E%3Cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
                        background-repeat: no-repeat;
                        background-position: right;
                        font-size: 1rem;
                        text-align: left;

                        span[data-element-type="counter"] {
                            font-size: 1rem;
                            font-weight: 400 !important;
                            align-items: middle;
                            background-color: getCustomColor('aliansce-green');
                        }
                    }

                    select {
                        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
                        background-position-y: .9rem;

                        &:disabled {
                            color: getCustomColor('disabled');
                            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='gray' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
                            background-position-y: .9rem;
                        }

                        option { color: getCustomColor('aliansce-gray'); }
                    }

                    select.custom-select {
                        @extend %remove-bs-select-arrow;
                    }
                }
            }
        }
    }
}