body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #111;
}

body, button {
    margin: 0;
    padding: 0;
}

/* Header styles */
header {
    width: 100%;
    background-color: #f0f0f0;
}

p {
    margin: 0;
}

img {
    display: none;
}

.container img {
    display: block !important;
}

.header-container {
    display: flex;
    background: #323233;
}

.header-container button {
    padding: 5px 20px;
    background-color: #323233;
    border: 0;
    cursor: pointer;
    color: #ffffff98;
}

.header-container button:hover {
    background-color: #474747;
}

/* Modal============== */

.modal {
    width: 100%;
    display: none;
    z-index: 9999;
    align-items: center;
    color: #fff;
    padding: 10px;
}

.modal li, .modal ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: inline;
}

.modal button {
    padding: 5px 10px;
    background-color: #042340;
    color: #fff;
    border: 0;
    cursor: pointer;
    border-radius: 5px;
}

.modal span {
    color: #a7da29;
}

#publish2 {
    display: none;
}

.container-editor {
    display: flex;
}

.cssInfo {
    padding: 3px 10px 5px 10px;
    background-color: #021323;
}

.cssInfo span {
    color: #a7da29;
}

.left-section, .right-section {
    width: 50%;
}

/* Tab styles */
.tab-container {
    display: flex;
    background-color: #252526;
}

.tab-container p {
    flex: 1;
}

.tab-container #runID {
    background-color: #252526;
    color: #fff;
    border: 0;
    outline: 0;
}

.tab-container button:last-child {
    background-color: #c79c1a;
    color: #fff;
    font-weight: bolder;
    border: 0;
    padding: 5px 15px;
    cursor: pointer;
}

.tab-button {
    padding: 5px 15px;
    text-align: center;
    background-color: #2D2D2D;
    cursor: pointer;
    border: none;
    outline: none;
    color: #fff;
}

.tab-button:hover {
    background-color: #252526;
}

#tab3.active {
    background-color: #0D1117;
}

#tab1.active {
    background-color: #396FCF;
}

#tab2.active {
    background-color: #1D2021;
}

#tab4.active {
    background-color: #031323;
}

.tab-content {
    display: none;
    color: #fff;
}

#tab-content3 {
    padding: 20px;
}

.hljs-deletion, .hljs-number, .hljs-quote, .hljs-selector-class, .hljs-selector-id, .hljs-string, .hljs-template-tag, .hljs-type {
    color: #ffffffa8 !important;
}

.hljs {
    color: #a7da29 !important;
}

.hljs-punctuation, .hljs-tag {
    color: rgba(48, 135, 193, 1) !important;
}

/* Responsive styles */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .left-section, .right-section {
        width: 100%;
    }
}

.copy-button {
    padding: 0px 10px;
    margin-top: 5px;
    cursor: pointer;
}

/* Make .right-section fill entire vertical screen height */
.right-section {
    height: 100vh;
    background-color: #eee;
    position: relative;
    overflow: hidden;
    border-bottom: 4px solid #111;
}

.right-section iframe {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.title {
    padding: 2px 5px;
    color: #fff;
    font-weight: 500;
    display: flex;
    background-color: #252526;
    border-bottom: 10px solid #396FCF;
}

.left-section {
    background-color: #1E1E1E;
}

/* CSS for resizable divider */
.divider-line {
    position: relative;
    width: 15px;
    cursor: col-resize;
    background-color: #ddd;
}

.divider-line:hover {
    background-color: #ccc;
}

#editor, #editor-css, #jsoneditor {
    width: 100%;
    height: 100vh;
}