body {
    margin:0;
    padding:0;
    font-family:'Titillium Web';
}
#loadOverlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:100;
    background-color: rgba(0,0,0,.5);
    text-align:center;
}
#loadOverlay img {
    height:200px;
    padding-top:calc(50vh - 100px);
    display:block;
    margin:auto;
}
header {
    background-color:#dddcdc;
    height:38px;
    line-height:38px;
    color:#222;
    font-weight:bold;
    padding:0 3px;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: #bbb;
    font-weight:200;
    font-size:17px;
}
header small {
    font-size:11px;
    color:#999;
}
header .buttons {
    float:right;
    height:38px;
    line-height:38px;
    vertical-align:middle;
}
.buttons button, .buttons .option {
    display:inline-block;
    height:32px;
    line-height:32px;
    font-family:'Titillium Web';
    font-size:14px;
    border:none;
    background-color:#ccc;
    padding:0 6px;
    vertical-align:middle;
    margin-bottom:4px;
    color:#333;
    text-align:center;
    min-width:32px;
    margin-right:3px;
    cursor:pointer;
    box-sizing: border-box;
    border-radius:3px;
}
.buttons button:hover, .buttons .option:hover{
    background-color:#c5c5c5;
}
.buttons .option:has(input:checked) {
    background-color:#fff;
}        
.buttons .option input{
    display:none;
}
.buttons button:hover .buttons .option {
    background-color:#bbb;
}
/* ----------- OSZLOPOS ELRENDEZÉS --------- */
#cols-container {
    display: grid;
    grid-template-columns: 0 0 auto;
    height: calc(100vh - 39px);
    width: 100vw;
    overflow: hidden;
}

#column-separator-1 {
    background-color:#bbb;
    cursor:col-resize;
}
#column-separator-1:active {
    background-color:#888;
}

.view-lab #cols-container {
    grid-template-columns: 350px 4px auto;
}
/* ------------ OLDALSÁV ------------- */

aside {
    box-sizing:border-box;
    border:none;
    padding:10px;
    background-color:#f5f5f5;
    overflow:auto;
    font-size:15px;
}
aside p {
    margin-top:0;
    margin-bottom:10px;
}
.goalBox {
    display: block;
    margin: 5px 0;
    padding: 15px;
    background-color: white;
    /* border-radius: 5px; */
    /* border: #ccc 1px solid; */
    margin: -10px -10px 10px -10px;
    color:#555;
}
.goalBox i.fa-regular, .goalBox i.fa-solid {
    color: #000000;
    font-size: 17px;
    vertical-align: middle;
    display:inline-block;
    padding-right:7px;
}
.goalHeader {
    font-size:17px;
    font-weight:bold;
    text-align:center;
    margin-bottom:5px;
    color:black;
}

/* ----------- KÓDER --------- */
#editor {
    margin:0;
    padding:0;
    overflow:auto;
    height:100%;
}
#editor code-input {
    font-family:'Roboto Mono';
    border:none;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
#editor code-input[data-linespace='0']
{
    line-height:24px;
    font-size:16px;
}
#editor code-input[data-linespace='1']
{
    line-height:17px;
    font-size:14px;
}
#editor code-input[data-linespace='2']
{
    line-height:14px;
    font-size:12px;
}








#toast {
    position:fixed;
    top:48px;
    right:-400px;
    width:350px;
    padding:5px;
    z-index:95;
    border-radius:3px;
    background-color:#f5f5f5;
    box-shadow: 1px 1px 3px 0 rgba(0,0,0,.2);
    transition:.3s;
    cursor:pointer;
}
#toast.shown {
    right:10px;
}
#toast small {
    font-size:13px;
    line-height:13px;
    color:#999;
}
#toast .toast-error {
    color:red;
    font-size:13px;
}
#dialog {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:100;
    background-color: rgba(0,0,0,.5);
    text-align:center;
    display:none;
}
#dialog.shown {
    display:block;
}
#dialogInner {
    position:fixed;
    top:48px;
    right:0;
    left:0;
    margin:auto;
    width:600px;
    padding:10px;
    z-index:95;
    border-radius:3px;
    background-color:#f5f5f5;
    box-shadow: 1px 1px 3px 0 rgba(0,0,0,.2);
    transition:.3s;
    display:block;
    text-align:left;
}
#dialogInner h2 {
    margin: 5px 0 10px 0;
    text-align: center;
    font-size: 24px;
}
#dialogInner button, .code-input_find-and-replace_dialog button {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    font-family: 'Titillium Web';
    font-size: 14px;
    border: none;
    background-color: #ddd;
    padding: 0 6px;
    vertical-align: middle;
    margin-bottom: 4px;
    color: #333;
    text-align: center;
    min-width: 32px;
    margin-right: 3px;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 3px;
    margin-top:6px;
}
main {
    display:none;
    overflow:auto;
}
main.loaded {
    display:block;
}
.view-lab aside {
    display:block;
}
.view-lab header *.noLab {
    display:none !important;
}
.view-labfs *.noLabFS {
    display:none !important;
}
.view-labfs code-input {
    display:none;
}
#editor {
    display:block;
    top:0;
    left:0;
    right:0;
    bottom:253px;
    overflow:auto;
}
iframe {
    position:absolute;
    bottom:0;
    height:255px;
    border:none;
    left:0;
    right:0;
    width:100%;
    border-style:solid;
    border-width:2px 0 0 0;
    border-color:#bbb;
    z-index:100;
}
.view-full iframe {
    position:absolute;
    bottom:0;
    height:calc(100%);
    border:none;
    left:0;
    right:0;
    width:100%;
    border-style:solid;
    border-width:2px 0 0 0;
    border-color:#bbb;
}
.view-code iframe {
    display:none;
}
.view-code #editor {
    bottom:0;
}
.dialog {
    display:none;
    position:fixed;
    top:70px;
    left:0;
    right:0;
    width:550px;
    margin:auto;
    background-color:#eee;
    min-height:100px;
    z-index:100;
}
.dialog.shown {
    display:block;
}
.dialog-title {
    background-color: #222;
    color:white;
    padding:5px;
    line-height:28px;
}
.dialog-content {
    padding:5px;
    font-size:13px;
}
#overlay { 
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    z-index:99;
    background-color:rgba(0,0,0,.5);
    display:none;
}
code.code-input_find-and-replace_match-description {
    display:none;
}
.code-input_find-and-replace_dialog details {
    border-radius: 5px;
    padding: 0 5px;
    background-color: #eee;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    margin-top:10px;
}
.code-input_find-and-replace_dialog > div > button {
    margin-bottom:10px;
    height:25px;
    line-height:25px;
    font-size:15px;
    padding-top:0;

}
.code-input_find-and-replace_dialog div span {
    margin:-5px;
}
.code-input_find-and-replace_dialog details input {
    width: 97%;
    box-sizing: border-box;
    margin: 4px;
    margin-top: 10px;
    border-radius: 3px;
    padding:0 4px;
}
.code-input_find-and-replace_dialog input[type="checkbox"] {
    margin:2px 5px 0 5px !important;
    display:inline-block !important;
    border-radius:3px;
}
.code-input_find-and-replace_dialog input[type="checkbox"]::before {
    height:32px;
    width:32px;
    line-height:26px !important;
    font-size:14px;
    border-radius:3px;
    vertical-align:bottom;
    padding:0 4px;
    line-height:32px;
    margin-top:3px;
    font-family:'Titillium Web';
    font-weight:bold;
}
.code-input_find-and-replace_dialog input[placeholder] {
    border-style:solid;
    border-width:1px;
    border-color:#999;
    border-radius:3px;
    vertical-align:bottom;
    line-height:32px;
    height:32px;
}
.code-input_find-and-replace_dialog button {
    font-size: 11px !important;
    min-width: 32px;
    height: 32px;
    font-weight: bold;
}
#langSelect label {
    display:none;
}
#langSelect label:has(input:checked)
{
    display:inline-block;
    background-color:white;
    border-radius:3px;
    font-weight:normal;
    font-size:13px;
    color:#666;
}

#overlay-view-settings, #overlay-size-settings {
    position:fixed;
    right:16px;
    top:42px;
    width:260px;
    border-style:solid;
    border-color:#ddd;
    border-width:1px;
    border-radius:4px;
    background-color:white;
    z-index:99;
    box-shadow: 1px 1px 3px 0 rgba(0,0,0,.3);
}
.overlay-menu-option {
    padding:4px;
    border-radius:3px;
    cursor:pointer;
}
.overlay-menu-option i {
    width:26px;
    display:inline-block;
    text-align:center;
}
.overlay-menu-option:hover {
    background-color:#e5e5e5;
}