/*  ========================================================================================================  */
/*  HTML5 CSS Styles | MultiInput JS Class                                                                    */
/*  --------------------------------------------------------------------------------------------------------  */
DIV.MultiInput {
    position:relative;top:0;left:0;min-width:96px;width:auto;min-height:24px;max-height:162px;height:24px !important;
    display:inline-flex;flex:0 0 auto;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;

    background-color:#DADADA;
    overflow:visible;overflow-y:scroll;

}
DIV.MultiInput::-webkit-scrollbar {
    width:10px;
}
DIV.dropdown UL::-webkit-scrollbar-track { background:#7A7A7A;border-left:none !important;border-right:none !important; }
DIV.dropdown UL::-webkit-scrollbar-thumb { background:#DADADA;border-left:none !important;border-right:none !important;box-shadow:inset 0 0 0 0 #2121217A; }
/*  --------------------------------------------------------------------------------------------------------  */

/*  ========================================================================================================  */
/*  HTML5 CSS Styles | MultiInput JS Class | Buttons                                                          */
/*  --------------------------------------------------------------------------------------------------------  */
DIV.MultiInput DIV.button {
    position:relative;top:0;left:0;width:20px;height:20px;
    display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;
    font-family:"FontAwesome";font-size:12px;text-shadow:0 0 1px #DADADA;
    border-style:solid;border-color:#4A4A4A;border-width:1px;
    background-color:#7A7A7A;color:#FAFAFA;cursor:pointer;
}
DIV.MultiInput DIV.button.add::before { content: "\F067"; }
DIV.MultiInput DIV.button.remove::before { content: "\F068"; }
DIV.MultiInput DIV.button.search::before { content: "\F002"; }
DIV.MultiInput DIV.button.order::before { content: "\F0DC"; }
DIV.MultiInput DIV.button.valid::before { content: "\F00C"; }
DIV.MultiInput DIV.button.invalid::before { content: "\F00D"; }
DIV.MultiInput DIV.button.dropdown::before { content: "\F0D7"; }
DIV.MultiInput DIV.button.dropdown.active::before { content: "\F0D8"; }
/*  --------------------------------------------------------------------------------------------------------  */


/*  ========================================================================================================  */
/*  HTML5 CSS Styles | MultiInput JS Class | Selector                                                         */
/*  --------------------------------------------------------------------------------------------------------  */
DIV.MultiInput > DIV.selector {
    z-index:24;
    position:relative;top:0;left:0;width:calc( 100% - 2px );height:22px;
    display:inline-flex;flex:1 1 auto;align-self:stretch;
    padding:1px;
    background-color:#DADADA;
}
/*  --------------------------------------------------------------------------------------------------------  */
DIV.selector DIV.textual {
    position:relative;top:0;left:0;width:calc( 100% - 2px );height:20px;
    display:inline-flex;flex:1 1 auto;align-self:stretch;
    border-style:solid;border-color:#4A4A4A;border-width:1px 0;
}
DIV.selector DIV.textual:last-child {
    border-width:1px 1px 1px 0;
}
DIV.selector DIV.textual > INPUT {
    position:relative;top:0;left:0;width:calc( 100% - 2px );height:20px;
    display:inline-flex;flex:1 1 auto;align-self:stretch;
    margin:0;padding:0 4px;
    font-family:"Times New Roman", serif;font-size:13px;font-weight:400;line-height:18px;text-shadow:0 0 0 #DADADA;
    border:none;outline:none;background-color:#FAFAFA;
}
/*  --------------------------------------------------------------------------------------------------------  */


/*  ========================================================================================================  */
/*  HTML5 CSS Styles | MultiInput JS Class | Dropdown                                                         */
/*  --------------------------------------------------------------------------------------------------------  */
DIV.MultiInput > DIV.dropdown {
    z-index:32;
    position:absolute;top:23px;left:0;width:calc( 100% - 2px );height:auto;
    display:none;flex:1 1 auto;flex-direction:column;align-self:stretch;
    padding:0 1px 1px 1px;
    background-color:#DADADA;
}
DIV.MultiInput > DIV.dropdown.active {
    display:inline-flex;
}
/*  --------------------------------------------------------------------------------------------------------  */
DIV.dropdown UL {
    position:relative;top:0;left:0;width:auto;height:auto;margin:0;padding:0;
    border-style:solid;border-color:#4A4A4A;border-width:0;
    background-color:#DADADA;color:#4A4A4A;
    list-style-type:none;overflow-x:hidden;overflow-y:scroll;
}
DIV.dropdown UL::-webkit-scrollbar {
    width:8px;
}
DIV.dropdown UL::-webkit-scrollbar-track { background:#7A7A7A;border-left:1px solid #212121 !important;border-right:none !important; }
DIV.dropdown UL::-webkit-scrollbar-thumb { background:#DADADA;border-left:1px solid #212121 !important;border-right:none !important;box-shadow:inset 0 0 0 0 #2121217A; }
DIV.dropdown UL:has(LI) {
    border-width:0 1px 1px 1px;
}
DIV.dropdown UL > LI {
    position:relative;top:0;left:0;width:auto;height:20px;margin:0;padding:0 2px;
    font-size:14px;font-weight:400;line-height:20px;text-shadow:0 0 0 #DADADA;
    background-color:#DADADA;color:#4A4A4A;
    cursor:pointer;
}
DIV.dropdown UL > LI.active,
DIV.dropdown UL > LI:hover {
    background-color:#7A7A7A;color:#DADADA;
}
/*  --------------------------------------------------------------------------------------------------------  */


/*  ========================================================================================================  */
/*  HTML5 CSS Styles | MultiInput JS Class | Listing                                                          */
/*  --------------------------------------------------------------------------------------------------------  */
DIV.MultiInput > DIV.listing {
    z-index:16;
    position:absolute;top:24px;left:0;width:calc( 100% - 2px );height:auto;margin:0;padding:0 1px 1px 1px;
    display:inline-flex;flex:1 1 auto;align-self:stretch;
    background-color:#DADADA;color:#212121;
}
/*  --------------------------------------------------------------------------------------------------------  */
DIV.listing UL {
    position:relative;top:0;left:0;width:100%;height:auto;margin:0;padding:0;
    list-style-type:none;
}
DIV.listing UL > LI {
    position:relative;top:0;left:0;width:100%;height:22px;margin:0;padding:1px 0 0 0;
    display:inline-flex;flex:1 1 auto;align-self:stretch;
    background-color:#FAFAFA;
}
DIV.listing UL > LI:first-of-type {
    padding:0;
}
/*  --------------------------------------------------------------------------------------------------------  */
DIV.listing LI > DIV.button {
    margin:0;padding:0;
}
DIV.listing LI > DIV.textual {
    position:relative;top:0;left:0;width:auto;height:20px;margin:0;padding:0 2px;
    display:inline-flex;flex:1 1 auto;
    font-family:"Times New Roman", serif;font-size:13px;font-weight:400;line-height:20px;text-shadow:0 0 0 #DADADA;
    border-style:solid;border-color:#4A4A4A;border-width:1px 0;
}
/*  --------------------------------------------------------------------------------------------------------  */