/*
    The style set here is for a simple web app and is not part of the core ORMJS 
    functionality.
 */

@font-face {
    font-family: 'Montserrat Light';
    src: url(../../../style/fonts/Montserrat/Montserrat-Light.ttf)  format('truetype');
}

:root {
    /* Div sizes */
    --topbar-h: 40px;
    --optionbar-h: 120px;
    --canvas-w: 65vw;
    --canvas-h: 97vh;
    --code-w: 35vw;
    --margin-h: 10px;
}

.container {
    display: flex;
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    font-family: 'Montserrat Light', 'Trebuchet MS', Tahoma, Sans-Serif; /* Back up font is for saving svgs */
    font-size: var(--ojs-font-size-lg);
}

.left_box {
    box-sizing: border-box;
    flex: 0 0 auto;
    height: calc( var(--canvas-h) );
    margin: 0;
    padding: 0;
    width: calc( var(--canvas-w) );

}

.right_box {
    box-sizing: border-box;
    flex: 1 0 auto;
    height: calc( var(--canvas-h) );
    margin: 0;
    padding: 0;
}

.vdragbar {
    width: 10px;
    padding: 0;
    cursor: ew-resize;
    flex: 0 0 auto;
  }
  
.vdragbar::before {
    content: '';
    display: block;
    width: 4px;
    height: calc( var(--canvas-h) );
    background: none;
    margin: 0 auto;
  }

#topbar {
    position: relative;
    top: 0px;
    left: 0px;
    height: var(--topbar-h);
    /*width: calc( var(--canvas-w) - var(--margin-h) );*/
    width: inherit;
    padding-left: 0px;
    padding-top: calc( var(--margin-h) );
}

#canvas {
    position: relative;
    top: 0px;
    left: 0px;
    /*width: var(--canvas-w);*/
    width: inherit;
    height: calc( var(--canvas-h) - var(--topbar-h) - var(--margin-h) );
    /*background: #eee;*/
    background: #fff;
}

#codepanel {
    position: relative;
    top: 0px;
    left: 0px;
    font-size: 14px;
    /*width: var(--code-w);*/
    width: inherit;
    height: var(--canvas-h);
    background: rgb(48, 48, 48);
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}

#rel_options {
    position: relative;
    top: 0px;
    left: 0px;
    font-family: 'Montserrat';
    font-size: var(--font-size-lg);
    color: #000;
    background-color: #fff;
    /*width: var(--code-w);*/
    width: inherit;
    height: var(--optionbar-h);
    padding: var(--margin-h);
    overflow: hide;
}

#rel {
    position: relative;
    /*top: calc( var(--optionbar-h) + 2*var(--margin-h) );*/
    top: 0px;
    left: 0px;
    font-family: 'Courier New',Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
    color: rgb(235, 235, 235);
    /*background-color:rgb(27, 71, 97,0.7);*/
    font-size: 1em;
    /*width: var(--code-w);*/
    width: inherit;
    height: calc( 100vh - 2*var(--margin-h) - var(--optionbar-h) );
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 10px;
}

#rel p {
    font-family: 'Montserrat', 'Trebuchet MS', Tahoma, Sans-Serif;
    font-size: var(--font-size-lg);
    line-height: 1.2em;
    margin-left: 15px;
}

.topbutton {
    cursor: pointer;
    text-decoration: inherit;
    color: inherit;
}

input[type="range"] {
    transform: translateY(0.3em);
}

.spacy {
    margin: 5px 0px 2px 0px;
    line-height: 1.4em;
    font-family: "Montserrat Light";
    font-size: var(--font-size-lg);
}

/* File Upload */

input[type="file"] {
    display: none;
}

.file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

.file-upload:hover {
    background-color:rgba(255,255,255, 0.7)
}

.file-upload a {
    color: inherit; /* blue colors for links too */
    text-decoration: inherit; /* no underline */
}

.filename {
    margin-left: 5px;
    margin-right: 5px;
}

.zoom {
    float: right;
    margin-right: 15px;
}