.neo_ide {

    html,
    body {
        height: 100%;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        padding: 0;
        margin: 0;
        /*margin-top: -20px;*/
        overflow: auto;
    }

    #editor {
        width: 100%;
        height: 100%;
        margin: -10px;
    }

    .page-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .nav-container {
        width: 100%;
        height: 45px;
        background-color: #333333;

        ul {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex: 1;
            align-self: center;
            width: 100%;
            list-style: none;
        }

        ul .left {
            color: white;
            padding: 15px;
            margin-left: -40px;
            margin-top: -19px;
            font-size: 20px;
        }

        ul .center {
            color: white;
        }

        ul .right {
            width: 80px;
            margin-right: 174px;
            color: white;
        }

        ul .right .button {
            padding: 15px;
            margin-top: -15px;
        }

        .fileName {
            color: grey;
        }

        ul .button {

        }

        ul .button:hover {
            background-color: black;
        }
    }

    @keyframes menuBarIn {
        from {height: 0;}
        to {height: 25px;}
    }

    @keyframes menuBarOut {
        from {height: 25px;}
        to {height: 0;}
    }

    .menuBarIn {
        animation-name: menuBarIn;
        animation-duration: 0.5s;
        height: 25px !important;
    }

    .menuBarOut {
        animation-name: menuBarOut;
        animation-duration: 0.5s;
        height: 0px !important;
    }

    .menubar-container {
        background-color: #4e4e4e;
        height: 0;

        ul {
            display: flex;
            flex-direction: row;
            flex: 1;
            width: 100%;
            list-style: none;
            margin-top: 2px;
            margin-left: -30px;
        }

        .button {
            background-color: #3e3e3e;
            color: white;
            padding: 3px 10px 3px 10px;
            margin-right: 4px;
            font-size: 13px;
            border-radius: 7px;
        }

        .button:hover {
            background-color: black;
        }

    }

    .panel-container {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        .panel-top {
            flex: 0 0 auto;
            padding: 10px;
            height: 80%;
            width: 100%;
            white-space: nowrap;
            background: #838383;
            color: white;
        }

        .splitter {
            flex: 0 0 auto;
            margin-top: -20px;
            height: 25px;
            background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353;
            cursor: row-resize;
        }

        .splitter .text {
            margin-left: 10px;
            margin-top: 4px;
            color: #cccccc;

            span {
                margin-left: 5px;
            }
        }

        .panel-bottom {
            flex: 1 1 auto;
            padding: 10px;
            /*min-height: 200px;*/
            background: black;
            color: white;

            overflow-y: scroll;
        }

        .panel-bottom pre {
            margin-top: -10px;

            .stdout {
                color: white;
            }

            .stderr {
                color: red;
            }

            .close {
                color: yellow;
            }
        }
    }

    label {
        font-size: 1.2em;
        display: block;
        font-weight: bold;
        margin: 30px 0 10px;
    }





    .page-loader {
        position: absolute;
        margin: 0;
        padding: 0;
        border: 0;
        width: 100vw;
        height: 100vh;
          background-color: #1fa2ed;
          color: #fff;

        // LET THE LOADING BEGIN
        .loader {
          display: flex;
          justify-content: center;
          flex-flow: nowrap column;
          align-items: center;
          min-height: 100vh;
        }
        .loading {
          display: flex;
          margin: 24px 0;
        }
        .loading__element {
          font: normal 100 2rem/1 Roboto;
          letter-spacing: .5em;
        }
        [class*="el"] {
          animation: bouncing 3s infinite ease;
        }

        @for $i from 1 through 19 {
          $delay: percentage($i);
          .el#{$i} {
            animation-delay: $delay / 1000% + s;
          }
        }

        @keyframes bouncing {
          0%, 100% {
            transform: scale3d(1,1,1);
          }
          50% {
            transform: scale3d(0,0,1);
          }
        }

        .current-event {
            color: rgba(255, 255, 255, 0.53);
            font: normal 100 1rem/1 Roboto;
            letter-spacing: .1em;
        }

    }


}