/**
 * Import Fonts
 */


@font-face {
    font-family: 'greyscalebasic-regular';
    src: url('fonts/greyscale/greyscale_basic_regular-webfont.woff2') format('woff2'),
        url('fonts/greyscale/greyscale_basic_regular-webfont.woff') format('woff'),
        url('fonts/greyscale/Greyscale_Basic_Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/**
CSS for layout
 */



body {
    margin: 0;
    padding: 0;
    background: #f5f5ef;

}

#editResource,
#editLink,
#sidePanel {
    display: none;
}

#navigationBar {
    float: left;
    background-color: #6a4848;
    width: 100%;
}

img {
    float: left;
    margin: 12px 8px 8px 10px;
}

nav {
    float: left;
    margin: 13px 20vw 13px 10px;
}

#paper {
    clear: both;
    margin: 0;
    overflow: hidden; /* ? */
}

.joint-paper-background {
    background-color: #f5f5ef;
}

/**
 Style for Sidepanel
 */

#sidePanel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 25vw;
    background-color: #f5f5ef;
    border-left: 2px dashed #6a4848;
    z-index: 10;
    box-shadow: -4px 4px 10px 4px rgba(0,0,0,0.1);
}

#sidePanelCloseBtn {
    color: #6a4848;
    text-align: right;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 20px;
    font-weight: bold;
    margin: 5px;
    cursor: default;
}


#sidePanelContent {
    position: relative;
    margin: 7px;
    color: #6a4848;
    font-family: greyscalebasic-regular, sans-serif;
    padding: 5px;
}

#instructions {
    font-family: Helvetica, Arial, sans-serif;
    font-size: small;
}

#instructions h3 {
    display: inline;
    font-variant: small-caps;
    font-family: greyscalebasic-regular, sans-serif;
    /*cursor: context-menu;*/
}

#instructions p {
    margin: 6px;
}

#sidePanelContent h1 {
    margin-top: 0;
    font-family: greyscalebasic-regular, sans-serif;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 24px;
}

#sidePanelContent h2 {
    font-weight: bold;
    font-size: large;
}

#sidePanelContent table {
    width: 100%;
}

#sidePanelContent table input[type=text] {
    width: 100%;
}
#sidePanelContent table textarea {
    width: 100%;
    font-size: small;
    resize: none;
}

.btn {
    padding: 8px;
    margin-top: 10px;
    color: #f5f0f0;
    font-size: 14px;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    background-color: #6a4848;
    border: none;
}

.btn:hover,
.btn:focus {
    color: #6a4848;
    background-color: #f5f0f0;
}

.submitBtn {
    float: right;
}

table {
    text-align: left;
    margin: auto;
}

a,
a:hover,
a:visited {
    border-bottom: 1px dotted #4d4d4d;
    text-decoration: none;
    color: #4d4d4d;
    cursor: context-menu;
}

/**
    Style for Navigation Bar
 */


nav button {
    color: #6a4848;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 15px;
    font-weight: normal;
    background-color: #f5f5ef;
    border: none;
    border-radius: 3px;
    padding: 7px;
    margin: 3px;
}

nav button:hover,
nav button:focus {
    color: #f5f5ef;
    background-color: #6a4848;
}

#uploadInput {
    display: none;
}


/**
    Term description for suggestion items
 */

#termDesc {
    position: absolute;
    display: none;
    color: #262626;
    border: 1px solid #262626;
    font-size: 13px;
    padding: 2px;
    font-family: Helvetica, Arial, sans-serif;
    background-color: #ffffff;
    z-index: 120;
}


/**
    Style for EditResourceView and EditLinkView
 */

.editGraphElement {
    position: absolute;
    top: 15vh;
    left: 20vw;
    right: 20vw;
    min-width: 500px;
    max-width: 700px;
    width: 10vw;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #6a4848;
    border-radius: 5px;
    z-index: 11;
    color: #f5f0f0;
    font-size: 15px;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    overflow: hidden;
    text-align: center;
}

.editGraphElement table {
    margin: auto;
    width: 95%;
    padding-left: 5px;
    padding-right: 5px;
}


.editGraphElement .btn {
    color: #6a4848;
    background-color: #f5f5ef;
}

.editGraphElement .cancelBtn {
    float: left;
}

.editGraphElement .addFieldBtn {
    float: right;
}

.editGraphElement .btn:hover,
.editGraphElement .btn:focus {
    color: #f5f5ef;
    background-color: #6a4848;
}

.editGraphElement input[type=text],
.editGraphElement textarea {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 3px;
    border: none;
}

.editGraphElement .ui-autocomplete-input {
    font-weight: bold;

}

.editGraphElement textarea {
    margin: 2px;
    width: 98%;
    font-size: small;
    font-family: Helvetica, Arial, sans-serif;
    resize: none;
}

.editGraphElement [readonly] {
    color: darkslategrey;
    background-color: #f5f0f0;
}

.editGraphElement select {
    margin: 3px;
    padding: 3px;
    border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

#editResource input[type=text] {
    width: 93%;
}

#editLink .actionInputWrapper {
    display: none;
}




hr {
    height: 1px;
    width: 60%;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #f5f5ef;
    background: #f5f5ef;
    font-size: 0;
    border: 0;
}

/*
.foregroundBox {
    position: absolute;
    top: 8vh;
    bottom: 8vh;
    left: 10vw;
    right: 10vw;
    width: 50%;
    margin: auto;
    text-align: center;
    border: 2px solid #6a4848;
    border-radius: 20px;
    box-shadow: -4px 4px 10px 4px rgba(0,0,0,0.1);
    background-color: #f5f0f0;
    z-index: 11;
    opacity: 1;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    overflow: hidden;
}

.clear-canvas {

    font-family: Verdana, Geneva, sans-serif;
    color: limegreen;
    font-weight: bold;
    font-size: 30px;
    z-index: 100;
}
*/




/**
    Style for nodes
 */

#paper-html-elements {
    position: relative;
    border: 1px solid gray;
    display: inline-block;
    background: transparent;
    overflow: hidden;
}

#paper-html-elements svg {
    background: transparent;
}

#paper-html-elements svg .link {
    z-index: 2;
}

.html-element {
    position: absolute;
    background-color: #f5f5ef;
    /*background-color: #b6b6c9; blau*/
    /*background-color: #e9b796;  orange*/
    /*background: #e2e2d0; hellgrau*/
    /* Make sure events are propagated to the JointJS element so, e.g. dragging works.*/
    pointer-events: none;
    -webkit-user-select: none;
    border: 1px solid #262626;
    text-align: center;
    vertical-align: middle;
    padding: 4px;
    box-sizing: border-box;
    z-index: 2;
}

.html-element.collection {
    background-color: #d9d9d9;
}

/*
.html-element.item {
    background-color: #b6b6c9;
}
*/

.html-element label,
.html-element input,
.html-element button {
    /* Enable interacting with inputs only. */
    pointer-events: auto;
}

.html-element button.newLink {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 15px;
    height: 15px;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
}
.html-element button.delete {
    color: #262626;
    border: none;
    background-color: transparent;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    margin: 0;
    font-weight: bold;
    cursor: crosshair;
}

.html-element .collectionLabel {
    display: none;
    color: #262626;
    font-size: x-small;
    text-align: center;
}

.html-element .nodeInput {
    position: absolute;
    top: 2px;
    right: 2px;
    left: 2px;
    display: none;
    box-sizing: border-box;
    width: 96%;
    border: 1px solid #6a4848;
    background-color: #f5f5ef;
    color: #6a4848;
    /*padding: 5px;
    height: 16px; */
}
.html-element label {
    color: #262626;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 12px;
    font-weight: bold;
    margin: auto;
    /*cursor: text;*/
}