@import "projects/exam/src/style/variables";
.ant-btn-lg:focus, .ant-btn-lg:hover{
    color: $primary-color;
    border-color: $primary-color;
}
.ant-btn-primary,.ant-btn-loading,.ant-btn-primary:hover{
    color:#fff;
}
.exam-frame {
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    .exam-title {
        height: 42px;
        width: 100%;
        line-height: 42px;
        background-color: $primary-color;
        position: fixed;
        top: 0px;
        z-index: 990;
        padding: 0 10px;
        color: #fff;
        text-align: center;
        font-size: 16px;
        position: relative;
        .exam-back{
            position: absolute;
            left: 10px;
            top: 0;
            font-size: 16px;
        }
        .exam-name{
            width: 70%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
            display: inline-block;
        }
    }
    .exam-user{
            position: absolute;
            padding: 0 15px;
            right: 0;
            top: 0;
        .user-info-tip{
            display: block;
            width: 100%;
            text-align: right;
            &:hover,&:active{
                .user-info{
                    display: block;
                }
            }
        }
        .user-info{
            font-size: 14px;
            background: #fff;
            color: #333;
            line-height: 28px;
            text-align: left;
            padding: 5px 10px;
            border: 1px solid #0868b5;
            margin-top: 5px;
            margin-right: -10px;
            position: relative;
            display: none;
            &::after,&::before{
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                border-style: solid;
            }
            &:before{
                border-width: 0 6px 8px 6px;
                border-color: transparent transparent #007bff transparent;
                z-index: 2;
                right: 10px;
                top: -8px;
            }
             &::after{
                border-width: 0 5px 7px 5px;
                border-color: transparent transparent #ffffff transparent;
                z-index: 3;
                right: 11px;
                top: -7px;
            }
        }
    }

    .exam-footer-page{
        height: 40px;
        width: 100%;
        line-height: 40px;
        background-color: $primary-color;
        position: fixed;
        left:0px;
        bottom: 0px;
        z-index: 990;
        display: flex;
        .ant-radio-group{
            width: 100%;
            display: flex;
        }
        .ant-radio-button-wrapper{
            border-radius: 0;
            border: none;
            flex: 1;
            display: inline-block;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-top: 1px solid $primary-color;
            background: #eee;
            color: $primary-color;
        }
        .ant-radio-button-wrapper-checked{
            background: $primary-color;
            color: #ffffff;
        }
        .page-change{
            flex-grow: 1;
            height: 100%;
            line-height: 40px;
            text-align: center;
            color:#fff;
            font-size: 16px;
            border-right: 1px solid #eee;
            &:last-child{
                border-right: none;
            }
        }
    }
    .aside-right {
        margin-top: 10px;
        min-height: 800px;
        .test-detail {
            min-height: 300px;
            padding-bottom: 50px;
            .right-title {
                height: 32px;
                background-color: $primary-color;
                line-height: 32px;
                color: #fff;
                font-size: 14px;
                text-indent: 16px;
                margin-top: 10px;
                span {
                    font-size: 12px;
                }
            }
        }
    }
}
@keyframes msgAni
{
from {right:-250px;}
to {right: 100%;}
}
:host ::ng-deep
.exam-frame {
    .ant-pagination-item:focus,.ant-pagination-item:hover,.ant-pagination-next:focus,.ant-pagination-next:hover,.ant-pagination-prev:focus,.ant-pagination-prev:hover{
        border-color: $primary-color;
        a{
            color: $primary-color;
        }
    }
    .ant-pagination-item-active:hover{
        color:#fff;
    }
    user-select: none;
    ul li, ol li{
        list-style: inherit;
    }
    .ant-radio-group{
        display: inline;
    }
    .ant-modal {
        top: 200px;
        .ant-modal-content {
            .ant-modal-header {
                .ant-modal-title {
                    text-align: center;
                    font-size: 20px;
                }
            }
            .prompt-content {
                height: 182px;
                .prompt-body {
                    .img-url {
                        float: left;
                        width: 100px;
                        height: 80px;
                        .float-prompt {
                            font-size: 42px;
                            color: $primary-color;
                            margin: 22px 28px;
                        }
                    }
                    .detail {
                        float: left;
                        width: 388px;
                        font-size: 14px;
                        color: #ff5252;
                    }
                }
                .promp-ok {
                    width: 60px;
                    margin: 32px auto 0px;
                }
            }
            .theirpaper-content {
                .theirpaper-body {
                    .img-url {
                        float: left;
                        width: 100px;
                        height: 80px;
                        .float-prompt {
                            font-size: 46px;
                            color: $primary-color;
                            margin-top: 12px;
                            margin-left: 50px;
                        }
                    }
                    .detail {
                        float: left;
                        height: 80px;
                        .answer-num {
                            margin-top: 12px;
                            line-height: 26px;
                            width: 200px;
                            text-align: center;
                            font-size: 16px;
                            color: red;
                        }
                        .if-submit {
                            line-height: 26px;
                            width: 200px;
                            text-align: center;
                            font-size: 12px;
                            color: $primary-color;
                        }
                    }
                }
                .their-ok {
                    margin-top: 20px;
                    text-align: center;
                    margin-bottom: 20px;
                    .ant-btn-primary {
                        margin-right: 30px;
                    }
                }
            }
            .cut-paper-screen {
                .screen-body {
                    .detail {
                        height: 80px;
                        .answer-num {
                            margin-top: 12px;
                            line-height: 40px;
                            font-size: 16px;
                            color: $primary-color;
                            text-align: center;
                        }
                        .if-submit {
                            line-height: 32px;
                            text-align: center;
                        }
                    }
                }
                .screen-footer {
                    margin: 20px 0px;
                    text-align: center;
                    .ant-btn-primary {
                        margin-right: 30px;
                    }
                }
            }
        }
    }
    .markindexModal{
        &,.ant-modal{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            padding: 0;
            margin:0;
        }
        .ant-modal-content{
            height: 100%;
            background: #f4f4f4;
            position: static;
            .ant-modal-body{
                padding: 0;
                width: 100%;
                height: calc(100% - 50px);
                overflow: auto;
                .news {
                    padding:6px 5px;
                    word-break: break-all;
                    word-wrap: break-word;
                    min-height: 42px;
                    color: #333;
                    .message {
                        color: #333;
                        line-height: 20px;
                    }
                    .noMessage {
                        width: 100%;
                        height: 42px;
                        line-height: 42px;
                        text-align: center;
                    }
                }
                .tip-box,.btnlist{
                    height: 70px;
                    display: flex;
                    padding: 0;
                    border:1px solid #e2e2e2;
                    background: #fff;
                    margin-top: 5px;
                    box-shadow: 1px 3px 4px 1px #e2e2e2;
                    .tip-item{
                        display: flex;
                        flex-grow: 1;
                        flex-direction: column;
                        padding:10px 0;
                        text-align: center;
                        font-size: 14px;
                        color:$primary-color;
                        font-weight: bold;
                        .num{
                        font-size: 20px;
                        }
                    }
                    .tip-item-two{
                        border-left: 1px solid #e2e2e2;
                        border-right: 1px solid #e2e2e2;
                    }
                }
                .btnlist{
                    height: 40px;
                    .submitExam{
                        width: 50%;
                        height: 40px;
                        line-height: 40px;
                        font-size: 18px;
                        text-align: center;
                        background: #f57c7c;
                        color:#fff;
                    }
                    .saveExam{
                        width: 50%;
                        height: 40px;
                        line-height: 40px;
                        font-size: 18px;
                        text-align: center;
                        background: #82d084;
                        color:#fff;
                    }
                }
                .index-list{
                    // display: flex;
                    padding: 10px 0;
                    overflow: auto;
                    height: calc(100% - 130px);
                    .num-one,.num-one-child{
                        display: inline;
                    }
                    .test-list {
                        margin: 25px 0x 8px;
                        min-height: 50px;
                        overflow: auto;
                        .test-num {
                            float: left;
                            height: 4rem;
                            width: 4rem;
                            margin: 5px;
                            line-height: 4rem;
                            color: #666;
                            font-size: 16px;
                            text-align: center;
                            border: 1px solid #d0d0d0;
                            border-radius: 100%;
                            background: #eee;
                            position: relative;
                            cursor: pointer;
                            user-select: none;
                            &.no {
                                border: 1px solid #fff;
                                color: #ddd;
                            }
                            &.respond {
                                color: #fff;
                                background-color: $primary-color;
                                border: 1px solid $primary-color;
                            }
                            &.marked {
                                border: 1px solid #f67920;
                            }
                        }
                    }
                }
            }
        }
    }

    .box-one{
        padding-right: 10px !important;
        .sign{
            top:-40px !important;
            right: 0 !important;
        }
        .selectType{
            position: static !important;
            margin-bottom: 5px !important;
            display: inline-block !important;
        }
        .answer{
            margin-left: 0 !important;
        }
    }
}