* {
    box-sizing: border-box;
    font-family: sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

#network-wrapper {
    flex-grow: 1;
    position: relative;
    padding: 0em;
}
#network {
    height: 100%;
}

#wrapper {
    display: flex;
    height: 100%;
}

#controls {
    overflow: auto;
    border-left: 1px #608999 solid;
    padding: 1em;

    flex-shrink: 0;
    background-color: #cee5ee;
    max-width: 20em;
}

#controls.collapsed {
    width: 0;
    padding:0;
}

#controls h1 {
    margin-top:0;
}

button, input::file-selector-button {
    background-color: #2687ad;
    color: white;
    border:0;
    padding: 0.5em;
    border-radius: 5px;
}

button:hover, input::file-selector-button:hover {
    background-color: #1c6582;
}

fieldset {
    margin-bottom: 1em;;
}

#loading-spinner{
    height:1em;
    width:1em;
    animation: spin 1200ms infinite linear;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#error-message {
    color: red;
}

#toggle-button {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 2;
    background: black;
    color:white;
    border: white solid 2px;
    border-right: 0;
    border-radius: 4px 0px 0px 4px;
    height: 3em;
}

dialog {
    z-index: 3;
    border:  1px black solid;
    border-radius: 4px;
    min-width: 25%;
    max-width: 90%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

dialog h3 {
    margin-top: 0;
}

.dialog-close-form {
    /* display: inline-block; */
    text-align: left;
}

.dialog-chunky-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.dialog-chunky-wrapper > * {
    flex: 1 1 0;
    min-width: 20em;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dialog-chunky-wrapper > * > * {
    margin: 0.5em;
}

.upload-area {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.upload-area:hover {
    background-color: #e8e8e8;
}

.upload-area input {
    flex-grow: 1;
    align-content: center;
    margin: auto;
}

.flex-separator {
    flex-basis: 0;
}

.zotero-login-info {
    display:none;
}
.zotero-username {
    font-weight: bold;
}