.am-assignlistpage{
    display: flex;
    height: 100%; 
    flex-direction: column;
    & > .am-title_wrap{
        margin: 0;
        flex-wrap: nowrap;
        align-items: flex-start;
        padding: 24px 24px 20px;
        .am-title{
            width: auto;
            h2{
                opacity: 0.8;
                margin-bottom: 2px;
                font: 600 rem(20)/em(30,20) $heading-font-family;
            }
        }
        .am-btn{
            i::before{color: $clr-white;}
        }
        .am-assignsearch_header{
            flex-wrap: nowrap;
            max-width: max-content;
            .am-slots_wrap{
                flex: none;
            }
            .am-assignsearch_search{
                width: 350px;
                max-width: 100%;
            }
        }
    }
    &_vtwo{
        & > .am-title_wrap{
            flex-wrap: wrap;
            .am-assignsearch_header{
                max-width: 100%;
                .am-slots_wrap{margin-left: auto;}
            }
        }
    }
}
.am-confirm-popup{
    .modal-dialog{
        max-width: 400px;
    }
    .am-closepopup{
        top: 10px;
        right: 10px;
        position: absolute;
    }
    .am-modal-body{
        @extend %flex;
        padding-top: 30px;
        text-align: center;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    .am-deletepopup_icon{
        &.warning-icon{
            &::before{background: $theme-color;}
            &::after{background: rgba($color: $theme-color, $alpha: 0.2);}
            &>span{
                &::before{background: rgba($color: $theme-color, $alpha: 0.5);}
                &::after{background: rgba($color: $theme-color, $alpha: 0.7);}
                i:before{color: $theme-color;}
            }
        }
    }
    &_title{
        h3{
            color: rgba($heading-color, 0.87);
            font: 600 rem(16)/em(24,16) $heading-font-family;
        }
        p{
            padding: 0 20px;
            margin-top: 10px;
            color: rgba($body-font-color, 0.6);
            font: 400 rem(14)/em(20,14) $body-font-family;
        }
    }
    &_btns{
        gap: 16px;
        width: 100%;
        display: flex;
        margin: 30px 0px 0px;
        .am-btnsmall{
            flex: auto;            
            width: 100%;
            height: 36px;
            padding: 8px 12px;
        }
    }
}
.am-status{
    position: relative;
    &:before{
        width: 6px;
        height: 6px;
        display: block;
        border-radius: 50%;
        background: #fff;
        content: '';
    }
    &_draft{
        &:before{
            background: $clr-white;
        }    
    }
    &_published,
    &_pass{
        &:before{
            background: #15A160;
        }
    }
    &_archived,
    &_fail{
        &:before{
            background: #D92D20;
        }
    }
    &_attempted,
    &_assigned{
        &:before{
            background: #15A160;
        }
    }
    &_in_review{
        &:before{
            background: #FDB022;
        }
    }
}
.am-slots_wrap{
    gap: 10px;
    @extend %flex;
    align-items: center;
}
.am-assignsearch{
    &_search{
        width: 100%;
        display: flex;
        max-width: 350px;
        position: relative;
        align-items: center;
        input{
            background: white;
            padding-right: 42px;
            border: 1px solid $border-color;
            &::placeholder{color: $body_font_color;}
        }
        i{
            top: 50%;
            right: 16px;
            position: absolute;
            transform: translateY(-50%);
        }
    }
    &_header{
        gap: 10px;
        width: 100%;
        @extend %flex;
        justify-content: space-between;
        .am-btn{
            white-space: nowrap;
        }
    }
}
.am-slots_wrap{margin-left: auto;}
.am-category-slots{
    gap: 10px;
    padding: 6px;
    @extend %flex;
    list-style: none;
    background: $formbg;
    align-items: center;
    border-radius: 10px;
    li{
        list-style: none;
        text-align: center;
        line-height: normal;
        &:hover button,
        button.active {
            border-radius: 10px;
            background: $clr-white;
            color: $body-font-color;
            box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
        }
        button{
            padding: 4px 16px;
            border-radius: 6px;
            @extend %transition;
            font: 400 rem(14)/em(20,14) $heading-font-family;
            color: rgba($color: $body-font-color, $alpha: 0.6);
        }
    }
}



// Assignment list design
.am-assignlist{
    &_wrap{
        height: 100%;
        overflow-x: auto;
        padding: 10px 24px 14px;
        @media (max-width: 768px) {padding: 10px;}
        > ul{
            margin: -10px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
            > li{
                padding: 10px;
                list-style: none;
            }
        }
        .am-table{
            min-width: 1250px;
        }
    }
    &_item{
        height: 100%;
        @extend %flex;
        flex-wrap: nowrap;
        border-radius: 12px;
        @extend %transition;
        flex-direction: column;
        background: $clr-white;
        padding: 11px 11px 13px;
        border: 1px solid $border-color;
        &:hover{box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.10), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);}
        figure{
            width: 100%;
            height: 150px;
            position: relative;
            border-radius: 10px;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 10px;
            }
            figcaption{
                gap: 6px;
                top: 10px;
                right: 10px;
                position: absolute;
                align-items: center;
                justify-content: flex-end;
                & > span{
                    gap: 4px;
                    @extend %flex;
                    color: $clr-white;
                    padding: 3px 6px;
                    border-radius: 6px;
                    align-items: center;
                    background: $dark-black;
                    backdrop-filter: blur(37px);                    
                    font: 400 rem(12)/em(18,12) $body-font-family;
                    i::before{color: $clr-white;}
                    .cr-dot{
                        width: 6px;
                        height: 6px;
                        border-radius: 50%;    
                    }
                }
            }
        }
        &_content{
            flex: auto;        
            display: flex;
            padding: 12px 3px 0;
            flex-direction: column;
        }
        &_footer{
            margin: auto 0 0;
            padding: 12px 0 0;
            li{
                @extend %flex;
                list-style: none;
                align-items: center;
                justify-content: space-between;
                & > span{
                    gap: 6px;
                    @extend %flex;
                    align-items: center;
                    color: rgba($body-font-color, 0.8);
                    font: 400 rem(12)/em(18,12) $body-font-family;
                }
                & > em{
                    color: rgba($heading-color, 0.5);
                    font: 500 rem(12)/em(14,12) $body-font-family;
                }
                &+li{margin-top: 6px;}
            }
        }
    }
    &_coursename{
        gap: 10px;
        @extend %flex;
        flex-wrap: nowrap;
        align-items: start;
        .am-itemdropdown{
            margin: 4px 0 0 auto;
            & > a{
                width: 15px;
                height: 15px;
                background: transparent;
            }
            .am-itemdropdown_list{
                min-width: 260px;
            }
        }
    }
    &_coursetitle{
        a{
            color: $heading-color;
            h3{
                line-clamp: 2;
                flex-wrap: wrap;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                color: $heading-color;
                -webkit-box-orient: vertical;
                font: 500 rem(16)/em(24,16) $heading-font-family;
            }
        }
        span{
            display: block;
            color: $body-font-color;
            font: 400 rem(12)/em(18,12) $heading-font-family;
        }
    }
}
.am-assignstatus{
    position: relative;
    padding-right: 10px !important;
    &:before{
        width: 6px;
        height: 6px;
        display: block;
        border-radius: 50%;
        background: #fff;
        content: '';
    }
    &_draft{
        &:before{
            background: #FFD43B;
        }    
    }
    &_published{
        &:before{
            background: #24D665;
        }
    }
    &_archived{
        &:before{
            background: #D92D20;
        }
    }
    &_attempted{
        &:before{
            background: #24D665;
        }
    }
}

.cr-bundle-emptycase{
    gap: 30px;
    width: 100%;
    padding: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - 288px);
    &_wrap{
        display: flex;
        max-width: 412.9px;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        figure{
            max-width: 148px;
            margin-bottom: 20px;
            img{
                width: 100%;
                object-fit: cover
            }
        }
    }
    &_content{
        h3{
            margin: 0;
            text-align: center;
            color: rgba($color: $heading-color, $alpha: 0.7);
            font: 600 rem(20) / em(30, 20) $heading-font-family;
        }
        p{
            margin: 0;
            text-align: center;
            letter-spacing: normal;
            color: $body-font-color;
            font: 400 rem(14) / em(20, 14) $body-font-family;
        }
    }
    &_btns{
        margin-top: 36px;
        .am-btn{
            i::before{color: $clr-white;}
        }
    }
}