:root{--bg:#0b1020;--card:#121a33;--muted:#7f8bb2;--text:#e6ebff;--accent:#6ea8ff;--accent-2:#8ce99a;--line:#2a3359;}
html, body{ height:100%;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";background:radial-gradient(1200px 600px at 20% -10%, #1b2447 0%, var(--bg) 40%),var(--bg);color:var(--text);}
body{display:flex; justify-content: center; align-items: center; overflow-y: hidden;}
.loading-wrapper {
    position: fixed;
    inset: 0;                 /* top:0 right:0 bottom:0 left:0 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.3);
    z-index: 9999;
}

.loading-container {
    width: 320px;
    height: 10px;
    background: #333;
    border-radius: 5px;
    overflow: hidden;
}

.captcha-container{
    display:none;
    justify-content: center;
    align-items: center;
    position: absolute;
    left:50%;
    transform: translate(-50%, 50%);
    z-index:99;
}

.loading-bar {
    height: 100%;
    width: 40%;
    background: linear-gradient(
        90deg,
        #00ffcc,
        #00ccff,
        #00ffcc
    );
    animation: loading 1.2s infinite ease-in-out;
}

@keyframes loading {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}
.popup-info {
    display:none;
    grid-template-rows: 0.07fr 1fr 0.1fr;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 25%;
    height: 25%;
    background-color: #0f152b;
    border: 1px solid rgba(255, 255, 255, 0.162);
    border-radius: 12px;
    opacity: 0;
    z-index:101;
    will-change: transform, opacity;
}
.g-recaptcha{
    display:flex; justify-content: center; align-items: center; margin-top:10px;
}
.g-recaptcha > *{
    background-color: rgba(0, 187, 255, 0);
}
.error-msg{
    color: rgb(255, 0, 0);
}
.success-msg{
    color: rgb(0, 255, 0);
}
.float-in{
    transform: translate(50%, 100vh);
    animation: slide-up 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translate(-50%, 100vh); 
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
#anchor{
    display:none;
}
#importInput{
    display:none;
}
.view-input{
    display:none;
    flex-direction: row; justify-content: center; align-items: center;
}
.view-input input{
    flex:0.9;
    box-sizing: border-box;
    min-width: 0;
    height:100%;
    outline: none;
    padding:10px; border-radius:0px; border-top-left-radius: 0px; border:1px solid #39457c; background:#121a33; color:#e6ebff; font-size:11px;
}
.view-input .exportProceedBtn{
    flex:0.1;
    display:flex; align-items: center; justify-content: center;
    background:#32478473;
    height: 100%;
    cursor:pointer;
}
.view-input .exportProceedBtn:hover{
    background:#324784;
}
.dropdown-project{z-index: 99; border:1px rgba(255, 255, 255, 0.427) solid; height:30%; display:none; background-color: #18224a; position: absolute; grid-template-rows: 1fr 1fr 1fr;}
.dropdown-view{z-index:99; height:30%; display:none; position: absolute; border:1px rgba(255, 255, 255, 0.427) solid; background-color: #18224a;}
.dropdown-project .view-btn{
    height: 15%;
    border:1px rgba(255, 255, 255, 0.427) solid;
    user-select: none;
    cursor:pointer;
    display:flex;
    align-items: center;

}
.dropdown-project .view-input{
    height:15%;
    border:1px rgba(255, 255, 255, 0.427) solid;
}
.dropdown-project .importBtn{

}
.dropdown-project .exportBtn{

}
.dropdown-project .saveBtn{

}
.dropdown-view .view-btn{
    height: 15%;
    border:1px rgba(255, 255, 255, 0.427) solid;
    user-select: none;
    cursor:pointer;
    display:flex;
    align-items: center;
}
#page{display:none; flex-direction: column; width:99%; height:99%;}
#page{
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    transform-origin: center center;
}
.info{flex:0.1; display: none; flex-direction: column;}
.info .title{flex:0.1; font-size:13px; align-items: center; display: flex; opacity: 0.5;}
.settings{flex:0.9; display:flex; justify-content: center; overflow-y: auto; padding:1px; overflow-x: hidden;}
.main{flex:1; display:flex; justify-content: center; align-items: center; flex-direction: column; width:100%; height:100%;margin:0 0;padding:0px;}
.control{flex:0; display:none}
.prop{height:100%; width:98%;display:flex; gap: 0px;flex-direction: column;}
.prop{
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    transform-origin: center center;
}
.header{flex:0.07; display:flex; align-items:center;margin-bottom:0px; width:100%}
.header h1{grid-column: 1; font-size:17px;margin:0;font-weight:700;letter-spacing:.2px;  }
.controlbar{display:grid; grid-template-columns: 1fr 1fr; width:100%; height:65%; border:1px rgba(255, 255, 255, 0.334) solid; border-top-left-radius: 0px; border-bottom-right-radius: 0px; background-color: #2c3d6f;}
.projectbar{height: 100%; display:flex; justify-content: left;}
.projectbar .content-conf-bar{
    display:flex;
    flex-direction: row;
    position: relative;
    flex:0.8;
}
/*.projectbar .view-input{
    display:none;
    position: absolute;
    border:1px rgba(255, 255, 255, 0.427) solid;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    z-index:55;
}*/

.projectbar-mobile{height: 100%; display:none; grid-column: 1;}
.projectbar-mobile .view-btn{
    position:relative;
    flex:1;
    display:flex;
    justify-content: center;
    align-items: center;
    border-right: 1px rgba(255, 255, 255, 0.427) solid;
    user-select: none;
    cursor:pointer;
}
.projectbar .view-input{
    display:none;
    position: absolute;
    border:1px rgba(255, 255, 255, 0.427) solid;
    top: 100%;
    right:0px;
    width:170px;
    max-width: 65%;
    height: 85%;
    z-index: 55;
}
.toolbar-mobile{height: 100%; display:none;}
.toolbar-mobile .view-btn{
    flex:1;
    display:flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor:pointer;
}
.view-input.toggle-input{
    display:flex;
}
#profile-btn{
    display:none;
    flex:0.1;
    border-left:1px rgba(255, 255, 255, 0.427) solid;
}
.toolbar{grid-column: 2;  margin-left:0px;display:grid;gap:8px; width:100%; height: 100%; align-items: center; grid-template-columns: 1fr;}
.toolbar .view-btn{display:flex; background-color: #4facfe76;  min-width: 0; height:100%; align-items: center; justify-content: left;    padding:0px; cursor:pointer}
.projectbar .view-btn{width:50%; background-color: #193d5c; height:100%; display:flex; align-items: center; justify-content: center; cursor:pointer; position:relative}
.view-btn span{white-space: nowrap; font-size:11px}
.view-label{display:flex; flex:0.2; align-items: center; justify-content: center; height:100%; margin-left:15px; margin-right:15px; cursor:default}

.viewbar{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    width:100%;
    height:100%;
    background-color: #4facfe76;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    

}

.viewbar #block-view-btn{
    border-right: 1px rgba(255, 255, 255, 0.65) solid;
}
.viewbar #code-view-btn{
    border-bottom-right-radius: 0px;
    border-right: 1px rgba(255, 255, 255, 0.65) solid;
}
.viewbar #doc-view-btn{
    border-top-left-radius: 0px;
    justify-content: center;
    
}
#doc-view-btn i{
    height: 100%;
    font-size:25px;

}
.projectbar .importBtn{
    border-left: 1px white solid;
    border-right: 1px white solid;
    background-color: #1a2a3947;

}
.projectbar .exportBtn{
    border-right: 1px white solid;
    background-color: #1a2a3947;
}
.projectbar .saveBtn{
    background-color: #1a2a3947;
}
#menu-btn{background:linear-gradient(to right, transparent 5%, #ffa39e6c 100%); display:none; border-color: rgba(255, 255, 255, 0.329); border-radius: 0px; user-select: none; cursor:pointer}
.btn{background:var(--card);border:1px solid var(--line);padding:8px 12px;border-radius:10px;color:var(--text);cursor:pointer;transition:transform .08s ease, background .2s ease, border-color .2s ease;}
.btn:hover{background:#18224a;border-color:#39457c;}
.btn:active{transform:scale(0.98);}
.content-area{flex:1; height:100%}
.tree{height:1500px;position:relative;padding:16px;}
.node{position:relative;padding-left:24px;padding-top:12px;}
.node.has-children::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:1px;background:var(--line);}
.label{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.03);transition:background .2s ease,border-color .2s ease,transform .12s ease;}
.label:hover{background:#18224a;border-color:#39457c;}
.toggle{width:18px;height:18px;border-radius:8px;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.04);border:1px solid var(--line);transition:transform .12s ease, background .2s ease, border-color .2s ease;font-size:12px;user-select:none;}
.toggle:hover{background:#1d2a5a;border-color:#4a5796;}
.node-title{font-weight:700;letter-spacing:.2px;}
.muted{color:var(--muted);font-size:12px;}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);line-height:1.7;}
.badge.type{border-color:rgba(110,168,255,.5);}
.badge.res{border-color:rgba(140,233,154,.5);}
.children{display:flex;flex-direction:column;gap:12px;padding-left:24px;border-left:1px dashed var(--line);}
.children.collapsed{display:none;}

/*.searchbar input{flex:1;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);}*/
.footer{border-radius:0px;  background:#121a33; color:#e6ebff; display:flex; z-index:1; justify-content: center; gap:0px; width:100%;}
.footer input{padding:10px; border-radius:0px; border-top-left-radius: 0px; border:1px solid #39457c; background:#121a33; color:#e6ebff; font-size:14px;}
.footer i{
    height:100%;
    display: flex;
    align-items: center;
    font-size:20px;
}
.footer .author{flex:0.15; white-space: wrap; display:flex; justify-content: center; align-items: center; font-size:13px}
.author span a {
    outline: none;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    color:white;
}

.author span a:hover {
    color: rgb(167, 219, 235); 
}

.input-wrapper {
    position: relative;
    flex: 0.85;
    display: flex;
}

.expression-input {
    padding: 0;
    background: #121a33;
    border: 1px solid #39457c;
    color: #e6ebff;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 0;
}

.send-btn {
    flex: 0 0 35px;
    background: transparent;
    border: 1px solid #39457c;
    color: #39457c;
    cursor: pointer;
    font-size: 22px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-wrapper:focus-within .send-btn, 
.send-btn:hover {
    color: #00d4ff;
    text-shadow: 0 0 1px rgba(0, 212, 255, 0.8);
}

.send-btn:focus:not(:hover) {
    color: #39457c;
    text-shadow: none;
}

.expression-input:focus {
    outline: none;
    border-color: #00d4ff;
    box-shadow: 0 0 1px rgba(0, 212, 255, 0.2);
}
.timer{flex:0.15;display:flex; flex-direction: row; align-items: center; justify-content: center; font-size:11px;}
.inner-timer{
    display:flex; justify-content: center; align-items: center; flex-direction: row; gap:5px; 
}
.inner-timer span{
    cursor:pointer
}
.inner-timer:hover{
    font-weight: bolder;
}
.inner-timer i{
    cursor:pointer;
    font-size:15px;
}

.msg{position: absolute; opacity: 0.3; z-index: 99;}

.cm-overlay{
    display:flex;
    justify-content: right;
    position: absolute;
    left: 0;
    right: 0;
    user-select: none;
    pointer-events: none;
    z-index:5;

}
#process-overlay {
    display:none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(0px);
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 1000;
}

.dots {
  display: flex;
  gap: 8px;
}

.dots div {
  width: 16px;
  height: 16px;
  background-color: #ff4081;
  border-radius: 50%;
  animation: bounce 1.2s infinite ease-in-out;
}

.dots div:nth-child(2) { animation-delay: 0.2s; }
.dots div:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); opacity: 1; }
  40% { transform: scale(1); opacity: 1; }
}
.highlight-overlay {
    animation: highlight-draw 7s ease-in-out forwards;
}

@keyframes highlight-draw {
    0% {

        border-top: 1px rgba(255, 255, 255, 0.251) solid;
        border-bottom: 1px rgba(255, 255, 255, 0.251) solid;

    }

    14% {
  
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        border-top: 1px rgba(255, 255, 255, 1) solid;
        border-bottom: 1px rgba(255, 255, 255, 1) solid;

    }

    86% {

        box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        border-top: 1px rgba(255, 255, 255, 0.450) solid;
        border-bottom: 1px rgba(255, 255, 255, 0.451) solid;

    }
 
    100% {

        box-shadow: 0 0 0px rgba(255, 255, 255, 0);
        border-top: 1px rgba(255, 255, 255, 0.117) solid;
        border-bottom: 1px white rgba(255, 255, 255, 0.117) solid;

    }
}
#history-overlay{
    position: absolute;
    width: 200px;
    height:300px;
    display:none;
    border:1px white solid;
    background-color: #071d2c;
    color:white;
    z-index:99;
}
/*.cm-lock-overlay {
    display:flex;

    justify-content: right;
    
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0);
    border-left: 3px solid rgba(200, 0, 0, 0);
    backdrop-filter: blur(0.2px);
    pointer-events: none;
    z-index:999;
    border-top:rgba(255, 0, 0, 0.5) 1px solid;
}
.overlay-content{
    width:auto;
    display:flex;
    flex-direction: column;
    width:30%;
    

}
.overlay-content .overlay-label-outter{
    display:flex;
    justify-content: left;
    white-space: nowrap;

}
.overlay-content .overlay-label{

    background: rgba(255, 255, 255, 0.478);
    
}
.overlay-content .overlay-label-content{


    border-bottom:rgba(255, 0, 0, 0.5) 1px solid;
    
}*/


/*.cm-lock-overlay::after {
  content: "✅ Aktiválva";
  position: absolute;
  top: 4px;
  right: 10px;
  font-size: 11px;
  color: #a00;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: bold;
}*/
.CodeMirror-vscrollbar::-webkit-scrollbar{
    display:none;
}
.unique-function-row{margin:5px}
.unique-function-row .unique-function{z-index:99; white-space: nowrap; display:flex; gap:0px; border:0px rgba(255, 255, 255, 0.434) solid; cursor:default;  opacity: 1;}
.unique-function .unique-name{
    display:flex;
    align-items: center; justify-content: center;   
    opacity: 0.8; cursor:pointer; background-color: #0b10207d;
}
.unique-function .unique-name .unique-name-tag{
    color:rgb(117, 244, 233);
}
.unique-function .unique-name .unique-name-text{
    font-style: italic;
}
.unique-function .control-btn {border:1px rgba(255, 255, 255, 0.318) solid; background-color: #0b10207d; opacity: 0.6; cursor:pointer;}
.unique-function .control-btn:hover, .func-activation span:hover{
    background-color: #193d7b80;
}
.unique-function .func-activate-btn{
    margin-left:0px;
}
.unique-function .func-terminal{
    display:flex; justify-content: center; align-items: center; margin-left:5px;
}
.unique-function .func-terminal i{
    display:flex; align-items: center;
}
.toolbox-unique-function-row{
    border:1px rgba(255, 255, 255, 0.573) solid;
    background-color: rgba(255, 0, 0, 0.29);
}
.toolbox-unique-function-row .title{
    display:flex; justify-content: center; align-items: center;
}
.toolbox-unique-function-row .title i{
    flex:0.1;
    cursor:pointer;
}
.toolbox-unique-function-row .title .title-text{
    flex:0.7;
}
.toolbox-unique-function-row .title .title-id{
    flex:0.2; font-style: italic; opacity: 0.7;
}
.toolbox-unique-function-row .title span{
    display:flex; justify-content: center; align-items: center;
}
.toolbox-unique-function-row .func-activation{
    display:flex;
    flex-direction: column;
    
}
.toolbox-unique-function-row .func-activation span{
    cursor:pointer;
    border:1px rgba(255, 255, 255, 0.201) solid;
    justify-content: left;
    display:flex;
    gap:15px;
}
.func-activate-btn, .func-deactivate-btn{
    display:flex; justify-content: center; align-items: center;
    
}
.control-btn{
    padding:4px;
}

.msg-area{flex:0.8; display:flex; align-items: center; justify-content: center;}
.temp-area{flex:0.1}
.view-btn:hover{background:linear-gradient(to left, transparent 5%, #4facfe76 100%);}
#menu-btn:hover{background:linear-gradient(to right, transparent 5%, #ffc7c46c 100%);}
.console .bi-terminal:hover
{
    background: linear-gradient(115deg, #f093fb 0%, #f5576c 15%, #4facfe 65%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
    cursor: pointer;}
.view-btn-active{
    background:linear-gradient(to left, transparent 5%, #ff880076 100%) !important;
    
}
.settings-tree{
    padding:0px; margin:0px;
    width:100%;
    text-align: center;
}
.settings-tree ul {
    list-style: none;
    padding:0px;
    padding-top:0px; padding-bottom:0px;
    margin:0px;
    width:100%;
    border:1px rgba(255, 255, 255, 0.352) solid
}
.settings-tree li{
    padding:10px;
    font-size:12px;
}

.settings-tree summary {
list-style: none;
padding:15px;
}
.settings-tree summary::-webkit-details-marker {
display: none;
}
.settings-tree summary::marker {
display: none;
}
.nav-btn-main{
    background-color:#0073ff49 ;
    cursor:pointer;
    user-select: none;
    border:1px white solid;
}
.nav-btn-main:hover{
    background-color:#348fff49;

}
.nav-btn-sub{
    background-color: #76b1fa49;
    cursor:pointer;
    user-select: none;
    border:1px white solid;
    margin:10px;
    font-size:12px;
}
.nav-btn-sub:hover{
    background-color: #98c5fd49;
}
.more-info-nav{
    margin:0px;
}
.more-info-nav span{
    font-size:13px;
}
.more-info-nav summary{
    cursor:pointer;
}
.cm-s-cobalt {
    height: 100%;
}
.func-state{
    display:flex;
    align-items: center;
    justify-content: center;
}
.bi-cpu{
    background:rgb(255, 0, 0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    opacity: 1;
}
.func-active{
    background: rgb(0, 255, 0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.func-inactive{
    background-color: red;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.blur-effect{
    filter:blur(2px);
}
.func-createBtn{
    cursor:pointer;
    background-color: #0a3571;
}
.func-createBtn:hover{
    background-color: #4053a5;
}

.block-area{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
}
.block-area-cmdbar{
    height: 5%;
    min-height: 5%;
    /*flex:0.05;*/
    border:1px white solid;
    border-bottom:none;
    display:flex;
    justify-content: right;
    flex-direction: row;
    border-radius:0px;border:1px solid var(--line);background:var(--card)
}
.block-area-workarea{
    height:100%;

    /*flex:0.75;*/
    border:1px rgba(255, 255, 255, 0.233) solid;
    position: relative;



}
.block-area-workarea:hover{
    border: 1px rgba(255, 255, 255, 0.144) solid;
}
.block-area-workarea-outter-layer{
    position: absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    display:flex;
    justify-content: right;
}
.block-area-workarea-inner-layer{
    position: absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    background-color: rgb(15, 29, 55);
}
.block-content{
    overflow-x:hidden; overflow-y: auto; position:relative; height:100%;
}
.block-content::-webkit-scrollbar{
    background-color: rgb(5, 19, 46);
    color:red;
}
.block-content::-webkit-scrollbar-thumb{
    background-color: rgb(135, 135, 135);
}
.block-area-terminal{
    
    /*transition: border-width 0.15s ease, box-shadow 0.15s ease;*/
}

.block-area-footer{
    height:5%;
    /*flex:0.05;*/
}
.block-area-information {
    display:flex; flex-direction: row; gap:7px;
    position: absolute;
    right: 0;
    top: 0px;
    z-index:1;
    margin:5px;
    margin-right:9px;
    cursor:pointer;
}
.block-area-information:hover{
    font-weight:bolder;
}
.block-area-msg{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);

}
.block-area-console{
    position: absolute;
    left:0px;
    bottom:0px;
    width: 65%;
    height: 100px;
    border: 1px solid #333;
    border-radius: 5px;
    background: #11111176;
    color: #0f0;
    font-family: monospace;
    z-index:1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

}
/*
.block-area-console-logbox{
    margin-left:5px;
    white-space: pre-line;
    overflow-y: auto;    
}
.block-area-console-logbox::-webkit-scrollbar{
    background-color: rgb(5, 19, 46);
    color:red;
}
.block-area-console-logbox::-webkit-scrollbar-thumb{
    background-color: black;
}*/
.terminal{
    position:relative;
    height:15%;
    max-height: 50%;

    flex-shrink: 0;
    /*transition: border-width 0.15s ease, box-shadow 0.35s ease;*/
    /*border-top: 15px solid rgb(56, 3, 3);*/
    background-color: #303030;
}
@keyframes border-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.terminal-dragging {
    border-top: 3px solid transparent !important;
    border-image: linear-gradient(90deg, #ff0000, #ff6200, #ff0000) 1;
    background-clip: padding-box;

    border-top: 2px solid #00f2ff !important;
    background-color: #30303000;

    transition: all 1.5s ease;
}
.workarea-dragging {
    background-clip: padding-box;
    filter: drop-shadow(0 -3px 6px rgba(255, 98, 0, 0.5));
    border-bottom: 2px solid #00f2ff !important;
    background-color: #30303000;

    transition: all 1.5s ease;
}
.terminal-overflowed{
    background-color: rgb(15, 29, 55);
}
.fixed-terminal {
    display:flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background-color: #393939;
    /*background-color: #39393943;*/
    /*border-top: 15px solid rgb(56, 3, 3);*/

    box-sizing: border-box;
}
.draggable-terminal{
    position: relative;
    flex: 0 0 15px;  /* flex-grow:0, flex-shrink:0, basis:15px */
    background-color: #343434;
    overflow: visible;
    transition: box-shadow 0.35s ease;


}
.title-terminal{
    position: absolute;
    top:7.5px;
    left:15px;
    height:12px;
    line-height: 12px;
    transform: translateY(-50%);
    color:white;
    font-size:12px;
}
.drag-handle{
    z-index:55;
}
.draggable-terminal.is-collapsed {
    box-shadow: 
        inset 0 -15px 0 0 rgb(56, 3, 3), 
        inset 0 7px 4px rgba(2, 40, 255, 0.411),
        0 10px 25px rgba(21, 180, 212, 0.8);
}
.drag-handle i {
    position: absolute;
    top: 7.5px;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 25px;
    line-height: 25px;
    font-size: 25px;
    z-index: 99;

}
.interactable-terminal{
    position: relative;
    flex: 1 1 auto;
    
}
.outter-terminal{
    position: absolute;
    
    width:100%; height:100%;
}
.inner-terminal{
    display: flex;
    position:absolute;
    top:0; left:0;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #343434; 
    color: #ffffffb0;
    font-family: monospace;
    font-size: 14px;
    padding: 0px;
    overflow-y: auto;
    border:1px rgba(255, 255, 255, 0.367) solid;
    box-sizing: border-box;
}
.inner-terminal::-webkit-scrollbar{
    background-color: rgb(5, 19, 46);
    color:red;
}
.inner-terminal::-webkit-scrollbar-thumb{
    background-color: rgb(135, 135, 135);
}
.terminal .outter-terminal .minimize-btn{
    display:flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    font-size:25px;
    right: 25px;
    top: -12.5px;
    width:25px;
    height:25px;
    z-index:99;

}
.terminal .innter-terminal .terminal-row{
    margin-left:10px;

}
.terminal-row-glow-success{
    animation: new-row-glow-success 1.5s ease-out forwards;
}
.terminal-row-glow-warning{
    animation: new-row-glow-warning 1.5s ease-out forwards;
}
.terminal-row-glow-error{
    animation: new-row-glow-error 1.5s ease-out forwards;
}
.terminal-event-glow{
    animation: new-terminal-event-row 1.5s ease-out forwards;
}
.terminal-event-row{
    margin-left:35px;
    width:fit-content;
}
.terminal-event-btn{
    border:1px rgba(255, 255, 255, 0.241) solid;
    background-color: #8081824e;
    display:flex;
    gap:7px;
    user-select: none;
    cursor:pointer;
    
}
.terminal-event-btn:hover{
    background-color: #96989b63;
}
@keyframes new-row-glow-success {
    0% {
        opacity: 0;
        background-color: rgba(0, 255, 0, 0.2); 
        text-shadow: 0 0 10px rgba(0, 255, 0, 1), 0 0 20px rgba(0, 255, 0, 0.8);
        transform: translateX(-5px);
    }
    20% {
        opacity: 1;
        background-color: rgba(0, 255, 0, 0.1);
        text-shadow: 0 0 15px rgba(0, 255, 0, 1), 0 0 30px rgba(0, 255, 0, 0.6);
    }
    100% {
        opacity: 1;
        background-color: transparent;
        text-shadow: 0 0 0px transparent;
        transform: translateX(0);
    }
}
@keyframes new-row-glow-warning {
    0% {
        opacity: 0;
        background-color: rgba(255, 208, 0, 0.2);
        text-shadow: 0 0 10px rgba(0, 255, 0, 1), 0 0 20px rgba(255, 149, 0, 0.8);
        transform: translateX(-5px);
    }
    20% {
        opacity: 1;
        background-color: rgba(255, 208, 0, 0.1);
        text-shadow: 0 0 15px rgba(255, 149, 0, 1), 0 0 30px rgba(255, 149, 0, 0.6);
    }
    100% {
        opacity: 1;
        background-color: transparent;
        text-shadow: 0 0 0px transparent;
        transform: translateX(0);
    }
}
@keyframes new-row-glow-error {
    0% {
        opacity: 0;
        background-color: rgba(255, 0, 0, 0.2);
        text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0, 0.8);
        transform: translateX(-5px);
    }
    20% {
        opacity: 1;
        background-color: rgba(255, 0, 0, 0.1);
        text-shadow: 0 0 15px rgb(255, 0, 0), 0 0 30px rgba(255, 0, 0, 0.6);
    }
    100% {
        opacity: 1;
        background-color: transparent;
        text-shadow: 0 0 0px transparent;
        transform: translateX(0);
    }
}
@keyframes new-terminal-event-row {
    0% {
        opacity: 0;
        background-color: rgba(255, 255, 255, 0.4); 
        filter: brightness(0.4); 
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        transform: translateX(-10px);
    }
    40% {
        opacity: 1;
        filter: brightness(0.7);
        background-color: rgba(255, 255, 255, 0.2);
        text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 255, 255, 0.8);
    }
    100% {
        opacity: 1;
        filter: brightness(0.9);



    }
}
.editor-area{
    width:100%;
    height:100%;
    display:none;
    flex-direction: column;
}
.editor-area-cmdbar{
    height: 5%;
    min-height: 5%;
    border:1px white solid;
    border-bottom:none;
    display:flex;

    flex-direction: row;
    border-radius:0px;border:1px solid var(--line);background:var(--card)
}
.editor-area-cmdbar-left{
    flex:1;
    display:flex; justify-content: left; align-items: center;
    margin-left:10px;
}
.undo-btn, .redo-btn{
    display:flex; align-items: center; justify-content: center;
    background-color: #0a2d71; border:1px rgba(255, 255, 255, 0.507) solid;
    cursor: pointer;
    
}
.colorize-btn{
    display:flex; align-items: center; justify-content: center;
    background-color: #0a2d71; border:1px rgba(255, 255, 255, 0.507) solid;
    margin-left:15px;
    cursor: pointer;
}
.controls-btn{
    display:flex; align-items: center; justify-content: center;
    background-color: #0a2d71; border:1px rgba(255, 255, 255, 0.507) solid;
    cursor: pointer;
}
.cmd-btn{
    flex:100px;
    max-width: 100px;
    min-width: 0;
}
.undo-btn:hover, .redo-btn:hover, .colorize-btn:hover, .controls-btn:hover{
    background-color: #0a4871;
}
.outter-icon{
    display:flex; align-items: center; justify-content: center;
    width: 100%;
    height: 100%;
}
.slash-icon {
    position: relative;
    display: inline-block;
}

.slash-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -40%;
    width: 180%;
    height: 2px;
    background: white;
    transform: rotate(-45deg);
    transform-origin: center;
}
.popup-wrapper {
    position: relative;   
}
.popup {
    position: absolute;
    z-index:99;
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.popup-wrapper:hover .popup {
    opacity: 1;
}
.editor-area-cmdbar-right{
    flex:0.3;
    display:flex; justify-content: right;
}
.editor-area-workarea{
    height: 100%;
    border:1px rgba(255, 255, 255, 0.233) solid;
    position: relative;
}
.grid-bg{
  background-color: var(--bg, #0b1020);
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;   /* cellaméret */
  background-position: 0 0;
}
.editor-area-workarea:hover{
    border: 1px rgba(255, 255, 255, 0.144) solid;
}
.editor-area-workarea-outter-layer{
    position: absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    display:flex;
    justify-content: right;
}
.editor-area-workarea-inner-layer{
    position: absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    z-index:0;
}
.CodeMirror-vscrollbar::-webkit-scrollbar{
    background-color: rgb(5, 19, 46);
    color:red;
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb{
    background-color: rgb(135, 135, 135);
}
.CodeMirror-hscrollbar::-webkit-scrollbar{
    background-color: rgb(5, 19, 46);
    color:red;
}
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb{
    background-color: rgb(135, 135, 135);
}
.editor-area-terminal{

    
}
.editor-area-footer{
    height: 5%;
}
.doc-area{
    display:none;
    overflow: auto;
    width: 100%;
    height: 100%;
    justify-content: center;

}
.doc-area::-webkit-scrollbar{
    background-color: rgb(5, 19, 46);
    color:red;
}
.doc-area::-webkit-scrollbar-thumb{
    background-color: rgb(135, 135, 135);
}
.doc-area > .project-doc{
    position: relative;
    height:700px;
    width:95%;
}
.toolbox{
    display:none;
    flex-direction: column;
    width:250px;
    height:550px;
    min-height: 75%;
    border: 1px rgba(255, 255, 255, 0.438) solid;
    border-radius: 5px;
    z-index:4;
    background-color: #031843;
    box-shadow:
        0 2px 5px rgba(3, 158, 205, 0.247),
        0 0 2px rgba(3, 39, 220, 0.167);
    overflow-y: auto;
}
.toolbox::-webkit-scrollbar{
    background-color: rgb(5, 19, 46);
    color:red;
}
.toolbox::-webkit-scrollbar-thumb{
    background-color: rgb(135, 135, 135);
}
.toolbox summary{
    cursor:pointer;
}
.toolbox-nav{
    flex:0.3;
    display:flex;
    flex-direction: column;
    align-items: center;
    margin-top:25px;
    gap:45px;
}
.toolbox-nav-btn{
    flex:1;
    display: flex;
    width:85%;
    justify-content: center;
    align-items: center;
    background-color: #03224e;
    border-radius: 5px;
    border: 1px rgba(255, 255, 255, 0.438) solid;
    cursor:default;
    user-select: none;
}
.toolbox-nav-btn:hover{
    background-color: #03344e;
}
/*
.toolbox{
    display:none;
    flex-direction: column;
    width:250px;
    height:550px;
    min-height: 75%;
    border:1px white solid;
    z-index:4;
    background-color: #0f3f9e;
}
.toolbox .title{flex:0.05; display:flex; justify-content: center; align-items: center; height:20px}
.toolbox-content{flex:0.95; overflow-y: auto; border:1px white solid;}
.toolbox nav summary{
    text-align: center;
}
.toolbox .toolbox-title{
    border:1px white solid;
    background-color: #0b1020;
    color:white;
    border-bottom:none;
    cursor: pointer;
}
.toolbox-content{

}
.toolbox-title{
    flex:0.05;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #121a33;
}
.toolbox-content{
    height: auto;
    position: relative;
    overflow-y: auto;
    flex:1;
}
*/
.toolbox-btn{
    flex:0.05;
    display:flex;
    justify-content: center;
    align-items: center;
    border:1px white solid;
    background-color: #0a3571;
    cursor:pointer;
}
.toolbox-btn:hover{
    background-color: #4053a5;;
}






@media only screen and (max-width:600px){
    .fixed-terminal{
        border-top-width: 1px;

    }
    .fixed-terminal::after {
        content: "";
        cursor:default;

    }
    .block-area-console{
        width:100%;
    }
    .toolbox{width:50%}
    .prop{
        width:95%;
    }
    .login-popup{
        width:90%; height:80%;
    }
    .code-btn{
    left:85%;
    }
    .info, .control{
    flex:0;
    display:none
    }
    .main{
    flex:1;
    }
    .header{
        grid-template-columns: 0fr 1fr;

    }
    .header h1{
    display:none
    }
    .cmdbar{
        font-size:12px;
        gap:9px;
    }
    .cmd-btn{
        height: 75%;
        margin:0;
        flex:50px;
        flex-direction: column;
    }
    .cmd-btn i{
        font-size:15px;
    }
    .cmd-btn span{
        
        font-size:0.7em
    }
    .cmdbar .left{
        margin:0;
        flex:1;
    }
    .cmdbar .right{
        flex:0.1;
    }
    .cmdbar .right .toolbox-btn{
        flex:1;
    }
    .footer{
        z-index:3;
    }
    .footer .input-wrapper{
        flex:0.85;
    }
    .footer .author{
        font-size:11px;
    }
    .fx{
        flex:0.1;
    }
    #tree-view-btn{

    }
    #menu-btn{
        display:none;
    }
    .toolbar{
        display:none;
        grid-template-columns: 0.3fr 1fr;
        height:95%
    }
    .settings{
        overflow-y: auto;
    }
    .controlbar{
        grid-template-columns: 1fr 1fr
    }
    .projectbar{
        
        
    }
    .projectbar{
        display:none;
    }
    .projectbar-mobile{
        display:flex;
        flex:0.5;
    }
    .toolbar-mobile{
        display:flex;
        flex:0.5;
    }
}