/*
Searchable terms:
[TYPE]          [Search Term]
Themes  ------> Dark theme
                Light theme
                Night theme
                Red Green CB theme
                Dark Night theme
                Orange Soda Theme
                Dracula Theme
Theme colors -> Theme colors
Components  --> .has-text-xxx
                .popper
                .fool
                .tabs
                .button
                .basic-button
                .Label
                .checkbox
                .dropdown
                .b-tooltip
                Trade
                UI Bars
                .meter
                .main
                .fort
                .market-item
                .modalBox
                .industry
                Stars
                -webkit-scrollbar
                .pop-desc
Misc ---------> Main template
                Base CSS
*/

// Named colors
@black: #000;
@white: #fff;

// Named bulma colors
@bulma-success: #48c774;
@bulma-danger: #f14668;
@bulma-info: #167df0;
@bulma-dark: #363636;
@bulma-warning: #ffdd57;
@bulma-link: #4a4a4a;
@bulma-link-active: #B86BFF;
@bulma-link-hover: #363636;
@bulma-label: #363636;
@bulma-checkbox-hover: #363636;

// Library containing all theme colors
#lib {
    .themes() {

        // Dark theme
        .dark() {
            // Theme colors {
            @html-background: #1f2424;
            @primary-border: #ccc;
            @secondary-border: @primary-border;
            @primary-color: @white;
            @secondary-color: #3a4344;

            @link: #1abc9c;
            @link-hover: #f2f2f2;
            @enabled: #00af0f;
            @disabled: #c20000;
            // }

            // .has-text-xxx
            @has-text-advanced: #00ac95;
            @has-text-alert: #af5d00;
            @has-text-caution: #ffa500;
            @has-text-danger: @bulma-danger;
            @has-text-fade: #5e5e5e;
            @has-text-flair: @has-text-special;
            @has-text-label: #ffff9e;
            @has-text-special: #91006c;
            @has-text-info: @bulma-info;
            @has-text-success: @bulma-success;
            @has-text-warning: @bulma-warning;

            // .popper
            @popper: #363636;
            @popper-has-text-label: #1100ff;
            @popper-has-text-success: #1c7e21;
            @popper-has-text-warning: #776425;
            @modal-child-popper-background: #f5f5f5;
            @modal-child-popper-border: @black;

            /* AFP 2021
            // .fool
            @fool-has-text-danger: #23d160;
            @fool-has-text-success: #ff3860;
            @fool-popper-has-text-danger: @popper-has-text-success;
            @fool-span-on: @disabled;
            @fool-span-off: @enabled;
            */

            // .tabs
            @tabs-li-is-active-link-border: @link;
            @tabs-li-is-active-link: @link;

            // .button
            @button-background: #282f2f;
            @button: @primary-color;
            @button-hover-background: @secondary-color;
            @button-hover: @link-hover;
            @button-focus-border: #dbdbdb;

            // .basic-button
            @basic-button-border-hover-background: @secondary-color;
            @basic-button-border-hover: #eee;

            // .label
            @label: #dbdee0;

            // .checkbox
            @checkbox-hover: @link;

            // .dropdown
            @dropdown-content-background: #1f2424;

            // .b-tooltip
            @b-tooltip-accent: @link-hover;
            @b-tooltip-is-primary-background: @b-tooltip-accent;
            @b-tooltip-is-primary-border: #f5f5f5;
            @b-tooltip-is-primary: @black;

            // UI Bars
            @bars-background: @secondary-color;

            // .meter
            @meter-low: #cc0000;
            @meter-neutral: #c0ce00;
            @meter-high: #00af0f;

            // .main
            @div-special-border: #282f2f;
            @div-special-gear-fill: #ad5f12;
            @div-special-hover-border: @secondary-color;
            @div-special-hover-gear-fill: #d4af37;
            @span-on-border: #282f2f;
            @span-on: @enabled;
            @span-on-warn: #af5d00;
            @span-off-border: #282f2f;
            @span-off: @disabled;
            @span-on-off-hover-border: @secondary-color;
            @hl-button-border: @enabled;
            @link-button-background: #181818;
            @special-on-off-border: #181818;
            @oldTech: @primary-color;
            @cnam-aTitle: #975f5f;

            // .fort
            @fort-patrol-check-background: @black ;

            // .market-item
            @market-item-background: #0f1414;
            @market-item-order-hover-background: @secondary-color;
            @market-item-order-hover-border: #eee;

            // .modalBox
            @modalBox-background: #282f2f;

            // Stars
            @star-2-fill: @white;
            @star-3-fill: #cd7f32;
            @star-4-fill: #c0c0c0;
            @star-5-fill: #d4af37;

            // -webkit-scrollbar
            @webkit-scrollbar-background: @html-background;
            @webkit-scrollbar-thumb-background: #F5F5F5;
        }

        // Light theme
        .light() {
            // Theme colors {
            @html-background: @white;
            @primary-border: @black;
            @secondary-border: #4e4e4e;
            @primary-color: @black;
            @secondary-color: #3a4344;

            @link: @bulma-link;
            @link-hover: @bulma-link-hover;
            @enabled: #008f0c;
            @disabled: #800000;
            // }

            // .has-text-xxx
            @has-text-advanced: #0098a3;
            @has-text-alert: #743e00;
            @has-text-caution: #966100;
            @has-text-danger: #470303;
            @has-text-fade: #5e5e5e;
            @has-text-flair: @has-text-special;
            @has-text-info: @bulma-info;
            @has-text-label: #1100ff;
            @has-text-special: #91006c;
            @has-text-success: #082412;
            @has-text-warning: #7a6304;

            // .popper
            @popper: #363636;
            @popper-has-text-label: @has-text-label;
            @popper-has-text-success: #1c7e21;
            @popper-has-text-warning: @has-text-warning;
            @modal-child-popper-background: #f5f5f5;
            @modal-child-popper-border: @black;

            /* AFP 2021
            // .fool
            @fool-has-text-danger: @has-text-success;
            @fool-has-text-success: @has-text-danger;
            @fool-popper-has-text-danger: @fool-has-text-danger;
            @fool-span-on: @disabled;
            @fool-span-off: @enabled;
            */

            // .tabs
            @tabs-li-is-active-link-border: @bulma-link-active;
            @tabs-li-is-active-link: @bulma-link-active;

            // .button
            @button-background: @html-background;
            @button: @primary-color;
            @button-hover-background: #ccc;
            @button-hover: @primary-color;
            @button-focus-border: @primary-color;

            // .basic-button
            @basic-button-border-hover-background: #ccc;
            @basic-button-border-hover: #333;

            // .label
            @label: @bulma-label;

            // .checkbox
            @checkbox-hover: @bulma-checkbox-hover;

            // .dropdown
            @dropdown-content-background: @html-background;

            // .b-tooltip
            @b-tooltip-accent: #f2f2f2;
            @b-tooltip-is-primary-background: @b-tooltip-accent;
            @b-tooltip-is-primary-border: #f5f5f5;
            @b-tooltip-is-primary: @black;

            // UI Bars
            @bars-background: #c7c7c7;

            // .meter
            @meter-low: #cc0000;
            @meter-neutral: #c0ce00;
            @meter-high: #00af0f;

            // .main
            @div-special-border: #3a4344;
            @div-special-gear-fill: #3a4344;
            @div-special-hover-border: @primary-border;
            @div-special-hover-gear-fill: #4a5354;
            @span-on-border: @primary-border;
            @span-on: @enabled;
            @span-on-warn: #743e00;
            @span-off-border: @primary-border;
            @span-off: @disabled;
            @span-on-off-hover-border: @primary-border;
            @hl-button-border: @disabled;
            @link-button-background: #ddd;
            @special-on-off-border: @primary-border;
            @oldTech: @primary-color;
            @cnam-aTitle: #900;

            // .fort
            @fort-patrol-check-background: @white ;

            // .market-item
            @market-item-background: #ddd;
            @market-item-order-hover-background: #ccc;
            @market-item-order-hover-border: #333;

            // .modalBox
            @modalBox-background: @white;

            // Stars
            @star-2-fill: @black;
            @star-3-fill: #cd7f32;
            @star-4-fill: #c0c0c0;
            @star-5-fill: #d4af37;

            // -webkit-scrollbar
            @webkit-scrollbar-background: #F5F5F5;
            @webkit-scrollbar-thumb-background: @black;
        }

        // Night theme
        .night() {
            // Theme colors {
            @html-background: @black;
            // }

            // .has-text-xxx
            @has-text-flair: #d39753;
            @has-text-special: #e500b4;

            // .popper
            @popper: @white ;
            @popper-has-text-label: #ffff9e;
            @popper-has-text-success: #23d160;
            @popper-has-text-warning: #ffdd57;
            @modal-child-popper-background: #0f0f0f;
            @modal-child-popper-border: #999;

            // .b-tooltip
            @b-tooltip-accent: #999;
            @b-tooltip-is-primary-background: #0f0f0f;
            @b-tooltip-is-primary-border: #999;
            @b-tooltip-is-primary: @white;

            // .market-item
            @market-item-background: #1b1b1b;

            // -webkit-scrollbar
            @webkit-scrollbar-thumb-background: #727272;
        }

        // Red Green CB theme
        .redgreen() {
            // .has-text-xxx
            @has-text-danger: #9900cc;
            @has-text-flair: @has-text-success;
            @has-text-special: #ffff9e;
            @has-text-success: #00ff00;
            @has-text-warning: #ffcc00;

            // .popper
            @tabs-li-is-active-link: #167df0;

            /* AFP 2021
            // .fool
            @fool-has-text-danger: @has-text-success;
            @fool-has-text-success: @has-text-danger;
            @fool-span-on: @has-text-danger;
            @fool-span-off: @has-text-success;
            */

            // .meter
            @meter-low: #167df0;
            @meter-neutral: #00af0f;
            @meter-high: @white;

            // .main
            @span-on: @has-text-success;
            @span-off: @has-text-danger;
        }

        // Dark Night theme
        .darkNight() {
            // Theme colors {
            @primary-color: #b8b8b8;
            // }

            // .popper
            @popper: @primary-color ;

            // .button
            @button: #ccc;

            // .b-tooltip
            @b-tooltip-is-primary: @primary-color;
        }

        // GruvBox Light
        .gruvboxLight() {
            // Theme colors {
            @html-background: #fbf1c7;
            @primary-border: #3c3836;
            @secondary-border: @primary-border;
            @primary-color: #3c3836;
            @secondary-color: #d5c4a1;

            @link: #427b58;
            @link-hover: #689d6a;
            @enabled: #79740e;
            @disabled: #9d0006;
            // }

            // .has-text-xxx
            @has-text-advanced: #458588;
            @has-text-alert: #af5d00;
            @has-text-caution: #af3a03;
            @has-text-danger: @disabled ;
            @has-text-fade: #898B87;
            @has-text-flair: @has-text-special;
            @has-text-info: #076678;
            @has-text-label: #076678;
            @has-text-special: #8f3f71;
            @has-text-success: @enabled ;
            @has-text-warning: #b57614 ;

            // .popper
            @popper: @primary-color ;
            @popper-has-text-label: @has-text-label ;
            @popper-has-text-success: @has-text-success ;
            @popper-has-text-warning: @has-text-warning ;
            @modal-child-popper-background: #fbf1c7;
            @modal-child-popper-border: @secondary-border;

            /* AFP 2021
            // .fool
            @fool-has-text-danger: @has-text-success;
            @fool-has-text-success: @has-text-danger;
            @fool-popper-has-text-danger: @popper-has-text-success;
            @fool-span-on: @disabled;
            @fool-span-off: @enabled;
            */

            // .tabs
            @tabs-li-is-active-link-border: @link;
            @tabs-li-is-active-link: @link;

            // .button
            @button-background: #d5c4a1;
            @button: @primary-color;
            @button-hover-background: @secondary-color;
            @button-hover: @link-hover;
            @button-focus-border: @secondary-border;

            // .basic-button
            @basic-button-border-hover-background: #f2e5bc;
            @basic-button-border-hover: @link;

            // .label
            @label: @primary-color;

            // .checkbox
            @checkbox-hover: @link;

            // .dropdown
            @dropdown-content-background: @button-background;

            // .b-tooltip
            @b-tooltip-accent: #fbf1c7;
            @b-tooltip-is-primary-background: @b-tooltip-accent;
            @b-tooltip-is-primary-border: @primary-border;
            @b-tooltip-is-primary: @black;

            // UI Bars
            @bars-background: @secondary-color;

            // .meter
            @meter-low: @disabled;
            @meter-neutral: @has-text-caution;
            @meter-high: @has-text-info;

            // .main
            @div-special-border: @primary-border;
            @div-special-gear-fill: @link;
            @div-special-hover-border: @secondary-color;
            @div-special-hover-gear-fill: #F09D51;
            @span-on-border: @primary-border;
            @span-on: @enabled;
            @span-on-warn: #af5d00;
            @span-off-border: @primary-border;
            @span-off: @disabled;
            @span-on-off-hover-border: @secondary-color;
            @hl-button-border: @enabled;
            @link-button-background: #a89984;
            @special-on-off-border: @primary-border;
            @oldTech: @primary-color;
            @cnam-aTitle: @disabled;

            // .fort
            @fort-patrol-check-background: @black ;

            // .market-item
            @market-item-background: #f9f5d7;
            @market-item-order-hover-background: @secondary-color;
            @market-item-order-hover-border: @link-hover;

            // .modalBox
            @modalBox-background: @html-background;

            // Stars
            @star-2-fill: @white;
            @star-3-fill: #cd7f32;
            @star-4-fill: #c0c0c0;
            @star-5-fill: #d4af37;

            // -webkit-scrollbar
            @webkit-scrollbar-background: @html-background;
            @webkit-scrollbar-thumb-background: @primary-border;
        }

        // GruvBox Dark
        .gruvboxDark() {
            // Theme colors {
            @html-background: #282828;
            @primary-border: #3c3836;
            @secondary-border: #665c54;
            @primary-color: #ebdbb2;
            @secondary-color: #504945;

            @link: #8ec07c;
            @link-hover: #689d6a;
            @enabled: #b8bb26;
            @disabled: #fb4934;
            // }

            // .has-text-xxx
            @has-text-advanced: #458588;
            @has-text-alert: #af5d00;
            @has-text-caution: #fe8019;
            @has-text-danger: @disabled ;
            @has-text-fade: #898B87;
            @has-text-flair: @has-text-special;
            @has-text-info: #83a598;
            @has-text-label: #458588;
            @has-text-special: #d3869b;
            @has-text-success: @enabled ;
            @has-text-warning: #fabd2f ;

            // .popper
            @popper: @primary-color ;
            @popper-has-text-label: @has-text-label ;
            @popper-has-text-success: @has-text-success ;
            @popper-has-text-warning: @has-text-warning ;
            @modal-child-popper-background: #282828;
            @modal-child-popper-border: @secondary-border;

            /* AFP 2021
            // .fool
            @fool-has-text-danger: @has-text-success;
            @fool-has-text-success: @has-text-danger;
            @fool-popper-has-text-danger: @popper-has-text-success;
            @fool-span-on: @disabled;
            @fool-span-off: @enabled;
            */

            // .tabs
            @tabs-li-is-active-link-border: @link;
            @tabs-li-is-active-link: @link;

            // .button
            @button-background: #3c3836;
            @button: @primary-color;
            @button-hover-background: @secondary-color;
            @button-hover: @link-hover;
            @button-focus-border: @secondary-border;

            // .basic-button
            @basic-button-border-hover-background: #1d2021;
            @basic-button-border-hover: @link;

            // .label
            @label: @primary-color;

            // .checkbox
            @checkbox-hover: @link;

            // .dropdown
            @dropdown-content-background: @button-background;

            // .b-tooltip
            @b-tooltip-accent: #282828;
            @b-tooltip-is-primary-background: @b-tooltip-accent;
            @b-tooltip-is-primary-border: @primary-border;
            @b-tooltip-is-primary: @primary-color;

            // UI Bars
            @bars-background: @secondary-color;

            // .meter
            @meter-low: @disabled;
            @meter-neutral: @has-text-caution;
            @meter-high: @has-text-info;

            // .main
            @div-special-border: @primary-border;
            @div-special-gear-fill: #f09d51;
            @div-special-hover-border: @secondary-color;
            @div-special-hover-gear-fill: @link;
            @span-on-border: @primary-border;
            @span-on: @enabled;
            @span-on-warn: #af5d00;
            @span-off-border: @primary-border;
            @span-off: @disabled;
            @span-on-off-hover-border: @secondary-color;
            @hl-button-border: @enabled;
            @link-button-background: #1d2021;
            @special-on-off-border: @primary-border;
            @oldTech: @primary-color;
            @cnam-aTitle: @disabled;

            // .fort
            @fort-patrol-check-background: @black ;

            // .market-item
            @market-item-background: #1d2021;
            @market-item-order-hover-background: @secondary-color;
            @market-item-order-hover-border: @link-hover;

            // .modalBox
            @modalBox-background: @html-background;

            // Stars
            @star-2-fill: @white;
            @star-3-fill: #cd7f32;
            @star-4-fill: #c0c0c0;
            @star-5-fill: #d4af37;

            // -webkit-scrollbar
            @webkit-scrollbar-background: @html-background;
            @webkit-scrollbar-thumb-background: @primary-border;
        }

        // GruvBox Dark Red Green CB theme
        .gruvboxDarkRG() {
            // .has-text-xxx
            @has-text-danger: #c409bb;
            @has-text-flair: @has-text-success;
            @has-text-special: #ffff9e;
            @has-text-success: #00ff00;
            @has-text-warning: #ffcc00;
            @has-text-caution: #9ab8ff;
            @has-text-info: #83a598;
            @disabled: #ffe940;

            // .popper
            @tabs-li-is-active-link: #82bdff;

            .switch input[type=checkbox]:checked+.check {
                background: #a28cdf;
            }

            /* AFP 2021
            // .fool
            @fool-has-text-danger: @has-text-success;
            @fool-has-text-success: @has-text-danger;
            @fool-span-on: @has-text-danger;
            @fool-span-off: @has-text-success;
            */

            // .meter
            @meter-low: @disabled;
            @meter-neutral: @has-text-caution;
            @meter-high: @has-text-info;

            // .main
            @span-on: @has-text-success;
            @span-off: @has-text-danger;

            @cnam-aTitle: @disabled;
        }

        // Orange Soda theme
        .orangeSoda() {
            // Theme colors {
            @html-background: #131516;
            @primary-border: #313638;
            @secondary-border: @primary-border;
            @primary-color: #EBDBB2;
            @secondary-color: #313638;

            @link: #F06543;
            @link-hover: #D09376;
            @enabled: #35A7FF;
            @disabled: #C21E83;
            // }

            // .has-text-xxx
            @has-text-advanced: #00ac95;
            @has-text-alert: #af5d00;
            @has-text-caution: #F09D51;
            @has-text-danger: @disabled ;
            @has-text-fade: #898B87;
            @has-text-flair: @has-text-special;
            @has-text-info: @bulma-info;
            @has-text-label: #35A7FF;
            @has-text-special: #91006c;
            @has-text-success: @enabled ;
            @has-text-warning: @link ;

            // .popper
            @popper: @primary-color ;
            @popper-has-text-label: @has-text-label ;
            @popper-has-text-success: @has-text-success ;
            @popper-has-text-warning: @has-text-warning ;
            @modal-child-popper-background: #292929;
            @modal-child-popper-border: @secondary-border;

            /* AFP 2021
            // .fool
            @fool-has-text-danger: @has-text-success;
            @fool-has-text-success: @has-text-danger;
            @fool-popper-has-text-danger: @popper-has-text-success;
            @fool-span-on: @disabled;
            @fool-span-off: @enabled;
            */

            // .tabs
            @tabs-li-is-active-link-border: @link;
            @tabs-li-is-active-link: @link;

            // .button
            @button-background: #1C2021;
            @button: @primary-color;
            @button-hover-background: @secondary-color;
            @button-hover: @link-hover;
            @button-focus-border: @secondary-border;

            // .basic-button
            @basic-button-border-hover-background: #292929;
            @basic-button-border-hover: @link;

            // .label
            @label: @primary-color;

            // .checkbox
            @checkbox-hover: @link;

            // .dropdown
            @dropdown-content-background: @button-background;

            // .b-tooltip
            @b-tooltip-accent: @link-hover;
            @b-tooltip-is-primary-background: @b-tooltip-accent;
            @b-tooltip-is-primary-border: @primary-border;
            @b-tooltip-is-primary: @black;

            // UI Bars
            @bars-background: @secondary-color;

            // .meter
            @meter-low: @disabled;
            @meter-neutral: #38618C;
            @meter-high: #35A7FF;

            // .main
            @div-special-border: @primary-border;
            @div-special-gear-fill: @link;
            @div-special-hover-border: @secondary-color;
            @div-special-hover-gear-fill: #F09D51;
            @span-on-border: @primary-border;
            @span-on: @enabled;
            @span-on-warn: #af5d00;
            @span-off-border: @primary-border;
            @span-off: @disabled;
            @span-on-off-hover-border: @secondary-color;
            @hl-button-border: @enabled;
            @link-button-background: #181818;
            @special-on-off-border: @primary-border;
            @oldTech: @primary-color;
            @cnam-aTitle: @disabled;

            // .fort
            @fort-patrol-check-background: @black ;

            // .market-item
            @market-item-background: #292929;
            @market-item-order-hover-background: @secondary-color;
            @market-item-order-hover-border: @link-hover;

            // .modalBox
            @modalBox-background: @html-background;

            // Stars
            @star-2-fill: @white;
            @star-3-fill: #cd7f32;
            @star-4-fill: #c0c0c0;
            @star-5-fill: #d4af37;

            // -webkit-scrollbar
            @webkit-scrollbar-background: @html-background;
            @webkit-scrollbar-thumb-background: @primary-border;
        }

        // Dracula
        .dracula() {
            // Theme colors {
            @html-background: #282a36;
            @primary-border: #44475a;
            @secondary-border: #44475a;
            @primary-color: #f8f8f2;
            @secondary-color: #6272a4;
            @dark-background: #1a1c24;

            @link: #bd93f9;
            @link-hover: #9573c5;
            @enabled: #50fa7b;
            @disabled: #ff5555;
            // }

            // .has-text-xxx
            @has-text-advanced: #8be9fd;
            @has-text-alert: #e0a361;
            @has-text-caution: #ffa26c;
            @has-text-danger: @disabled ;
            @has-text-fade: #6272a4;
            @has-text-flair: @has-text-special;
            @has-text-info: #bd93f9;
            @has-text-label: #7dcbdd;
            @has-text-special: #ff79c6;
            @has-text-success: @enabled ;
            @has-text-warning: #f1fa8c ;

            // .popper
            @popper: @primary-color ;
            @popper-has-text-label: @has-text-label ;
            @popper-has-text-success: @has-text-success ;
            @popper-has-text-warning: @has-text-warning ;
            @modal-child-popper-background: @dark-background;
            @modal-child-popper-border: @secondary-border;

            /* AFP 2021
            // .fool
            @fool-has-text-danger: @has-text-success;
            @fool-has-text-success: @has-text-danger;
            @fool-popper-has-text-danger: @popper-has-text-success;
            @fool-span-on: @disabled;
            @fool-span-off: @enabled;
            */

            // .tabs
            @tabs-li-is-active-link-border: @link;
            @tabs-li-is-active-link: @link;

            // .button
            @button-background: #3f4253;
            @button: @primary-color;
            @button-hover-background: @secondary-border;
            @button-hover: @link-hover;
            @button-focus-border: @secondary-border;

            // .basic-button
            @basic-button-border-hover-background: @dark-background;
            @basic-button-border-hover: @link;

            // .label
            @label: @primary-color;

            // .checkbox
            @checkbox-hover: @link;

            // .dropdown
            @dropdown-content-background: @button-background;

            // .b-tooltip
            @b-tooltip-accent: #282828;
            @b-tooltip-is-primary-background: @b-tooltip-accent;
            @b-tooltip-is-primary-border: @primary-border;
            @b-tooltip-is-primary: @primary-color;

            // UI Bars
            @bars-background: @secondary-color;

            // .meter
            @meter-low: @disabled;
            @meter-neutral: @has-text-caution;
            @meter-high: @has-text-info;

            // .main
            @div-special-border: @primary-border;
            @div-special-gear-fill: #f09d51;
            @div-special-hover-border: @secondary-color;
            @div-special-hover-gear-fill: @link;
            @span-on-border: @primary-border;
            @span-on: @enabled;
            @span-on-warn: #af5d00;
            @span-off-border: @primary-border;
            @span-off: @disabled;
            @span-on-off-hover-border: @secondary-color;
            @hl-button-border: @enabled;
            @link-button-background: @dark-background;
            @special-on-off-border: @primary-border;
            @oldTech: @primary-color;
            @cnam-aTitle: @disabled;

            // .fort
            @fort-patrol-check-background: @black ;

            // .market-item
            @market-item-background: #1d2021;
            @market-item-order-hover-background: @secondary-color;
            @market-item-order-hover-border: @link-hover;

            // .modalBox
            @modalBox-background: @html-background;

            // Stars
            @star-2-fill: @white;
            @star-3-fill: #cd7f32;
            @star-4-fill: #c0c0c0;
            @star-5-fill: #d4af37;

            // -webkit-scrollbar
            @webkit-scrollbar-background: @html-background;
            @webkit-scrollbar-thumb-background: @primary-border;
        }
    }

    // Main template
    .mainTemplate() {
        // Basic
        background-color: @html-background;

        body {
            color: @primary-color;
        }

        h2,
        h3 {
            color: @primary-color;
        }

        a {
            color: @link;
        }

        // .has-text-xxx
        .button.has-text-advanced,
        .has-text-advanced {
            color: @has-text-advanced;
        }

        .button.has-text-alert,
        .has-text-alert {
            color: @has-text-alert;
        }

        .button.has-text-caution,
        .has-text-caution {
            color: @has-text-caution;
        }

        .button.has-text-danger,
        .has-text-danger {
            color: @has-text-danger;
        }

        .has-text-fade {
            color: @has-text-fade;
        }

        .has-text-flair {
            color: @has-text-flair;
        }

        .button.has-text-info,
        .has-text-info {
            color: @has-text-info;
        }

        .has-text-label {
            color: @has-text-label;
        }

        .button.has-text-special,
        .has-text-special {
            color: @has-text-special;
        }

        .button.has-text-success,
        .has-text-success {
            color: @has-text-success;
        }

        .button.has-text-warning,
        .has-text-warning {
            color: @has-text-warning;
        }

        .has-text-danger-pulse {
            color: @has-text-warning;
            -webkit-animation: color-change 5s infinite;
            -moz-animation: color-change 5s infinite;
            -o-animation: color-change 5s infinite;
            -ms-animation: color-change 5s infinite;
            animation: color-change 5s infinite;
        }
        
        @keyframes color-change {
            0% {
                color: @has-text-warning;
            }
            50% {
                color: @has-text-danger;
            }
            100% {
                color: @has-text-warning;
            }
        }

        .challenge {
            .simButton {
                border-color: @has-text-success;
            }

            .configList {
                display: flex;
                flex-flow: wrap;
                justify-content: space-around;
                > div {
                    margin: 0 .25rem;
                    width: 10rem;

                    > input {
                        height: 1.25rem;
                        text-align: center;
                        padding: 0;
                    }
                }
            }
        }

        // .popper
        .popper {
            .has-text-label {
                color: @popper-has-text-label;
            }

            .has-text-success {
                color: @popper-has-text-success;
            }

            .has-text-warning {
                color: @popper-has-text-warning;
            }

            .divide-line {
                border-top: @secondary-border solid .0625rem;
            }
        }

        .main>div.popper,
        body .modal>div.popper {
            background-color: @modal-child-popper-background;
            border: .0625rem solid @modal-child-popper-border;
            color: @popper;

            >div {
                border-top: solid .0625rem @modal-child-popper-border;
            }
            >div:first-child {
                border-top: none;
            }

            .has-text-dark {
                color: @popper;
            }

            .split {
                display: flex;
                > div {
                    flex-wrap: nowrap;
                }
                > div:nth-of-type(2) {
                    border-left: solid .0625rem @modal-child-popper-border;
                    margin-left: .375rem;
                    padding-left: .375rem;
                }
            }
        }

        .shipPopper {
            .divider {
                border-bottom: solid .0625rem @modal-child-popper-border;
            }
        }

        .sliderbar {
            > span {
                position: relative;
                display: inline-block;
                width: 5%;
                bottom: 1.125rem;
                margin: 0 .375rem;
            }
            .b-slider {
                display: inline-block;
                width: 80%;
                .b-slider-track {
                    height: 1rem;
                }
            }
            .is-primary .b-slider-fill {
                background: @has-text-success;
            }
        }

        .sliderbar.thin {
            > span {
                bottom: .625rem;
            }
            .b-slider {
                margin-top: .5rem;
                margin-bottom: .5rem;
            }
        }

        /* AFP 2020
        // .fool
        .fool {
            .has-text-advanced {
                color: @has-text-caution;
            }

            .has-text-caution {
                color: @has-text-advanced;
            }

            .has-text-danger {
                color: @fool-has-text-danger;
            }

            .has-text-success {
                color: @fool-has-text-success;
            }

            .popper {
                .has-text-success {
                    color: @fool-has-text-success;
                }

                .has-text-danger {
                    color: @fool-popper-has-text-danger;
                }
            }

            .main {
                .content {
                    .action {
                        span.on {
                            color: @fool-span-on;
                        }

                        span.off {
                            color: @fool-span-off;
                        }
                    }
                }
            }
        }
        */

        // .tabs
        .tabs a,
        .msgQueueFilters span {
            color: @primary-color;
        }

        .tabs li.is-active a,
        .msgQueueFilters span.is-active {
            border-bottom-color: @tabs-li-is-active-link-border;
            color: @tabs-li-is-active-link;
        }

        .tabs a:hover,
        .msgQueueFilters span:hover {
            border-bottom-color: @link-hover;
            color: @link-hover;
        }

        .tabs > ul {
            border-bottom: solid .0625rem;
        }

        // .button
        .button {
            background-color: @button-background;
            color: @button;
        }

        .button.is-light {
            background-color: @primary-color;
        }

        .button.is-hovered,
        .button:hover {
            background-color: @button-hover-background;
            color: @link-hover;
        }

        .button.is-focused,
        .button:focus {
            border-color: @button-focus-border;
        }

        // .basic-button
        .basic-button {
            border: @primary-border solid .0625rem;
        }

        .basic-button:hover {
            border: @basic-button-border-hover solid .0625rem;
            background-color: @basic-button-border-hover-background;
        }
        
        .text-button:hover {
            cursor: pointer;
            color: @link-hover;
            text-decoration: underline;
        }

        // .label
        .label {
            color: @label;
        }

        // .checkbox, .radio
        .checkbox:hover,
        .radio:hover {
            color: @checkbox-hover;
        }

        // .dropdown
        .dropdown-content {
            background-color: @dropdown-content-background;
        }

        // .b-tooltip
        .b-tooltip.is-right:before {
            border-right: 5px solid @b-tooltip-accent;
        }

        .b-tooltip.is-left:before {
            border-left: 5px solid @b-tooltip-accent;
        }

        .b-tooltip.is-bottom:before {
            border-bottom: 5px solid @b-tooltip-accent;
        }

        .b-tooltip.is-primary .tooltip-content {
            background: @b-tooltip-is-primary-background;
            border: .0625rem solid @b-tooltip-is-primary-border;
            color: @b-tooltip-is-primary;
        }

        // Trade
        .add,
        .sub {
            border: @primary-border solid .0625rem;
            transition: all 200ms ease;
        }

        .add:hover,
        .sub:hover {
            background-color: @button-hover-background;
            color: @link-hover;
        }

        .current {
            border-top: @primary-border solid .0625rem;
            border-bottom: @primary-border solid .0625rem;
        }
        .current.infoOnly {
            border: @primary-border solid .0625rem;
        }

        // UI Bars
        .topBar,
        .promoBar {
            background-color: @bars-background;
        }
        
        // Play/Pause
        .play {
            display: inline-block;
            position: relative;
            cursor: pointer;
            bottom: .125rem;
            width: 0;
            height: 0;
            border-top: .25rem solid transparent;
            border-left: .375rem solid @has-text-success;
            border-bottom: .25rem solid transparent;
            transition: all 0.3s;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
        }
        .pause {
            display: inline-block;
            position: relative;
            cursor: pointer;
            box-sizing: content-box;
            bottom: .0625rem;
            width: .125rem;;
            height: .625rem;;
            border-right: .125rem solid @has-text-danger;
            border-left: .125rem solid @has-text-danger;
            transition: all 0.3s;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
        }

        // .meter
        .meter {
            &.low {
                color: @meter-low;
            }

            &.neutral {
                color: @meter-neutral;
            }

            &.high {
                color: @meter-high;
            }
        }

        // .buildList
        .buildList {
            .hl-ca {
                color: @enabled ;
            }

            .hl-cna {
                color: @disabled ;
            }
        }

        // .msgQueue
        // .graphContainer
        .msgQueue,
        .graphContainer {
            span.special {
                .gear {
                    fill: @div-special-gear-fill;
                }
            }

            span.special:hover {
                .gear {
                    fill: @div-special-hover-gear-fill;
                }
            }
        }

        // .main
        .main {
            .content {
                .action {
                    a.button {
                        &.hl-ca .aTitle {
                            color: @enabled;
                        }

                        &.hl-cna .aTitle {
                            color: @disabled;
                        }

                        span.count {
                            background: @html-background;
                        }
                    }

                    div.special {
                        background: @html-background;
                        border: .0625rem solid @div-special-border;

                        .gear {
                            fill: @div-special-gear-fill;
                        }
                    }

                    div.special:hover {
                        border: .0625rem solid @div-special-hover-border;

                        .gear {
                            fill: @div-special-hover-gear-fill;
                        }
                    }

                    span.on {
                        background: @html-background;
                        border: .0625rem solid @span-on-border;
                        color: @span-on;
                    }

                    span.on.warn,
                    span.on.altwarn {
                        color: @span-on-warn;
                    }

                    span.off {
                        background: @html-background;
                        border: .0625rem solid @span-off-border;
                        color: @span-off;
                    }

                    span.on:hover,
                    span.off:hover {
                        border: .0625rem solid @span-on-off-hover-border;
                    }

                    &.hl .button {
                        border: solid 1px @hl-button-border;
                    }
                }

                .action.cna {
                    a.button {
                        background: @link-button-background;

                        &.hl-ca .aTitle {
                            color: @enabled;
                        }

                        &.hl-cna .aTitle {
                            color: @disabled;
                        }
                    }

                    .special,
                    .on,
                    .off {
                        border-color: @special-on-off-border;
                    }

                    .oldTech span.aTitle {
                        color: @oldTech;
                    }
                }

                .action.cnam {
                    span.aTitle {
                        color: @cnam-aTitle;
                    }
                }

                .enemyFortress {
                    background-color: @button-background;
                }

                .divider h2 {
                    background: @html-background;
                }

                .green,
                .synth {
                    box-shadow: 0 0 6px @has-text-success;
                    > span {
                        text-shadow: 1px 1px @has-text-success;
                    }
                }

                .red {
                    box-shadow: 0 0 6px @has-text-danger;
                    > span {
                        text-shadow: 1px 1px @has-text-danger;
                    }
                }

                .yellow {
                    box-shadow: 0 0 6px @has-text-warning;
                    > span {
                        text-shadow: 1px 1px @has-text-warning;
                    }
                }

                .orange {
                    box-shadow: 0 0 6px @has-text-caution;
                    > span {
                        text-shadow: 1px 1px @has-text-caution;
                    }
                }

                .purple {
                    box-shadow: 0 0 6px @has-text-special;
                    > span {
                        text-shadow: 1px 1px @has-text-special;
                    }
                }
                
                .blue,
                .precog {
                    box-shadow: 0 0 6px @has-text-info;
                    > span {
                        text-shadow: 1px 1px @has-text-info;
                    }
                }
                .cna .precog {
                    > span {
                        text-shadow: none;
                    }
                }
            }

            .government {
                .header {
                    border-bottom: .0625rem solid @secondary-border;
                }
            }

            .garrison {
                .header {
                    border-bottom: .0625rem solid @secondary-border;
                }
            }

            .market-header {
                border-bottom: @secondary-border solid 1px;
            }

            .galaxyTrade {
                border-top: @secondary-border solid 1px;
            }
        }

        .powerGrid {
            display: flex;
            flex-wrap: wrap;
            margin-left: 1rem;

            .circuit {
                min-width: 18.5rem;
                cursor: pointer;

                &.inactive {
                    display: none;
                }

                >span {
                    display: inline-block;
                }

                >span:first-child {
                    width: 1.5rem;
                }

                .struct {
                    width: 12rem;
                }

                .off,
                .on {
                    min-width: 2rem;
                    text-align: center;
                }

                .off {
                    color: @has-text-danger;
                }
                .on {
                    color: @has-text-success;
                }
            }
        }

        .gridHeader {
            border-top: @secondary-border solid .0625rem;
            margin: .25rem 0 .25rem 1rem;
            padding-top: .25rem;
        }

        .powerGridHead {
            display: flex;
            justify-content: space-between;
        }

        .powerGridHeader {
            margin-left: 1rem;
            margin-bottom: .5rem;
        }

        .resetPowerGrid {
            margin-left: 1rem;
            margin-top: .75rem;
            .button {
                height: 1.5rem;
            }
        }

        // .fort
        .fort {
            .patrol {
                .check {
                    background-color: @fort-patrol-check-background ;
                }
            }
        }

        // .market-item
        .market-item {
            .order {
                border: @primary-border solid .0625rem;
                transition: all 200ms ease;
            }

            .order:hover {
                border: @market-item-order-hover-border solid .0625rem;
                background-color: @market-item-order-hover-background;
            }
        }

        .market-item,
        .resource {
            &.alt {
                background-color: @market-item-background;
            }
        }

        .inactive-row {
            background-color: @market-item-background;
        }

        // .modal
        .modal .actionSpace {
            background-color: @html-background;
        }
        
        // .modal-card
        .modal-card-head,
        .modal-card-body,
        .modal-card-foot {
            background-color: @modalBox-background;
        }
        
        .modal-card-head {
            p {
                color: @has-text-warning;
            }
        }

        // .industry
        .modalBox,
        .industry {
            background: @modalBox-background;

            p {
                border-bottom: @secondary-border solid .0625rem;
            }

            .market-item {
                border-top: @secondary-border solid .0625rem;
            }

            .divide {
                border-top: @secondary-border solid .0625rem;
            }

            .smelting {
                border-top: @secondary-border solid .0625rem;
            }
        }

        .industry {
            background: none;

            .header {
                border-bottom: @secondary-border solid .0625rem;
            }

            .avail {
                span {
                    margin: 0 2.5rem 0 2.125rem;
                }
            }
        }

        .govTask {
            margin-top: .25rem;
            .button {
                height: 1.5rem;
                margin-left: .5rem;
            }
        }
        
        .fileImport {
            background-color: @html-background;
        }

        // Stars
        .star1 {
            fill: @html-background;
            stroke: @star-2-fill;
            path {
                stroke: @star-2-fill;
            }
            path.bolden {
                stroke-width: 8px;
            }
        }

        .star2 {
            fill: @star-2-fill;
        }

        .star3 {
            fill: @star-3-fill;
        }

        .star4 {
            fill: @star-4-fill;
        }

        .star5 {
            fill: @star-5-fill;
        }
        
        .refresh svg {
            fill: @has-text-advanced;
        }

        // -webkit-scrollbar
        .hscroll::-webkit-scrollbar-track,
        .vscroll::-webkit-scrollbar-track,
        .sticky::-webkit-scrollbar-track,
        .resTabs>section::-webkit-scrollbar-track,
        .resTabs>.tabs::-webkit-scrollbar-track,
        .bldQueue::-webkit-scrollbar-track,
        .dropdown-content::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            background-color: @webkit-scrollbar-background;
        }

        .vscroll::-webkit-scrollbar,
        .sticky::-webkit-scrollbar,
        .resTabs>section::-webkit-scrollbar,
        .resTabs>.tabs::-webkit-scrollbar,
        .bldQueue::-webkit-scrollbar,
        .dropdown-content::-webkit-scrollbar {
            width: 6px;
            background-color: @webkit-scrollbar-background;
        }

        .hscroll::-webkit-scrollbar {
            height: 8px;
            background-color: @webkit-scrollbar-background;
        }

        .vscroll::-webkit-scrollbar-thumb,
        .hscroll::-webkit-scrollbar-thumb,
        .sticky::-webkit-scrollbar-thumb,
        .resTabs>section::-webkit-scrollbar-thumb,
        .resTabs>.tabs::-webkit-scrollbar-thumb,
        .bldQueue::-webkit-scrollbar-thumb,
        .dropdown-content::-webkit-scrollbar-thumb {
            background-color: @webkit-scrollbar-thumb-background;
        }

        .vscroll,
        .hscroll,
        .sticky,
        .resTabs>section,
        .resTabs>.tabs,
        .bldQueue {
            scrollbar-color: @webkit-scrollbar-thumb-background @webkit-scrollbar-background;
        }

        .buttonList .is-selected {
            border-color: @enabled;
        }
    }
}

#city-gift .hgift {
    background-color: initial;
    background-image:
        repeating-linear-gradient(
            90deg,
            firebrick,
            firebrick 10px,
            beige 0,
            beige 12px,
            forestgreen 0,
            forestgreen 18px,
            gold 0,
            gold 20px,
            crimson 0,
            crimson 30px
        ),
        repeating-linear-gradient(
            firebrick,
            firebrick 10px,
            beige 0,
            beige 12px,
            forestgreen 0,
            forestgreen 18px,
            gold 0,
            gold 20px,
            crimson 0,
            crimson 30px
	);
    background-blend-mode: multiply;
    > span {
        color: #ebdbb2;
        text-shadow: 2px 2px #000;
    }
}

// Dark theme
html.dark {
    #lib.themes.dark(); // Highest priority
    #lib.mainTemplate();

    // Theme specific
    .modal .action {
        #lib.mainTemplate.main.content.action();
    }

    .pop-desc {
        .has-text-caution {
            color: #a30500;
        }
    }

    .popper {
        .grad-from-left {
            background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%);
        }
        .grad-from-left-warn {
            background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%);
        }
        .grad-from-right {
            background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%);
        }
    }

    .modal .buttonList .is-selected {
        border-color: @enabled;
    }
}

// Light theme
html.light {
    #lib.themes.light(); // Highest priority
    #lib.mainTemplate();

    // Theme specific
    .modal .action {
        #lib.mainTemplate.main.content.action();
    }

    body {
        font-weight: 500;
    }

    // .button
    .button,
    .button:hover {
        border: solid .0625rem @black;
    }

    // UI Bars
    .topBar {
        .calendar {
            .wi-thermometer-exterior {
                color: #00d6b2;
            }

            .wi-day-sunny,
            .wi-day-windy {
                color: #fffb00;
            }

            .wi-cloud,
            .wi-cloudy-gusts {
                color: #dfe2d3;
            }

            .wi-rain,
            .wi-storm-showers {
                color: #00b0e6;
            }

            .wi-snow,
            .wi-snow-wind {
                color: #fff;
            }
        }
    }

    // .main
    .main {
        .content {
            .action {
                a.button {
                    span.count {
                        border-bottom: .0625rem solid #000;
                        border-left: .0625rem solid #000;
                    }
                }
            }

            .action.cna:not(.cnam) {
                span.aTitle {
                    color: #282828;
                }
            }
        }
    }

    // .industry
    .industry {
        background: none;

        .smelting {
            border-top: 0;
        }

        .header {
            border-bottom: #4e4e4e solid .0625rem;
        }
    }

    .progress::-webkit-progress-value,
    .progress::-moz-progress-bar {
        background-color: #898989;
    }

    .popper {
        .grad-from-left {
            background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%);
        }
        .grad-from-left-warn {
            background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%);
        }
        .grad-from-right {
            background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%);
        }
    }

    .modal .buttonList .is-selected {
        border-color: @enabled;
    }
    .modal .buttonList .is-focused {
        color: @primary-color;
    }
}

// Night theme
html.night {
    #lib.themes.night(); // Highest priority
    #lib.themes.dark(); // Lowest priority
    #lib.mainTemplate();

    // Theme specific
    .modal .action {
        #lib.mainTemplate.main.content.action();
    }

    .popper {
        .grad-from-left {
            background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%);
        }
        .grad-from-left-warn {
            background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%);
        }
        .grad-from-right {
            background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%);
        }
    }

    .modal .buttonList .is-selected {
        border-color: @enabled;
    }
}

// Red Green CB theme
html.redgreen {
    #lib.themes.redgreen(); // Highest priority
    #lib.themes.night();
    #lib.themes.dark(); // Lowest priority
    #lib.mainTemplate();

    // Theme specific
    .modal .action {
        #lib.mainTemplate.main.content.action();
    }

    .main>div.popper,
    body .modal>div.popper {
        .has-text-danger {
            color: #aa00aa;
        }
    }

    #powerStatus .has-text-warning {
        color: #9900cc;
    }

    // Trade
    .trade {
        .has-text-danger {
            color: #167df0;
            color: #aa00ff;
        }

        .has-text-warning {
            color: #fff;
        }
    }

    // UI Bars
    .topBar {
        .calendar {
            .wi-thermometer-exterior {
                color: #00e6d2;
            }

            .wi-thermometer {
                color: #fffb00;
            }
        }
    }

    .mad {
        background: repeating-linear-gradient(45deg,
                #8a8b49,
                #8a8b49 10px,
                #000000 10px,
                #000000 20px);
    }

    .armed .mad {
        background: repeating-linear-gradient(45deg,
                #fbfd84,
                #fbfd84 10px,
                #000000 10px,
                #000000 20px);
    }

    .popper {
        .grad-from-left {
            background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%);
        }
        .grad-from-left-warn {
            background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%);
        }
        .grad-from-right {
            background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%);
        }
    }

    .modal .buttonList .is-selected {
        border-color: @enabled;
    }
}

// Dark Night theme
html.darkNight {
    #lib.themes.darkNight(); // Highest priority
    #lib.themes.night();
    #lib.themes.dark(); // Lowest priority
    #lib.mainTemplate();

    // Theme specific
    .has-text-warning {
        color: #d6b220;
    }

    input,
    select,
    textarea {
        background: @primary-color;
    }

    .popper {
        .grad-from-left {
            background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%);
        }
        .grad-from-left-warn {
            background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%);
        }
        .grad-from-right {
            background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%);
        }
    }

    .modal .buttonList .is-selected {
        border-color: @enabled;
    }
}

// GruvBox Light theme
html.gruvboxLight {
    #lib.themes.gruvboxLight(); // Highest priority
    #lib.themes.light(); // Lowest priority
    #lib.mainTemplate();

    input,
    select,
    textarea,
    .notification {
        background: @secondary-color;
    }

    .popper {
        .grad-from-left {
            background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%);
        }
        .grad-from-left-warn {
            background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%);
        }
        .grad-from-right {
            background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%);
        }
    }

    .modal .buttonList .is-selected {
        border-color: @enabled;
    }
}

// GruvBox Dark theme
html.gruvboxDark {
    #lib.themes.gruvboxDark(); // Highest priority
    #lib.themes.dark(); // Lowest priority
    #lib.mainTemplate();

    input,
    select,
    textarea,
    .notification {
        background: @primary-color;
    }

    .add,
    .sub {
        border: @secondary-border solid .0625rem;
    }

    .current {
        border-top: @secondary-border solid .0625rem;
        border-bottom: @secondary-border solid .0625rem;
    }
    .current.infoOnly {
        border: @secondary-border solid .0625rem;
    }

    .popper {
        .grad-from-left {
            background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%);
        }
        .grad-from-left-warn {
            background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%);
        }
        .grad-from-right {
            background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%);
        }
    }

    .modal .buttonList .is-selected {
        border-color: @enabled;
    }
}

// GruvBox Dark theme
html.gruvboxDarkRG {
    #lib.themes.gruvboxDarkRG(); // Highest priority
    #lib.themes.gruvboxDark(); // Higher priority
    #lib.themes.dark(); // Lowest priority
    #lib.mainTemplate();

    input,
    select,
    textarea,
    .notification {
        background: @primary-color;
    }

    .add,
    .sub {
        border: @secondary-border solid .0625rem;
    }

    .current {
        border-top: @secondary-border solid .0625rem;
        border-bottom: @secondary-border solid .0625rem;
    }
    .current.infoOnly {
        border: @secondary-border solid .0625rem;
    }

    .popper {
        .grad-from-left {
            background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%);
        }
        .grad-from-left-warn {
            background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%);
        }
        .grad-from-right {
            background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%);
        }
    }

    .modal .buttonList .is-selected {
        border-color: @enabled;
    }
}

// Orange Soda theme
html.orangeSoda {
    #lib.themes.orangeSoda(); // Highest priority
    #lib.mainTemplate();

    // Theme specific
    .modal .action {
        #lib.mainTemplate.main.content.action();
    }

    .has-text-info {
        color: #F09D51;
    }

    .pop-desc {
        .has-text-caution {
            color: @has-text-danger;
        }
    }

    input,
    select,
    textarea,
    .notification {
        background: @primary-color;
    }

    .popper {
        .grad-from-left {
            background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%);
        }
        .grad-from-left-warn {
            background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%);
        }
        .grad-from-right {
            background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%);
        }
    }

    .modal .buttonList .is-selected {
        border-color: @enabled;
    }
}

// Dracula theme
html.dracula {
    #lib.themes.dracula(); // Highest priority
    #lib.themes.dark(); // Lowest priority
    #lib.mainTemplate();

    input,
    select,
    textarea,
    .notification {
        background: @primary-color;
    }

    .add,
    .sub {
        border: @secondary-border solid .0625rem;
    }

    .current {
        border-top: @secondary-border solid .0625rem;
        border-bottom: @secondary-border solid .0625rem;
    }
    .current.infoOnly {
        border: @secondary-border solid .0625rem;
    }

    .popper {
        .grad-from-left {
            background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%);
        }
        .grad-from-left-warn {
            background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%);
        }
        .grad-from-right {
            background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%);
        }
    }

    .modal .buttonList .is-selected {
        border-color: @enabled;
    }
}

// Base CSS
html {
    overflow-y: hidden;
    box-sizing: border-box;
    font-size: 16px;
}

body,
button,
input,
select,
textarea {
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

body {
    line-height: initial;
    touch-action: manipulation;
}

html.large_all {
    font-size: 18px;
}

h2,
h3,
.content h2,
.content h3 {
    font-size: 1rem;
    font-weight: normal;
    display: inline-block;
    margin-bottom: 0;
}

.is-sr-only {
    margin: 0;
}

span,
div {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button {
    transition: all 200ms ease;
}

.button.right {
    float: right;
}

a {
    cursor: pointer;
    text-decoration: none;
    transition: all 200ms ease;
}

.tabs a {
    border-bottom: none;
    padding: .5em 1em;
    vertical-align: top;
}

.content li {
    margin-top: 0;
}

.block:not(:last-child),
.box:not(:last-child),
.breadcrumb:not(:last-child),
.content:not(:last-child),
.highlight:not(:last-child),
.level:not(:last-child),
.list:not(:last-child),
.message:not(:last-child),
.notification:not(:last-child),
.progress:not(:last-child),
.subtitle:not(:last-child),
.table-container:not(:last-child),
.table:not(:last-child),
.title:not(:last-child) {
    margin-bottom: 1rem;
}

.tabs:not(:last-child) {
    margin-bottom: .5rem;
    overflow: hidden;
}

.modal .animation-content {
    overflow: hidden;
}

.actionWidth {
    @media only screen and (max-width: 113rem) {
        max-width: 38rem;
    }

    @media only screen and (max-width: 88.5rem) {
        max-width: 51rem;
    }

    @media only screen and (max-width: 76.375rem) {
        max-width: 38rem;
    }

    @media only screen and (max-width: 59rem) {
        max-width: 25rem;
    }

    @media only screen and (max-width: 48rem) {
        max-width: 38rem;
    }

    @media only screen and (max-width: 45rem) {
        max-width: 25rem;
    }

    @media only screen and (max-width: 32rem) {
        max-width: 12rem;
    }
}

.msgInput,
.keyMap {
    width: 7.5rem;
    display: inline-block;
    height: 1.25rem;
    margin-bottom: .25rem;
    text-align: center;

    input {
        height: 1.25rem;
        line-height: 1.25rem;
        text-align: center;
    }
}

.add {
    display: inline-block;
    margin-right: .25rem;
    padding: 0 .375rem;
    border-radius: 0 .375rem .375rem 0;
    line-height: 1rem;
    cursor: pointer;

    span:first-child {
        position: relative;
        bottom: .0625rem;
    }
}

.sub {
    outline: none;
    display: inline-block;
    margin-left: .125rem;
    padding: 0 .375rem;
    border-radius: .375rem 0 0 .375rem;
    line-height: 1rem;
    cursor: pointer;

    span:first-child {
        position: relative;
        bottom: .0625rem;
    }
}

.current {
    min-width: 5rem;
    text-align: center;
    display: inline-block;
    font-size: .875rem;
    line-height: 1rem;
    padding: 0 .125rem;
    cursor: default;
}
.current.infoOnly {
    border-radius: .375rem;
    padding: 0 .5rem;
}

.factory .current svg {
    width: unset;
}

.zero {
    cursor: pointer;
    margin-left: .75rem;
}

.zero:hover {
    text-decoration: underline;
}

.localization {
    margin-bottom: 1rem;
}

.basic-button {
    display: inline-block;
    font-size: .875rem;
    margin: 0 .25rem;
    padding-top: .125rem;
    border-radius: .375rem;
    line-height: 1rem;
    height: 1.375rem;
    min-width: 4rem;
    text-align: center;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tradeOffer {
    .trade-offer {
        margin: 0;
        padding: .125rem 0;

        .offer-item {
            width: 7.5rem;
        }

        .offer-vol {
            width: 4.5rem;
            border-right: 1px solid;
            margin-right: .125rem;
        }
    }
}

#egg4 {
    right: 0;
}

.doublePane {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .5rem;
    > div {
        width: 50%;
    }

    > div.left {
        width: 70%;
    }

    > div.right {
        width: 30%;
    }
    
}

.topPad {
    margin-top: .5rem;
}

.main {
    margin: 1rem 1rem 1.25rem;
    overflow-y: hidden;

    .leftColumn {
        height: ~"calc(100vh - 2.45rem)";

        .colHeader {
            display: flex;
            justify-content: space-between;
        }
    }

    >.columns {
        margin-bottom: 0;
    }

    .queue,
    .theme,
    .localization {
        margin-bottom: 1rem;

        i {
            margin-left: .25rem;
            padding-bottom: .25rem;
        }

        .dropdown button {
            height: 1.5rem;
            padding: 0 .75rem;
        }
    }

    >.columns {
        > :first-child {
            min-width: 18rem;
        }
    }

    .sep {
        margin: 0 .5rem;
    }

    .race {
        position: relative;
        margin-top: 1rem;
        margin-bottom: 0;
        width: 100%;

        >span {
            cursor: default;
        }

        .power {
            text-align: right;
        }

        .morale-contain {
            text-align: center;
        }

        .morale {
            text-align: center;
        }
    }

    .queueCol {
        div.bldQueue:first-child {
            margin-top: 2.625rem;
        }
    }

    .bldQueue,
    .msgQueue {
        resize: vertical;
        height: 7rem;
        border-top: solid .0625rem;
        border-bottom: solid .0625rem;
        overflow-y: auto;

        &.right {
            height: auto;
            border-bottom: none;
            padding: 1rem;
        }
    }

    .msgQueue {
        font-size: .75rem;

        &.right {
            height: ~"calc(100vh - 9rem)";
        }
    }
        
    #msgQueueHeader {
        .special {
            cursor: pointer;
        }
        
        h2 {
            border-bottom: solid .0625rem;
        }
        
        span {
            font-size: 1rem;
            margin-left: 1rem;
        }
    }

    #msgQueueFilters {
        padding: .25rem 0;
        border-bottom: solid .0625rem;
        font-size: .875rem;

        span {
            cursor: pointer;
        }

        span:not(:last-child) {
            margin-right: 2rem;
        }
    }
    
    #pausequeue,
    #pauserqueue {
        margin-left: 1rem;
    }

    .bldQueue,
    .bldQueue.right {
        padding-top: .25rem;

        h2 {
            border-bottom: solid .0625rem;
        }

        li {
            display: inline-block;
            height: 1rem;
            padding: 0 .25rem 0 0;
        }

        li:not(:last-child) .queued:after {
            content: " -> "
        }

        li:not(:last-child) .qany:after {
            content: ", "
        }
    }

    .resQueue {
        h2 {
            border-bottom: solid .0625rem;
        }
        
        h2,
        .buildList {
            margin-left: 2rem;
            margin-top: 0;
        }
        
        .buildList {
            li {
                display: inline-block;
                height: 1rem;
                padding: 0 .25rem 0 0;
            }

            li:not(:last-child) .queued:after {
                content: " -> "
            }

            li:not(:last-child) .qany:after {
                content: ", "
            }
        }
    }

    .resTabs>section {
        .sticky();
        height: ~"calc(100vh - 10rem)";
    }

    .govTabs2>section {
        height: ~"calc(100vh - 15rem)";
    }

    .resources {
        margin-top: .25rem;
        padding-right: .25rem;
        height: ~"calc(100vh - 5rem)";

        @media only screen and (max-width: 88.5rem) {
            height: ~"calc(100vh - 16.5rem)";
        }

        @media only screen and (max-width: 48rem) {
            display: relative;
        }

        .resource {
            display: flex;
            cursor: default;

            div {
                width: 70%;
                display: flex;
                justify-content: space-between;
            }

            > :nth-child(2) {
                text-align: center;
                width: 4%;
            }

            .interact {
                cursor: pointer;
            }

            > :nth-child(3) {
                text-align: right;
                width: 26%;
            }

            .craftable {
                width: 30%;
                text-align: right;

                >span {
                    display: inline;
                    margin-left: .25rem;
                }
            }
        }
    }

    .evolving {
        margin-top: 1rem;
        max-width: 51rem;
        .actionWidth();

        .progress {
            height: 1.2rem;
        }
    }

    .evolving::after {
        display: block;
        position: relative;
        top: -1.375rem;
        content: "Evolving";
        text-align: center;
        color: #af8d07;
        margin-bottom: -1.25rem;
    }

    .content {
        .settings {
            margin-left: 1rem;
            height: ~"calc(100vh - 6.5rem)";
        }

        .tab-content {
            padding: 0 .25rem 0 0;
        }

        >.tab-content {
            padding: 0 .25rem 0 1rem;
        }

        .tab-item {
            padding: 0 0 0 1rem;
        }

        .tabs {
            ul {
                margin-top: .5rem;
            }
        }

        #oldTech {
            margin-bottom: 1rem;
        }

        .mtab {
            height: ~"calc(100vh - 10rem)";
        }

        .action {
            display: inline-block;
            position: relative;

            .aTitle {
                overflow-wrap: break-word;
                white-space: normal;
                line-height: 1rem;
            }

            a.button,
            span.oldTech {
                width: 12.625rem;
                margin: .375rem .375rem 0 0;

                span.count {
                    position: absolute;
                    top: 0;
                    right: 0;
                    display: inline-block;
                    height: 1.0625rem;
                    line-height: .875rem;
                    padding: 0 .25rem;
                    border-radius: 0 .25rem 0 .4375rem;
                    overflow: hidden;
                }
            }

            span.oldTech {
                cursor: default;
                display: inline-flex;
                margin: 0 1rem 0 0;
            }

            div.special,
            span.on,
            span.off {
                position: absolute;
                cursor: pointer;
                display: block;
                height: 1.0625rem;
                line-height: .8125rem;
                padding: 0 .25rem;
                overflow: hidden;
            }

            div.special {
                height: 1.125rem;
                line-height: .9375rem;
                top: .5rem;
                left: 0;
                border-radius: .25rem 0 .4375rem 0;
                width: 1.1875rem;

                svg {
                    position: relative;
                    left: -.125rem;
                }
            }

            span.on {
                bottom: 0;
                right: .375rem;
                border-radius: .4375rem 0 .25rem 0;

                .flair {
                    position: relative;
                    left: .25rem;
                    top: 0;
                }
            }

            span.off {
                bottom: 0;
                left: 0;
                border-radius: 0 .4375rem 0 .25rem;

                .flair {
                    position: relative;
                    left: .125rem;
                    top: 0;
                }
            }

            div.repair {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: .25rem;

                .progress {
                    height: .25rem;
                    background: transparent;
                }
            }

            .flair {
                position: absolute;
                right: .625rem;
                top: .5rem;
                height: .5rem;
                line-height: .5rem;
                margin: 0;
                padding: 0;
            }

            .flair:nth-of-type(2) {
                right: .625rem;
                top: 1.1875rem;
            }

            .flair:nth-of-type(3) {
                right: .625rem;
                top: 1.875rem;
            }

            .flair:nth-of-type(4) {
                right: 1.3125rem;
                top: .5rem;
            }

            .flair:nth-of-type(5) {
                right: 1.3125rem;
                top: 1.1875rem;
            }

            .flair:nth-of-type(6) {
                right: 1.3125rem;
                top: 1.875rem;
            }
        }

        .action.disabled {
            display: none;
        }

        .enemyFortress {
            display: inline-block;
            position: relative;
            min-width: 17.375rem;
            height: 3.125rem;
            margin: .375rem .375rem 0 0;
            border-radius: .25rem;

            .fortRow {
                > span {
                    display: inline-block;
                }
                :first-child {
                    margin-left: 0.5rem;
                    margin-right: 0;
                    float: left;
                }
                :last-child {
                    margin-left: 0.25rem;
                    margin-right: 0.5rem;
                    float: right;
                }
            }

            .second {
                line-height: 2rem;
                a.button {
                    height: 1.5rem;
                    margin-top: 0.25rem;
                    padding-left: 0.25rem;
                    padding-right: 0.25rem;
                    min-width: 4.5rem;
                }
            }
        }

        .geck {
            width: 100%;
            text-align: center;
        }

        .challenge {
            width: 100%;
            .actionWidth();
            text-align: center;

            .simButton {
                margin-top: 0.5rem;
            }
        }

        .divider {
            width: 100%;
            text-align: center;
            border-bottom: .0625rem solid;
            margin: .625rem 0 .625rem;

            h2 {
                position: relative;
                bottom: -.5rem;
                padding: 0 .625rem;
            }
        }
    }

    .jobList {
        max-width: 19rem;
    }

    .job {
        margin-left: .5rem;
        display: flex;
        min-width: 18rem;
        align-items: center;

        .controls {
            margin-bottom: 1px;

            .sub {
                border-right: 0;
            }
        }

        .job_label {
            cursor: default;
            display: flex;
            align-items: center;

            span {
                display: inline-block;
            }

            :first-child {
                margin-right: .5rem;
                margin-bottom: 0;
                width: 10rem;
                font-size: 1rem;
                font-weight: normal;
                display: inline-block;
            }

            :nth-child(2) {
                min-width: 4.5rem;
                text-align: center;
            }

            .count {
                >span {
                    margin-left: 1rem;
                    width: 1rem;
                }

                svg {
                    width: 1rem;
                }
            }
        }
    }

    .sshifter {
        margin-left: 1rem;
        button {
            height: 1.5rem;
            margin-left: .25rem;
        }
    }

    .foundry {
        margin-top: 1rem;
    }

    #civics {
        padding: 0.5rem;
    }

    .civics {
        padding-top: 0;
        padding-bottom: 0;

        .revolution {
            margin-left: .375rem;
        }
    }

    .government {
        margin-bottom: 0;

        .header {
            margin-bottom: .5rem;
        }

        .govType {
            margin-bottom: .25rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            > div:first-child {
                margin-right: .5rem;
            }

            button {
                margin-top: .25rem;
                height: 1.75rem;
                line-height: 1.75rem;
                padding: 0 .5rem;
            }
        }

        .taxRate {
            height: 1.25rem;
            display: flex;

            :first-child {
                cursor: default;
                display: inline-block;
                line-height: 1.25rem;
            }
        }

        .foreign {
            margin-bottom: 1rem;

            .gaction {
                display: inline-block;
                width: 8rem;
            }

            .glabel {
                display: inline-block;
                width: 9rem;
            }

            .glevel {
                display: inline-block;
                width: 8rem;
            }

            button {
                margin-top: .25rem;
                height: 1.75rem;
                line-height: 1.75rem;
                padding: 0 .5rem;
            }
        }
    }

    .fort {
        width: 100%;
        min-height: 1rem;
        margin: .25rem 0;
        padding: .25rem 0;
        border-top: 1px solid;
        border-bottom: 1px solid;

        .current {
            position: relative;
            bottom: .0625rem;
        }

        >div {
            margin-top: .25rem;
        }

        >div:first-child {
            margin-top: 0;

            span:nth-child(1) {
                margin-right: .5rem;
            }
        }

        .defense {
            margin-right: .5rem;
        }

        .training {
            span {
                display: inline-block;
            }

            progress {
                display: inline-block;
                width: 90%;
            }
        }

        .patrol {
            position: relative;
            top: 4px;
            left: 4px;
        }

        .merctip {
            margin-top: .25rem;
        }

        .observe,
        .merc {
            height: 1.25rem;
            margin-left: .25rem;
            line-height: 0rem;
        }

        .training .observe {
            bottom: .25rem;
        }

        .bunks {
            margin: 0.25rem 0 0.125rem;
        }
    }

    .garrison {
        .header {
            margin-bottom: .5rem;
        }

        .bunks {
            margin: .75rem .75rem 0;
        }

        .bunk {
            >div {
                padding-bottom: 0;
            }

            .hire {
                padding-left: 0;
                margin-top: 1rem;
            }

            margin-bottom: 0;
            margin-right: 0.5rem;
        }

        .barracks {
            margin-bottom: .25rem;
        }

        .training {
            >span {
                display: inline-block;
            }

            >progress {
                display: inline-block;
                width: ~"calc(100% - 4rem)";
            }

            margin-bottom: .75rem;
        }

        button {
            height: 2rem;
            line-height: 1rem;
        }

        button.first {
            margin-right: .5rem;
        }

        .war {
            padding-right: 0;
            margin: .75rem .75rem 0;

            .tactics {
                margin: .5rem 0;
                height: 1.25rem;
                display: flex;

                > :first-child {
                    display: inline-block;
                    line-height: 1.125rem;
                    width: 4.75rem;
                }
            }
        }

        .launch {
            min-width: 10rem;
            margin-top: .75rem;
            margin-right: .5rem;
            text-align: center;

            .campaign {
                width: 10rem;
                white-space: normal;
                margin-top: .5rem;
            }
        }
    }

    #c_garrison.garrison {
        margin-top: .25rem;

        > div:nth-child(2){
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    }

    .armHead {
        >span {
            margin-left: 1rem;
        }
    }

    .fleet {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        min-height: 1rem;
        margin: .25rem 0;
        padding: .25rem 0;
        border-top: 1px solid;
        border-bottom: 1px solid;

        .area {
            width: 8rem;

            > span {
                display: inline-block;
                min-width: 8rem;
                white-space: nowrap;
            }

            .ship {
                text-align: center;

                .current {
                    min-width: 2.5rem;
                    width: 2.5rem;
                    font-size: 1rem;
                }
            }
        }
    }

    .pirate {
        margin-right: .75rem;
        margin-left: .75rem;
    }

    .militaryTab {
        .garrison {
            .battle {
                margin-bottom: .5rem;

                .war,
                .launch {
                    margin: .25rem 0 0 .75rem;
                }
            }

            .columns {
                flex-wrap: wrap;
            }
        }
    }

    .militaryTab,
    .mechTab {
        margin-left: 1rem;
    }

    #hellTabs>section {
        height: 100vh;
    }
    
    .hellReports {
        display: flex;
        justify-content: space-between;
        
        > div {
            height: ~"calc(100vh - 10rem)";
        }

        .reportList {
            top: 0;
            width: 25%;
            box-sizing: border-box;
            border-right: .0625rem solid;
            margin-right: 1rem;
        }

        .reportDisplay {
            width: 75%;
            font-size: .9rem;

            span:not(:last-child) {
                margin-right: .5rem;
            }
            
            p {
                margin-bottom: 0;
            }
            
            .reportStats {
                padding-bottom: .5rem;
                border-bottom: .0625rem solid;
                margin-bottom: .5rem;
                
                h2 {
                    margin-top: 0;
                }
                
                h2:not(:last-child) {
                    margin-right: 1rem;
                }
            }

        }

        .right {
            margin-left: .5rem;
            padding-left: .5rem;
            border-left: .0625rem solid;
        }
    }
    
    .hellAnalysis {
        display: flex;
        justify-content: space-between;
        width: 100%;
        
        .analysisColumn {
            width: 50%;
            margin: 0 10px;
        }
            
        .analysisColumn:not(:last-child) {
            border-right: .0625rem solid;
        }
        
        h2:not(:first-child) {
            margin: 0 0 0 1rem;
        }
    }
    
    #hellAnalysis {
        height: ~"calc(100vh - 10rem)";
        
        > div:not(:last-child) {
            margin-bottom: .5rem;
            border-bottom: .0625rem solid;
            padding-bottom: .5rem;
        }
    }
    
    .graphingArea {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100%;
    }
    
    .graphContainer {
        width: 45%;
    }
    
    .graphControls {
        div {
            display: flex;
            justify-content: space-between;
            
            h2 {
                margin: 0;
            }
        }
        
        .graphTitle {
            justify-content: center;
        }
    }
    
    .graph {
        margin: 1%;
        padding: 3%;
        border: .0625rem solid;
    }
    
    .mechAssembly {
        padding-bottom: .5rem;
        margin-bottom: .5rem;
        border-bottom: .0625rem solid;

        .button {
            height: 2rem;
        }

        .bayOptions {
            margin-top: .5rem;

            .dropdown {
                margin: 0 .5rem .25rem 0;
            }
        }

        .mechAssemble {
            margin: 1rem 0 0 0;
        }

        .checkbox {
            margin-left: .5rem;
            bottom: -.25rem
        }
    }

    .mechList {
        .mechRow {
            .gearList {
                display: inline-flex;
                &.titan {
                    display: inline-grid;
                }
                > div {
                    margin: 0 .125rem;
                }
            }
        }
    }

    .gFort {
        padding-top: .5rem;
        border-bottom: 0;
        margin-top: .5rem;

        .pad {
            margin-right: .25rem;
        }
    }

    .mad {
        margin-top: 1rem;
        max-width: 28rem;
        padding: 1rem;
        border: .0625rem solid #fff;
        border-radius: .5rem;
        background: repeating-linear-gradient(45deg,
                #fbfd84,
                #fbfd84 10px,
                #000000 10px,
                #000000 20px);

        .warn {
            background: #000;
            color: #fff;
            border-radius: .5rem;
            padding: .25rem;
            font-size: .75rem;
            text-align: center;
            margin-bottom: .25rem;
        }

        .defcon {
            display: inline-block;
            width: 50%;
            text-align: center;
        }
    }

    .armed .mad {
        border-color: #8f0000;
        background: repeating-linear-gradient(45deg,
                #8f0000,
                #8f0000 10px,
                #000000 10px,
                #000000 20px);
    }

    .pad {
        margin-left: 1rem;
    }

    .market-header {
        padding-bottom: .5rem;
        margin: .5rem 1rem;

        .trade {
            position: relative;
            bottom: -0.125rem;
            margin-left: 1rem;
        }

        .b-numberinput {
            width: 100%;
        }

        .market {
            margin-left: 1rem;
            margin-right: 1rem;

            .button {
                height: 1.6875rem;
            }

            input {
                height: 1.6875rem;
            }
        }

        .help {
            margin-left: 1rem;
        }
    }

    .galaxyTrade {
        margin-right: 0;
    }

    .trade-header {
        margin: .5rem 0;
        justify-content: center;
    }

    .tradeOffer();

    .setting {
        margin: 0 .25rem .5rem 0;
    }

    .importExport,
    .stringPack {
        margin-top: 1rem;
    }
    
    #customFile,
    #stringPackFile {
        margin-top: .75rem;
    }

    .reset {
        margin-top: 3rem;

        .notification {
            margin-top: .5rem;
        }
    }

    .cstat {
        margin-top: 1rem;
    }

    #achievePanel>div {
        width: 100%;
    }

    .achievement {
        position: relative;
        border: .0625rem solid;
        padding: .125rem;
        margin: .125rem 0;
        width: 100%;

        span {
            display: inline-block;
            > span.row {
                display: block;
            }
        }

        > :first-child {
            margin-left: .5rem;
            width: 100%;
        }

        > :nth-child(2),
        > div.perk {
            margin-left: .5rem;
        }

        .flair {
            display: block;
            position: absolute;
            right: .1875rem;
            top: .1875rem;
            height: .5rem;
            line-height: .5rem;
            margin: 0;
            padding: 0;
        }

        .flair:nth-of-type(2) {
            right: .1875rem;
            top: 1.375rem;
        }

        .flair:nth-of-type(3) {
            right: 1.3125rem;
            top: .1875rem;
        }

        .flair:nth-of-type(4) {
            right: 1.3125rem;
            top: 1.375rem;
        }

        .flair:nth-of-type(5) {
            right: 2.4375rem;
            top: .1875rem;
        }

        .flair:nth-of-type(6) {
            right: 2.4375rem;
            top: 1.375rem;
        }

        .star1,
        .star2,
        .star3,
        .star4,
        .star5 {
            width: 1rem;
        }
    }

    .governor {
        &.candidates {
            display: table;
            width: 100%;
        }
        .appoint {
            display: table-row;
            > span {
                display: table-cell;
            }
            &.header > span {
                padding-bottom: .5rem;
            }
            button {
                height: 1.5rem;
                margin-bottom: .25rem;
            }
        }
    }

    .govOffice {
        .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .fire button {
                display: block;
                line-height: 1rem;
                padding: 0 .5rem;
            }
        }

        .tConfig {
            margin-top: .5rem;
        }
        
        .spyopConfig {
            margin-left: 0;
            
            li {
                cursor: pointer;
                display: inline-block;
                height: 1rem;
                padding: 0 .25rem 0 0;
            }
            
            li:not(:last-child):after {
                content: " -> "
            }
        }

        .options {
            margin-top: 1rem;
            .storage {
                display: flex;
                clear: right;
                > div {
                    width: 50%;
                }
                .control {
                    margin-right: 1rem;
                    input {
                        height: 1.5rem;
                    }
                }
            }
            .hRow {
                > :first-child,
                > :nth-child(2) {
                    display: inline-block;
                }
                > :nth-child(2) {
                    float: right;
                }
            }
            .bal_storage {
                display: inline-flex;
                flex-wrap: wrap;
                .ccmOption {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    position: relative;
                    width: 50%;
                    > span {
                        display: inline-block;
                        width: 7.5rem;
                        overflow-wrap: anywhere;
                        line-height: 1rem;
                    }
                    .field-body {
                        .field {
                            display: flex;
                            flex-wrap: wrap;
                            width: 5rem;
                        }
                        .control {
                            width: .5625rem;
                            margin-right: 1rem;
                            label {
                                height: 1.5rem;
                                padding: 0 .75rem;
                            }
                        }
                    }
                }
                .ccmOption:not(.m) {
                    .field-body {
                        .b3 label {
                            border-top-left-radius: 4px;
                            border-bottom-left-radius: 4px;
                        }
                        .b5 label {
                            border-top-right-radius: 4px;
                            border-bottom-right-radius: 4px;
                        }
                    }
                }
                .ccmOption.m {
                    height: 2.125rem;
                    line-height: 2.125rem;
                    .field-body {
                        .control {
                            label {
                                height: 1rem;
                                font-size: 0.75rem;
                            }
                        }
                        .b1 label {
                            border-bottom-left-radius: 0;
                        }
                        .b3 label {
                            border-top-right-radius: 4px;
                        }
                        .b4 label {
                            border-bottom-left-radius: 4px;
                        }
                        .b6 label {
                            border-top-right-radius: 0;
                        }
                    }
                }
            }
            .trash .has-addons {
                display: initial;
                .trashButton {
                    cursor: pointer;
                }
            }
        }
    }

    #perksPanel .achievement {
        margin: .25rem 0;
    }

    .space,
    .city,
    .tech {
        margin-top: .625rem;
    }

    .space:nth-child(2),
    .city:first-child,
    .tech:first-child {
        margin-top: 0;
    }

    .regionControl,
    .regionSupport {
        margin-left: .5rem;
    }

    .space {
        display: flex;
        .syndThreat {
            margin-left: 1rem;
        }
    }
}

.large_log .main .msgQueue {
    font-size: 1rem;
}

.large_all .main {
    .content {
        .action {
            a.button,
            span.oldTech {
                width: 11.75rem;
                margin: .25rem .25rem 0 0;
            }

            span.on {
                right: .25rem;
            }

            div.special {
                top: .25rem;
            }
        }
    }

    .msgQueue {
        font-size: 0.9rem;
    }
}

.graphCreator > div:not(:last-child) {
    margin-bottom: .5rem;
    border-bottom: .0625rem solid;
    padding-bottom: .5rem;
}

.pylon {
    .current {
        width: 5.25rem;
    }
}

.modalBody {
    .gap {
        margin: 0 .25rem .5rem;
    }

    &.max40 {
        max-width: 40rem;
    }

    .wrap {
        max-width: 25.5rem;
        margin: 0 auto;
    }
}

.popper {
    z-index: 100000;

    .craft-elm {
        white-space: nowrap;
    }

    .grad-from-left,
    .grad-from-left-warn,
    .grad-from-right {
        background-clip: text;
        background-size: 100%;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent; 
        -moz-text-fill-color: transparent;
    }
}

.storage-header {
    button {
        font-size: .875rem;
    }

    .crate {
        margin-left: 13rem;
    }

    .container {
        margin-left: 3rem;
    }

    margin-bottom: .25rem;
}

.market-item {
    margin: .125rem 0 0 1rem;
    display: flex;
    cursor: default;

    .res {
        display: inline-flex;
        cursor: default;
        margin-right: .5rem;
        width: 8rem;
    }

    .buy {
        display: inline-flex;
    }

    .sell {
        display: inline-flex;
        margin-left: .5rem;
    }

    .route {
        position: relative;
        bottom: 1px;
    }

    .order {
        .basic-button();
        min-width: 4.5rem;
    }

    .trade {
        margin-left: 1rem;
        min-width: 9.375rem;

        .current {
            width: 3rem;
        }

        .add,
        .sub {
            position: relative;
            top: .0625rem;
            padding: 0 .375rem;
            line-height: 1rem;
        }

        .mass {
            margin-left: 1rem;
        }
    }

    .crtTotal {
        margin-left: 11.5rem;
    }

    .cntTotal {
        margin-left: 2.0625rem;
    }

    .crtTotal,
    .cntTotal {
        span:nth-child(2) {
            display: inline-block;
            width: 6rem;
            text-align: center;
        }
    }

    .tradeTotal {
        margin-left: 23.25rem;
    }

    .tradeTotal.nt {
        margin-left: 11.5rem;
    }
}

.modal .action {
    &:extend(.main .content .action all);
}

.modal .actionSpace {
    .action a.button {
        margin: .25rem;
    }

    padding: .25rem;
    min-width: 38rem;
    border-radius: .5rem;
}

.modal {
    .modalBody {
        max-height: ~"calc(100vh - 5rem)";
    }
    
    .msgInput {
        .checkbox {
            margin: 0 3rem;
            
            .control-label {
                padding: 0;
            }
        }
    }
    
    .msgInputApply {
        margin-top: 1rem;
    }

    .modal-background {
        background-color: rgba(10,10,10,0);
    }

    .modal-content {
        box-shadow: 0px 0px 1rem black;
        border-radius: 1rem;
    }

    .genus_selection {
        > section {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-between;
        }
    }
}

.main>div.popper,
body .modal>div.popper {
    margin-top: .125rem;
    text-align: center;
    padding: .5rem .75rem;
    max-width: 18rem;
    border-radius: .25rem;
    line-height: 1.3125rem;

    div.aTable {
        columns: 2;

        span {
            display: flex;
        }
    }

    &.breakdown {
        max-width: initial;
    }

    .modal_bd {
        display: table;
        width: 100%;

        :first-child {
            display: table-cell;
            text-align: left;
            padding-right: .5rem;
        }

        :nth-child(2) {
            display: table-cell;
            text-align: right;
        }

        &.sum {
            border-top: .0625rem solid;
        }
    }

    .resBreakdown .parent {
        display: flex;

        div.col {
            padding-left: .5rem;
            margin-left: .5rem;
            border-left: 1px solid;
        }
    }

    >.flair {
        margin-top: .5rem;
        font-size: .75rem;
        text-align: right;
        line-height: .75rem;
    }

    &.flair {
        padding-bottom: .25rem;
    }

    .flexAround {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .example {
        text-align: left;
        white-space: pre;
    }

    .pGeoList {
        .pGeo {
            min-width: 49%;
        }
    }
}

.infoBox {
    max-width: 50rem;
    margin-bottom: .5rem;
    margin-right: .5rem;
    padding: .25rem .5rem;

    h2 {
        margin-bottom: .25rem;
        border-bottom: .0625rem solid;
    }

    div {
        margin-bottom: .5rem;
        clear: both;
    }

    .type {
        display: flex;
        justify-content: space-between;

        >span:nth-child(1) {
            display: block;
            text-align: left;
        }

        >span:nth-child(2) {
            display: block;
            text-align: right;
        }
    }

    .desc {
        text-align: left;
    }
    .condense {
        margin: 0;
    }
}

.main>div.popper.wide,
body .modal>div.popper.wide {
    max-width: initial;
}

.arpa,
.resTabs {
    ul {
        margin-top: 0;
    }

    .tabs>ul {
        margin-left: 1rem;
    }

    .tabs {
        overflow-x: auto;
    }
}

.modalBox,
.industry {
    padding: 1rem;
    border-radius: 1rem;
    text-align: center;
    min-height: 9.5rem;

    p {
        margin-bottom: .5rem;
    }

    .market-item {
        display: block;
        margin-top: .5rem;
        padding-top: .5rem;
        margin-left: 0;
    }

    .crates {
        .crateHead {
            margin-bottom: .5rem;

            :first-child {
                margin-right: 1rem;
            }

            :last-child {
                margin-left: 1rem;
            }
        }

        button {
            font-size: .875rem;
            margin: 0 .25rem;
            height: 1.8rem;
        }
    }

    .divide {
        margin-top: .5rem;
        padding-top: .5rem;
    }

    .current {
        position: relative;
        bottom: .0625rem;
    }

    .smelting {
        margin: .5rem 0 .75rem;
        padding-top: .5rem;

        button {
            font-size: .875rem;
            margin: 0 .25rem;
            height: 1.8rem;
        }

        .button.steel {
            white-space: pre;
        }
    }

    .factory {
        :first-child {
            display: inline-block;
            width: 8rem;
            text-align: left;
        }
    }

    .crateModal {
        margin-bottom: 1.25rem;
    }

    .flexAround {
        margin-top: 0.25rem;
        display: flex;
        justify-content: space-evenly;
    }

    .flexWrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        > div {
            margin-bottom: .25rem;
        }
    }

    .fanatic section {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
}

button[disabled] {
    pointer-events: none;
    cursor: not-allowed;
}

span.inline {
    display: inline-block;
}

.modalBox {
    .tradeOffer();

    .market-item {
        display: flex;
        justify-content: center;
    }

    .trade-header {
        border-top: 0;
        padding-top: 0;
    }
}

.industryTab,
.psychicTab,
.supernaturalTab  {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.industry {
    margin-bottom: .5rem;
    border-bottom: .0625rem solid;
    border-top: .0625rem solid;
    width: 27.5rem;

    .header {
        margin-bottom: .25rem;
        padding-bottom: .25rem;
        width: 100%;
    }

    .gap {
        margin-top: .5rem;
        width: 100%;
    }
}

.topBar,
.promoBar {
    display: inline-flex;
    height: 1.2rem;
    line-height: 1.2rem;
    width: 100%;
    position: fixed;
}

.topBar {
    top: 0;
    z-index: 10;

    .calendar {
        margin: 0 auto;

        .temp {
            margin-left: 0.125rem;
            font-size: 0.875rem;
        }

        .weather {
            font-size: 0.8125rem;
        }

        .moon {
            font-size: 0.875rem;
            color: #fff;
        }

        .wi-thermometer-exterior {
            color: #00d6b2;
        }

        .wi-thermometer {
            color: #f10202;
        }

        .wi-day-sunny,
        .wi-day-windy {
            color: #d0ff00;
        }

        .wi-cloud,
        .wi-cloudy-gusts {
            color: #9ea387;
        }

        .wi-rain,
        .wi-storm-showers {
            color: #00d6b2;
            position: relative;
            bottom: 0.125rem;
        }

        .wi-snow,
        .wi-snow-wind {
            color: #fff;
            position: relative;
            bottom: 0.125rem;
        }

        .atime {
            margin-left: 1rem;
        }

        .infoTimer {
            margin-right: 1rem;
        }

        .astro {
            font-size: 0.8125rem;
            margin-right: .25rem;
        }
    }

    .planetWrap {
        margin-left: 1rem;

        .universe,
        .simulation,
        .pet {
            border-left: 1px solid;
            margin-left: 0.75rem;
            padding-left: 0.75rem;
        }

        .pet {
            cursor: pointer;
        }
    }

    .flair {
        display: inline-block;
        text-align: left;

        svg {
            position: relative;
            top: .125rem;
            left: .25rem;
        }
    }

    .pet {
        .black {
            fill: #000000;
            filter: drop-shadow(0px 0px 2px #fff);
        }
        .black.stripe {
            fill: url(#PetGradient);
            #PetGradient {
                .stop1 { stop-color: #000; }
                .stop2 { stop-color: #4e4e4e; }
            }
        }
        .black.patched {
            fill: url(#PetGradient);
            #PetGradient {
                .stop1 { stop-color: #000; }
                .stop2 { stop-color: #424242; }
            }
        }
        .orange {
            fill: #e25f08;
            filter: drop-shadow(0px 0px 2px #000);
        }
        .orange.stripe {
            fill: url(#PetGradient);
            #PetGradient {
                .stop1 { stop-color: #e25f08; }
                .stop2 { stop-color: #ccb9ad; }
            }
        }
        .gray {
            fill: #575757;
            filter: drop-shadow(0px 0px 2px #000);
        }
        .gray.stripe {
            fill: url(#PetGradient);
            #PetGradient {
                .stop1 { stop-color: #575757; }
                .stop2 { stop-color: #202020; }
            }
        }
        .gray.patched {
            fill: url(#PetGradient);
            #PetGradient {
                .stop1 { stop-color: #575757; }
                .stop2 { stop-color: #665237; }
            }
        }
        .white {
            fill: #f0efef;
            filter: drop-shadow(0px 0px 2px #000);
        }
        .white.stripe {
            fill: url(#PetGradient);
            #PetGradient {
                .stop1 { stop-color: #f0efef; }
                .stop2 { stop-color: #f5dec4; }
            }
        }
        .white.patched {
            fill: url(#PetGradient);
            #PetGradient {
                .stop1 { stop-color: #f0efef; }
                .stop2 { stop-color: #b8ab9b; }
            }
        }
        .cream {
            fill: #bd8754;
            filter: drop-shadow(0px 0px 2px #000);
        }
        .cream.stripe {
            fill: url(#PetGradient);
            #PetGradient {
                .stop1 { stop-color: #bd8754; }
                .stop2 { stop-color: #f5dec4; }
            }
        }
        .brown {
            fill: #996f48;
            filter: drop-shadow(0px 0px 2px #000);
        }
        .brown.patched {
            fill: url(#PetGradient);
            #PetGradient {
                .stop1 { stop-color: #996f48; }
                .stop2 { stop-color: #af9a85; }
            }
        }
    }

    .version {
        margin-right: 1rem;
    }
}

.promoBar {
    bottom: 0;

    .left {
        display: inline-block;
        width: 15rem;
        margin-left: .25rem;
    }

    .right {
        position: absolute;
        display: inline-block;
        text-align: right;
        margin-right: 1rem;
        right: 0;

        span {
            margin: 0 .5rem;
        }

        .external-links {
            li {
                display: inline-block;
            }

            li+li:before {
                content: ' | ';
            }
        }
    }
}

.arpaProject {
    display: inline-block;
    border: solid .0625rem;
    padding: .5rem;
    width: 20rem;
    margin: 0 1rem 1rem 0;

    .head {
        margin-bottom: .25rem;
        padding-bottom: .5rem;
        border-bottom: solid .0625rem;

        >span {
            display: inline-block;
            width: 40%;
        }

        >span:first-child {
            display: inline-block;
            width: 60%;
        }

        .rank {
            text-align: right;
        }

        .pbar {
            position: relative;
            margin-top: .5rem;

            .progress {
                margin-bottom: 0;
            }

            .progress-value {
                position: absolute;
                display: block;
                top: -.1875rem;
                left: 49%;
            }
        }
    }

    .buy {
        text-align: center;

        .button {
            height: 1.5rem;
            width: 19%;
            line-height: .75rem;
        }

        :first-child {
            width: 24%;
        }
    }
}

.ShipYardTab {
    margin-left: 1rem;

    .button {
        height: 2rem;
    }

    .stats {
        display: flex;
        > div {
            margin-left: .5rem;
        }
    }

    .registry {
        line-height: 1.25rem;
        .nameplate {
            display: inline-block;
            width: 8rem;
            height: 1.25rem;
            input {
                height: 1.25rem;
            }
        }
    }
    
    #shipYardCosts {
        margin-left: .5rem;
    }

    .shipBayOptions {
        .dropdown  {
            margin-left: .5rem;
            margin-top: .25rem;
        }
    }

    #shipList {
        margin-top: .25rem;
        .shipRow {
            display: grid;
            padding-top: .25rem;
            margin-top: .25rem;
            margin-left: .5rem;
            border-top: 1px solid;
            grid-template-columns: auto 10rem;

            .name {
                display: inline-block;
                min-width: 5rem;
            }

            .row1,
            .row2,
            .row3 {
                grid-column-start: 1;
            }

            .location {
                grid-column-start: 2;
                grid-row-start: 1;
                grid-row-end: 3;
            }

            .pad {
                margin: 0 .5rem 0 0;
            }
        }

        .compact {
            button {
                height: 1rem;
            }
        }
    }

    .assemble {
        margin: 1rem 0 0 .5rem;
        line-height: 2rem;
        > span {
            margin-left: 1rem;
            > label.checkbox {
                margin-right: 0;
                top: .25rem;
            }
        }
    }

    .solarMap {
        float: right;
        margin-right: 1rem;
    }
}

.genome {
    margin-bottom: 1rem;

    .progress {
        margin-top: .25rem;
        margin-bottom: .5rem;
    }

    button {
        margin-left: .5rem;
    }

    button.seq {
        margin-left: 0;
    }
}

.geneticTraits {
    .trait.major {
        margin-top: .5rem;
    }

    .trait {
        .gene {
            min-width: 5rem;
            padding-bottom: .125rem;
        }
    }
    .trait.indent {
        margin-left: 4.5rem;
    }

    .traitListing {
        display: flex;
        flex-wrap: wrap;
        > .traitRow {
            width: 25rem;
        }
    }

    .traitRow {
        > span {
            vertical-align: middle;
        }

        .basic-button {
            height: 100%;
        }
    }
}

.main>div.popper.wide.w22,
body .modal>div.popper.wide.w22 {
    max-width: 22rem;
}

.main>div.popper.wide.w25,
body .modal>div.popper.wide.w25 {
    max-width: 25rem;
}

.main>div.popper.wide.w30,
body .modal>div.popper.wide.w30 {
    max-width: 30rem;
}

#trick6 {
    width: 4rem;
    text-align: center;
}

body.nuke {
    color: #000;
    transition: color 2s, text-shadow 3s;
    text-shadow: 0px -2px 4px #fff, 0px -2px 10px #FF3, 0px -10px 20px #F90, 0px -20px 40px #C33;
}

div.nuke,
div.mininuke {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    transition: all 2s;
    opacity: 0;

    &.burn {
        opacity: 1;
    }

    &.burn::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 60%;
        left: 30%;
        background: #000;
        border-radius: 50%;
    }

    &.burn.b::before {
        transition: width 3s, height 3s, top 3s, left 3s;
        background: #000;
        width: 180%;
        height: 180%;
        top: -30%;
        left: -30%;
        box-shadow: 0px -2px 4px #fff, 0px -2px 10px #FF3, 0px -10px 20px #F90, 0px -20px 40px #C33,
            inset 0px -20px 40px #fff, inset 0px -20px 100px #FF3, inset 0px -40px 200px #F90, inset 0px -80px 400px #C33;
    }
}

div.nuke {
    &.burn {
        background: #000;
    }
}

div.mininuke {
    position: absolute;
    overflow: hidden;

    &.burn.b::before {
        transition: width 2s, height 2s, top 2s, left 2s;
    }

    &.burn.c::before {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s 2s, opacity 2s linear;
    }
}

div.bigbang {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    transition: all 1s;
    opacity: 0;

    &.burn {
        opacity: 1;
    }

    &.burn::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        background: #fff;
        border-radius: 50%;
    }

    &.burn.b::before {
        transition: width 2s, height 2s, top 2s, left 2s;
        background: #fff;
        width: 180%;
        height: 180%;
        top: -30%;
        left: -30%;
        box-shadow: 0px -2px 4px #fff, 0px -2px 10px #FF3, 0px -10px 20px #F90, 0px -20px 40px #C33,
            inset 0px -20px 40px #fff, inset 0px -20px 100px #FF3, inset 0px -40px 200px #F90, inset 0px -80px 400px #C33;
    }

    &.burn.c::before {
        transition: width 2s, height 2s, top 2s, left 2s, background-color 2s;
        background: #000;
        width: 180%;
        height: 180%;
        top: -30%;
        left: -30%;
        box-shadow: 0px -2px 4px #000, 0px -2px 10px #000, 0px -10px 20px #000, 0px -20px 40px #000,
            inset 0px -20px 40px #000, inset 0px -20px 100px #000, inset 0px -40px 200px #000, inset 0px -80px 400px #000;
    }
}

.earthquake {
    animation: 3.8s shake infinite alternate;
}

@keyframes shake {
    0% {
        transform: skewX(-1deg);
    }

    5% {
        transform: skewX(1deg);
    }

    10% {
        transform: skewX(-1deg);
    }

    15% {
        transform: skewX(1deg);
    }

    20% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.celestialLab {

    .fields {
        margin-top: .5rem;

        .name {
            display: inline-block;
            width: 10rem;
            margin-right: 1rem;
        }

        .entity {
            display: inline-block;
            width: 20rem;
            margin-right: 1rem;
        }

        .control {
            margin: .25rem 0;
        }

        .help {
            margin-top: 0;
            position: absolute;
            right: 0.25rem;
            top: -1rem;
        }
    }

    .sequence {
        display: flex;
        margin-top: .5rem;

        .genus_selection {
            width: 10rem;

            section {
                margin-top: .5rem;
            }

            button {
                padding: 1rem 0.5rem;
            }
        }

        .trait_selection {
            margin-top: .5rem;
            display: flex;
            flex-wrap: wrap;
            >div {
                width: 11.5rem;
            }
        }
        .trait_selection.summary {
            >div {
                width: 23rem;
            }

            .sub, .add {
                position: relative;
                bottom: .1875rem;
            }
        }

        .planet_selection {
            margin-left: 2rem;
            section {
                margin-top: .5rem;
                >div {
                    width: 11.5rem;
                }
            }
        }

        .res_selection {
            margin-left: 2rem;
            section {
                margin-top: .5rem;
                >div {
                    display: flex;
                    justify-content: space-between;
                    >div:first-child {
                        margin-right: 0.25rem; 
                    }
                }
            }
        }

        >div {
            .field:not(:last-child) {
                margin-bottom: 0;
            }
        }
    }

    .buttons {
        display: flex;
        justify-content: space-evenly;
    }

    .create {
        margin-top: 1rem;
        text-align: center;
    }

    .genus, .resetLab {
        margin-bottom: 0.75rem;
        text-align: center;
        > button {
            margin-top: 0.25rem;
            width: 8.5rem;
        }
    }
}

.listqueuestyle.bldQueue,
.listqueuestyle.bldQueue.right,
.numberedlistqueuestyle.bldQueue,
.numberedlistqueuestyle.bldQueue.right,
.bulletlistqueuestyle.bldQueue,
.bulletlistqueuestyle.bldQueue.right {

    li {
        margin: 0.25rem 0;
        display: list-item;
    }

    li:not(:last-child) .queued:after {
        content: ""
    }
}

.numberedlistqueuestyle.bldQueue,
.numberedlistqueuestyle.bldQueue.right {
    li {
        list-style-type: numeric;
        list-style-position: inside;
    }
}

.bulletlistqueuestyle.bldQueue,
.bulletlistqueuestyle.bldQueue.right {
    li {
        list-style-type: disc;
        list-style-position: inside;
    }
}

.sticky {
    position: sticky;
    top: 1rem;
    bottom: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.vscroll {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    top: 1rem;
    bottom: 0;
}

.hscroll {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
}

#evolution {
    height: ~"calc(100vh - 6rem)";
}

.resTabs>section,
.resTabs>.tabs,
.bldQueue {
    scrollbar-width: thin;
}

.modal .modal-content {
    width: initial;
    min-width: 42rem;

    .fuels {
        margin-top: .5rem;
    }

    .avail {
        span {
            margin: 0 2.5rem 0 2.125rem;
        }
    }
}

.popper {
    pointer-events: none;
    .touchButton {
        pointer-events: all;
        height: 1.25rem;
        margin-bottom: .25rem;
    }

    .soldierEvaluation {
        > div {
            display: flex;
            justify-content: space-between;
            :first-child {
                margin-right: 1rem;
            }
        }
        > div.head {
            display: block;
            text-align: center;
        }
    }
}
#powerStatus { white-space: nowrap; }

.pyro > .before, .pyro > .after {
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}
  
.pyro > .after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}
  
@keyframes bang {
    to {
      box-shadow: -154px -131.6666666667px #00ffcc, -243px -325.6666666667px #ff0d00, 71px -294.6666666667px #77ff00, 154px 7.3333333333px #00ff73, 159px 65.3333333333px #ff00f7, 191px -207.6666666667px #ffd000, 123px -232.6666666667px #0059ff, -96px 18.3333333333px #2600ff, 93px 76.3333333333px #00eaff, -94px -388.6666666667px #00ff59, -92px -107.6666666667px #ff8400, -7px -20.6666666667px #3c00ff, 37px -197.6666666667px #ea00ff, 249px -148.6666666667px #ff0022, -112px -249.6666666667px #ff0040, -191px -374.6666666667px #ff7300, 249px -12.6666666667px #3300ff, -238px -366.6666666667px #00fffb, -76px -186.6666666667px #00ffe6, 242px 60.3333333333px #00d5ff, -69px -217.6666666667px #0095ff, 222px -155.6666666667px #0037ff, 164px -410.6666666667px #ff004d, -228px 2.3333333333px #ff9d00, -201px -352.6666666667px #ff00dd, 75px -378.6666666667px #00ff6a, -141px -375.6666666667px #ff0077, -75px -362.6666666667px #8000ff, -162px -287.6666666667px #00ff88, -152px -260.6666666667px #00b3ff, 180px -205.6666666667px #005eff, -110px -16.6666666667px #ff00d5, -128px -298.6666666667px #00ffc4, 141px -197.6666666667px #00f7ff, 73px -109.6666666667px #ff6600, 164px -347.6666666667px #00c8ff, -178px -307.6666666667px #0026ff, 133px 0.3333333333px #bbff00, 13px 37.3333333333px #7bff00, -168px -198.6666666667px #00ddff, -155px -70.6666666667px #8800ff, 167px -111.6666666667px #ffc800, 98px -353.6666666667px #00fffb, 65px -235.6666666667px #ff0059, 186px -122.6666666667px #ff0009, -124px -385.6666666667px #ff007b, 6px -251.6666666667px #ff00bf, 66px -309.6666666667px #0dff00, 169px -119.6666666667px #ff4800, -232px -137.6666666667px #5eff00, 171px -173.6666666667px #ff0055;
    }
}
@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

.noise {
    position: absolute;
    top: -500px;
    right: -500px;
    bottom: -500px;
    left: -500px;
    background: transparent url(/lib/noise.png) 0 0;
    background-size: 320px 320px;
    opacity: .35;
    animation: noise 1s steps(8,end) infinite both;
}

.noise-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    overflow: hidden;
    z-index: 10;
    
    &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);
    }
}

@keyframes noise {
    0% {
        transform: translateX(0px,0px);
    }
    10% {
        transform: translate(-100px, 100px);
    }
    20% {
        transform: translate(150px, -100px);
    }
    30% {
        transform: translate(-100px,100px);
    }
    40% {
        transform: translate(100px, -150px);
    }
    50% {
        transform: translate(-100px, 200px);
    }
    60% {
        transform: translate(-200px, -100px);
    }
    70% {
        transform: translateY(50px, 100px);
    }
    80% {
        transform: translate(100px, -150px);
    }
    90% {
        transform: translate(0px, 200px);
    }
    100% {
        transform: translate(-100px, 100px);
    }
}

.signal-lost-top {
    width: 100%;
    height: 0%;
    opacity: 0.9;
    background: black;
    position: absolute;
    top: 0;
    z-index: 100;
}

.signal-lost-bottom {
    width: 100%;
    height: 0%;
    opacity: 0.9;
    background: black;
    position: absolute;
    bottom: 0;
    z-index: 100;
}

.refresh {
    position: relative;
    display: inline-block;
    height: 1rem;
    width: 1rem;
    font-size: 1rem;
    cursor: pointer;
    margin-left: .5rem;
    top: .2rem;
}

.font-overlay {
    z-index: 999;
    position: absolute;
    top: 1rem;
}
