/*
    This CSS file is full of combination of vw, vh and %
    for specifying height and width. Consistently using
    only vw,vh or % causes unexpected behaviour.

    Not sure about the reason for this could be because
    of the viewport meta tag for mobile devices.
*/


/* General */

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

#aProgramEditor:hover,
#aGUIEditor:hover,
#aExecuteProgram:hover {
    text-decoration: underline;
}

#inputLoadProjectFile {
    display: none;
}


/* Class for enabling/disabling views. */

.enabled {
    opacity: 1;
    pointer-events: auto;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}


/* MDL elements. */

.layout-waterfall,
.mdl-layout__header-row,
.mdl-navigation__link:last-of-type {
    padding-right: 0;
}


/* Dialog box headers. */

.markDialogHeaderError {
    color: #D8000C;
    background-color: #FFBABA;
}

.markDialogHeaderWarning {
    color: #9F6000;
    background-color: #FEEFB3;
}

.markDialogHeaderInformation {
    color: #010390;
    background-color: #A4E0FF;
}


/* Program editor. */

#blocklyDiv {
    position: absolute;
}

#blocklyArea {
    width: 100%;
    height: 100%;
}

#divProgramEditor {
    width: 100%;
    height: 100vh;
    display: block;
}

#iframeProgramEditor {
    width: 100%;
    height: 100vh;
}


/* GUI editor. */

#divGUIEditor {
    width: 100%;
    display: none;
    height: 100vh;
}


/* Execute program. */

#divExecuteProgram {
    width: 100%;
    height: 100%;
    display: none;
}

#tableExecuteProgram {
    width: 100%;
    height: 100vh;
}

#textareaProgramExecutionConsole {
    width: 100%;
    resize: none;
    font-size: 15px;
    color: #40FF00;
    height: 100vh;
    background-color: black;
    border: solid 2px #DDDDDD;
    font-family: "Lucida Console", Monaco, monospace;
}

#divExecuteProgramRenderedGUIEmpty {
    width: 100vw;
    height: 100vh;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    background-color: #DDDDDD;
    display: table-cell;
    border: solid 2px #DDDDDD;
}

#divExecuteProgramRenderedGUI {
    width: 100%;
    height: 100vh;
    display: none;
    overflow-y: auto;
    border: solid 2px #DDDDDD;
}
