/*
    DEMO STYLE
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";

body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
}
#content{
    width: 100%;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    height: 84px;
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 10px 6px 5px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

.admin-stat {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 16px;
    text-align: center;
}
.admin-stat-num {
    font-size: 2.4em;
    font-weight: 600;
    color: #2a73b6;
    line-height: 1.1;
}
.admin-stat-label {
    color: #888;
    margin-top: 4px;
    font-size: 0.95em;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding: 24px 20px;
    background: #6d7fcc;
}
#sidebar .sidebar-header h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    font-size: 1.6em;
}
#sidebar .sidebar-header .sidebar-tagline {
    margin: 0;
    font-size: 0.75em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.3px;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.7;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1em;
    font-weight: 500;
    display: block;
}
#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}

/* Main feature categories — icon via .nav-ico svg */
#sidebar ul.components > li > a[data-toggle="collapse"] {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
#sidebar .nav-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
}

/* Sub-dropdown items — small dot */
#sidebar ul ul a {
    font-size: 0.88em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}
#sidebar ul ul a::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}
/* Active sub-item highlight */
#sidebar ul ul li.active a {
    background: rgba(255, 255, 255, 0.15);
    font-weight: 600;
}
#sidebar ul ul li.active a::before {
    background: #fff;
}

a[data-toggle="collapse"] {
    position: relative;
}

a[aria-expanded="false"]::after, a[aria-expanded="true"]::after {
    content: '\e259';
    display: block;
    position: absolute;
    right: 20px;
    font-family: 'Glyphicons Halflings';
    font-size: 0.6em;
}
a[aria-expanded="true"]::after {
    content: '\e260';
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article, a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    SIDEBAR FOOTER STYLE
----------------------------------------------------- */
.sidebar-footer {
    margin-top: auto;
    padding: 18px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.sidebar-footer-brand {
    font-weight: 700;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}

.sidebar-footer-muted {
    color: rgba(255, 255, 255, 0.4);
}

html.dark .sidebar-footer {
    border-top-color: #444c56;
    color: #8b949e;
}

html.dark .sidebar-footer-brand {
    color: #cdd9e5;
}

html.dark .sidebar-footer-muted {
    color: #6e7681;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}

/* ---------------------------------------------------
    ELECTRE FORM
----------------------------------------------------- */

/* .buttom-electre-form input[type="number"] {
    width: 64px;
}

.calculation {
    background-color: #FAFAFA;
    border: 1px solid black;
    width: 100%;
    height: 100%;
    padding: 4px;
    margin: 4px;
    max-height: 128px;
    overflow: auto;
    display: none;
}

.electre-form {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 10px 6px 5px rgba(0, 0, 0, 0.1);

    font-size: 16;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.electre-form td {
    padding: 4px;
}

.electre-form input[type="file"] {
    padding: 4px;
}

.electre-form button {
    margin-top: 8px;
    margin-left: 4px;
}

.electre-result {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 10px 6px 5px rgba(0, 0, 0, 0.1);

    font-size: 16;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.electre-result div, span {
    padding: 8px;
}

.electre-result-title {
    font-size: 24;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;

    margin-top: -20px;
    color: black;
}

.flexed {
    display: flex;
    align-items: center;
}

.matrix td {
    border: 0.5px solid black;
    padding: 2px 8px;
}

.title-electre-form {
    font-weight: 500;
    min-width: 42px;
}

.top-electre-form {
    width: 100%;
} */


/* ---------------------------------------------------
    PNG TO JPG
----------------------------------------------------- */

/* h1 {
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0;
  }

  form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 500px;
    margin: 0;
    background-color: #fff;
    border: 1px solid #ffffff;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

input[type="file"] {
    width: 50%;
    padding: 10px;
    border: 1px solid #ccc;
    outline: none;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  button {
    background-color: #6d7fcc;
    color: #fff;
    font-weight: bold;
    padding: 10px 50px;
    border: none;
    cursor: pointer;
    margin-top: 10px;
  }


  .result {
    margin-top: 20px;
    text-align: center;
  }

  .result-image {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

  .result-message {
    font-size: 16px;
    line-height: 1.5;
  }


  .download-link {
    color: #6d7fcc;
    font-weight: bold;
  } */


/* /* ---------------------------------------------------
    Caesar Cipher
----------------------------------------------------- */

/* Style for the entire page */
/* body {
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    height: 100vh;
} */

/* Style for the form container */
/* .form_cipher {
    width: 100%;
    max-width: 500px;
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
} */

/* Style for the heading */
/* h1 {
    color: #333;
    text-align: center;
    margin-bottom: 30px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: bold; /* Added font weight for better visibility
} */

/* input[type="text"],
input[type="number"] {
    width: calc(100% - 16px);
    padding: 12px;
    margin-bottom: 20px;
    box-sizing: border-box;
    border: 2px solid #3498db;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
} */

/* input[type="text"]:focus,
input[type="number"]:focus {
    border-color: #6d7fcc;
    box-shadow: 0 0 10px rgba(109, 127, 204, 0.5);
} */
/*
input[type="radio"] {
    margin-right: 8px;
    appearance: none;
    border: 2px solid #3498db;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    transition: border-color 0.3s;
}

input[type="radio"]:checked {
    background-color: #6d7fcc;
    border-color: #6d7fcc;
}

input[type="submit"] {
    background-color: #6d7fcc;
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

input[type="submit"]:hover {
    background-color: #445580;
}


h4 {
    color: #333;
    margin-top: 20px;
    text-align: center;
}


.form_cipher {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
}

@media screen and (max-width: 500px) {
    form {
        padding: 20px;
    }
} */


.borda-matrix {
    width: 10%;
    border-collapse: collapse;
}

.borda-matrix th,
.borda-matrix td {
    border: 2px solid #0a0a0a;
    padding: 5px;
    text-align: center;
    width: 10px;
}

.borda-matrix th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.borda-matrix tr:nth-child(even) {
    background-color: #f9f9f9;
}

.borda-matrix tr:hover {
    background-color: #f2f2f2;
}

.borda-matrix th,
.borda-matrix td {
    color: black;
}

.table_a {
    border-collapse: collapse;
    font-family: sans-serif;
    color: #232323;
    width: 10px !important;
}
.borda-matrix1 {
    width: 10%;
    border-collapse: collapse;
}

.borda-matrix1 th,
.borda-matrix1 td {
    border: 2px solid #0a0a0a;
    padding: 8px;
    text-align: center;
    width: 10px;
}

.borda-matrix1 th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.borda-matrix1 tr:nth-child(even) {
    background-color: #f9f9f9;
}

.borda-matrix1 tr:hover {
    background-color: #f2f2f2;
}

.borda-matrix1 th,
.borda-matrix1 td {
    color: black;
}

.borda-matrix2 {
    width: 10%;
    border-collapse: collapse;
}

.borda-matrix2 th,
.borda-matrix2 td {
    border: 2px solid #0a0a0a;
    padding: 8px;
    text-align: center;
    width: 10px;
}

.borda-matrix2 th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.borda-matrix2 tr:nth-child(even) {
    background-color: #f9f9f9;
}

.borda-matrix2 tr:hover {
    background-color: #f2f2f2;
}

.borda-matrix2 th,
.borda-matrix2 td {
    color: black;
}


.borda-matrix3 th,
.borda-matrix3 td {
    border: 2px solid #0a0a0a;
    padding: 8px;
    text-align: center;
    width: 10px;
}

.borda-matrix3 {
    width: 10%;
    border-collapse: collapse;
}

.borda-matrix3 th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.borda-matrix3 tr:nth-child(even) {
    background-color: #f9f9f9;
}

.borda-matrix3 tr:hover {
    background-color: #f2f2f2;
}

.borda-matrix3 th,
.borda-matrix3 td {
    color: black;
}

#tableBody3{

}
.borda-matrix4 th,
.borda-matrix4 td {
    border: 2px solid #0a0a0a;
    padding: 8px;
    text-align: center;
    width: 10px;
}

.borda-matrix4 {
    width: 10%;
    border-collapse: collapse;
}

.borda-matrix4 th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.borda-matrix4 tr:nth-child(even) {
    background-color: #f9f9f9;
}

.borda-matrix4 tr:hover {
    background-color: #f2f2f2;
}

.borda-matrix4 th,
.borda-matrix4 td {
    color: black;
}


.peringkat_borda td {
    border: 2px solid #0a0a0a;
    padding: 1px;
    text-align: center;
    width: 10px;
}

.peringkat_borda {
    width: 10%;
    border-collapse: collapse;
}


.peringkat_borda tr:nth-child(even) {
    background-color: #f9f9f9;
    width: 10px;
}

.peringkat_borda tr{

}

.peringkat_borda td {
    color: black;
}

#tablePeringkat tr:nth-child(even) {
    width: 10px;
  }
  #tablePeringkat td {
    width: 10px;
  }


/* ---------------------------------------------------
    DARK MODE TOGGLE BUTTON
----------------------------------------------------- */
.btn-dark-toggle {
    background: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-dark-toggle:hover { background: #f0f0f0; border-color: #bbb; }
.btn-dark-toggle .ico-moon { display: none; }
.btn-dark-toggle .ico-sun { display: block; }
html.dark .btn-dark-toggle .ico-moon { display: block; }
html.dark .btn-dark-toggle .ico-sun { display: none; }
html.dark .btn-dark-toggle { color: #8b949e; border-color: #444c56; }
html.dark .btn-dark-toggle:hover { background: #3b4451; border-color: #555d66; }

/* ---------------------------------------------------
    DARK MODE — Dim (not black, just dimmed like GitHub Dimmed)
    bg: #2d333b  surface: #353d47  border: #444c56
    text: #cdd9e5  secondary: #8b949e
----------------------------------------------------- */
html.dark, html.dark body { background: #2d333b !important; color: #cdd9e5; }
html.dark #content { background: #2d333b !important; }
html.dark #algo { color: #cdd9e5; }

/* Navbar */
html.dark .navbar { background: #2d333b !important; box-shadow: none; border-bottom: 1px solid #444c56; }
html.dark .navbar h2 { color: #cdd9e5 !important; }

/* Sidebar */
html.dark #sidebar { background: #3b4451; }
html.dark #sidebar .sidebar-header { background: #434d5a; }
html.dark #sidebar ul ul a { background: #434d5a !important; color: #cdd9e5 !important; }
html.dark #sidebar ul li a { color: #cdd9e5; }
html.dark #sidebar ul li a:hover { color: #2d333b; background: #cdd9e5; }
html.dark #sidebar ul li.active > a, html.dark #sidebar a[aria-expanded="true"] { background: #434d5a; color: #fff; }
html.dark #sidebar ul.components { border-bottom-color: #444c56; }
html.dark #sidebar ul.CTAs a.download { background: #444c56; color: #cdd9e5; }
html.dark #sidebar ul.CTAs a.article { background: #7386D5 !important; color: #fff !important; }
html.dark #sidebar .sidebar-tagline { color: #8b949e; }
html.dark #sidebar ul ul a::before { background: #8b949e; }
html.dark #sidebar ul ul li.active a { background: rgba(255,255,255,0.1); }
html.dark #sidebar ul ul li.active a::before { background: #fff; }

/* Page heading */
html.dark #algo .page-heading h1 { color: #e6edf3 !important; }
html.dark #algo .page-heading p { color: #8b949e; }
html.dark #algo .page-heading .eyebrow { color: #93b4e8; }
html.dark #algo .page-heading .eyebrow::before { background: #93b4e8; }

/* Generic text */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5 { color: #e6edf3; }
html.dark p { color: #8b949e; }

/* Inputs & forms */
html.dark #algo .input, html.dark #algo input.input, html.dark #algo select.input,
html.dark #algo textarea.input, html.dark input[type="number"],
html.dark input[type="text"], html.dark select, html.dark textarea {
    background: #353d47 !important; border-color: #444c56 !important; color: #cdd9e5 !important;
}
html.dark #algo .input:focus, html.dark #algo textarea.input:focus, html.dark #algo select.input:focus { border-color: #7386D5 !important; }
html.dark #algo .field > span { color: #adbac7; }

/* Buttons */
html.dark #algo .btn { background: #3b4451; border-color: #444c56; color: #cdd9e5; }
html.dark #algo .btn:hover { background: #444c56; border-color: #555d66; }
html.dark #algo .btn.primary { background: #7386D5; border-color: #7386D5; color: #fff; }
html.dark #algo .btn.primary:hover { background: #8494dc; border-color: #8494dc; }

/* Converting tools forms */
html.dark #algo .cform-input-row { background: #353d47; border-color: #444c56; }
html.dark #algo .cform-file-info { color: #8b949e; }
html.dark #algo .cform-pick { background: #3b4451; border-color: #444c56; }
html.dark #algo .cform-param { background: #353d47; border-color: #444c56; }
html.dark #algo .cform-param-label { color: #adbac7; }
html.dark #algo .cform-hint { color: #768390; }
html.dark #algo .cform-error { color: #f47067; }

/* Tabs */
html.dark #algo .conv-tabs { background: #353d47; }
html.dark #algo .conv-tab { color: #768390; }
html.dark #algo .conv-tab:hover { color: #cdd9e5; background: rgba(255,255,255,0.04); }
html.dark #algo .conv-tab.active { background: #3b4451; color: #e6edf3; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }

/* Caesar cipher */
html.dark #algo .caesar-pane { background: #353d47; border-color: #444c56; }
html.dark #algo .caesar-pane .pane-label { color: #768390; }
html.dark #algo .caesar-pane textarea, html.dark #algo .caesar-pane .pane-output { color: #cdd9e5; }
html.dark #algo .caesar-controls { background: #353d47; }
html.dark #algo .caesar-controls label { color: #adbac7; }
html.dark #algo .caesar-controls input[type="number"] { background: #2d333b !important; border-color: #444c56 !important; color: #cdd9e5 !important; }
html.dark #algo .caesar-controls .op-toggle { background: #2d333b; border-color: #444c56; }
html.dark #algo .caesar-controls .op-toggle label { color: #8b949e; }
html.dark #algo .caesar-controls .op-toggle label:has(input:checked) { background: #7386D5; color: #fff; }

/* Electre / stepper */
html.dark #algo .electre-setup { background: #353d47; }
html.dark #algo .electre-matrix-wrap { background: #353d47; border-color: #444c56; }
html.dark #algo .electre-matrix-wrap:empty { color: #768390; }
html.dark #algo .electre-weights { background: #353d47; border-color: #444c56; }
html.dark #algo .electre-weights label { color: #adbac7; }
html.dark #algo .feat-stepper .step-block { border-left-color: #444c56; }
html.dark #algo .feat-stepper .step-block .step-marker { background: #7386D5; border-color: #2d333b; }
html.dark #algo .feat-stepper .step-block h3 { color: #e6edf3; }
html.dark #algo .feat-stepper .step-block .step-desc { color: #8b949e; }

/* Legacy tables */
html.dark .borda-matrix th, html.dark .borda-matrix td,
html.dark .borda-matrix1 th, html.dark .borda-matrix1 td,
html.dark .borda-matrix2 th, html.dark .borda-matrix2 td,
html.dark .borda-matrix3 th, html.dark .borda-matrix3 td,
html.dark .borda-matrix4 th, html.dark .borda-matrix4 td,
html.dark .peringkat_borda td { border-color: #444c56 !important; color: #cdd9e5 !important; }
html.dark .borda-matrix th, html.dark .borda-matrix1 th,
html.dark .borda-matrix2 th, html.dark .borda-matrix3 th,
html.dark .borda-matrix4 th { background-color: #3b4451 !important; }
html.dark .borda-matrix tr:nth-child(even), html.dark .borda-matrix1 tr:nth-child(even),
html.dark .borda-matrix2 tr:nth-child(even), html.dark .borda-matrix3 tr:nth-child(even),
html.dark .borda-matrix4 tr:nth-child(even), html.dark .peringkat_borda tr:nth-child(even) { background-color: #353d47 !important; }
html.dark #algo .legacy-table { background: #353d47; border-color: #444c56; }
html.dark #algo .legacy-table th { background: #3b4451; color: #adbac7; }
html.dark #algo .legacy-table th, html.dark #algo .legacy-table td { border-color: #444c56; color: #cdd9e5; }

/* Subtitle */
html.dark #algo .subtitle-card { background: #353d47; border-color: #444c56; }
html.dark #algo .subtitle-card h3 { color: #e6edf3; }
html.dark #algo .subtitle-card p.sub { color: #768390; }
html.dark #algo .subtitle-drop { background: #2d333b; border-color: #444c56; }
html.dark #algo .subtitle-drop:hover { border-color: #7386D5; background: #353d47; }
html.dark #algo .subtitle-drop .txt { color: #cdd9e5; }
html.dark #algo .subtitle-drop .sub { color: #768390; }
html.dark #algo .feat-subtitle .check-row { color: #adbac7; }

/* Scan */
html.dark #algo .scan-search { background: #353d47; border-color: #444c56; }
html.dark #algo .scan-search input { background: transparent !important; color: #cdd9e5 !important; }
html.dark #algo .scan-search input::placeholder { color: #636e7b; }
html.dark #algo .scan-search button { background: #7386D5; }
html.dark #algo .scan-options { background: #353d47; }
html.dark #algo .scan-mode { border-bottom-color: #444c56; }
html.dark #algo .scan-mode button { color: #768390; }
html.dark #algo .scan-mode button.active { color: #e6edf3; border-bottom-color: #7386D5; }
html.dark #algo .scan-mode button:hover { color: #cdd9e5; }

/* Output blocks */
html.dark #algo .output-block.light { background: #353d47; border-color: #444c56; }
html.dark #algo .output-block.light .output-bar { background: #3b4451; color: #adbac7; border-bottom-color: #444c56; }
html.dark #algo .output-block.light pre { color: #cdd9e5; }

/* Misc */
html.dark #algo .hint { color: #768390; }
html.dark #algo .hint code { background: #3b4451; color: #cdd9e5; }
html.dark #algo .file-pill { background: #353d47; border-color: #444c56; color: #8b949e; }
html.dark #algo .file-pill:hover { border-color: #7386D5; color: #cdd9e5; }
html.dark #algo .cform-preset { background: #3b4451; border-color: #444c56; color: #8b949e; }
html.dark #algo .cform-preset:hover { background: #444c56; }
html.dark #algo .cform-preset.active { background: #7386D5; color: #fff; border-color: #7386D5; }
html.dark #algo .cform-slider { background: #444c56; }
html.dark #algo .pyjava-bar .hint { color: #768390; }
html.dark #algo .cform-add-btn { background: #3b4451; border-color: #444c56; color: #8b949e; }
html.dark #algo .cform-add-btn:hover { background: #444c56; color: #cdd9e5; }
html.dark #algo .cform-list-item .cli-name { color: #cdd9e5; }
html.dark #algo .cform-list-item .cli-size { color: #768390; }