@import url("/lang/en.css");

:root {
    color-scheme: light;

    --background-color: #fff;
    --text-color: #000;

    --main-font: 'Open Sans', sans-serif;
    --main-background-color: transparent;
    --main-color: purple;
    --main-text-color: purple;
    --main-text-light-color: MediumPurple;

    --selected-background-color: purple;
    --selected-text-color: #fff;

    --error-background-color: red;
    --error-text-color: #fff;

    --debug-font: "Courier New", monospace;

    --font-size: 1em;
    --font-size-live: 1em;
    --font-size-info: 0.8em;
    --font-size-settings: 1em;
    --font-size-debug: 0.7em;
    --font-size-alert: 0.9em;
    --font-size-error: 0.9em;

    @media (prefers-color-scheme: dark) {
	color-scheme: dark;

	--background-color: #000;
	--text-color: #ccc;

	--main-font: 'Open Sans', sans-serif;
	--main-background-color: transparent;
	--main-color: purple;
        --main-text-color: #ccc;
	--main-text-light-color: MediumPurple;

	--selected-background-color: purple;
	--selected-text-color: #fff;

	--error-background-color: red;
	--error-text-color: #fff;

	--debug-font: "Courier New", monospace;

	--dialog-border: 1px solid purple;

	.live .gear {
	    color: var(--text-color);
	}
    }
}

* {
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
}
body {
    font-size: var(--font-size);
    font-family: var(--main-font);
    background: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0 0 2em 0;
}
body.logs {
    padding-bottom: 12em;
}

.live {
    font-size: var(--font-size-live);
}
.live .fgear {
    margin: 1.7em 0 0.7em 0;
    font-size: calc(var(--font-size-live) * 4);
    text-align: center;
    color: var(--main-color);
}
.live .cgear {
    margin: 2em 0 7em 0;
    /*display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;*/
}
.live .gear {
    font-size: calc(var(--font-size-live) * 15);
    line-height: calc(var(--font-size-live) * 0.8);
    text-align: center;
    color: var(--main-color);
}
.live .gears {
    margin-top: 0.5em;
    text-align: center;
    font-size: calc(var(--font-size-live) * 1.5);
    color: var(--main-text-light-color);
}
.live .action_buttons {
    text-align: center;
    width: 100%;
}
.live .button {
    font-size: calc(var(--font-size-live) * 1.7);
    margin: 0 0.2em;
}
.live .action_buttons .front,
.live .action_buttons .up,
.live .action_buttons .down {
    width: 40%;
}

.info {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    font-size: var(--font-size-info);
}
.info .content,
.info .txcontent,
.info .gxcontent,
.info .ox2content {
    background: var(--selected-background-color);
    color: var(--selected-text-color);
    font-family: var(--debug-font);
    padding: 0.5em 0.5em 0.3em 0.5em;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.info .content .right,
.info .ox2content .right {
    margin-left: auto;
}
.info.big {
    font-size: calc(var(--font-size-info) * 2.5);
}
.info.big .left_rd {
    display: none;
}
.info.big .right_shifter {
    display: none;
}

.scan {
    text-align: center;
    margin-top: 5em;
}
.scan .button.edsscan {
    position: relative;
}

.settings .action_buttons,
.txsettings .front_buttons,
.gxsettings .action_buttons,
.ox2settings .action_buttons {
    text-align: center;
    margin-top: 4em;
}
.txsettings .action_buttons {
    text-align: center;
    margin-top: 2em;
}
.settings .action_buttons .button,
.txsettings .action_buttons .button,
.gxsettings .action_buttons .button,
.txsettings .front_buttons .button,
.ox2settings .action_buttons .button,
.live .action_buttons .button {
    position: relative;
}
.settings .action_buttons .button:after,
.txsettings .action_buttons .button:after,
.gxsettings .action_buttons .button:after,
.ox2settings .action_buttons .button:after,
.txsettings .front_buttons .button:after,
.live .action_buttons .button:after {
    color: var(--main-text-light-color);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: calc(var(--font-size-settings) * 0.7);
}
.settings .action_buttons .button:before,
.txsettings .front_buttons .button:before,
.gxsettings .action_buttons .button:before,
.ox2settings .action_buttons .button:before,
.txsettings .action_buttons .button:before {
    color: var(--main-text-light-color);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: calc(var(--font-size-settings) * 0.7);
}
.txsettings .front_buttons .button.up:before,
.txsettings .front_buttons .button.down:before {
    content: var(--lang-front);
}
.settings .action_buttons .button.gear:before,
.txsettings .front_buttons .button.gear:before,
.gxsettings .action_buttons .button.gear:before,
.ox2settings .action_buttons .button.gear:before,
.txsettings .action_buttons .button.gear:before {
    content: var(--lang-current);
}
.settings .action_buttons .button.gears:before,
.txsettings .action_buttons .button.gears:before,
.gxsettings .action_buttons .button.gears:before,
.ox2settings .action_buttons .button.gears:before {
    content: var(--lang-total);
}
.txsettings .action_buttons .button.up:before,
.txsettings .action_buttons .button.down:before,
.gxsettings .action_buttons .button.up:before,
.gxsettings .action_buttons .button.down:before,
.ox2settings .action_buttons .button.up:before,
.ox2settings .action_buttons .button.down:before {
    content: var(--lang-rear);
}
.settings .action_buttons .button.up:after,
.settings .action_buttons .button.down:after,
.txsettings .front_buttons .button.up:after,
.txsettings .front_buttons .button.down:after,
.txsettings .action_buttons .button.up:after,
.txsettings .action_buttons .button.down:after,
.gxsettings .action_buttons .button.up:after,
.gxsettings .action_buttons .button.down:after,
.ox2settings .action_buttons .button.up:after,
.ox2settings .action_buttons .button.down:after,
.live .action_buttons .button.front:after,
.live .action_buttons .button.up:after,
.live .action_buttons .button.down:after {
    content: var(--lang-shift);
}
.settings .action_buttons .button.gear:after,
.txsettings .front_buttons .button.gear:after,
.txsettings .action_buttons .button.gear:after,
.gxsettings .action_buttons .button.gear:after,
.ox2settings .action_buttons .button.gear:after {
    content: var(--lang-gear);
}
.settings .action_buttons .button.gears:after,
.txsettings .action_buttons .button.gears:after,
.gxsettings .action_buttons .button.gears:after,
.ox2settings .action_buttons .button.gears:after {
    content: var(--lang-gears);
}
.settings .micro,
.txsettings .front_micro,
.txsettings .micro,
.gxsettings .micro,
.ox2settings .micro {
    text-align: center;
    margin-top: 0.2em;
}
.settings .micro .button,
.txsettings .front_micro .button,
.txsettings .micro .button,
.gxsettings .micro .button,
.ox2settings .micro .button {
    position: relative;
}
.settings .micro .button:after,
.txsettings .front_micro .button:after,
.txsettings .micro .button:after,
.gxsettings .micro .button:after,
.ox2settings .micro .button:after {
    color: var(--main-text-light-color);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: calc(var(--font-size-settings) * 0.7);
}
.settings .micro .button:before,
.txsettings .front_micro .button:before,
.txsettings .micro .button:before,
.gxsettings .micro .button:before,
.ox2settings .micro .button:before {
    color: var(--main-text-light-color);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: calc(var(--font-size-settings) * 0.7);
}
.settings .micro .button.up:before,
.settings .micro .button.down:before,
.txsettings .front_micro .button.up:before,
.txsettings .front_micro .button.down:before,
.txsettings .micro .button.up:before,
.txsettings .micro .button.down:before,
.gxsettings .micro .button.up:before,
.gxsettings .micro .button.down:before,
.ox2settings .micro .button.up:before,
.ox2settings .micro .button.down:before {
    content: var(--lang-micro);
}
.settings .micro .button.up:after,
.settings .micro .button.down:after,
.txsettings .front_micro .button.up:after,
.txsettings .front_micro .button.down:after,
.txsettings .micro .button.up:after,
.txsettings .micro .button.down:after,
.gxsettings .micro .button.up:after,
.gxsettings .micro .button.down:after,
.ox2settings .micro .button.up:after,
.ox2settings .micro .button.down:after {
    content: var(--lang-shift);
}
.settings .gear_values,
.txsettings .gear_values,
.gxsettings .gear_values,
.ox2settings .gear_values {
    text-align: center;
    margin-top: 2em;
}
.settings .gear_values .gear,
.txsettings .gear_values .front,
.txsettings .gear_values .gear,
.gxsettings .gear_values .gear,
.ox2settings .gear_values .gear {
    margin-bottom: 0.2em;
    white-space: nowrap;
}
.settings .gear_values .vcontent,
.txsettings .gear_values .fvcontent,
.txsettings .gear_values .vcontent,
.gxsettings .gear_values .vcontent,
.ox2settings .gear_values .vcontent {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /*-webkit-flex-wrap: wrap;
    flex-wrap: wrap;*/
    -webkit-flex-direction: row;
    flex-direction: row;
    justify-content: center;
}
.txsettings .gear_values .fvcontent {
    margin-bottom: 1em;
}
.txsettings .fvnone {
    font-size: calc(var(--font-size-settings) * 0.8);
    margin: 5em 0 2em 0;
    padding: 0 1em;
    text-align: center;
}
.txsettings .fvnone a {
    text-decoration: none;
    border-bottom: 1px dashed var(--main-color);
    color: var(--main-color);
}
.settings .gear_values .buttons,
.txsettings .gear_values .buttons,
.gxsettings .gear_values .buttons,
.ox2settings .gear_values .buttons {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /*-webkit-flex-wrap: wrap;
    flex-wrap: wrap;*/
    -webkit-flex-direction: column;
    flex-direction: column;
    /*align-items: flex-start;*/
    justify-content: space-between;
    margin-left: 1em;
}
.settings .gear_values .buttons .button,
.txsettings .gear_values .buttons .button,
.gxsettings .gear_values .buttons .button,
.ox2settings .gear_values .buttons .button {
    margin-bottom: 0.2em;
}
.settings .gear_values .content .button.plus,
.txsettings .gear_values .content .button.plus,
.gxsettings .gear_values .content .button.plus,
.ox2settings .gear_values .content .button.plus {
    position: relative;
}
.settings .gear_values .content .button.plus:after,
.txsettings .gear_values .content .button.plus:after,
.gxsettings .gear_values .content .button.plus:after,
.ox2settings .gear_values .content .button.plus:after {
    color: var(--main-text-light-color);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: calc(var(--font-size-settings) * 0.7);
    text-align: center;
    margin-left: calc(-7em);
    z-index: 1;
    pointer-events: none;
}
.settings .gear_values .presets,
.txsettings .gear_values .presets,
.gxsettings .gear_values .presets,
.ox2settings .gear_values .presets {
    margin-top: 1em;
    margin-bottom: 1em;
}
.settings .gear_values .preset_wrap,
.txsettings .gear_values .preset_wrap,
.gxsettings .gear_values .preset_wrap,
.ox2settings .gear_values .preset_wrap {
    white-space: nowrap;
    display: inline-block;
    margin: 0 0.1em;
}
.settings .gear_values .preset_wrap .preset,
.txsettings .gear_values .preset_wrap .preset,
.gxsettings .gear_values .preset_wrap .preset,
.ox2settings .gear_values .preset_wrap .preset {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: 0.2em;
}
.settings .gear_values .preset_wrap .del,
.txsettings .gear_values .preset_wrap .del,
.gxsettings .gear_values .preset_wrap .del,
.ox2settings .gear_values .preset_wrap .del {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 0;
    padding: 0.6em 1em;
    width: 0.5em;
}

.buttons_function {
    text-align: center;
    margin-top: 2em;
}
.buttons_function .vbutton,
.buttons_function .button {
    position: relative;
}
.buttons_function .vbutton:before,
.buttons_function .button:before {
    color: var(--main-text-light-color);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: calc(var(--font-size-settings) * 0.7);
}
.buttons_function .vbutton:after,
.buttons_function .button:after {
    color: var(--main-text-light-color);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: calc(var(--font-size-settings) * 0.7);
}
.buttons_function .vbutton.top:before,
.buttons_function .vbutton.bottom:before {
    content: var(--lang-function);
}
.buttons_function .vbutton.top:after,
.buttons_function .vbutton.bottom:after {
    content: var(--lang-shift);
}
.buttons_function .button.top:before,
.buttons_function .button.single:before {
    content: var(--lang-left);
}
.buttons_function .vbutton.small:before,
.buttons_function .vbutton.big:before {
    content: var(--lang-right);
}
.buttons_function .vbutton.small:after {
    content: var(--lang-small);
}
.buttons_function .vbutton.big:after {
    content: var(--lang-big);
}
.buttons_function .button.mode:after,
.buttons_function .button.sleep:after,
.buttons_function .button.rdprotect:after {
    content: var(--lang-mode);
}

.button {
    display: inline-block;
    cursor: pointer;
    background: var(--main-background-color);
    padding: 0.6em 1.5em;
    border-radius: 2em;
    border: 2px solid var(--main-color);
    color: var(--main-text-color);
    font-size: calc(var(--font-size-settings) * 0.9);
    font-family: var(--main-font);
    text-align: center;
    box-sizing: border-box;
}
.button.selected {
    background-color: var(--selected-background-color);
    color: var(--selected-text-color);
}
.button_debug,
.button_page,
.button_menu,
.button_shutdown,
.button_disconnect,
.button_export,
.button_import,
.button_zoom_in,
.button_zoom_out {
    /*position: absolute;*/
    padding: 0.9em;
    width: 0.9em;
    height: 0.8em;
    text-align: center;
    line-height: 0.85em;
    font-weight: bold;
}
.button_debug,
.button_menu {
    background: var(--background-color);
}
.button_page,
.button_shutdown,
.button_disconnect,
.button_export,
.button_import,
.button_zoom_in,
.button_zoom_out {
    background: var(--selected-background-color);
}

.vbox {
    display: inline-block;
}
.vbutton:first-child {
    display: block;
    cursor: pointer;
    background: var(--main-background-color);
    padding: 0.6em 1.5em;
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
    border: 2px solid var(--main-color);
    border-bottom: 1px solid var(--main-color);
    color: var(--main-text-color);
    font-size: calc(var(--font-size-settings) * 0.9);
    font-family: var(--main-font);
}
.vbutton:last-child {
    display: block;
    cursor: pointer;
    background: var(--main-background-color);
    padding: 0.6em 1.5em;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
    border: 2px solid var(--main-color);
    border-top: 1px solid var(--main-color);
    color: var(--main-text-color);
    font-size: calc(var(--font-size-settings) * 0.9);
    font-family: var(--main-font);
}
select {
    appearance: none;
    outline: none;
    border: 0;
    cursor: pointer;
    background: var(--main-background-color);
    color: var(--main-text-color);
    font-size: calc(var(--font-size-settings) * 0.9);
    font-family: var(--main-font);
    text-align: center;
}
.settings .gear_values .button.minus,
.txsettings .gear_values .button.minus,
.gxsettings .gear_values .button.minus,
.ox2settings .gear_values .button.minus {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
    padding: 0.6em 1em;
    width: 0em;
}
.settings .gear_values .button.plus,
.txsettings .gear_values .button.plus,
.gxsettings .gear_values .button.plus,
.ox2settings .gear_values .button.plus {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
    padding: 0.6em 1em;
    width: 0em;
}
.settings .gear_values .button.set,
.txsettings .gear_values .button.set,
.gxsettings .gear_values .button.set,
.ox2settings .gear_values .button.set {
    margin-left: 0.2em;
}
.settings .gear_values input[type="text"],
.txsettings .gear_values input[type="text"],
.gxsettings .gear_values input[type="text"],
.ox2settings .gear_values input[type="text"] {
    width: 3em;
    border: 2px solid var(--main-color);
    color: var(--main-text-color);
    border-left: 0;
    border-right: 0;
    padding: 0.6em 0;
    font-size: calc(var(--font-size-settings) * 0.9);
    font-family: var(--main-font);
    text-align: center;
    background: var(--main-background-color);
    box-sizing: border-box;
}

.advanced {
    margin-top: 2em;
    text-align: center;
}
.advanced .button {
    margin-bottom: 1em;
}
.advanced .button.icon-advanced {
    padding-left: 3em;
}

/* https://icon-sets.iconify.design/ */
.icon-bike {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 20.5A3.5 3.5 0 0 1 1.5 17A3.5 3.5 0 0 1 5 13.5A3.5 3.5 0 0 1 8.5 17A3.5 3.5 0 0 1 5 20.5M5 12a5 5 0 0 0-5 5a5 5 0 0 0 5 5a5 5 0 0 0 5-5a5 5 0 0 0-5-5m9.8-2H19V8.2h-3.2l-1.94-3.27c-.29-.5-.86-.83-1.46-.83c-.47 0-.9.19-1.2.5L7.5 8.29C7.19 8.6 7 9 7 9.5c0 .63.33 1.16.85 1.47L11.2 13v5H13v-6.5l-2.25-1.65l2.32-2.35m5.93 13a3.5 3.5 0 0 1-3.5-3.5a3.5 3.5 0 0 1 3.5-3.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m0-8.5a5 5 0 0 0-5 5a5 5 0 0 0 5 5a5 5 0 0 0 5-5a5 5 0 0 0-5-5m-3-7.2c1 0 1.8-.8 1.8-1.8S17 1.2 16 1.2S14.2 2 14.2 3S15 4.8 16 4.8'/%3E%3C/svg%3E");
    background-position: center;
}
.icon-gear {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='purple' d='M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1s.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64z'/%3E%3C/svg%3E");
    background-position: center;
}
.icon-gear.selected {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1s.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64z'/%3E%3C/svg%3E");
}
.icon-disconnect {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 70% 70%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath fill='%23fff' d='m1300 1201l-271 271l90 90l-226 227q-63 63-145 97t-172 34q-73 0-141-22t-127-67l-199 198l-90-90l198-199q-44-58-66-126t-23-142q0-89 34-171t97-146l227-226l90 90l271-271l91 90l-272 272l272 272l272-272zm-724 591q64 0 122-24t104-70l136-136l-452-452l-136 136q-45 45-69 103t-25 123q0 66 25 124t68 102t102 69t125 25M1831 308q44 58 66 126t23 142q0 89-34 171t-97 146l-227 226l-633-633l226-227q63-63 145-97t172-34q73 0 141 22t127 67l199-198l90 90zm-133 494q45-45 69-103t25-123q0-66-25-124t-69-101t-102-69t-124-26q-64 0-122 24t-104 70l-136 136l452 452z'/%3E%3C/svg%3E");
    background-position: center;
}
.icon-shutdown {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m16.56 5.44l-1.45 1.45A5.97 5.97 0 0 1 18 12a6 6 0 0 1-6 6a6 6 0 0 1-6-6c0-2.17 1.16-4.06 2.88-5.12L7.44 5.44A7.96 7.96 0 0 0 4 12a8 8 0 0 0 8 8a8 8 0 0 0 8-8c0-2.72-1.36-5.12-3.44-6.56M13 3h-2v10h2'/%3E%3C/svg%3E");
    background-position: center;
}
.icon-wrench {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 70% 70%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9c-2-2-5-2.4-7.4-1.3L9 6L6 9L1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4'/%3E%3C/svg%3E");
    background-position: center;
}
.icon-logs {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='purple' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 12h.01M4 6h.01M4 18h.01M8 18h2m-2-6h2M8 6h2m4 0h6m-6 6h6m-6 6h6'/%3E%3C/svg%3E");
    background-position: center;
}
.icon-logs.selected {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 12h.01M4 6h.01M4 18h.01M8 18h2m-2-6h2M8 6h2m4 0h6m-6 6h6m-6 6h6'/%3E%3C/svg%3E");
}
.icon-import {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M4 12a8 8 0 1 0 16 0'/%3E%3Cpath stroke-linejoin='round' d='M12 4v10m0 0l3-3m-3 3l-3-3'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
}
.icon-export {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M4 12a8 8 0 1 0 16 0'/%3E%3Cpath stroke-linejoin='round' d='M12 14V4m0 0l3 3m-3-3L9 7'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
}
.icon-zoom-in {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m3.9 21.5l-1.4-1.4L5.6 17H3v-2h6v6H7v-2.6zm16.2 0L17 18.4V21h-2v-6h6v2h-2.6l3.1 3.1zM3 9V7h2.6L2.5 3.9l1.4-1.4L7 5.6V3h2v6zm12 0V3h2v2.6l3.1-3.1l1.4 1.4L18.4 7H21v2z'/%3E%3C/svg%3E");
    background-position: center;
}
.icon-zoom-out {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 21v-6h2v2.6l3.1-3.1l1.4 1.4L6.4 19H9v2zm12 0v-2h2.6l-3.1-3.1l1.4-1.4l3.1 3.1V15h2v6zM8.1 9.5L5 6.4V9H3V3h6v2H6.4l3.1 3.1zm7.8 0l-1.4-1.4L17.6 5H15V3h6v6h-2V6.4z'/%3E%3C/svg%3E");
    background-position: center;
}
.icon-lock {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='purple' d='M6 8h9V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6H7q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22H6q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8m6 9q.825 0 1.413-.587T14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17'/%3E%3C/svg%3E");
    background-position: center;
}
.icon-lock.selected {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm0-2h12V10H6zm6-3q.825 0 1.413-.587T14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6zM6 20V10z'/%3E%3C/svg%3E");
}
.icon-advanced {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='purple' d='M9.965 50.207h36.07c3.985 0 6.469-2.86 6.469-6.469c0-1.078-.281-2.18-.867-3.187L33.567 9.074c-1.22-2.133-3.352-3.281-5.555-3.281c-2.18 0-4.336 1.148-5.579 3.281l-18.07 31.5a6.25 6.25 0 0 0-.867 3.164c0 3.61 2.508 6.469 6.469 6.469m.047-3.68c-1.641 0-2.72-1.336-2.72-2.789c0-.422.071-.914.306-1.406l18.046-31.477c.516-.89 1.454-1.312 2.368-1.312s1.804.398 2.32 1.312l18.047 31.5c.234.47.351.961.351 1.383c0 1.453-1.125 2.79-2.742 2.79Zm18-12.117c1.125 0 1.78-.656 1.804-1.875l.328-12.351c.024-1.196-.914-2.086-2.156-2.086c-1.265 0-2.156.867-2.133 2.062l.305 12.375c.023 1.196.68 1.875 1.852 1.875m0 7.617c1.359 0 2.53-1.078 2.53-2.437c0-1.383-1.148-2.438-2.53-2.438c-1.383 0-2.532 1.078-2.532 2.438c0 1.336 1.172 2.437 2.532 2.437'/%3E%3C/svg%3E");
    background-position: 0.5em center;
}
.icon-advanced.selected {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='%23fff' d='M9.965 50.207h36.07c3.985 0 6.469-2.86 6.469-6.469c0-1.078-.281-2.18-.867-3.187L33.567 9.074c-1.22-2.133-3.352-3.281-5.555-3.281c-2.18 0-4.336 1.148-5.579 3.281l-18.07 31.5a6.25 6.25 0 0 0-.867 3.164c0 3.61 2.508 6.469 6.469 6.469m.047-3.68c-1.641 0-2.72-1.336-2.72-2.789c0-.422.071-.914.306-1.406l18.046-31.477c.516-.89 1.454-1.312 2.368-1.312s1.804.398 2.32 1.312l18.047 31.5c.234.47.351.961.351 1.383c0 1.453-1.125 2.79-2.742 2.79Zm18-12.117c1.125 0 1.78-.656 1.804-1.875l.328-12.351c.024-1.196-.914-2.086-2.156-2.086c-1.265 0-2.156.867-2.133 2.062l.305 12.375c.023 1.196.68 1.875 1.852 1.875m0 7.617c1.359 0 2.53-1.078 2.53-2.437c0-1.383-1.148-2.438-2.53-2.438c-1.383 0-2.532 1.078-2.532 2.438c0 1.336 1.172 2.437 2.532 2.437'/%3E%3C/svg%3E");
}

.debug {
    border: none;
    resize: none;
    font-family: var(--debug-font);
    font-size: var(--font-size-debug);
    height: 15em;
    overflow: auto;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 10;
    background: var(--background-color);
    color: var(--text-color);
}
.menus {
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 11;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    direction: rtl;
}
.menus .button {
    padding: 1.4em;
}
.menus .bmenus {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.menus .bmenus>div {
    margin-bottom: 0.6em;
}

.front1:after { content: var(--lang-limit1); }
.front2:after { content: var(--lang-limit2); }
.front3:after { content: var(--lang-limit3); }
.front4:after { content: var(--lang-limit4); }
.front5:after { content: var(--lang-limit5); }
.front6:after { content: var(--lang-limit6); }

.gear1:after { content: var(--lang-gear1); }
.gear2:after { content: var(--lang-gear2); }
.gear3:after { content: var(--lang-gear3); }
.gear4:after { content: var(--lang-gear4); }
.gear5:after { content: var(--lang-gear5); }
.gear6:after { content: var(--lang-gear6); }
.gear7:after { content: var(--lang-gear7); }
.gear8:after { content: var(--lang-gear8); }
.gear9:after { content: var(--lang-gear9); }
.gear10:after { content: var(--lang-gear10); }
.gear11:after { content: var(--lang-gear11); }
.gear12:after { content: var(--lang-gear12); }
.gear13:after { content: var(--lang-gear13); }
.gear14:after { content: var(--lang-gear14); }

.error {
    color: var(--error-text-color);
    background: var(--error-background-color);
    cursor: pointer;
    display: inline-block;
    left: 50%;
    padding: 0.6em 1.5em;
    border-radius: 2em;
    border: 2px solid red;
    font-size: var(--font-size-error);
    font-family: var(--main-font);
    position: fixed;
    transform: translateX(-50%);
    bottom: 1em;
    z-index: 100;
    white-space: nowrap;
}
.qalert {
    color: var(--selected-text-color);
    background: var(--selected-background-color);
    cursor: pointer;
    display: inline-block;
    left: 50%;
    padding: 0.6em 1.5em;
    border-radius: 2em;
    border: 2px solid var(--main-color);
    font-size: var(--font-size-alert)
    font-family: var(--main-font);
    position: fixed;
    transform: translateX(-50%);
    bottom: 1em;
    z-index: 100;
    white-space: nowrap;
    text-align: center;
}

.dim {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
}

#dim {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 1001;
    display: table;
}
#dimm {
    display: table-cell;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0.3);
    z-index: 499;
}

#dialog_popup {
    z-index: 500;
    width: 80%;
    max-width: 60em;
    min-height: 5em;
    height: auto;
    overflow: hidden;
    background: var(--background-color);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    margin: 0 auto;
    color: var(--text-color);
    border: var(--dialog-border);
}
#dialog_popup .in {
    margin: 1em 2em 1.3em 2em;
}
#dialog_popup .text {
    width: 100%;
    font-size: 1em;
    font-weight: 300;
    text-align: center;
    padding-top: 0.5em;
}
#dialog_popup .fields {
    margin-top: 1em;
    display: none;
}
#dialog_popup .buttons {
    width: 90%;
    margin: 1em auto 0 auto;
    font-size: 1.1em;
    font-weight: 300;
    overflow: hidden;
}
#dialog_popup .buttons a {
    display: block;
    float: left;
    text-decoration: none;
    color: var(--main-color)
}
#dialog_popup .buttons a:last-child {
    float: right;
}
#dialog_popup input[type="text"] {
    border: 1px solid var(--main-color);
    border-radius: 2em;
    font-size: 1rem;
    font-family: var(--main-font);
    padding: 0.7em 1em;
    box-sizing: border-box;
    /*width: 100%;*/
    margin: 0.5em 0;
    color: var(--text-color);
}

.prompt_save_options {
    width: 70%;
    margin: 0 auto;
    list-style: none;
}
.prompt_save_options li {
    margin: 0.2em 0;
}