﻿.entitychooser-item {
    width: 100%;
    height: 90px;
    perspective: 1000px;
    user-select: none;
}

    .entitychooser-item .card {
        border: 1px solid #dee2e6;
        box-shadow: 0 0 0.625rem 0 rgba(0,0,0,0.05);
        position: relative;
        width: 100%;
        height: 100%;
        transition: all .5s ease;
        transform-style: preserve-3d;
    }

        .entitychooser-item .card .card-header {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            transition: all .8s ease;
        }

            .entitychooser-item .card .card-header:last-child {
                transform: rotateX(180deg);
            }

    .entitychooser-item:not(.disabled):hover .card {
        cursor: pointer;
        border-color: #18509f;
    }

    .entitychooser-item:not(.disabled):hover .card {
        transform: rotateX(180deg);
    }

    .entitychooser-item.disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .entitychooser-item.selected .card {
        border-color: #009e74;
        box-shadow: 0 1rem 2.25rem rgba(50,50,93,0.03), 0 0.3125rem 1rem rgba(0,0,0,0.12);
    }

    .entitychooser-item.selected:hover .card {
        border-color: #18509f;
    }

    .entitychooser-item.selected .card .card-header:first-child:before {
        font-family: "Font Awesome 5 Pro";
        content: '\f00c';
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        right: 3px;
        bottom: 3px;
        z-index: 1;
        line-height: 1;
        position: absolute;
        color: white;
        font-size: .5rem;
    }

    .entitychooser-item.selected .card .card-header:first-child:after {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 25px 25px 0 0;
        border-color: transparent #009e74 transparent transparent;
        right: 0;
        bottom: 0;
        line-height: 1;
        position: absolute;
    }

    .entitychooser-item .highlight {
        font-weight: 700;
        background-color: yellow;
    }

    .entitychooser-item .entitychooser-thumb {
        position: relative;
        width: 44px;
        max-width: 44px;
    }

        .entitychooser-item .entitychooser-thumb img {
            width: 100%;
            box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
            -o-object-position: center;
            object-position: center;
            -o-object-fit: cover;
            object-fit: cover;
        }

        .entitychooser-item .entitychooser-thumb .badge {
            position: absolute;
            left: 50%;
            top: 100%;
            z-index: 1;
            transform: translate(-50%, -45%);
        }

.entitychooser-searchterm {
    width: auto;
}

@media (min-width: 768px) {
    .entitychooser-searchterm {
        width: 350px !important;
    }
}

entitychooser-list {
    position: relative;
}

.entitychooser-list-loader {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    opacity: 0.8;
    z-index: 9999;
}
