/* Main Dropdown container */
div[ng-dropdown-multiselect] {
    display: inline-block;
}

/* Input */
.dropdown-multiselect .dropdown-header {
    width: 100%;
    text-align: left;
    cursor: default !important;
}
    /*Remove cross icon in IE*/
    .dropdown-multiselect .dropdown-header::-ms-clear {
        display: none;
    }

.dropdown-multiselect .multiselect-button {
    height: 100%;
    position: relative;
    background: white;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    zoom: 1;
    border: solid 1px #dcdcdc;
    border-radius: 4px;
    outline: none;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
}

    .dropdown-multiselect .multiselect-button:focus {
        border: solid 1px #5774e7;
        outline: none;
        background-color: transparent;
    }

    .dropdown-multiselect .multiselect-button:active {
        box-shadow: none;
    }

    .dropdown-multiselect .multiselect-button::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        font-size: 13px;
        color: #b6b6b6;
        font-family: GlowRegular;
    }

    .dropdown-multiselect .multiselect-button::-moz-placeholder { /* Firefox 19+ */
        font-size: 13px;
        color: #b6b6b6;
        font-family: GlowRegular;
    }

    .dropdown-multiselect .multiselect-button:-ms-input-placeholder { /* IE 10+ */
        font-size: 13px;
        color: #b6b6b6;
        font-family: GlowRegular;
    }

    .dropdown-multiselect .multiselect-button:-moz-placeholder { /* Firefox 18- */
        font-size: 13px;
        color: #b6b6b6;
        font-family: GlowRegular;
    }

/* Input, when search is enabled */
.dropdown-multiselect .dropdownWithSearch {
    padding-right: 40px;
}

/* Arrow icon */
.dropdown-multiselect .arrowIcon-container {
    width: 24px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    cursor: pointer;
    padding-top: 13px;
    padding-left: 8px;
}

    .dropdown-multiselect .arrowIcon-container .arrowIcon {
        width: 6px;
        height: 3px;
        background: url('../../../images/shared/smallDownArrow.png');
    }

    .dropdown-multiselect .arrowIcon-container.opened .arrowIcon {
        background: url('../../../images/shared/smallUpArow.png');
    }

    .dropdown-multiselect .arrowIcon-container.disabled {
        opacity: .4;
        pointer-events: none;
    }

/* .dropdown-multiselect parent class is commented out below, because dropdown-menu-listbox can be appended to body */
/* Listbox: the dropdown list container with list items in it */
/*.dropdown-multiselect*/ .dropdown-menu-listbox {
    overflow-x: hidden !important;
    overflow-y: auto;
    width: 100%;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
}

    .dropdown-menu-listbox .selectDeselectAll-section {
        height: 35px;
        padding-top: 10px;
        padding-right: 20px;
        padding-left: 20px;
        display: flex;
    }

        .dropdown-menu-listbox .selectDeselectAll-section .ui-btn-link {
            margin-top: 5px;
            flex: 0 0 71px;
        }

        .dropdown-menu-listbox .selectDeselectAll-section .mainHeader {
            font-family: GlowSemibold;
            font-size: 14px;
            color: #4a4a4a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1 1 auto;
        }

    /* Check all/Uncheck all button */
    /*.dropdown-multiselect*/ .dropdown-menu-listbox img {
        margin-right: 3px;
    }

    /* Grouping Section title, like "Custom" */
    /*.dropdown-multiselect*/ .dropdown-menu-listbox .groupingSectionTitle {
        font-family: GlowRegular;
        font-size: 14px;
        color: #808080;
    }

    /*.dropdown-multiselect*/ .dropdown-menu-listbox > li > a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        /*.dropdown-multiselect*/ .dropdown-menu-listbox > li > a:focus,
        /*.dropdown-multiselect*/ .dropdown-menu-listbox > li > a:hover {
            cursor: pointer;
            outline: none;
            background-color: transparent;
        }

        .dropdown-menu-listbox > li > a:hover {
            background-color: #f4f5fc;
        }

        /*.dropdown-multiselect*/ .dropdown-menu-listbox > li > a.disabledOption {
            opacity: 0.4;
        }

            /*.dropdown-multiselect*/ .dropdown-menu-listbox > li > a.disabledOption:focus,
            /*.dropdown-multiselect*/ .dropdown-menu-listbox > li > a.disabledOption:hover {
                cursor: default;
                background-color: transparent;
            }

    /*.dropdown-multiselect*/ .dropdown-menu-listbox .selectedOption {
        font-family: GlowSemibold;
    }

    /*.dropdown-multiselect*/ .dropdown-menu-listbox .option-checkbox {
        width: 16px;
        height: 16px;
        margin-right: 10px;
        border: solid 1px #b6b6b6;
        border-radius: 1px;
        display: inline-block;
        background: #fff;
        vertical-align: middle;
    }

        /*.dropdown-multiselect*/ .dropdown-menu-listbox .option-checkbox.checked {
            background-image: url('../../../images/shared/check.png');
            background-position: center center;
            background-repeat: no-repeat;
        }

        /*.dropdown-multiselect*/ .dropdown-menu-listbox .option-checkbox:hover {
            border: solid 1px #5774e7;
            cursor: pointer;
        }

        /*.dropdown-multiselect*/ .dropdown-menu-listbox .option-checkbox[disabled] {
            opacity: 0.4;
            cursor: default;
        }

            /*.dropdown-multiselect*/ .dropdown-menu-listbox .option-checkbox[disabled]:hover {
                border: solid 1px #b6b6b6;
            }

    /* Grouping Section header <li> element */
    /*.dropdown-multiselect*/ .dropdown-menu-listbox .dropdown-header {
        width: 100%;
        text-align: left;
        /* Make top padding for new section header */
        padding-top: 8px !important;
        cursor: default !important;
    }

/* Clear icon that is shown only when search is enabled */
.dropdown-multiselect .clear-input {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 8px;
    right: 28px;
    z-index: 999;
    cursor: pointer;
    background: url(../../../images/shared/close.png);
}

    .dropdown-multiselect .clear-input:hover {
        background: url(../../../images/shared/close-hovered.png);
    }