.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url(../Icons/Trademark/caret-down.svg);
    padding-right: 20px !important;
    background-size: 0.45em;
    background-position: calc(100% - 0.9em) center;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
}

.custom-select-container {
    display: inline-block;
    background-color: $custom-select-background-color;
    position: fixed;
    top: 0;
    right: 0;
    font-weight: 500;
    width: auto;
    min-width: 150px;
    max-width: 30%;
    max-height: 35%;
    overflow-y: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 5000;
    border: 1px solid $custom-select-border-color;
    -webkit-box-shadow: 10px 10px 11px -13px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 11px -13px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 11px -13px rgba(0,0,0,0.75);

    :focus {
        outline: none !important;
    }

    .custom-select-option {
        display: block;
        /*float: left;
        width:100%;*/
        cursor: pointer;
        padding: 2px 15px 2px 5px;
        color: $custom-select-font-color;
        min-height: 20px;

        :focus {
            outline: none !important;
        }

        &.custom-select-option-selected {
            background-color: $custom-select-selected-color;
            color: $custom-select-selected-font-color;
        }

        &:hover, &.custom-select-option-current {
            background-color: $custom-select-hover-color;
            color: $custom-select-hover-font-color;
        }
    }
}
