*{
    box-sizing:border-box;
}
.login-container{
    max-width:800px;
}
.navbar #login-screen .dsa-intro, .navbar .navbar-hide{
    display:none;
}
.navbar #login-screen *{
    color:unset;
    background-color:unset;
}
.navbar #login-screen a{
    color:blue;
}
.navbar #login-screen{
    float:right;
    border:none;
    margin:0.5em;
}

#app{
    background-color:white;
    color:black;
    padding:1em;
}
#app:not(.setup-complete){
    display:none;
}
#json:not(.visible){
    display:none;
}
.wsi-options{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
}

.cell-text{
    border:thin black dashed;
    padding:0.5em;
}
*[contenteditable]:empty::before{
    content:'Enter text here';
    color:gray;
}
.cell{
    background-color:white;
    color:black;
    padding:1em;
    border:solid black thin;
    overflow:hidden;
}
.cell.header{
    font-weight:bold;
    text-align:center;
}
.grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,auto));
}

.dz-success-mark, .dz-error-mark{
    display:none;
}
.header .remove-button{
    float:right;
}
.link-container{
    outline:thin gray solid;
    margin:2px;
    padding:5px;
}
#grid-header{
    display:none;
}
.drop-area{
    outline:thin black dashed;
    padding:10px;
    background-color:unset;
}
.drop-area.dragover:hover{
    outline-width:medium;
    background-color:rgb(202, 255, 202);
}
.row-categories:empty::before{
    content:'Not categorized';
    color:gray;
    font-weight:bold;
    cursor:pointer;
}
.row-category{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
}
.row-category:hover{
    background-color:lightgoldenrodyellow;
    outline:thin black solid;
    cursor:default;
}
.modal-dialog{
    background-color: rgba(0, 0, 0, 0.5);
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    padding:0;
}
.dialog-contents{
    /* width:50vw; */
    /* height:300px; */
    display:inline-block;
    padding:2em;
    background-color:white;
    color:black;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    max-width:calc(max(1200px, 80%));
}
.category-picker .category{
    cursor:pointer;
}
.cancel-categorizer{
    position:absolute;
    top:5px;
    right:5px;
}