* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body {
    height:100vh;

}.panel {
     overflow:auto;
     padding:20px;
 }
.left {
    width:50%;
}
.right {
    flex-grow: 1;
}
.resizer {
    width:5px;
    cursor:ew-resize;
    background-color: #1A3759;
    z-index: 999;
    touch-action: none;
}
.editor {
    width:100vw;
    display: flex;
    height: calc(100vh - 50px);
}
.navbar {
    height:50px;
    width:100vw;
    /*display: block;*/
    border-bottom: solid 1px white;
    z-index: 999;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position:relative;
}
.navbar-logo {
    height:49px;
    display: inline-block;
    z-index: 1;
    vertical-align: middle;
}
.navbar-playground-title {
    font-size:24px;
    position: relative;
    top:6px;
    left:-6px;
}
.sr-only {
    position:absolute;
    left:-100px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
.run-btn {
    display: inline-block;
    color: black;
    background-color: #4A9EFF;
    font-family: inherit;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 7px;
    padding-bottom: 7px;
    border: solid 1px #4A9EFF;
    outline:0;
    cursor: pointer;
    font-size:16px;
    font-weight:400;
    text-decoration: none;
    position: absolute;
    left:50%;
    /*margin:0;*/
    transform: translate(-50%);
    /*top:0px;*/
    /*float:left;*/
}
.run-btn:hover{
    background-color: black;
    color:white;
}
@media (max-width: 600px) {
    .run-btn {
        transform:none;
        right:5px;
        left:unset;
        width:fit-content;
    }
    .editor {
        flex-direction: column;
    }
    .left {
        width: 100%;
        height: 50%;
    }
    .resizer {
        width: 100%;
        height: 5px;
        cursor: ns-resize;
    }
}