/* course card */

.course-card {
    height: 100%;
    /* box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); */
    transition: box-shadow .15s ease-in-out;
    transition: background-color .15s ease-in-out;
}

    .course-card:hover {
        /* box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12); */
        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    }


    .course-card .course-title {
        padding: 0;
        margin: 0;
        font-weight: 400;
        overflow: hidden;
        max-height: 3.5em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .course-card .card-header {
        position: relative;
        padding: 0;
        overflow: hidden;
        /*border-top-right-radius: 0.25rem;
        border-top-left-radius: 0.25rem;*/
    }

    .course-card .course-orgnizations {
        vertical-align: sub;
        position: absolute;
        top: -22px;
        left: -5px;
    }

    .course-card footer {
        padding: 0;
        border: 0;
        overflow: hidden;
        position: relative;
        border-radius: var(--bs-border-radius) !important
    }
        .course-card footer .progress {
            position: absolute;
            bottom: 0;
            width: 100%;
            border-radius: 0;
        }

.img-placeholder {
    background: url('/assets/imgs/placeholder-2.jpg');
    background-position: center;
    background-size: cover;
}


.course-card .card-header .overlay {
    border-top-right-radius: calc(0.25rem - 1px);
    border-top-left-radius: calc(0.25rem - 1px);
}


.course-card .card-body a {
    color: black;
}

.course-card .overlay {
    background-color: rgba(0,0,0,0.65);
    opacity: 0;
    transition: opacity .15s ease-in-out;
}

    .course-card .overlay > * {
        width: 3.5rem;
        height: 3.5rem;
        opacity: 1;
    }

.course-card:hover .overlay {
    opacity: .8;
}
.classroom-card:hover {
    background-color: #efefef !important;
}


.overlay {
    position: absolute;
    /* height: 100px; */
    /* width: 100px; */
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

    .overlay > * {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

/* course card end*/