@import "./default/index.scss";

@font-face{
    font-family: youshe;
    src: url('font/YouSheBiaoTiHei.ttf');
}

@font-face{
  font-family: 'password';
  src: url('font/password.ttf');
}
[v-cloak] {
    display: none;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    width: 5px;
    border-radius: 6px;
    background: rgba(156,156,156,.7);
}

.el-button--primary.action-btn{
    color: $--color-primary !important;
    font-size: 14px !important;
    background-color: #fff !important;
    border-radius: 4px !important;
}

.el-input{
    .el-input__inner{
        border-color: rgba(0, 0, 0, 0.15);
    }
}

.filter{
    display: inline-flex;
    align-items: center;
    flex: 1;
    li{
        display: inline-flex;
        align-items: center;
        margin-right: 30px;
        label{
            font-size: 14px;
            line-height: 14px;
            color: rgba(0,0,0,.65);
            white-space: nowrap;
        }
    }
}
.page{
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    .p-title{
        padding-left: 24px;
        line-height: 56px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.85);
        border-bottom: 1px solid rgba(0,0,0,.06);
    }
    .page-content{
        padding: 24px;
        .tool{
            display: flex;
            justify-content: space-between;
            margin-bottom: 24px;
            
            .single-choice{
                dl {
                    display: flex;
                    line-height: 30px;
                    dt {
                        color: rgba(0,0,0,.65);
                        font-size: 14px;
                        white-space: nowrap;
                    }
                    dd {
                        display: inline-flex;
                        align-items: center;
                        flex-wrap: wrap;
                        span {
                            padding: 0 10px;
                            margin: 0 10px;
                            color: #333;
                            font-size: 14px;
                            line-height: 1.8;
                            white-space: nowrap;
    
                            cursor: pointer;
                            &:hover {
                                color: $--color-primary;
                            }
                            &.active {
                                border-radius: 4px;
                                color: #fff;
                                background-color: $--color-primary;
                            }
                        }
                    }
                }
            }
            .el-button--primary{
                @extend .action-btn;
            }
        }
    }
}

.pagination {
    margin: 20px 0;
    text-align: center;
    button,.number{
        color: rgba(0,0,0,.65) !important;
        background-color: transparent !important;
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        border-radius: 4px !important;
    }
    button i{
        color: #333;
    }
    .active{
        color: #fff !important;
        background-color: $--color-primary !important;
    }
}


.el-message{
    padding: 11px 20px;
    .el-message__icon{
        font-size: 16px;
    }
    .el-message__content{
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
    }
    .el-icon-close{
        font-size: 14px;
        color: #92998d;
    }
    .el-message--success{
        border: 1px solid #B7EB8F;
        background: #F6FFED;
        .el-message__icon{
            color: #00c700;
        }
    }
    .el-message--warning{
        border: 1px solid #FFE58F;
        background: #FFFBE6;
        .el-message__icon{
            color: #ffa900;
        }
    }
}

.el-message-box{
    padding-bottom: 24px;
    .el-message-box__header{
        padding: 32px 32px 12px 50px;
        span{
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 500;
        }
    }
    .el-message-box__status{
        //top: -30px;
    }
    .el-message-box__status + .el-message-box__message{
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
    }
    .el-message-box__btns{
        padding-right: 32px;
        &.el-icon-warning{
            color: #ffa900;
        }
    }
    &:not(.normal){
        .el-button--primary{
            color: #606266;
            background: #fff;
            border-color: #DCDFE6;
            &:hover{
                color: $--color-primary;
                border-color: #efbdbb;
                background-color: #fae9e8;
            }
        }
    }
}

.el-tooltip__popper.sth-popper{
    padding: 0;
    background-color: transparent;
    img{
        height: 78px;
    }
    .popper__arrow{
        display: none;
    }
}

.data-dia{
    border-radius: 16px;
    .el-dialog__header{
        padding: 0;
        border-bottom: 0;
        .dia-header{
            position: relative;
            .data-title{
                width: 300px;
                margin: 0 auto;
                line-height: 72px;
                text-align: center;
                color: #fff;
                font-size: 24px;
                background: url(../assets/img/dia-title.png) 0 0/cover no-repeat;
            }
            .close{
                position: absolute;
                top: 15px;
                right: 15px;
                cursor: pointer;
            }
        }
    }
    .tips{
        margin: 20px 0 50px;
        text-align: center;
        font-size: 20px;
        color: #000;
    }
    .list{
        width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        li{
            position: relative;
            width: 204px;
            height: 204px;
            margin: 0 35px 35px 0;
            text-align: center;
            background: url(../assets/img/data-frame.png) 0 0/cover no-repeat;
            cursor: pointer;
            img{
                margin-top: 10px;
            }
            p{
                position: absolute;
                bottom: 0;
                width: 100%;
                line-height: 54px;
                text-align: center;
                font-size: 18px;
                color: #000;
            }
            &.checked{
                background: url(../assets/img/data-frame-checked.png) 0 0/cover no-repeat,
                url(../assets/svg/checked.svg) 165px 7%/auto no-repeat;
                p{
                    color: #fff;
                }
            }
        }
    }
    .dia-footer{
        margin-top: 50px;
        text-align: center;
        button{
            width: 250px;
            line-height: 50px;
            color: #fff;
            font-size: 18px;
            background-color: rgb(81,147,255);
            border: 0;
            border-radius: 20px;
            cursor: pointer;
            &:hover{
                opacity: .9;
            }
        }
    }
}

.req {
  margin-right: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #f00;
}
.el-loading-spinner .circular {
  display: inline;
}