/**
 * CyberChef - The Cyber Swiss Army Knife
 *
 * @copyright Crown Copyright 2016-2025
 * @license Apache-2.0
 *
 *   Copyright 2016-2025 Crown Copyright
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/**
 * CyberChef styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

/* Themes */

/**
 * Classic theme definitions
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

:root,
:root.classic {
    --primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --primary-font-colour: #333;
    --primary-font-size: 14px;
    --primary-line-height: 20px;

    --fixed-width-font-family: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    --fixed-width-font-colour: inherit;
    --fixed-width-font-size: inherit;

    --subtext-font-colour: #999;
    --subtext-font-size: 13px;

    --primary-background-colour: #fff;
    --secondary-background-colour: #fafafa;

    --primary-border-colour: #ddd;
    --secondary-border-colour: #eee;

    --title-colour: #424242;
    --title-weight: bold;
    --title-size: 16px;
    --title-background-colour: #fafafa;

    --banner-font-colour: #468847;
    --banner-bg-colour: #dff0d8;
    --banner-url-colour: #1976d2;

    --category-list-font-colour: #1976d2;

    --loader-background-colour: var(--secondary-border-colour);
    --loader-outer-colour: #3498db;
    --loader-middle-colour: #e74c3c;
    --loader-inner-colour: #f9c922;


    /* Operation colours */
    --op-list-operation-font-colour: #3a87ad;
    --op-list-operation-bg-colour: #d9edf7;
    --op-list-operation-border-colour: #bce8f1;

    --rec-list-operation-font-colour: #468847;
    --rec-list-operation-bg-colour: #dff0d8;
    --rec-list-operation-border-colour: #d3e8c0;

    --selected-operation-font-color: #c09853;
    --selected-operation-bg-colour: #fcf8e3;
    --selected-operation-border-colour: #fbeed5;

    --breakpoint-font-colour: #b94a48;
    --breakpoint-bg-colour: #f2dede;
    --breakpoint-border-colour: #eed3d7;

    --disabled-font-colour: #999;
    --disabled-bg-colour: #dfdfdf;
    --disabled-border-colour: #cdcdcd;

    --fc-operation-font-colour: #396f3a;
    --fc-operation-bg-colour: #c7e4ba;
    --fc-operation-border-colour: #b3dba2;

    --fc-breakpoint-operation-font-colour: #94312f;
    --fc-breakpoint-operation-bg-colour: #eabfbf;
    --fc-breakpoint-operation-border-colour: #e2aeb5;


    /* Operation arguments */
    --op-title-font-weight: bold;
    --arg-font-colour: #424242;
    --arg-background: #fff;
    --arg-border-colour: #ddd;
    --arg-disabled-background: #eee;
    --arg-label-colour: #388e3c;


    /* Operation buttons */
    --disable-icon-colour: #9e9e9e;
    --disable-icon-selected-colour: #f44336;
    --breakpoint-icon-colour: #9e9e9e;
    --breakpoint-icon-selected-colour: #f44336;


    /* Buttons */
    --btn-default-font-colour: #333;
    --btn-default-bg-colour: #fff;
    --btn-default-border-colour: #ddd;

    --btn-default-hover-font-colour: #333;
    --btn-default-hover-bg-colour: #ebebeb;
    --btn-default-hover-border-colour: #adadad;

    --btn-success-font-colour: #fff;
    --btn-success-bg-colour: #5cb85c;
    --btn-success-border-colour: #4cae4c;

    --btn-success-hover-font-colour: #fff;
    --btn-success-hover-bg-colour: #449d44;
    --btn-success-hover-border-colour: #398439;


    /* Highlighter colours */
    --hl1: #ffee00aa;
    --hl2: #95dfffaa;
    --hl3: #ffb6b6aa;
    --hl4: #fcf8e3aa;
    --hl5: #8de768aa;


    /* Scrollbar */
    --scrollbar-track: var(--secondary-background-colour);
    --scrollbar-thumb: #ccc;
    --scrollbar-hover: #bbb;


    /* Misc. */
    --drop-file-border-colour: #3a87ad;
    --table-border-colour: #ccc;
    --popover-background: #fff;
    --popover-border-colour: #ccc;
    --code-background: #f9f2f4;
    --code-font-colour: #c7254e;
    --input-highlight-colour: #1976d2;
    --input-border-colour: #424242;
}

/**
 * Dark theme definitions
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

:root.dark {
    --primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --primary-font-colour: #c5c5c5;
    --primary-font-size: 14px;
    --primary-line-height: 20px;

    --fixed-width-font-family: "Monaco", "Droid Sans Mono", "Consolas", monospace;
    --fixed-width-font-colour: inherit;
    --fixed-width-font-size: inherit;

    --subtext-font-colour: #999;
    --subtext-font-size: 13px;

    --primary-background-colour: #1e1e1e;
    --secondary-background-colour: #252525;

    --primary-border-colour: #444;
    --secondary-border-colour: #3c3c3c;

    --title-colour: #fff;
    --title-weight: bold;
    --title-background-colour: #333;

    --banner-font-colour: #c5c5c5;
    --banner-bg-colour: #252525;
    --banner-url-colour: #1976d2;

    --category-list-font-colour: #1976d2;

    --loader-background-colour: var(--secondary-border-colour);
    --loader-outer-colour: #3498db;
    --loader-middle-colour: #e74c3c;
    --loader-inner-colour: #f9c922;


    /* Operation colours */
    --op-list-operation-font-colour: #c5c5c5;
    --op-list-operation-bg-colour: #333;
    --op-list-operation-border-colour: #444;

    --rec-list-operation-font-colour: #c5c5c5;
    --rec-list-operation-bg-colour: #252525;
    --rec-list-operation-border-colour: #444;

    --selected-operation-font-color: #c5c5c5;
    --selected-operation-bg-colour: #3f3f3f;
    --selected-operation-border-colour: #444;

    --breakpoint-font-colour: #ddd;
    --breakpoint-bg-colour: #073655;
    --breakpoint-border-colour: #444;

    --disabled-font-colour: #666;
    --disabled-bg-colour: #444;
    --disabled-border-colour: #444;

    --fc-operation-font-colour: #c5c5c5;
    --fc-operation-bg-colour: #2d2d2d;
    --fc-operation-border-colour: #444;

    --fc-breakpoint-operation-font-colour: #ddd;
    --fc-breakpoint-operation-bg-colour: #072b49;
    --fc-breakpoint-operation-border-colour: #444;


    /* Operation arguments */
    --op-title-font-weight: bold;
    --arg-font-colour: #bbb;
    --arg-background: #3c3c3c;
    --arg-border-colour: #3c3c3c;
    --arg-disabled-background: #4f4f4f;
    --arg-label-colour: rgb(25, 118, 210);


    /* Operation buttons */
    --disable-icon-colour: #9e9e9e;
    --disable-icon-selected-colour: #f44336;
    --breakpoint-icon-colour: #9e9e9e;
    --breakpoint-icon-selected-colour: #f44336;


    /* Buttons */
    --btn-default-font-colour: #c5c5c5;
    --btn-default-bg-colour: #2d2d2d;
    --btn-default-border-colour: #3c3c3c;

    --btn-default-hover-font-colour: #c5c5c5;
    --btn-default-hover-bg-colour: #2d2d2d;
    --btn-default-hover-border-colour: #205375;

    --btn-success-font-colour: #fff;
    --btn-success-bg-colour: #073655;
    --btn-success-border-colour: #0e639c;

    --btn-success-hover-font-colour: #fff;
    --btn-success-hover-bg-colour: #0e639c;
    --btn-success-hover-border-colour: #0e639c;


    /* Highlighter colours */
    --hl1: #264f78;
    --hl2: #675351;
    --hl3: #c40000;
    --hl4: #fcf8e3;
    --hl5: #38811b;


    /* Scrollbar */
    --scrollbar-track: #1e1e1e;
    --scrollbar-thumb: #424242;
    --scrollbar-hover: #4e4e4e;


    /* Misc. */
    --drop-file-border-colour: #0e639c;
    --table-border-colour: #555;
    --popover-background: #444;
    --popover-border-colour: #555;
    --code-background: #0e639c;
    --code-font-colour: #fff;
    --input-highlight-colour: #1976d2;
    --input-border-colour: #424242;
}

/**
 * GeoCities theme definitions
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

:root.geocities {
    --primary-font-family: "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", "Marker Felt", "Purisa", "URW Chancery L", cursive, sans-serif;
    --primary-font-colour: black;
    --primary-font-size: 14px;
    --primary-line-height: 20px;

    --fixed-width-font-family: "Courier New", Courier, monospace;
    --fixed-width-font-colour: yellow;
    --fixed-width-font-size: inherit;

    --subtext-font-colour: darkgrey;
    --subtext-font-size: 13px;

    --primary-background-colour: #00f;
    --secondary-background-colour: #f00;

    --primary-border-colour: pink;
    --secondary-border-colour: springgreen;

    --title-colour: red;
    --title-weight: bold;
    --title-background-colour: yellow;

    --banner-font-colour: white;
    --banner-bg-colour: maroon;
    --banner-url-colour: yellow;

    --category-list-font-colour: yellow;

    --loader-background-colour: #00f;
    --loader-outer-colour: #0f0;
    --loader-middle-colour: red;
    --loader-inner-colour: yellow;


    /* Operation colours */
    --op-list-operation-font-colour: blue;
    --op-list-operation-bg-colour: yellow;
    --op-list-operation-border-colour: green;

    --rec-list-operation-font-colour: white;
    --rec-list-operation-bg-colour: purple;
    --rec-list-operation-border-colour: green;

    --selected-operation-font-color: white;
    --selected-operation-bg-colour: pink;
    --selected-operation-border-colour: blue;

    --breakpoint-font-colour: white;
    --breakpoint-bg-colour: red;
    --breakpoint-border-colour: blue;

    --disabled-font-colour: grey;
    --disabled-bg-colour: black;
    --disabled-border-colour: grey;

    --fc-operation-font-colour: sienna;
    --fc-operation-bg-colour: pink;
    --fc-operation-border-colour: yellow;

    --fc-breakpoint-operation-font-colour: darkgrey;
    --fc-breakpoint-operation-bg-colour: deeppink;
    --fc-breakpoint-operation-border-colour: yellowgreen;


    /* Operation arguments */
    --op-title-font-weight: bold;
    --arg-font-colour: white;
    --arg-background: black;
    --arg-border-colour: lime;
    --arg-disabled-background: grey;
    --arg-label-colour: red;


    /* Operation buttons */
    --disable-icon-colour: #0f0;
    --disable-icon-selected-colour: yellow;
    --breakpoint-icon-colour: #0f0;
    --breakpoint-icon-selected-colour: yellow;


    /* Buttons */
    --btn-default-font-colour: black;
    --btn-default-bg-colour: white;
    --btn-default-border-colour: grey;

    --btn-default-hover-font-colour: black;
    --btn-default-hover-bg-colour: white;
    --btn-default-hover-border-colour: grey;

    --btn-success-font-colour: white;
    --btn-success-bg-colour: lawngreen;
    --btn-success-border-colour: grey;

    --btn-success-hover-font-colour: white;
    --btn-success-hover-bg-colour: lime;
    --btn-success-hover-border-colour: grey;


    /* Highlighter colours */
    --hl1: #fff000;
    --hl2: #95dfff;
    --hl3: #ffb6b6;
    --hl4: #fcf8e3;
    --hl5: #8de768;


    /* Scrollbar */
    --scrollbar-track: lightsteelblue;
    --scrollbar-thumb: lightslategrey;
    --scrollbar-hover: grey;


    /* Misc. */
    --drop-file-border-colour: purple;
    --table-border-colour: var(--hl3);
    --popover-background: turquoise;
    --popover-border-colour: violet;
    --code-background: black;
    --code-font-colour: limegreen;
    --input-highlight-colour: limegreen;
    --input-border-colour: limegreen;
}

/**
 * Solarized dark theme definitions
 *
 * @author j433866 [j433866@gmail.com]
 * @copyright Crown Copyright 2019
 * @license Apache-2.0
 */

:root.solarizedDark {
    --base03: #002b36;
    --base02: #073642;
    --base01: #586e75;
    --base00: #657b83;
    --base0: #839496;
    --base1: #93a1a1;
    --base2: #eee8d5;
    --base3: #fdf6e3;
    --sol-yellow: #b58900;
    --sol-orange: #cb4b16;
    --sol-red: #dc322f;
    --sol-magenta: #d33682;
    --sol-violet: #6c71c4;
    --sol-blue: #268bd2;
    --sol-cyan: #2aa198;
    --sol-green: #859900;

    --primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --primary-font-colour: var(--base0);
    --primary-font-size: 14px;
    --primary-line-height: 20px;

    --fixed-width-font-family: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    --fixed-width-font-colour: inherit;
    --fixed-width-font-size: inherit;

    --subtext-font-colour: var(--base01);
    --subtext-font-size: 13px;

    --primary-background-colour: var(--base03);
    --secondary-background-colour: var(--base02);

    --primary-border-colour: var(--base00);
    --secondary-border-colour: var(--base01);

    --title-colour: var(--base1);
    --title-weight: bold;
    --title-background-colour: var(--base02);

    --banner-font-colour: var(--base0);
    --banner-bg-colour: var(--base03);
    --banner-url-colour: var(--base1);

    --category-list-font-colour: var(--base1);

    --loader-background-colour: var(--base03);
    --loader-outer-colour: var(--base1);
    --loader-middle-colour: var(--base0);
    --loader-inner-colour: var(--base00);


    /* Operation colours */
    --op-list-operation-font-colour: var(--base0);
    --op-list-operation-bg-colour: var(--base03);
    --op-list-operation-border-colour: var(--base02);

    --rec-list-operation-font-colour: var(--base0);
    --rec-list-operation-bg-colour: var(--base02);
    --rec-list-operation-border-colour: var(--base01);

    --selected-operation-font-color: var(--base1);
    --selected-operation-bg-colour: var(--base02);
    --selected-operation-border-colour: var(--base01);

    --breakpoint-font-colour: var(--sol-red);
    --breakpoint-bg-colour: var(--base02);
    --breakpoint-border-colour: var(--base00);

    --disabled-font-colour: var(--base01);
    --disabled-bg-colour: var(--base03);
    --disabled-border-colour: var(--base02);

    --fc-operation-font-colour: var(--base1);
    --fc-operation-bg-colour: var(--base02);
    --fc-operation-border-colour: var(--base01);

    --fc-breakpoint-operation-font-colour: var(--sol-orange);
    --fc-breakpoint-operation-bg-colour: var(--base02);
    --fc-breakpoint-operation-border-colour: var(--base00);


    /* Operation arguments */
    --op-title-font-weight: bold;
    --arg-font-colour: var(--base0);
    --arg-background: var(--base03);
    --arg-border-colour: var(--base00);
    --arg-disabled-background: var(--base03);
    --arg-label-colour: var(--base1);


    /* Operation buttons */
    --disable-icon-colour: var(--base00);
    --disable-icon-selected-colour: var(--sol-red);
    --breakpoint-icon-colour: var(--base00);
    --breakpoint-icon-selected-colour: var(--sol-red);

    /* Buttons */
    --btn-default-font-colour: var(--base0);
    --btn-default-bg-colour: var(--base02);
    --btn-default-border-colour: var(--base01);

    --btn-default-hover-font-colour: var(--base1);
    --btn-default-hover-bg-colour: var(--base01);
    --btn-default-hover-border-colour: var(--base00);

    --btn-success-font-colour: var(--base0);
    --btn-success-bg-colour: var(--base03);
    --btn-success-border-colour: var(--base00);

    --btn-success-hover-font-colour: var(--base1);
    --btn-success-hover-bg-colour: var(--base01);
    --btn-success-hover-border-colour: var(--base00);

    /* Highlighter colours */
    --hl1: var(--base01);
    --hl2: var(--sol-blue);
    --hl3: var(--sol-green);
    --hl4: var(--sol-yellow);
    --hl5: var(--sol-magenta);


    /* Scrollbar */
    --scrollbar-track: var(--base03);
    --scrollbar-thumb: var(--base00);
    --scrollbar-hover: var(--base01);


    /* Misc. */
    --drop-file-border-colour: var(--base01);
    --table-border-colour: var(--base01);
    --popover-background: var(--base02);
    --popover-border-colour: var(--base01);
    --code-background: var(--base03);
    --code-font-colour: var(--base1);
    --input-highlight-colour: var(--base1);
    --input-border-colour: var(--base0);
}

/**
 * Solarized light theme definitions
 *
 * @author j433866 [j433866@gmail.com]
 * @copyright Crown Copyright 2019
 * @license Apache-2.0
 */

:root.solarizedLight {
    --base03: #002b36;
    --base02: #073642;
    --base01: #586e75;
    --base00: #657b83;
    --base0: #839496;
    --base1: #93a1a1;
    --base2: #eee8d5;
    --base3: #fdf6e3;
    --sol-yellow: #b58900;
    --sol-orange: #cb4b16;
    --sol-red: #dc322f;
    --sol-magenta: #d33682;
    --sol-violet: #6c71c4;
    --sol-blue: #268bd2;
    --sol-cyan: #2aa198;
    --sol-green: #859900;

    --primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --primary-font-colour: var(--base00);
    --primary-font-size: 14px;
    --primary-line-height: 20px;

    --fixed-width-font-family: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    --fixed-width-font-colour: inherit;
    --fixed-width-font-size: inherit;

    --subtext-font-colour: var(--base1);
    --subtext-font-size: 13px;

    --primary-background-colour: var(--base3);
    --secondary-background-colour: var(--base2);

    --primary-border-colour: var(--base0);
    --secondary-border-colour: var(--base1);

    --title-colour: var(--base01);
    --title-weight: bold;
    --title-background-colour: var(--base2);

    --banner-font-colour: var(--base00);
    --banner-bg-colour: var(--base3);
    --banner-url-colour: var(--base01);

    --category-list-font-colour: var(--base01);

    --loader-background-colour: var(--base3);
    --loader-outer-colour: var(--base01);
    --loader-middle-colour: var(--base00);
    --loader-inner-colour: var(--base0);


    /* Operation colours */
    --op-list-operation-font-colour: var(--base00);
    --op-list-operation-bg-colour: var(--base3);
    --op-list-operation-border-colour: var(--base2);

    --rec-list-operation-font-colour: var(--base00);
    --rec-list-operation-bg-colour: var(--base2);
    --rec-list-operation-border-colour: var(--base1);

    --selected-operation-font-color: var(--base01);
    --selected-operation-bg-colour: var(--base2);
    --selected-operation-border-colour: var(--base1);

    --breakpoint-font-colour: var(--sol-red);
    --breakpoint-bg-colour: var(--base2);
    --breakpoint-border-colour: var(--base0);

    --disabled-font-colour: var(--base1);
    --disabled-bg-colour: var(--base3);
    --disabled-border-colour: var(--base2);

    --fc-operation-font-colour: var(--base01);
    --fc-operation-bg-colour: var(--base2);
    --fc-operation-border-colour: var(--base1);

    --fc-breakpoint-operation-font-colour: var(--base02);
    --fc-breakpoint-operation-bg-colour: var(--base1);
    --fc-breakpoint-operation-border-colour: var(--base0);


    /* Operation arguments */
    --op-title-font-weight: bold;
    --arg-font-colour: var(--base00);
    --arg-background: var(--base3);
    --arg-border-colour: var(--base0);
    --arg-disabled-background: var(--base3);
    --arg-label-colour: var(--base01);


    /* Operation buttons */
    --disable-icon-colour: #9e9e9e;
    --disable-icon-selected-colour: #f44336;
    --breakpoint-icon-colour: #9e9e9e;
    --breakpoint-icon-selected-colour: #f44336;


    /* Buttons */
    --btn-default-font-colour: var(--base00);
    --btn-default-bg-colour: var(--base2);
    --btn-default-border-colour: var(--base1);

    --btn-default-hover-font-colour: var(--base01);
    --btn-default-hover-bg-colour: var(--base1);
    --btn-default-hover-border-colour: var(--base0);

    --btn-success-font-colour: var(--base00);
    --btn-success-bg-colour: var(--base3);
    --btn-success-border-colour: var(--base0);

    --btn-success-hover-font-colour: var(--base01);
    --btn-success-hover-bg-colour: var(--base1);
    --btn-success-hover-border-colour: var(--base0);


    /* Highlighter colours */
    --hl1: var(--base1);
    --hl2: var(--sol-blue);
    --hl3: var(--sol-green);
    --hl4: var(--sol-yellow);
    --hl5: var(--sol-magenta);


    /* Scrollbar */
    --scrollbar-track: var(--base3);
    --scrollbar-thumb: var(--base1);
    --scrollbar-hover: var(--base0);


    /* Misc. */
    --drop-file-border-colour: var(--base1);
    --table-border-colour: var(--base1);
    --popover-background: var(--base2);
    --popover-border-colour: var(--base1);
    --code-background: var(--base3);
    --code-font-colour: var(--base01);
    --input-highlight-colour: var(--base01);
    --input-border-colour: var(--base00);
}

/* Utilities */

/**
 * Overrides for vendor styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

/* Bootstrap */

/* fallback */

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../assets/02aafe15b98928fdaa38.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.form-group {
    margin-bottom: 0;
}

button,
a:focus {
    outline: none;
}

.btn.btn-raised.btn-secondary {
    color: #333;
    color: var(--btn-default-font-colour);
    background-color: #fff;
    background-color: var(--btn-default-bg-colour);
    border-color: #ddd;
    border-color: var(--btn-default-border-colour);
}

.btn.btn-raised.btn-secondary:hover {
    color: #333;
    color: var(--btn-default-hover-font-colour);
    background-color: #ebebeb;
    background-color: var(--btn-default-hover-bg-colour);
    border-color: #adadad;
    border-color: var(--btn-default-hover-border-colour);
}

.btn.btn-raised.btn-secondary:active {
    color: #333;
    color: var(--btn-default-hover-font-colour);
    background-color: #ebebeb;
    background-color: var(--btn-default-hover-bg-colour);
    border-color: #adadad;
    border-color: var(--btn-default-hover-border-colour);
}

.btn.btn-raised.btn-secondary:hover:active {
    color: #333;
    color: var(--btn-default-hover-font-colour);
    background-color: #ebebeb;
    background-color: var(--btn-default-hover-bg-colour);
    border-color: #adadad;
    border-color: var(--btn-default-hover-border-colour);
}

.btn.btn-raised.btn-secondary:focus {
    color: #333;
    color: var(--btn-default-font-colour);
    background-color: #fff;
    background-color: var(--btn-default-bg-colour);
    border-color: #adadad;
    border-color: var(--btn-default-hover-border-colour);
}

.btn.btn-raised.btn-secondary[disabled]:hover {
    background-color: #fff;
    background-color: var(--primary-background-colour);
    border-color: #ddd;
    border-color: var(--primary-border-colour);
}

.btn.btn-raised.btn-success {
    color: #fff;
    color: var(--btn-success-font-colour);
    background-color: #5cb85c;
    background-color: var(--btn-success-bg-colour);
    border-color: #4cae4c;
    border-color: var(--btn-success-border-colour);
}

.btn.btn-raised.btn-success:hover {
    color: #fff;
    color: var(--btn-success-hover-font-colour);
    background-color: #449d44;
    background-color: var(--btn-success-hover-bg-colour);
    border-color: #398439;
    border-color: var(--btn-success-hover-border-colour);
}

.btn.btn-raised.btn-success:active {
    color: #fff;
    color: var(--btn-success-hover-font-colour);
    background-color: #449d44;
    background-color: var(--btn-success-hover-bg-colour);
    border-color: #398439;
    border-color: var(--btn-success-hover-border-colour);
}

.btn.btn-raised.btn-success:focus {
    color: #fff;
    color: var(--btn-success-hover-font-colour);
    background-color: #449d44;
    background-color: var(--btn-success-hover-bg-colour);
    border-color: #398439;
    border-color: var(--btn-success-hover-border-colour);
}

.btn.btn-raised.btn-success:hover:active {
    color: #fff;
    color: var(--btn-success-hover-font-colour);
    background-color: #449d44;
    background-color: var(--btn-success-hover-bg-colour);
    border-color: #398439;
    border-color: var(--btn-success-hover-border-colour);
}

select.form-control {
    background-color: #fff !important;
    background-color: var(--primary-background-colour) !important;
}

select.form-control:focus {
    background-color: #fff !important;
    background-color: var(--primary-background-colour) !important;
}

select.form-control:focus {
    transition: none !important;
}

select.form-control:not([size]):not([multiple]),
select.custom-file-control:not([size]):not([multiple]) {
    height: unset !important;
}

.checkbox label {
    color: #333;
    color: var(--primary-font-colour);
}

.checkbox-inline {
    color: #333;
    color: var(--primary-font-colour);
}

.is-focused .checkbox-inline {
    color: #333;
    color: var(--primary-font-colour);
}

.is-focused .checkbox-inline:hover {
    color: #333;
    color: var(--primary-font-colour);
}

[class^="bmd-label"] {
    color: #333;
    color: var(--primary-font-colour);
}

.form-control {
    color: #333;
    color: var(--primary-font-colour);
}

.is-focused .form-control {
    color: #333;
    color: var(--primary-font-colour);
}

.form-control {
    background-image:
        linear-gradient(to top, #1976d2 2px, rgba(0, 0, 0, 0) 2px),
        linear-gradient(to top, #ddd 1px, rgba(0, 0, 0, 0) 1px);
    background-image:
        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
        linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
}

.is-focused .form-control {
    background-image:
        linear-gradient(to top, #1976d2 2px, rgba(0, 0, 0, 0) 2px),
        linear-gradient(to top, #ddd 1px, rgba(0, 0, 0, 0) 1px);
    background-image:
        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
        linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
}

code {
    border: 0;
    white-space: pre-wrap;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-family: var(--fixed-width-font-family);
    background-color: #f9f2f4;
    background-color: var(--code-background);
    color: #c7254e;
    color: var(--code-font-colour);
}

pre {
    border-radius: 0 !important;
    background-color: #fafafa;
    background-color: var(--secondary-background-colour);
    border-color: #eee;
    border-color: var(--secondary-border-colour);
    color: inherit;
    color: var(--fixed-width-font-colour);
}

blockquote {
    font-size: inherit;
    border-left-color: #eee;
    border-left-color: var(--secondary-border-colour);
}

blockquote a {
    cursor: pointer;
}

optgroup {
    font-weight: bold;
}

.panel-body:before,
.panel-body:after {
    content: "";
}

.table-nonfluid {
    width: auto !important;
}

.table {
    color: #333;
    color: var(--primary-font-colour);
}

.table-hover tbody tr:hover {
    color: #333;
    color: var(--primary-font-colour);
}

.table-bordered th {
    border: 1px solid #ccc;
    border: 1px solid var(--table-border-colour);
}

.table-bordered td {
    border: 1px solid #ccc;
    border: 1px solid var(--table-border-colour);
}

.popover {
    background-color: #fff;
    background-color: var(--popover-background);
    border-color: #ccc;
    border-color: var(--popover-border-colour);
}

.popover-body {
    max-height: 95vh;
    overflow-y: auto;
    color: #333;
    color: var(--primary-font-colour);
}

.bs-popover-right>.arrow {
    border-right-color: #ccc;
    border-right-color: var(--popover-border-colour);
}

.bs-popover-right>.arrow:after {
    border-right-color: #fff;
    border-right-color: var(--popover-background);
}

.nav-tabs .nav-link {
    color: #999;
    color: var(--subtext-font-colour);
}

.nav-tabs>li>a.nav-link.active {
    background-color: #fafafa;
    background-color: var(--secondary-background-colour);
    border-color: #eee;
    border-color: var(--secondary-border-colour);
    border-bottom-color: transparent;
    color: #333;
    color: var(--primary-font-colour);
}

.nav-tabs>li>a.nav-link.active:focus {
    background-color: #fafafa;
    background-color: var(--secondary-background-colour);
    border-color: #eee;
    border-color: var(--secondary-border-colour);
    border-bottom-color: transparent;
    color: #333;
    color: var(--primary-font-colour);
}

.nav-tabs>li>a.nav-link.active:hover {
    background-color: #fafafa;
    background-color: var(--secondary-background-colour);
    border-color: #eee;
    border-color: var(--secondary-border-colour);
    border-bottom-color: transparent;
    color: #333;
    color: var(--primary-font-colour);
}

.nav-tabs {
    border-color: #ddd;
    border-color: var(--primary-border-colour);
}

.nav a.nav-link:focus {
    background-color: #eee;
    background-color: var(--secondary-border-colour);
}

.nav a.nav-link:hover {
    background-color: #eee;
    background-color: var(--secondary-border-colour);
}

.nav-tabs a.nav-link:hover {
    border-color: #eee #eee #ddd;
    border-color: var(--secondary-border-colour) var(--secondary-border-colour) var(--primary-border-colour);
}

.dropdown-menu {
    background-color: #fff;
    background-color: var(--primary-background-colour);
}

.dropdown-menu a {
    color: #333;
    color: var(--primary-font-colour);
}

.dropdown-menu a:focus {
    background-color: #fafafa;
    background-color: var(--secondary-background-colour);
    color: #333;
    color: var(--primary-font-colour);
}

.dropdown-menu a:hover {
    background-color: #fafafa;
    background-color: var(--secondary-background-colour);
    color: #333;
    color: var(--primary-font-colour);
}

.input-group-addon:not(:first-child):not(:last-child) {
    border-left: 0;
    border-right: 0;
}

.input-group-btn:first-child>.btn {
    border-right: 0;
}

/* Sortable */

.sortable-ghost {
    opacity: 0.6;
}

/* Bootstrap Colorpicker */

.colorpicker-element {
    float: left;
    margin-right: 15px;
}

.colorpicker-color,
.colorpicker-color div {
    height: 100px;
}

/* CodeMirror */

.ͼ2 .cm-specialChar,
.cm-specialChar {
    color: red;
}

/**
 * General styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--primary-font-family);
    font-size: 14px;
    font-size: var(--primary-font-size);
    line-height: 20px;
    line-height: var(--primary-line-height);
    color: #333;
    color: var(--primary-font-colour);
    background-color: #fff;
    background-color: var(--primary-background-colour);
}

.subtext {
    font-style: italic;
    font-size: 13px;
    font-size: var(--subtext-font-size);
    color: #999;
    color: var(--subtext-font-colour);
}

.data-text {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-family: var(--fixed-width-font-family);
}

.word-wrap {
    white-space: pre !important;
    word-wrap: normal !important;
    overflow-x: scroll !important;
}

.clearfix {
    clear: both;
    height: 0;
    line-height: 0;
}

.hidden {
    display: none;
}

.blur {
    color: transparent !important;
    text-shadow: rgba(0, 0, 0, 0.95) 0 0 10px !important;
}

.no-select {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.inline-icon {
    font-size: 12px;
    padding-left: 2px;
}

.modal-icon {
    position: absolute;
    right: 25px;
}

.konami {
    transform: rotate(180deg);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: #fafafa;
    background-color: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: #ccc;
    background-color: var(--scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
    background-color: var(--scrollbar-hover);
}

::-webkit-scrollbar-corner {
    background-color: #fafafa;
    background-color: var(--scrollbar-track);
}

/* Highlighters */

.hl1 { background-color: #ffee00aa; background-color: var(--hl1); }

.hl2 { background-color: #95dfffaa; background-color: var(--hl2); }

.hl3 { background-color: #ffb6b6aa; background-color: var(--hl3); }

/* Half-Life 3 confirmed :O */

.hl4 { background-color: #fcf8e3aa; background-color: var(--hl4); }

.hl5 { background-color: #8de768aa; background-color: var(--hl5); }

/* Preloader styles */

/**
 * Preloader styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #eee;
    background-color: var(--loader-background-colour);
}

.loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;

    border: 3px solid transparent;
    border-top-color: #3498db;
    border-top-color: var(--loader-outer-colour);
    border-radius: 50%;

    animation: spin 2s linear infinite;
}

.loader:before,
.loader:after {
    content: "";
    position: absolute;
    border: 3px solid transparent;
    border-radius: 50%;
}

.loader:before {
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-top-color: #e74c3c;
    border-top-color: var(--loader-middle-colour);
    animation: spin 3s linear infinite;
}

.loader:after {
    top: 13px;
    left: 13px;
    right: 13px;
    bottom: 13px;
    border-top-color: #f9c922;
    border-top-color: var(--loader-inner-colour);
    animation: spin 1.5s linear infinite;
}

.loading-msg {
    display: block;
    position: relative;
    width: 400px;
    left: calc(50% - 200px);
    top: calc(50% + 50px);
    text-align: center;
    opacity: 0;
    font-size: 18px;
}

.loading-msg.loading {
    opacity: 1;
    transition: all 0.1s ease-in;
}

.loading-error {
    display: block;
    position: relative;
    width: 600px;
    left: calc(50% - 300px);
    top: 10%;
}

/* Loaded */

.loaded .loading-msg {
    opacity: 0;
    transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
    opacity: 0;
    transition: all 0.5s 0.3s ease-out;
}

.loaded #rec-list li {
	animation: bump 0.7s cubic-bezier(0.7, 0, 0.3, 1) both;
}

.loaded #content-wrapper {
	animation-delay: 0.10s;
}

.loaded #rec-list li:first-child {
	animation-delay: 0.20s;
}

.loaded #rec-list li:nth-child(2) {
	animation-delay: 0.25s;
}

.loaded #rec-list li:nth-child(3) {
	animation-delay: 0.30s;
}

.loaded #rec-list li:nth-child(4) {
	animation-delay: 0.35s;
}

.loaded #rec-list li:nth-child(5) {
	animation-delay: 0.40s;
}

.loaded #rec-list li:nth-child(6) {
	animation-delay: 0.45s;
}

.loaded #rec-list li:nth-child(7) {
	animation-delay: 0.50s;
}

.loaded #rec-list li:nth-child(8) {
	animation-delay: 0.55s;
}

.loaded #rec-list li:nth-child(9) {
	animation-delay: 0.60s;
}

.loaded #rec-list li:nth-child(10) {
	animation-delay: 0.65s;
}

/* Animations */

@keyframes spin {
    0%   {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes bump {
	from {
        opacity: 0;
        transform: translate3d(0, 200px, 0);
    }
}

/* Components */

/**
 * Button styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

button img,
span.btn img {
    margin-right: 3px;
    margin-bottom: 1px;
}

/**
 * Operation list styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

.op-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.category-title {
    display: block;
    padding: 10px;
    background-color: #fafafa;
    background-color: var(--secondary-background-colour);
    border-bottom: 1px solid #eee;
    border-bottom: 1px solid var(--secondary-border-colour);
    font-weight: bold;
    font-weight: var(--title-weight);
}

.category-title[href='#catFavourites'] {
    border-bottom-color: #ddd;
    border-bottom-color: var(--primary-border-colour);
}

.category-title[aria-expanded=true] {
    border-bottom-color: #ddd;
    border-bottom-color: var(--primary-border-colour);
}

.category-title.collapsed {
    border-bottom-color: #eee;
    border-bottom-color: var(--secondary-border-colour);
}

.category-title:hover {
    color: #3a87ad;
    color: var(--op-list-operation-font-colour);
}

.category {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none;
}

.op-count {
    float: right;
    color: #999;
    color: var(--subtext-font-colour);
    font-weight: normal;
    font-size: xx-small;
    opacity: 0.5;
    padding-left: .5em;
}

/**
 * Operation styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

.operation {
    cursor: -webkit-grab;
    cursor: grab;
    padding: 10px;
    list-style-type: none;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-top: none;
    border-left: none;
    border-right: none;
}

#rec-list .operation {
    padding: 14px;
}

.op-title {
    font-weight: bold;
    font-weight: var(--op-title-font-weight);
}

.ingredients {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    -moz-column-gap: 14px;
         column-gap: 14px;
    row-gap: 0;
}

.ing-very-wide {
    flex: 4 400px;
}

.ing-wide {
    flex: 3 200px;
}

.ing-medium {
    flex: 2 120px;
}

.ing-short {
    flex: 1 80px;
}

.ing-flexible {
    flex-grow: 1;
}

.ingredients .form-group {
    margin-top: 1rem;
    padding-top: 0;
}

.arg {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-family: var(--fixed-width-font-family);
    text-overflow: ellipsis;
}

select.arg {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--primary-font-family);
    min-width: 100px;
}

select.arg.form-control:not([size]):not([multiple]), select.custom-file-control:not([size]):not([multiple]) {
    height: 100% !important;
}

textarea.arg {
    min-height: 74px;
    resize: vertical;
}

div.toggle-string {
    flex: 1;
}

input.toggle-string {
    border-top-right-radius: 0 !important;
    height: 100%;
}

.operation [class^='bmd-label'],
.operation [class*=' bmd-label'] {
    top: 13px !important;
    left: 12px;
    z-index: 10;
}

.operation label {
    color: #388e3c;
    color: var(--arg-label-colour);
}

.operation .checkbox label {
    color: #388e3c;
    color: var(--arg-label-colour);
}

.operation .is-focused [class^='bmd-label'] {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.operation .is-focused [class*=' bmd-label'] {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.operation .is-focused [class^='bmd-label'] {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.operation .is-focused [class*=' bmd-label'] {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.operation .is-focused label {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.operation .checkbox label:hover {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check {
    border-color: #424242;
    border-color: var(--input-border-colour);
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
    border-color: #424242;
    border-color: var(--input-border-colour);
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check {
    border-color: #1976d2;
    border-color: var(--input-highlight-colour);
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
    border-color: #1976d2;
    border-color: var(--input-highlight-colour);
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check {
    border-color: #999;
    border-color: var(--disabled-font-colour);
    color: #999;
    color: var(--disabled-font-colour);
}

.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
    border-color: #999;
    border-color: var(--disabled-font-colour);
    color: #999;
    color: var(--disabled-font-colour);
}

.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check {
    border-color: #999;
    border-color: var(--disabled-font-colour);
    color: #999;
    color: var(--disabled-font-colour);
}

.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
    border-color: #999;
    border-color: var(--disabled-font-colour);
    color: #999;
    color: var(--disabled-font-colour);
}

.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check {
    border-color: #b94a48;
    border-color: var(--breakpoint-font-colour);
    color: #b94a48;
    color: var(--breakpoint-font-colour);
}

.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
    border-color: #b94a48;
    border-color: var(--breakpoint-font-colour);
    color: #b94a48;
    color: var(--breakpoint-font-colour);
}

.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check {
    border-color: #b94a48;
    border-color: var(--breakpoint-font-colour);
    color: #b94a48;
    color: var(--breakpoint-font-colour);
}

.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
    border-color: #b94a48;
    border-color: var(--breakpoint-font-colour);
    color: #b94a48;
    color: var(--breakpoint-font-colour);
}

.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check {
    border-color: #94312f;
    border-color: var(--fc-breakpoint-operation-font-colour);
    color: #94312f;
    color: var(--fc-breakpoint-operation-font-colour);
}

.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
    border-color: #94312f;
    border-color: var(--fc-breakpoint-operation-font-colour);
    color: #94312f;
    color: var(--fc-breakpoint-operation-font-colour);
}

.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check {
    border-color: #94312f;
    border-color: var(--fc-breakpoint-operation-font-colour);
    color: #94312f;
    color: var(--fc-breakpoint-operation-font-colour);
}

.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
    border-color: #94312f;
    border-color: var(--fc-breakpoint-operation-font-colour);
    color: #94312f;
    color: var(--fc-breakpoint-operation-font-colour);
}

.operation .form-control {
    padding: 20px 12px 6px 12px !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-image: none;
    background-color: #fff;
    background-color: var(--arg-background);
    background-position-y: 100%, 100%;
    color: #424242;
    color: var(--arg-font-colour);
}

.operation .form-control:hover {
    background-image:
        linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
        linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
    background-image:
        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px),
        linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
    -webkit-filter: brightness(97%);
            filter: brightness(97%);
}

.operation .form-control:focus {
    background-color: #fff;
    background-color: var(--arg-background);
    background-image:
        linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
        linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
    background-image:
        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px),
        linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
}

.operation .bmd-form-group.is-filled label.bmd-label-floating,
.operation .bmd-form-group.is-focused label.bmd-label-floating {
    top: 4px !important;
    left: 12px;
}

.operation label.bmd-label-floating {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: calc(100% - 13px);
}

.input-group .form-control {
    border-top-left-radius: 4px;
}

.input-group-append button {
    border-top-right-radius: 4px;
    background-color: #fff !important;
    background-color: var(--arg-background) !important;
    margin: unset;
}

.input-group-append button:hover {
    -webkit-filter: brightness(97%);
            filter: brightness(97%);
}

.editable-option-menu {
    height: auto;
    max-height: 350px;
    overflow-x: hidden;
}

.editable-option-menu .dropdown-item {
    padding: 0.3rem 1rem 0.3rem 1rem;
    min-height: 1.6rem;
    max-width: 20rem;
}

.ingredients .dropdown-toggle-split {
    height: 40px !important;
}

.boolean-arg {
    height: 46px;
}

.boolean-arg .checkbox {
    height: 100%;
}

.boolean-arg .checkbox label {
    height: 100%;
    display: flex;
    align-items: center;
}

.boolean-arg .checkbox-decorator {
    top: 13px;
}

.register-list {
    background-color: #b3dba2;
    background-color: var(--fc-operation-border-colour);
    font-family: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-family: var(--fixed-width-font-family);
    padding: 10px;
    word-break: break-all;
}

.op-icon {
    float: right;
    color: #f44336;
    font-size: 18px;
    cursor: pointer;
}

.recip-icons {
    position: absolute;
    top: 13px;
    right: 10px;
    height: 16px;
}

.recip-icons i {
    margin-right: 10px;
    vertical-align: baseline;
    float: right;
    font-size: 18px;
    cursor: pointer;
}

.disable-icon {
    color: #9e9e9e;
    color: var(--disable-icon-colour);
}

.disable-icon-selected {
    color: #f44336;
    color: var(--disable-icon-selected-colour);
}

.breakpoint {
    color: #9e9e9e;
    color: var(--breakpoint-icon-colour);
}

.breakpoint-selected {
    color: #f44336;
    color: var(--breakpoint-icon-selected-colour);
}

.break {
    color: #b94a48 !important;
    color: var(--breakpoint-font-colour) !important;
    background-color: #f2dede !important;
    background-color: var(--breakpoint-bg-colour) !important;
    border-color: #eed3d7 !important;
    border-color: var(--breakpoint-border-colour) !important;
}

.break .form-group * { color: #dc322f !important; color: var(--breakpoint-font-colour) !important; }

.selected-op {
    color: #c09853 !important;
    color: var(--selected-operation-font-color) !important;
    background-color: #fcf8e3 !important;
    background-color: var(--selected-operation-bg-colour) !important;
    border-color: #fbeed5 !important;
    border-color: var(--selected-operation-border-colour) !important;
}

.selected-op .form-group * { color: #586e75 !important; color: var(--selected-operation-font-color) !important; }

.flow-control-op {
    color: #396f3a !important;
    color: var(--fc-operation-font-colour) !important;
    background-color: #c7e4ba !important;
    background-color: var(--fc-operation-bg-colour) !important;
    border-color: #b3dba2 !important;
    border-color: var(--fc-operation-border-colour) !important;
}

.flow-control-op .form-group *:not(.arg) { color: #586e75; color: var(--fc-operation-font-colour) }

.flow-control-op.break {
    color: #94312f !important;
    color: var(--fc-breakpoint-operation-font-colour) !important;
    background-color: #eabfbf !important;
    background-color: var(--fc-breakpoint-operation-bg-colour) !important;
    border-color: #e2aeb5 !important;
    border-color: var(--fc-breakpoint-operation-border-colour) !important;
}

.flow-control-op.break .form-group * { color: #073642 !important; color: var(--fc-breakpoint-operation-font-colour) !important; }

.disabled {
    color: #999 !important;
    color: var(--disabled-font-colour) !important;
    background-color: #dfdfdf !important;
    background-color: var(--disabled-bg-colour) !important;
    border-color: #cdcdcd !important;
    border-color: var(--disabled-border-colour) !important;
}

.disabled .form-group * { color: #93a1a1 !important; color: var(--disabled-font-colour) !important; }

.break .register-list {
    color: #94312f !important;
    color: var(--fc-breakpoint-operation-font-colour) !important;
    background-color: #e2aeb5 !important;
    background-color: var(--fc-breakpoint-operation-border-colour) !important;
}

.disabled .register-list {
    color: #999 !important;
    color: var(--disabled-font-colour) !important;
    background-color: #cdcdcd !important;
    background-color: var(--disabled-border-colour) !important;
}

/**
 * Workspace pane styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

:root {
    --title-height: 48px;
    --tab-height: 40px;
}

.title {
    padding: 8px;
    padding-left: 12px;
    padding-right: 12px;
    height: 48px;
    height: var(--title-height);
    border-bottom: 1px solid #ddd;
    border-bottom: 1px solid var(--primary-border-colour);
    font-weight: bold;
    font-weight: var(--title-weight);
    font-size: 16px;
    font-size: var(--title-size);
    color: #424242;
    color: var(--title-colour);
    background-color: #fafafa;
    background-color: var(--title-background-colour);
    line-height: calc(48px - 14px);
    line-height: calc(var(--title-height) - 14px);
}

.pane-controls {
    position: absolute;
    right: 8px;
    top: 8px;
    display: flex;
    flex-direction: row;
}

.pane-controls .btn {
    margin-left: 2px;
}

.list-area {
    position: absolute;
    top: 48px;
    top: var(--title-height);
    bottom: 0;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#files .card-header .float-right a:hover {
    text-decoration: none;
}

/* Layout */

/**
 * Banner area styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

#banner {
    position: absolute;
    height: 30px;
    width: 100%;
    line-height: 30px;
    border-bottom: 1px solid #ddd;
    border-bottom: 1px solid var(--primary-border-colour);
    color: #468847;
    color: var(--banner-font-colour);
    background-color: #dff0d8;
    background-color: var(--banner-bg-colour);
    margin: 0;
}

#banner i {
    vertical-align: middle;
    padding-right: 10px;
}

#banner a {
    color: #1976d2;
    color: var(--banner-url-colour);
}

#notice-wrapper {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/**
 * Controls area styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

#controls {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 10px 0;
    border-top: 1px solid #ddd;
    border-top: 1px solid var(--primary-border-colour);
    background-color: #fafafa;
    background-color: var(--secondary-background-colour);
}

#controls-content {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

#auto-bake-label {
    display: inline-block;
    width: 100px;
    padding: 0;
    margin: 0;
    text-align: center;
    color: #333;
    color: var(--primary-font-colour);
    font-size: 14px;
    cursor: pointer;
}

#auto-bake-label .check {
    border-color: #1976d2;
    border-color: var(--input-highlight-colour);
    color: #1976d2;
    color: var(--input-highlight-colour);
}

#auto-bake-label .check::before {
    border-color: #1976d2;
    border-color: var(--input-highlight-colour);
    color: #1976d2;
    color: var(--input-highlight-colour);
}

#auto-bake-label .checkbox-decorator {
    position: relative;
}

#bake {
    box-shadow: none;
}

#controls .btn {
    border-radius: 30px;
    margin: 0;
}

.output-maximised .hide-on-maximised-output {
    display: none !important;
}

.spin {
    animation-name: spin;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    0%      {transform: rotate(0deg);}
    100%    {transform: rotate(360deg);}
}

/**
 * Input/Output area styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

#input-text,
#output-text {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: transparent;
    overflow: hidden;
    -webkit-user-select: auto;
       -moz-user-select: auto;
            user-select: auto;
}

#output-text.html-output .cm-content,
#output-text.html-output .cm-line,
#output-html {
    display: block;
    height: 100%;
    -webkit-user-select: auto;
       -moz-user-select: auto;
            user-select: auto;
}

#output-text.html-output .cm-line .cm-widgetBuffer,
#output-text.html-output .cm-line>br {
    display: none;
}

.cm-editor {
    height: 100%;
}

.cm-editor .cm-content {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-family: var(--fixed-width-font-family);
    font-size: inherit;
    font-size: var(--fixed-width-font-size);
    color: inherit;
    color: var(--fixed-width-font-colour);
}

#input-tabs-wrapper #input-tabs {
    list-style: none;
    background-color: #fafafa;
    background-color: var(--title-background-colour);
    padding: 0;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #ddd;
    border-bottom: 1px solid var(--primary-border-colour);
    border-left: 1px solid #ddd;
    border-left: 1px solid var(--primary-border-colour);
    height: 40px;
    height: var(--tab-height);
    clear: none;
}

#output-tabs-wrapper #output-tabs {
    list-style: none;
    background-color: #fafafa;
    background-color: var(--title-background-colour);
    padding: 0;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #ddd;
    border-bottom: 1px solid var(--primary-border-colour);
    border-left: 1px solid #ddd;
    border-left: 1px solid var(--primary-border-colour);
    height: 40px;
    height: var(--tab-height);
    clear: none;
}

#input-tabs li {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-width: 120px;
    float: left;
    padding: 0px;
    text-align: center;
    border-right: 1px solid #ddd;
    border-right: 1px solid var(--primary-border-colour);
    height: 40px;
    height: var(--tab-height);
    vertical-align: middle;
}

#output-tabs li {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-width: 120px;
    float: left;
    padding: 0px;
    text-align: center;
    border-right: 1px solid #ddd;
    border-right: 1px solid var(--primary-border-colour);
    height: 40px;
    height: var(--tab-height);
    vertical-align: middle;
}

#input-tabs li:hover {
    cursor: pointer;
    background-color: #fff;
    background-color: var(--primary-background-colour);
}

#output-tabs li:hover {
    cursor: pointer;
    background-color: #fff;
    background-color: var(--primary-background-colour);
}

.active-input-tab {
    font-weight: bold;
    background-color: #fff;
    background-color: var(--primary-background-colour);
}

.active-output-tab {
    font-weight: bold;
    background-color: #fff;
    background-color: var(--primary-background-colour);
}

.input-tab-content+.btn-close-tab {
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 2px;
}

.input-tab-content+.btn-close-tab i {
    font-size: 0.8em;
}

.input-tab-buttons {
    width: 25px;
    text-align: center;
    margin: 0;
    height: 40px;
    height: var(--tab-height);
    line-height: 40px;
    line-height: var(--tab-height);
    font-weight: bold;
    background-color: #fafafa;
    background-color: var(--title-background-colour);
    border-bottom: 1px solid #ddd;
    border-bottom: 1px solid var(--primary-border-colour);
}

.output-tab-buttons {
    width: 25px;
    text-align: center;
    margin: 0;
    height: 40px;
    height: var(--tab-height);
    line-height: 40px;
    line-height: var(--tab-height);
    font-weight: bold;
    background-color: #fafafa;
    background-color: var(--title-background-colour);
    border-bottom: 1px solid #ddd;
    border-bottom: 1px solid var(--primary-border-colour);
}

.input-tab-buttons:hover {
    cursor: pointer;
    background-color: #fff;
    background-color: var(--primary-background-colour);
}

.output-tab-buttons:hover {
    cursor: pointer;
    background-color: #fff;
    background-color: var(--primary-background-colour);
}

#btn-next-input-tab,
#btn-input-tab-dropdown,
#btn-next-output-tab,
#btn-output-tab-dropdown {
    float: right;
}

#btn-previous-input-tab,
#btn-previous-output-tab {
    float: left;
}

#btn-close-all-tabs {
    color: #b94a48 !important;
    color: var(--breakpoint-font-colour) !important;
}

.input-tab-content {
    width: 100%;
    max-width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 40px;
    height: var(--tab-height);
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.output-tab-content {
    width: 100%;
    max-width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 40px;
    height: var(--tab-height);
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.btn-close-tab {
    height: 40px;
    height: var(--tab-height);
    vertical-align: middle;
    width: -moz-fit-content;
    width: fit-content;
}

.tabs-left > li:first-child {
    box-shadow: 15px 0px 15px -15px #ddd inset;
    box-shadow: 15px 0px 15px -15px var(--primary-border-colour) inset;
}

.tabs-right > li:last-child {
    box-shadow: -15px 0px 15px -15px #ddd inset;
    box-shadow: -15px 0px 15px -15px var(--primary-border-colour) inset;
}

#input-wrapper {
    height: calc(100% - 48px);
    height: calc(100% - var(--title-height));
}

#output-wrapper {
    height: calc(100% - 48px);
    height: calc(100% - var(--title-height));
}

#input-wrapper.show-tabs {
    height: calc(100% - 40px - 48px);
    height: calc(100% - var(--tab-height) - var(--title-height));
}

#output-wrapper.show-tabs {
    height: calc(100% - 40px - 48px);
    height: calc(100% - var(--tab-height) - var(--title-height));
}

#output-loader {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #fafafa;
    background-color: var(--secondary-background-colour);
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

    transition: all 0.5s ease;
}

#output-loader-animation {
    display: block;
    position: absolute;
    width: 60%;
    height: 60%;
    top: 10%;
    transition: all 0.5s ease;
}

#output-loader .loading-msg {
    opacity: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--primary-font-family);
    line-height: 20px;
    line-height: var(--primary-line-height);
    color: #333;
    color: var(--primary-font-colour);
    left: unset;
    top: 30%;
    position: relative;

    transition: all 0.5s ease;
}

.io-info {
    margin-right: 18px;
    margin-top: 1px;
    height: 30px;
    text-align: right;
    line-height: 12px;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-family: var(--fixed-width-font-family);
    font-weight: normal;
    font-size: 8pt;
    display: flex;
    align-items: center;
}

.dropping-file {
    border: 5px dashed #3a87ad !important;
    border: 5px dashed var(--drop-file-border-colour) !important;
}

#stale-indicator {
    opacity: 1;
    visibility: visible;
    transition: margin 0s, opacity 0.3s;
    margin-left: 5px;
    cursor: help;
}

#stale-indicator i {
    vertical-align: middle;
    margin-bottom: 5px;
}

#magic {
    opacity: 1;
    visibility: visible;
    transition: margin 0s 0.3s, opacity 0.3s 0.3s, visibility 0.3s 0.3s;
    margin-left: 5px;
    margin-bottom: 5px;
}

#magic.hidden,
#stale-indicator.hidden {
    visibility: hidden;
    transition: opacity 0.3s, margin 0.3s 0.3s, visibility 0.3s;
    opacity: 0;
}

#magic.hidden {
    margin-left: -32px;
}

#magic svg path {
    fill: #333;
    fill: var(--primary-font-colour);
}

.pulse {
    box-shadow: 0 0 0 0 rgba(90, 153, 212, .3);
    animation: pulse 1.5s 1;
}

.pulse:hover {
    animation-play-state: paused;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 20px rgba(90, 153, 212, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
    }
}

#input-find-options,
#output-find-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

#input-tab-body .form-group.input-group,
#output-tab-body .form-group.input-group {
    width: 70%;
    float: left;
    margin-bottom: 2rem;
}

.input-find-option .toggle-string {
    width: 70%;
    display: inline-block;
}

.input-find-option-append button {
    border-top-right-radius: 4px;
    background-color: #fff !important;
    background-color: var(--arg-background) !important;
    margin: unset;
}

.input-find-option-append button:hover {
    -webkit-filter: brightness(97%);
            filter: brightness(97%);
}

.form-group.output-find-option {
    width: 70%;
    float: left;
}

#input-num-results-container,
#output-num-results-container {
    width: 20%;
    float: right;
    margin: 0;
    margin-left: 10%;
}

#input-find-options-checkboxes,
#output-find-options-checkboxes {
    list-style: none;
    padding: 0;
    margin: auto;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
    width: -moz-fit-content;
    width: fit-content;
}

#input-find-options-checkboxes li,
#output-find-options-checkboxes li {
    display: flex;
    flex-direction: row;
    float: left;
    padding: 10px;
    text-align: center;
}

#input-search-results,
#output-search-results {
    list-style: none;
    width: 75%;
    min-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

#input-search-results li {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    width: 100%;
    color: #3a87ad;
    color: var(--op-list-operation-font-colour);
    background-color: #d9edf7;
    background-color: var(--op-list-operation-bg-colour);
    border-bottom: 2px solid #bce8f1;
    border-bottom: 2px solid var(--op-list-operation-border-colour);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#output-search-results li {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    width: 100%;
    color: #3a87ad;
    color: var(--op-list-operation-font-colour);
    background-color: #d9edf7;
    background-color: var(--op-list-operation-bg-colour);
    border-bottom: 2px solid #bce8f1;
    border-bottom: 2px solid var(--op-list-operation-border-colour);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#input-search-results li:first-of-type {
    border-top: 2px solid #bce8f1;
    border-top: 2px solid var(--op-list-operation-border-colour);
}

#output-search-results li:first-of-type {
    border-top: 2px solid #bce8f1;
    border-top: 2px solid var(--op-list-operation-border-colour);
}

#input-search-results li:hover,
#output-search-results li:hover {
    cursor: pointer;
    -webkit-filter: brightness(98%);
            filter: brightness(98%);
}

/* Highlighting */

.ͼ2.cm-focused .cm-selectionBackground {
    background-color: #8de768aa;
    background-color: var(--hl5);
}

.ͼ2 .cm-selectionBackground {
    background-color: #ffee00aa;
    background-color: var(--hl1);
}

.ͼ1 .cm-selectionMatch {
    background-color: #95dfffaa;
    background-color: var(--hl2);
}

.ͼ1.cm-focused .cm-cursor.cm-cursor-primary {
    border-color: #333;
    border-color: var(--primary-font-colour);
}

.ͼ1 .cm-cursor.cm-cursor-primary {
    display: block;
    border-color: #999;
    border-color: var(--subtext-font-colour);
}

/* Status bar */

.cm-panel input::-webkit-input-placeholder {
    font-size: 12px !important;
}

.cm-panel input::-moz-placeholder {
    font-size: 12px !important;
}

.cm-panel input::placeholder {
    font-size: 12px !important;
}

.ͼ2 .cm-panels {
    background-color: #fafafa;
    background-color: var(--secondary-background-colour);
    border-color: #ddd;
    border-color: var(--primary-border-colour);
    color: #333;
    color: var(--primary-font-colour);
}

.ͼ2 .cm-side-panels {
    background-color: #fafafa;
    background-color: var(--secondary-background-colour);
    border-color: #ddd;
    border-color: var(--primary-border-colour);
    color: #333;
    color: var(--primary-font-colour);
}

.cm-status-bar {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-family: var(--fixed-width-font-family);
    font-weight: normal;
    font-size: 8pt;
    margin: 0 5px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.cm-status-bar i {
    font-size: 12pt;
    vertical-align: middle;
    margin-left: 8px;
}

.cm-status-bar>div>span:first-child i {
    margin-left: 0;
}

.cm-status-bar .disabled {
    background-color: unset !important;
    cursor: not-allowed;
}

/* Dropup Button */

.cm-status-bar-select-btn {
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropup content */

.cm-status-bar-select {
    position: relative;
    display: inline-block;
}

/* Dropup content (Hidden by Default) */

.cm-status-bar-select-content {
    display: none;
    position: absolute;
    bottom: 20px;
    right: 0;
    background-color: #f1f1f1;
    min-width: 200px;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropup */

.cm-status-bar-select-content a {
    color: black;
    padding: 2px 5px;
    text-decoration: none;
    display: block;
}

/* Change color of dropup links on hover */

.cm-status-bar-select-content a:hover {
    background-color: #ddd
}

/* Change the background color of the dropup button when the dropup content is shown */

.cm-status-bar-select:hover .cm-status-bar-select-btn {
    background-color: #f1f1f1;
}

/* The search field */

.cm-status-bar-filter-input {
    box-sizing: border-box;
    font-size: 12px;
    padding-left: 10px !important;
    border: none;
}

.cm-status-bar-filter-search {
    border-top: 1px solid #ddd;
}

/* Show the dropup menu */

.cm-status-bar-select .show {
    display: block;
}

.cm-status-bar-select-scroll {
    overflow-y: auto;
    max-height: 300px;
}

.chr-enc-value {
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* File details panel */

.cm-file-details {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    padding-bottom: 21px;
    height: 100%;
}

.file-details-toggle-shown {
    width: 8px;
    height: 40px;
    border: 1px solid #eee;
    border: 1px solid var(--secondary-border-colour);
    position: absolute;
    top: calc(50% - 20px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    background-color: var(--secondary-border-colour);
    color: #999;
    color: var(--subtext-font-colour);
    z-index: 1;
}

.file-details-toggle-hidden {
    width: 8px;
    height: 40px;
    border: 1px solid #eee;
    border: 1px solid var(--secondary-border-colour);
    position: absolute;
    top: calc(50% - 20px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    background-color: var(--secondary-border-colour);
    color: #999;
    color: var(--subtext-font-colour);
    z-index: 1;
}

.file-details-toggle-shown {
    left: 0;
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.file-details-toggle-hidden {
    left: -8px;
    border-right: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.file-details-toggle-shown:hover {
    background-color: #ddd;
    background-color: var(--primary-border-colour);
    border-color: #ddd;
    border-color: var(--primary-border-colour);
    color: #333;
    color: var(--primary-font-colour);
}

.file-details-toggle-hidden:hover {
    background-color: #ddd;
    background-color: var(--primary-border-colour);
    border-color: #ddd;
    border-color: var(--primary-border-colour);
    color: #333;
    color: var(--primary-font-colour);
}

.file-details-heading {
    font-weight: bold;
    margin: 10px 0 10px 0;
}

.file-details-data {
    text-align: left;
    margin: 10px 2px;
}

.file-details-data td {
    padding: 0 3px;
    max-width: 130px;
    min-width: 60px;
    overflow: hidden;
    vertical-align: top;
    word-break: break-all;
}

.file-details-error {
    color: #f00;
}

.file-details-thumbnail {
    max-width: 180px;
}

/**
 * Modal layout styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

.modal-content {
    background-color: #fff;
    background-color: var(--primary-background-colour);
}

.option-item {
    margin-bottom: 20px;
}

#edit-favourites-list {
    margin: 10px;
    border: 1px solid #bce8f1;
    border: 1px solid var(--op-list-operation-border-colour);
}

#edit-favourites-list .operation {
    border-left: none;
    border-right: none;
}

#edit-favourites-list .operation:last-child {
    border-bottom: none;
}

.about-img-left {
    float: left;
    margin: 10px 20px 20px 0;
}

.about-img-right {
    float: right;
    margin: 10px 0 20px 20px;
}

#save-link-group {
    padding-top: 0;
}

.save-link-options {
    float: right;
}

.save-link-options label {
    margin-left: 10px;
}

#save-footer {
    border-top: none;
    margin-top: 0;
    border-bottom: 1px solid #ddd;
    border-bottom: 1px solid var(--primary-border-colour);
}

#support-modal textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--primary-font-family);
}

#save-texts textarea {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-family: var(--fixed-width-font-family);
}

#load-text {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-family: var(--fixed-width-font-family);
}

#save-texts textarea {
    height: 200px;
}

#faqs a.btn {
    text-transform: unset;
}

#faqs > div {
    padding: 20px;
    border-left: 2px solid #ddd;
    border-left: 2px solid var(--primary-border-colour);
}

.checkbox label input[type=checkbox]+.checkbox-decorator .check {
    border-color: #424242;
    border-color: var(--input-border-colour);
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
    border-color: #424242;
    border-color: var(--input-border-colour);
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check {
    border-color: #1976d2;
    border-color: var(--input-highlight-colour);
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
    border-color: #1976d2;
    border-color: var(--input-highlight-colour);
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.bmd-form-group.is-focused .option-item label {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.bmd-form-group.is-focused [class^='bmd-label'] {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.bmd-form-group.is-focused [class*=' bmd-label'] {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.bmd-form-group.is-focused [class^='bmd-label'] {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.bmd-form-group.is-focused [class*=' bmd-label'] {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.bmd-form-group.is-focused label {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.checkbox label:hover {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.bmd-form-group.is-filled:focus-within .checkbox.option-item label {
    color: #1976d2;
    color: var(--input-highlight-colour);
}

.bmd-form-group.option-item label+.form-control{
    background-image:
        linear-gradient(to top, #1976d2 2px, rgba(0, 0, 0, 0) 2px),
        linear-gradient(to top, #ddd 1px, rgba(0, 0, 0, 0) 1px);
    background-image:
        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
        linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
}

/**
 * Operation area styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

.op-list .operation {
    color: #3a87ad;
    color: var(--op-list-operation-font-colour);
    background-color: #d9edf7;
    background-color: var(--op-list-operation-bg-colour);
    border-color: #bce8f1;
    border-color: var(--op-list-operation-border-colour);
}

#search {
    padding-left: 10px;
    padding-right: 10px;
    background-image:
        linear-gradient(to top, #1976d2 2px, rgba(0, 0, 0, 0) 2px),
        linear-gradient(to top, #ddd 1px, rgba(0, 0, 0, 0) 1px);
    background-image:
        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
        linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
}

#edit-favourites {
    float: right;
    margin-top: -7px;
}

.favourites-hover {
    color: #468847;
    color: var(--rec-list-operation-font-colour);
    background-color: #dff0d8;
    background-color: var(--rec-list-operation-bg-colour);
    border: 2px dashed #468847 !important;
    border: 2px dashed var(--rec-list-operation-font-colour) !important;
    padding: 8px 8px 9px 8px;
}

#categories a {
    color: #1976d2;
    color: var(--category-list-font-colour);
    cursor: pointer;
}

#categories a:hover,
.op-list .operation:hover {
    -webkit-filter: brightness(98%);
            filter: brightness(98%);
}

/**
 * Recipe area styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

#rec-list {
    overflow: auto;
}

#rec-list .operation {
    color: #468847;
    color: var(--rec-list-operation-font-colour);
    background-color: #dff0d8;
    background-color: var(--rec-list-operation-bg-colour);
    border-color: #d3e8c0;
    border-color: var(--rec-list-operation-border-colour);
}

/**
 * Overall page structure styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

body {
    overflow: hidden;
}

#content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#workspace-wrapper {
    position: absolute;
    top: 30px;
    bottom: 0;
    width: 100%;
}

div#operations,
div#recipe {
    width: 50%;
    height: 100%;
}

div#input,
div#output {
    width: 100%;
    height: 50%;
}

.split {
    box-sizing: border-box;
    /* overflow: auto; */
    /* Removed to enable Background Magic button pulse to overflow.
    Replace this rule if it seems to be causing problems. */
    position: relative;
}

#operations.split {
    overflow: auto;
}

.split.split-horizontal, .gutter.gutter-horizontal {
    height: 100%;
    float: left;
}

.gutter {
    background-color: #eee;
    background-color: var(--secondary-border-colour);
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-horizontal {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAeCAYAAAAGos/EAAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB+EFBhEwBDmIiYYAAAAjSURBVBjTYzxz5sx/BgYGBiYGKGB89+4dA4oIy71790aGGgCn+DBbOcAB0wAAAABJRU5ErkJggg==);
    cursor: ew-resize;
}

.gutter.gutter-vertical {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAACCAYAAABPJGxCAAAABGdBTUEAALGOfPtRkwAACkNpQ0NQSUNDIFByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaOWJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHiwmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryMAgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0lYqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHiNLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYAQH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6cwR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBiewhi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1cQPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqOY4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hMWEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgohJZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSUEko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/pdLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Yb1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7OUndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsbdi97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W7eva73VwnUCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxrPGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H08PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+Hvqa+It89viN+1n6Zfgf8nvs7+sv9j/i/4XnyFvFOBWABwQHlAb2BGoGzA2sDHwSZBKUHNQWNBbsGLww+FUIMCQ1ZH3KTb8AX8hv5YzPcZyya0RXKCJ0VWhv6MMwmTB7WEY6GzwjfEH5vpvlM6cy2CIjgR2yIuB9pGZkX+X0UKSoyqi7qUbRTdHF09yzWrORZ+2e9jvGPqYy5O9tqtnJ2Z6xqbFJsY+ybuIC4qriBeIf4RfGXEnQTJAntieTE2MQ9ieNzAudsmjOc5JpUlnRjruXcorkX5unOy553PFk1WZB8OIWYEpeyP+WDIEJQLxhP5aduTR0T8oSbhU9FvqKNolGxt7hKPJLmnVaV9jjdO31D+miGT0Z1xjMJT1IreZEZkrkj801WRNberM/ZcdktOZSclJyjUg1plrQr1zC3KLdPZisrkw3keeZtyhuTh8r35CP5c/PbFWyFTNGjtFKuUA4WTC+oK3hbGFt4uEi9SFrUM99m/ur5IwuCFny9kLBQuLCz2Lh4WfHgIr9FuxYji1MXdy4xXVK6ZHhp8NJ9y2jLspb9UOJYUlXyannc8o5Sg9KlpUMrglc0lamUycturvRauWMVYZVkVe9ql9VbVn8qF5VfrHCsqK74sEa45uJXTl/VfPV5bdra3kq3yu3rSOuk626s91m/r0q9akHV0IbwDa0b8Y3lG19tSt50oXpq9Y7NtM3KzQM1YTXtW8y2rNvyoTaj9nqdf13LVv2tq7e+2Sba1r/dd3vzDoMdFTve75TsvLUreFdrvUV99W7S7oLdjxpiG7q/5n7duEd3T8Wej3ulewf2Re/ranRvbNyvv7+yCW1SNo0eSDpw5ZuAb9qb7Zp3tXBaKg7CQeXBJ9+mfHvjUOihzsPcw83fmX+39QjrSHkr0jq/dawto22gPaG97+iMo50dXh1Hvrf/fu8x42N1xzWPV56gnSg98fnkgpPjp2Snnp1OPz3Umdx590z8mWtdUV29Z0PPnj8XdO5Mt1/3yfPe549d8Lxw9CL3Ytslt0utPa49R35w/eFIr1tv62X3y+1XPK509E3rO9Hv03/6asDVc9f41y5dn3m978bsG7duJt0cuCW69fh29u0XdwruTNxdeo94r/y+2v3qB/oP6n+0/rFlwG3g+GDAYM/DWQ/vDgmHnv6U/9OH4dJHzEfVI0YjjY+dHx8bDRq98mTOk+GnsqcTz8p+Vv9563Or59/94vtLz1j82PAL+YvPv655qfNy76uprzrHI8cfvM55PfGm/K3O233vuO+638e9H5ko/ED+UPPR+mPHp9BP9z7nfP78L/eE8/vcxDeEAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4QUGETI0LWfbqAAAACNJREFUCNdjPHPmzH8GBgYGJSUlRgYGBoZ79+7Rhc/EMEAAAHd6H2e3/71BAAAAAElFTkSuQmCC);
    cursor: ns-resize;
}

/* Operations */

del {
    background-color: #ffb6b6aa;
    background-color: var(--hl3);
}

ins {
    text-decoration: underline; /* shouldn't be needed, but Chromium doesn't copy to clipboard without it */
    background-color: #8de768aa;
    background-color: var(--hl5);
}

/**
 * JSON styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2022
 * @license Apache-2.0
 *
 * Adapted for CyberChef by @n1474335 from jQuery json-viewer
 * @author Alexandre Bodelot <alexandre.bodelot@gmail.com>
 * @link https://github.com/abodelot/jquery.json-viewer
 * @license MIT
 */

/* Root element */

.json-document {
    padding: .5em 1.5em;
}

/* Syntax highlighting for JSON objects */

ul.json-dict, ol.json-array {
    list-style-type: none;
    margin: 0 0 0 1px;
    border-left: 1px dotted #ccc;
    padding-left: 2em;
}

.json-string {
    color: green;
}

.json-literal {
    color: red;
}

.json-brace,
.json-bracket,
.json-colon,
.json-comma {
    color: gray;
}

/* Collapse */

.json-details {
    display: inline;
}

.json-details[open] {
    display: contents;
}

.json-summary {
    display: inline;
    list-style: none;
}

/* Display object and array brackets when closed */

.json-summary.json-obj::after {
    color: gray;
    content: "{ ... }"
}

.json-summary.json-arr::after {
    color: gray;
    content: "[ ... ]"
}

.json-details[open] > .json-summary.json-obj::after,
.json-details[open] > .json-summary.json-arr::after  {
    content: "";
}

/* Show arrows, even in inline mode */

.json-summary::before {
    content: "\25BC";
    color: #c0c0c0;
    margin-left: -12px;
    margin-right: 5px;
    display: inline-block;
    transform: rotate(-90deg);
}

.json-summary:hover::before {
    color: #aaa;
}

.json-details[open] > .json-summary::before {
    transform: rotate(0deg);
}