.am-assignment{
    height: 100%;
    @extend %flex;
    flex-direction: column;
    justify-content: space-between;
    &_header{
        width: 100%;
        padding: 20px 40px;
        border-bottom: 1px solid $border-color;
    }
    &_title{
        h2{
            color: $heading-color;
            font: 400 rem(20)/em(30,20) $heading-font-family;
        }
        &_wrap{
            gap: 20px;
            display: flex;
            align-items: center;
        }
    }
    &_info{
        gap: 10px 16px;
        @extend %flex;
        margin-top: 3px;
        align-items: center;
        span{
            gap: 4px;
            flex-wrap: wrap;
            align-items: center;
            display: inline-flex;
            color: $body-font-color;
            font: 400 rem(12)/em(18,12) $body-font-family;
            em{font-style: normal;}
            i{
                &::before{
                    color: $body-font-color;
                    font-size: 14px;
                }
            }
        }
    }
    &_body{
        width: 100%;
        margin: 0 auto;
        max-width: 792px;
        padding: 40px 12px;
    }
    &_section{
        &_heading{
            @extend %flex;
            align-items: center;
            justify-content: space-between;
            h3{
                color: $heading-color;
                font: 400 rem(20)/em(30,20) $heading-font-family;
            }
        }
        &_points-wrap{
            @extend %flex;
            align-items: flex-end;
            flex-direction: column;
        }
        &_points{
            gap: 8px;
            @extend %flex;
            border-radius: 6px;
            align-items: center;
            background: $formbg;
            padding: 3px 5px;
            color: rgba($color: $heading-color, $alpha: 0.9);
            font: 600 rem(12)/em(18,12) $heading-font-family;
            span{
                min-width: 35px;
                padding: 2px 8.5px;
                border-radius: 6px;
                background: $clr-white;
                color: $body-font-color;
                border: 1px solid $border-color;
                font: 400 rem(14)/em(20,14) $body-font-family;
                box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
            }
        }
        &_title{
            margin-bottom: 4px;
            h5{
                color: rgba($color: $heading-color, $alpha: 0.8);
                font: 500 rem(14)/em(20,14) $heading-font-family;
            }
        }
        &+&{
            margin-top: 20px;
        }
    }
    &_desc{
        padding: 16px;
        border-radius: 8px;
        background: $clr-white;
        border: 1px solid $border-color;
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
        p{
            letter-spacing: normal;
            color: $body-font-color;
            font: 400 rem(14)/em(20,14) $body-font-family;
            & + p {margin-top: 12px;}
        }
        ul{
            padding: 0;
            margin: 12px 0;
            li{
                list-style: none;
                padding-left: 22px;
                position: relative;
                &::before{
                    top: 8px;
                    left: 9px;
                    width: 3px;
                    height: 3px;
                    content: "";
                    position: absolute;
                    border-radius: 50%;
                    background: $body-font-color;
                }
                p{
                    margin: 0;
                }
                &+li{margin-top: 10px;}
            }
        }
    }
    &_attachfile{
        gap: 10px;
        padding: 10px;
        @extend %flex;
        align-items: center;
        border-radius: 10px;
        background: $clr-white;
        border: 1px solid $border-color;
        i{font-size: 16px;}
        &_name{
            span{
                display: block;
                color: rgba($color: $heading-color, $alpha: 0.7);
                font: 400 rem(14)/em(20,14) $heading-font-family;
            }
            em{
                font-style: normal;
                color: $body-font-color;
                font: 400 rem(12)/em(18,12) $body-font-family;
            }
        }
        & > span{
            width: 36px;
            height: 36px;
            @extend %flex;
            margin-left: auto;
            align-items: center;
            justify-content: center;
            i{cursor: pointer;}
        }
        &+&{
            margin-top: 10px;
        }
    }
    &_footer{
        width: 100%;
        padding: 40px;
        @extend %flex;
        margin-top: auto;
        align-items: center;
        justify-content: flex-end;
        border-top: 1px solid $border-color;
        .am-btn{
            padding: 12px 22px;
        }
    }
}