body {
	background: #20201F;
	color:#fff;
	}
	
h2 {
	padding:2px;
	margin:0;
	}
	
.menuBtn {
	background: #20201F;
	border:none;
	padding:8px;
	margin:0;
}

.menuBtn:hover {
	background: #272727;
	border-radius: 5px;
	}

#editor {
    flex: 1;              
    height: 100%;
	min-width: 50%;
	}

button {
    padding: 10px 20px;
    margin: 5px;
	color: white;
	}

#layout {
    display: flex;
    width: 100%;
    height: 600px;
	}

#sidePanel {
    width: 250px;         
    background: #1e1e1e;   
    padding: 10px;
    border-right: 1px solid #444;
    overflow-y: auto;
	}

.SideBar-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
	}

.btn-large {
    width: 120px;
    height: 83px;
    font-size: 16px;
    background: #3a3a3a;
    border: 1px solid #555;
    cursor: pointer;
    border-radius: 4px;
	}
.btn-large i {
	font-size: 32px;
	display:block;
}
.btn-small-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
	}

.btn-small {
    width: 100px;
    padding: 8px;
    font-size: 13px;
    background: #2e2e2e;
    border: 1px solid #555;
    color: white;
    cursor: pointer;
    border-radius: 4px;
	}

.btn-large:hover,
.btn-small:hover {
    background: #4a4a4a;
}

.sidebar-line {
    border: none;
    border-top: 1px solid #555;
    margin: 10px 0;
	}

#mainMenuBtn {
    display: none;
	}

#mnuEdit, #mnuSearch, #mnuSyntax {
	display:none;
	}

.sidebar-select-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar-label {
    font-size: 12px;
    color: #ccc;
    margin-left: 2px;
}

.sidebar-select {
    width: 220px; 
    background: #1e1e1e;
    color: #fff;
    border: 1px solid #555;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="12" width="12" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 12,0 6,7"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

.sidebar-select option {
    background: #1e1e1e;
    color: #fff;
}

#statusBar {
    background: #1e1e1e;
    color: #FFF;
    font-family: Consolas, monospace;
    border-top: 1px solid #444;
}

.status-row {
    padding: 4px 8px;
    border-top: 1px solid #0F0F0F;
	height: 24px;
}

.status-row:last-child {
    border-bottom: none;
	}

#recentFilesHeader {
    font-size: 12px;
    color: #ccc;
    margin: 5px 0 8px 2px;
	}

.mru-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2a2a2a;
    border: 1px solid #444;
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
	}

.mru-item:hover {
    background: #3a3a3a;
	}

.mru-icon {
    font-size: 10px;
    color: #bbb;
	}

.mru-name {
    font-family: Consolas, monospace;
    font-size: 10px;
}

.tooltip {
    position: absolute;
    background: rgba(20, 20, 20, 0.95);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 9999;
    border: 1px solid #444;
	}

#sidePanel::-webkit-scrollbar {
    width: 10px;
	}

#sidePanel::-webkit-scrollbar-track {
    background: #272727;
	}

#sidePanel::-webkit-scrollbar-thumb {
    background: #272727;
    border-radius: 5px;
	}

#sidePanel::-webkit-scrollbar-thumb:hover {
    background: #20201F;
	}

#sidePanelWrapper {
    width: 260px;
    display: block;
	}

.sidePanel-Menu {
	background: none;
	    border:none;
        display: block;
        width: 100%;
        padding: 10px;
        font-size: 18px;
        text-align: left;
		color:#fff;
		display: block;
    }

#sidePanelWrapper.show {
        display: none;
    }

/* Mobile */
@media (max-width: 768px) {

    #sidePanelWrapper {
        display: none;
    }
	
    /* po kliknięciu pokazujemy */
    #sidePanelWrapper.show {
        display: block;
    }

	#layout {
    display: block;
    width: 100%;
    height: 600px;
	}
	
    #mainMenuBtn {
        display: inline-block;
    }

    #menuItems {
        display: none;
        flex-direction: column;
        padding: 8px;
		border: 1px solid #0F0F0F;
		border-radius:10px;
    }

    #menuItems.show {
        display: flex;
    }

    #menuBar .menuBtn {
        width: 100%;
        text-align: left;
    }
}