.tx-nrc-timetable {

    .input-group > * {
        background-color: #f5f5f5;
    }

    .multiselect-dropdown {
        padding: 10px 15px;
        border: solid 1px #dee2e6;
        background-color: #f5f5f5;
        position: relative;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .multiselect-dropdown:hover {
        cursor: pointer;
    }

    .toggle {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjA3ZjAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTIgNWw2IDYgNi02Ii8+PC9zdmc+");
        background-repeat: no-repeat;
        width: 23px;
        height: 18px;
        align-self: center;
        background-position: center;
        margin-left: auto;
    }

    .multiselect-dropdown span.optext, .multiselect-dropdown span.placeholder {
        margin-right: 0.5em;
        margin-bottom: 2px;
        padding: 1px 0;
        display: inline-block;
    }

    .multiselect-dropdown span.optext {
        background-color: lightgray;
        padding: 1px 0.75em;
    }

    .multiselect-dropdown span.optext .optdel {
        float: right;
        margin: 2px -6px 1px 5px;
        font-size: 0.7em;
        cursor: pointer;
        color: #666;
    }

    .multiselect-dropdown span.optext .optdel:hover {
        color: #c66;
    }

    .multiselect-dropdown span.placeholder {
        font-weight: bold;
    }

    .multiselect-dropdown-list-wrapper {
        z-index: 100;
        padding: 10px 15px 10px 10px;
        border: solid 1px #dee2e6;
        display: none;
        border-top: none;
        position: relative;
        background: white;

        label {
            margin: 0 0.2rem;
            font-weight: bold;
        }
    }

    .multiselect-dropdown-list {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .multiselect-dropdown-list div {
        padding: 5px 0 5px 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .multiselect-dropdown-list input {
        height: 1.15em;
        width: 1.15em;
        margin-right: 0.2em;
        position: relative;
    }

    .multiselect-dropdown-list div:hover {
        background-color: #ced4da;
    }

    .media:first-child {
        margin-top: 1.25rem
    }

    #transport {
        label {
            margin-left: 2.25rem;
        }

        div::before {
            width: 25px;
            height: 25px;
            background-size: contain;
            background-repeat: no-repeat;
            display: inline-block;
            content: "";
            position: absolute;
        }

        #zug::before,
        #train::before {
            background-image: url('../Icons/Zug_Logo.svg');
        }

        #s-bahn::before,
        #city-train::before {
            background-image: url('../Icons/S-Bahn_Logo.svg');
        }

        #plusbus::before {
            background-image: url('../Icons/PlusBus_Logo.svg');
        }

        #taktbus::before {
            height: 30px;
            width: 30px;
            background-image: url('../Icons/Taktbus_Logo.svg');
        }
    }
}

.frame-background-light {
    .tx-nrc-timetable {
        .input-group > * {
            background-color: white;
        }

        .multiselect-dropdown {
            background-color: white;
        }
    }
}