/* stylelint-disable unit-blacklist */
/**************************************

Structure of the user enroller panel

.user-enroller-panel(.visible)
    .uep-wrap
        .uep-header
        .uep-content
            .uep-ajax-content
                .uep-search-results
                    .totalusers
                    .users
                        .user.clearfix(.odd|.even)(.enrolled)
                            .count
                            .picture
                            .details
                                .fullname
                                .extrafields
                            .options
                                .enrol
                    .uep-more-results
            .uep-loading-lightbox(.hidden)
                .loading-icon
        .uep-footer
            .uep-search
                input
            .uep-searchoptions
                .collapsibleheading
                .collapsiblearea(.hidden)
                    .uep-enrolment-option
                        .role
                        .startdate
                        .duration

**************************************/

.user-enroller-panel {
    width: 400px;
    position: absolute;
}

.user-enroller-panel.hidden {
    display: none;
}

.user-enroller-panel .uep-wrap {
    height: inherit;
    position: relative;
}

.user-enroller-panel .uep-search-results .user .count {
    display: none;
}

.user-enroller-panel .uep-search-results .cohort .count {
    display: none;
}

.user-enroller-panel .uep-content {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    max-height: 1000px;
}

.user-enroller-panel .uep-ajax-content {
    height: 375px;
    overflow: auto;
}

.user-enroller-panel .uep-search-results .user .picture {
    width: 45px;
    float: left;
    margin: 3px;
}
/* Note this file isn't auto flipped, so we need dir-rtl rules*/
.dir-rtl .user-enroller-panel .uep-search-results .user .picture {
    float: right;
}
.user-enroller-panel .uep-search-results .user .details {
    width: 180px;
    float: left;
    margin: 3px;
}
/* Note this file isn't auto flipped, so we need dir-rtl rules*/
.dir-rtl .user-enroller-panel .uep-search-results .user .details {
    float: right;
}
.user-enroller-panel .uep-search-results .user .options {
    padding-right: 7px;
    margin: 3px;
}

.user-enroller-panel .uep-search-results .user .options .enrol {
    margin: 3px;
    float: right;
    cursor: pointer;
}
/* Note this file isn't auto flipped, so we need dir-rtl rules*/
.dir-rtl .user-enroller-panel .uep-search-results .user .options .enrol {
    float: left;
}

.user-enroller-panel .uep-search-results .cohort {
    width: 100%;
    text-align: left;
}

.user-enroller-panel .uep-search-results .cohort .count {
    display: none;
}

.user-enroller-panel .uep-search-results .cohort .details {
    width: 180px;
    float: left;
    margin: 5px;
}

.user-enroller-panel .uep-search-results .cohort .options .enrol {
    margin: 3px;
    float: right;
    cursor: pointer;
}

.user-enroller-panel .uep-search-results .cohort.enrolled .count {
    width: 40px;
}

.user-enroller-panel .uep-loading-lightbox {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    top: 0;
    left: 0;
    min-width: 50px;
    min-height: 50px;
}

.user-enroller-panel .uep-loading-lightbox.hidden {
    display: none;
}

.user-enroller-panel .uep-loading-lightbox .loading-icon {
    margin: auto;
    vertical-align: middle;
    margin-top: 125px;
    display: block;
}

.user-enroller-panel .uep-footer {
    text-align: right;
}

.user-enroller-panel .uep-search {
    margin: 3px;
}

.user-enroller-panel .uep-search label {
    padding-right: 8px;
}

.user-enroller-panel .uep-search input {
    width: 50%;
}

.user-enroller-panel .uep-search input.uep-search-btn {
    width: 20%;
}

.user-enroller-panel .uep-searchoptions {
    margin: 3px;
    cursor: pointer;
}

.user-enroller-panel .uep-controls select {
    margin-left: 1em;
    margin-bottom: 0;
}

.user-enroller-panel .collapsibleheading img {
    margin-right: 8px;
}

.user-enroller-panel .collapsiblearea {
    border: 1px solid #ddd;
    padding: 0.5rem;
}

.user-enroller-panel .collapsiblearea.hidden {
    display: none;
}

.user-enroller-panel .collapsiblearea .uep-enrolment-option {
    margin: 5px 1em;
}
