.CustomSelectContainer.FormFieldTransition,
.CustomSelectContainer.FormFieldTransitionReadonly {
    width: 150px;
    position: absolute;
    top: 5px;
    right: 40px;
}

.PagerNavigatorBox div .CustomSelectContainer {
    float: left;
    width: 45px;
    margin: 0 5px 0 5px;
    flex-direction: column-reverse;
}

.PagerNavigatorBox div .CustomSelectedOption {
    display: flex;
}

.PagerNavigatorBox div ul.CustomSelect {
    max-height: 300px;
}

.CustomSelectContainer + .Icon20x20,
.CustomSelectContainer + .Icon20x20Inactive,
.CustomSelectContainer + .Icon20x20Splitter,
.CustomSelectContainer + .Icon20x20WithMargin,
.CustomSelectContainer + .Icon20x20WithMarginInactive {
    padding: 0;
}

div.CustomSelectContent {
    position: absolute;
    display: none;
    background: #FFF;
    margin: 0;
    padding: 0;
    box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);
    -webkit-animation: swing-in-top 0.2s ease-in-out both;
    animation: swing-in-top 0.2s ease-in-out both;
    border: 1px solid #DFE2E5;
    border-radius: 0 0 4px 4px;
    border-bottom: 0 !important;
    z-index: 1001;
}

div.CustomSelectFilter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0 5px !important;
    margin: 2px 0 !important;
    background-color: var(--surface-color) !important;
    position: relative;
    -webkit-animation: swing-in-top 0.2s ease-in-out both;
    animation: swing-in-top 0.2s ease-in-out both;
    outline: 0 !important;
}

    div.CustomSelectFilter:before {
        font-family: 'Glyphicons Basic' !important;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        speak: none;
        content: '\e91b';
        position: absolute;
        top: 6px;
        left: 12px;
        font-size: 14px;
        color: var(--font-color);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }

    div.CustomSelectFilter input {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        height: 25px !important;
        padding-left: 25px !important;
        margin-left: 2px !important;
        font-family: "Inter var",sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: var(--font-color)
    }

div.CustomSelectContent ul.CustomSelect {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: block !important;
    overflow-y: auto;
    text-align: left;
    font-weight: 500;
    padding: 0;
    max-height: 500px;
    outline: 0 !important;
    position: relative !important
}

    div.CustomSelectContent ul.CustomSelect li.CustomOption {
        white-space: nowrap;
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        padding: 2.5px 5px 2.5px 5px;
        height: var(--field-height);
        line-height: var(--field-height);
        color: var(--input-font-color);
    }

        div.CustomSelectContent ul.CustomSelect li.CustomOption mark {
            background-color: #FF0;
            color: var(--input-font-color)
        }

        div.CustomSelectContent ul.CustomSelect li.CustomOption.hidden {
            display: none !important
        }

        div.CustomSelectContent ul.CustomSelect li.CustomOption:hover, ul.CustomSelect li.CustomOption[tabindex='-1']:hover, ul.CustomSelect li.CustomOption.focused, ul.CustomSelect li.CustomOption[tabindex='0'] {
            background-color: #EFEFEF;
            cursor: pointer
        }

        div.CustomSelectContent ul.CustomSelect li.CustomOption[selected='True'],
        div.CustomSelectContent ul.CustomSelect li.CustomOption[data-highlight='true'] {
            background-color: #D5D5D5;
        }

        div.CustomSelectContent ul.CustomSelect li.CustomOption[tabindex="-1"],
        li.CustomOption.not-focused {
            background-color: transparent;
        }

        div.CustomSelectContent ul.CustomSelect li.CustomOption:hover,
        li.CustomOption[tabindex="-1"]:hover,
        li.CustomOption.focused,
        li.CustomOption[tabindex="0"] {
            background-color: #EFEFEF;
            cursor: pointer;
        }


/* NEW DESIGN */
.CustomSelectContainer {
    display: flex !important;
    flex-direction: column;
    border: 1px solid #CFCFCF;
    width: 100%;
    height: 30px !important;
    line-height: 30px !important;
    float: left;
    padding: 0 !important;
}

.FormFieldTransition .CustomSelectContainer,
.FormFieldTransitionReadonly .CustomSelectContainer {
    width: 150px;
    position: absolute;
    top: 5px;
    right: 40px;
}

.CustomSelectContainer[readonly="true"] {
    border: 1px solid #F2F2F2;
}

.CustomSelectContainer select,
.CustomSelectContainer option {
    display: none !important;
}

.CustomSelectedOption {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 5px;
    background-color: #FFF;
    height: 30px;
    line-height: 30px;
}

.CustomSelectContainer[required="True"] .CustomSelectedOption,
.CustomSelectContainer[required="true"] .CustomSelectedOption {
    background-color: #CCC;
}

.CustomSelectContainer[readonly="True"] .CustomSelectedOption,
.CustomSelectContainer[readonly="true"] .CustomSelectedOption {
    background-color: #F2F2F2;
    /*TODO?(JHJP): opacity: 0.4; */
}

.CustomSelectContainer.invalid .CustomSelectedOption {
    background-color: #FCC;
}

.CustomSelectedOptionText {
    cursor: default;
}

.CustomSelectIcon, .CustomSelectValidationIcon {
    min-width: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.CustomSelectIcon::after
{
    content: '\e9dc';
    cursor: default;
}

.CustomSelectContainer.focused,
.CustomSelectContainer:focus {
    border: 1px solid #003d57 !important;
    -moz-transition: border-radius ease 0.5s, border-color ease 0.5s;
    -o-transition: border-radius ease 0.5s, border-color ease 0.5s;
    -webkit-transition: border-radius ease 0.5s, border-color ease 0.5s;
    transition: border-radius  ease 0.5s, border-color ease 0.5s;
}

.CustomSelectContainer.focused {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* 
copied from ApplicationForms.css and ApplicationContent.css
*/

.CustomSelectIcon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'Glyphicons Basic' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.CustomSelectedOption {
    height: 36px;
    line-height: 36px;
    background: #F9FAFB;
    border-radius: 4px;
    border: 0;
    background: transparent !important;
}

    .CustomSelectedOption:focus {
        outline: none;
    }


div.CustomSelectContent ul.CustomSelect li.CustomOption {
    height: 36px;
    line-height: 36px;
    background: #FFF;
    border-bottom: 1px solid #DFE2E5;
}

    div.CustomSelectContent ul.CustomSelect li.CustomOption[selected="True"] {
        background: #E6E6E6;
    }

    div.CustomSelectContent ul.CustomSelect li.CustomOption:hover {
        background: #F5F5F5;
    }

div.CustomSelectContent ul.CustomSelect li:focus {
    outline: none;
}