body.settings_page_worais-login-protect  #wpcontent #wpbody #wpbody-content > .notice{display: none;}

#worais-login-protect{
    .panel{
        display: block;
        width: calc(100% - 20px - 420px);
        margin-top: 20px;        
    }
    #result{
        &:empty{
            display: none;
        }
        .error, .updated{
            margin: 0;
            margin-top: 20px;
            display: inline-block;
            padding: 10px;            
        }
    }
    .container{
        background: #fff;
        border: 1px solid #D6D6D6;
        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.05), 0 2px 1px 0 rgba(0, 0, 0, 0.03);
        border-radius: 6px; 
        h2{
            border-bottom: 1px solid #EBEFF3;
            color: #555;
            font-weight: 500;
            padding: 10px;
            padding-top: 0;
        }  
        &.summary{
            margin-bottom: 20px;
        }
        &.configs{
            section{
                display: flex;
                justify-content: space-between; 
                border-top: 1px solid #eee;
                &:first-of-type{
                    border: 0;
                    margin-top: -20px;
                }
                h3{
                    padding: 20px;
                    width: 300px;
                    display: block;                    
                }    
                & > div{
                    width: calc(100% - 340px);
                    position: relative;
                    padding: 20px;                    
                    label{
                        display: block;
                        font-weight: 500;
                        margin-bottom: 4px;                        
                    }
                    i{
                        position: absolute;
                        right: 40px;
                        margin-top: 5px;
                    }
                    input{
                        display: block;
                        width: 100%;
                    }
                    input[type=checkbox]{
                        display: inline-block;
                        background: #eee;
                        border: 0;
                        width: 24px;
                        height: 24px;                        
                    }
                    input[type=checkbox]:checked{
                        background: #7adef8;
                    }
                    input[type=checkbox] + label{
                        display: inline-block;
                    }
                }           
            }
        }     
        &.logs{
            background: #fffee4;
            max-width: 400px;
            width: 50%;
            position: absolute;
            right: 20px;
            margin-top: 20px;   
            height: calc(100vh - 140px);
            overflow-y: auto;
            ul{
                margin-top: -5px;
                li{
                    list-style: none;
                    padding-left: 10px;
                }
                .empty{
                    background-image: url(logs-empty.png);
                    background-size: 100px;
                    background-position: center;
                    background-repeat: no-repeat;  
                    height: calc(100% - 100px);
                    width: 100%;
                    position: absolute;
                    padding: 0;                                      
                }
            }
        }
        .btn-primary{
            background: #00dca7;
            border: 1px solid rgba(0, 0, 0, 0.12);
            font-size: 0.875rem;
            padding: 0.95rem 1.2rem;
            min-width: 6rem; 
            float: right;
            margin-top: 20px;
            border-radius: 5px;
            cursor: pointer; 

            -webkit-transition: background-color 300ms linear;
            -moz-transition: background-color 300ms linear;
            -o-transition: background-color 300ms linear;
            -ms-transition: background-color 300ms linear;
            transition: background-color 300ms linear;

            &:hover{
                background: #06c194;
            }
            position: relative;
            .spinner{
                display: none;
                position: absolute;
                left: 50%;
                margin-top: -2px;
                margin-left: -10px;
            }
            &.loading{    
                pointer-events: none;   
                background-size: 20px 20px;
                background-position: center;
                color: #f0f0f100; 
                .spinner{
                    display: block;
                }               
            }            
        }
    }    
}

#blocked{
    background-color: #eee;
    background-image: url(ban.png);
    background-size: 400px;
    background-position-y: 180px;
    background-position-x: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #555;
    h1{
        padding-top: 40px;
        margin-bottom: 0;
        padding-bottom: 0;        
    }
}