﻿.selectric-wrapper {
    display: inline-block;
}

.selectric,
.selectric .button {
    border-style: none;
    background-color: var(--color-light-gray);
}

    .selectric .label {
        color: black;
        height: 30px;
        line-height: 24px;
        font-weight: normal;
        font-family: var(--font-standard);
        padding-left: 0;
        font-size: 0.9em;
        margin-left: 5px;
        margin-right: 20px;
        text-align: left;
    }

    .selectric .button {
        height: 30px;
        width: 26px;
    }

/* #region " Color of arrow on the right of the combo " */
/* These colors were selected to match the jquery icon used for multi-selects  */

        .selectric .button::after {
            border-top-color: var(--color-darkgray-80); 
        }

.selectric-hover .selectric .button::after {
    border-top-color: #222222;
}

/* #endregion */

.selectric-items {
    background-color: var(--color-light-gray);
    border-style: none;
}

    .selectric-items li {
        height: 30px;
        line-height: 9px;
        color: black;
    }

        .selectric-items li:hover {
            background-color: var(--color-darkgray-80);
            color: white;
        }

        .selectric-items li.selected {
            background-color: var(--color-darkgray);
            color: white;
        }

            .selectric-items li.selected:hover {
                cursor: default;
                font-family: var(--font-standard);
                background-color: var(--color-darkgray);
            }

/* #region " Background color changes depending on container " */

/* In hovered line in table (items color is not changed because they will be displayed outsite of the line) */

.table-neopost tbody tr:hover .selectric,
.table-neopost tbody tr:hover .selectric .button {
    background-color: white;
}

/* In popin */

.modal-dialog-neopost .modal-content .selectric,
.modal-dialog-neopost .modal-content .selectric .button,
.modal-dialog-neopost .modal-content .selectric-items {
    background-color: var(--color-medium-gray);
}

/* In panel */

.panel-neopost .selectric,
.panel-neopost .selectric .button,
.panel-neopost .selectric-items {
    background-color: white;
}

/* in accordion */

.accordion .selectric,
.accordion .selectric .button,
.accordion .selectric-items {
    background-color: white;
}

/*  #endregion */

/* Compensate the fact that the paging is centered */
.paging .selectric-scroll {
    text-align: left;
}

.selectric-checkable-combobox {
    display: block !important;
}
