@bg-color:#FFF;


@bg-color-dm:#DDD;
@bg-color-dm-nav:darken(@bg-color-dm,10%);


@btn-bgcolor:#0c81f5;
@btn-color:#FFF;
.App{
    border: #e0e0e0 1px solid;
    margin:24px;
}

*{
    box-sizing: border-box;
    font-family: Open Sans,Arial,sans-serif;
}
html,body{
    margin:0;
    color:rgba(0,0,0,.87);
    background-color:#f9f9f9;
}
.nav{
    background-color:#f4f5f6;
    height:52px;
    line-height: 50px;
    display:flex;
    border: #e0e0e0 1px solid;

    .select-wrapper {
        position: relative;
        width: 200px;
    }
      
    .select-wrapper::before {
        color: @btn-bgcolor;
        font-size: 20px;
        pointer-events: none;
        position: absolute;
        right: 15px;
        top: 10px;
    }
      
    select {    
        background: #f4f5f6;
        border: none;
        border: 1px @btn-bgcolor solid;
        color: @btn-bgcolor;
        cursor: pointer;
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        height: 40px;
        outline: none;
        padding-left: 10px;
        width: 100%;
        margin-top: 6px;
      }
      
    select option {
        color: @btn-bgcolor;
    }
      
    select::-ms-expand {
        display: none;
    }
      
    select:focus::-ms-value {
        background-color: transparent;
    }

    input[type=number]{
        height: 40px;
        border: 1px solid @btn-bgcolor;
        background: none;
        color: @btn-bgcolor;
        padding: 0px 5px;
    }
    button{
        height: 40px;
        border: 1px solid  @btn-bgcolor;
        background: @btn-bgcolor;
        color: @btn-color;
    }
}

.studentList{
    display: flex;
    flex-wrap: wrap;
    .user{
        border: 1px solid #454545;
        margin: 5px;
        padding: 5px;
        transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
        position: relative;
        &.disappear{
            opacity: 0.09;
            transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
        }
        &.appear{ 
            opacity: 1;
            transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
        }
        .group{
            display: block;
            position: absolute;
            right: 5px;
            padding: 5px;
            border: 1px solid #56a1ec;
            color: #FFF;
            background: #0c81f5;
        }
        .user_img{
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            img{
                max-width: 100%;
                max-height: 100%;
                vertical-align: middle;
            }
        }
        .username{
            text-align: center;
            display: inline-block;
            width: 200px;
        }
    }
}
@import './grp_gui.less';