html {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    touch-action: none;
}

body {
    background-color: #161718;
}

.debug-log {
    position: relative;
    color: red;
    z-index: 1;
	font-family: monospace;
}

#debug-container {
	position: fixed;
	top: 110px;
	right: 10px;
	width: 400px;
	padding: 10px;
	font-size: 16px;
	color: #00FF00;
	text-align: right;
	font-family: monospace;
	z-index: 1;
	background-color: rgba(0, 0, 0, 50%);
	pointer-events: none;
}

.debug.hidden {
	display: none;
}

#render-canvas.square {
    width: min(90vw, 90vh);
    height: min(90vw, 90vh);
    position: fixed;
    left: calc((100vw - min(90vw, 90vh)) * 0.5);
    top: calc((100vh - min(90vw, 90vh)) * 0.5);
    outline: none;
    border: 1px solid white;
}

#screenshot-frame {
    pointer-events: none;
    width: min(100vw, 100vh);
    height: min(100vw, 100vh);
    position: fixed;
    left: calc((100vw - min(100vw, 100vh)) * 0.5);
    top: calc((100vh - min(100vw, 100vh)) * 0.5);
}

.page {
    position: fixed;
    top: 0;
    left: calc((100vw - min(100svh, 100vw)) * 0.5);
    width: min(100svh, 100vw);
    height: 90svh;
    z-index: 2;
    text-align: center;
    font-family: Roboto, Arial, Helvetica, sans-serif;;
    color: white;
}

panel-page {
    pointer-events: none;
}

.panel {
    position: relative;
    background-color: rgba(39, 43, 46, 80%);
    outline: calc(min(0.1vh, 0.1vw)) solid white;
    border-radius: calc(min(1.5vh, 1.5vw));
    margin: 0;
    padding: 0;
    color: white;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: initial;
}

.panel.title {
    background-color: rgba(0, 0, 0, 0);
    outline: none;
    border-radius: none;
    margin: 0;
    padding: 0;
    color: white;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: initial;
}

.panel:hover { 
    background-color: rgba(78, 86, 92, 90%);
    outline: calc(min(0.3vh, 0.3vw)) solid white;
}

.panel.title:hover { 
    background-color: rgba(0, 0, 0, 0);
    outline: none;
}

.panel .label {
    text-align: right;
    display: block;
    margin: 0.5vh 1.5vh 0.5vh 1.5vh;
    font-size: 3vh;
}

.panel .label-2 {
    text-align: left;
    display: block;
    position: absolute;
    bottom: 2vh;
    font-size: 2vh;
    background-color: black;
    padding: 0.2vh 1vh 0.2vh 3vh;
}

.panel.create .label {
    text-align: left;
    display: block;
}

.panel.option .label {
    text-align: left;
    display: block;
}

.panel.credit .label {
    text-align: left;
    display: block;
}

.panel .check {
    position: absolute;
    right: 1.5vh;
    bottom: 1.5vh;
    width: 6vh;
    stroke: white;
    display: none;
}

.panel[status="completed"] .check {
    display: block;
}

.page {
    font-family: Roboto, Arial, Helvetica, sans-serif;;
}

#credits {
    background-color: #272b2e;
    color: white;
    z-index: 3;
    outline: 2px solid white;
    top: 15svh;
    left: calc((100vw - min(100svh, 100vw)) * 0.5);
    width: min(100svh, 100vw);
    height: 70svh;
}

#credits img {
    display: inline-block;
    height: 10vh;
    margin: 1vh;
}

.page h1 {
    font-size: 3.5vh;
    margin: 1vh;
    margin-bottom: 3vh;
}

.page h2 {
    font-size: 3vh;
    margin: 0.8vh;
}

.page h3 {
    font-size: 2.5vh;
    margin: 0.5vh;
}

.page h4 {
    font-size: 2vh;
    margin: 0.2vh;
}

#credits .label {
    font-style: italic;
    font-weight: lighter;
}

#credits p {
    font-size: 1.5vh;
    font-weight: lighter;
}

#credits a {
    margin-left: 1vh;
    color: #E0E0E0;
}

#credits a:link { 
    text-decoration: none; 
}

#credits a:visited { 
    text-decoration: none; 
}

#credits a:hover { 
    text-decoration: none; 
}

#credits a:active { 
    text-decoration: none; 
}

#options .line {
    height: 2vh;
    margin: 0.4vh;
}

#options .label {
    font-family: monospace;
    font-size: 1.5vh;
    display: inline-block;
    text-align: right;
    padding-right: 1vh;
    width: 50%;
    height: 100%;
}

#options .value {
    font-family: monospace;
    font-size: 1.5vh;
    display: inline-block;
    text-align: left;
    padding-left: 1vh;
    width: 35%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 20%);
}

#options .btn {
    display: inline-block;
    width: 3vh;
    outline: none;
    text-align: center;
    vertical-align: top;
    background-color: rgba(0, 0, 0, 20%);;
}

#options .val {
    display: inline-block;
    width: 5vh;
    outline: none;
    text-align: center;
    vertical-align: top;
}

#render-canvas.full-screen {
    width: 100%;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    outline: none;
    border: none;
    z-index: 0;
}

#background-canvas.full-screen {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    outline: none;
    border: none;
    z-index: -1;
}

.menu {
    position: fixed;
    z-index: 1;
    font-family: Arial, Helvetica, sans-serif;
}

:root {
    --ui-size: 100%;
    --button-xxs-size: min(2svh, 4.5vw);
    --button-xs-size: min(3svh, 4.5vw);
    --half-button-xs-size: calc(var(--button-xs-size) * 0.5);
    --button-s-size: min(5.66svh, 8.5vw);
    --button-m-size: min(12svh, 18vw);
    --button-l-size: min(16svh, 24vw);
    --button-height: min(5.66svh, 8.5vw);
    --half-button-height: calc(var(--button-height) * 0.5);
}

#toolbar {
    position: fixed;
    bottom: 1vh;
    left: 50px;
    z-index: 3;
    white-space: nowrap;
}

body.vertical #toolbar.machine-editor-2-lines {
    bottom: calc(100vw / 3 + 15px + 1vh);
}

body.vertical #toolbar.machine-editor-1-line {
    bottom: calc(100vw / 6 + 1vh);
}

#topbar {
    position: fixed;
    top: 0;
    left: 400px;
    z-index: 3;
    background-color: #42484d7e;
    border-bottom-right-radius: var(--half-button-height);
    text-align: center;
}

#topbar.vertical {
    top: min(7.66svh, 10.5vw);
    border-top-right-radius: var(--half-button-height);
    padding-top: 0.5svh;
}

#topbar.mobile {
    top: 0;
    left: 100px;
}

#topbar.mobile.vertical {
    top: 13%;
    left: 0;
}

#topbar .btn {
    margin: 0.5vh;
}

#machine-editor-part-menu {
    direction: ltr;
    text-align: left;
    display: block;
    z-index: 3;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    background-color: rgb(39, 43, 46);
    padding: 1vh 15px 1vh 2vh;
    border-top-left-radius: 2vh;
    border-bottom-left-radius: 2vh;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    width: 18vh;
    transform-origin: top right;
    transform: scale(var(--ui-size));
    margin-top: 1svh;
    margin-right: -10px;
    pointer-events: all;
}

#machine-editor-part-menu.vertical {
    top: min(7.66svh, 10.5vw);
    border-top-left-radius: 2vh;
    border-top: 1px solid white;
}

#machine-editor-part-menu .line {
    height: min(3svh, 5.5vw);
    font-size: min(2vh, 3vw);
}

#machine-editor-part-menu .label {
    display: inline-block;
    color: rgba(255, 255, 255, 70%);
    font-size: 1.5vh;
    width: 6vh;
}

#machine-editor-part-menu .value {
    display: inline-block;
    font-size: 1.6vh;
    width: 2.4vh;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
}

#machine-editor-part-menu-unfold {
    position: absolute;
    top: 10px;
    right: 10px;
}

#machine-editor-part-menu-fold {
    position: absolute;
    top: 10px;
    right: 10px;
}

.btn {
    position: relative;
    font-size: var(--half-button-xs-size);
    vertical-align: bottom;
    background-color: #272b2e;
    border: none;
    outline: min(0.3svh, 0.3vw) solid white;
    color: white;
    font-weight: bold;
    margin: min(0.5vh, 0.1vw);
}

.btn.inactive {
    background-color: #42484d7e;
    color: #b8b8b8;
    outline: min(0.3svh, 0.3vw) solid gray;
    fill: gray;
}

.btn.active {
    background-color: #272b2e;
    outline: 2px solid white;
}

.btn.icon {
    background: none;
    outline: none;
}

.btn.xxs {
    width: var(--button-xxs-size);
    height: var(--button-xxs-size);
    border-radius: var(--button-xxs-size);
}

.btn.xs {
    width: var(--button-xs-size);
    height: var(--button-xs-size);
    border-radius: var(--button-xs-size);
}

.btn.s {
    width: var(--button-s-size);
    height: var(--button-height);
    border-radius: var(--button-height);
}

.btn.m {
    width: var(--button-m-size);
    height: var(--button-height);
    border-radius: var(--button-height);
}

.btn.l {
    width: var(--button-l-size);
    height: var(--button-height);
    border-radius: var(--button-height);
}

.btn.slimL {
    width: var(--button-l-size);
    height: var(--button-xs-size);
    border-radius: var(--button-xs-size);
}

.btn.xxs .label {
    position: absolute;
    top: var(--half-button-xxs-size);
    left: var(--half-button-xxs-size);
    transform: translate(-50%, -50%);
}

.btn.xs .label {
    position: absolute;
    top: var(--half-button-xs-size);
    left: var(--half-button-xs-size);
    transform: translate(-50%, -50%);
}

.btn.s .label {
    position: absolute;
    top: var(--half-button-height);
    left: var(--half-button-height);
    transform: translate(-50%, -50%);
}

.btn.m .label {
    position: absolute;
    top: var(--half-button-height);
    left: var(--half-button-height);
    transform: translate(calc(var(--half-button-height) * -0.5), -50%);
}

.btn.l .label {
    position: absolute;
    top: var(--half-button-height);
    left: var(--half-button-height);
    transform: translate(calc(var(--half-button-height) * -0.5), -50%);
}

.btn .value {
    position: absolute;
    display: inline-block;
    top: var(--half-button-height);
    right: calc(var(--half-button-height) * 0.7);
    transform: translate(0, -50%);
    color: rgb(189, 189, 189);
    text-align: right;
    font-size: calc(var(--half-button-height) * 0.7);
}

.value-xs {
    display: inline-block;
    font-size: calc(var(--button-xs-size) * 0.7);
    width: calc(var(--button-xs-size) * 4);
    margin: calc(var(--button-xs-size) * 0.2);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.btn svg {
    height: 60%;
    fill: white;
    stroke: white;
}

.btn.inactive svg {
    height: 60%;
    fill: gray;
    stroke: gray;
}

.btn img {
    height: 60%;
    fill: white;
}

#toolbar .dropdown {
    position: fixed;
    background-color: #272b2e;
    border-radius: var(--half-button-height);
    color: white;
    padding: calc(var(--half-button-height) * 0.4);
    outline: 1px solid white;
}

#time-factor-value {
    display: block;
    width: var(--half-button-height);
    height: var(--button-l-size);
    appearance: slider-vertical;
}

#sound-value {
    display: block;
    width: var(--half-button-height);
    height: var(--button-l-size);
    appearance: slider-vertical;
}

#zoom-value {
    display: block;
    width: var(--half-button-height);
    height: var(--button-l-size);
    appearance: slider-vertical;
}

#auto-update-graphic-alert {
    position: fixed;
    left: 0;
    top: 8vh;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    width: 100%;
    text-align: center;
    z-index: 2;
    font-size: 3vh;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color: white;
    background-color: rgba(39, 43, 46, 95%);
    pointer-events: none;
}

#challenge-tuto {
    background-color: #272b2eE0;
    z-index: 2;
    color: white;
    text-align: center;
    font-size: min(3.5svh, 4vw);
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: 300;
    color: white;
    width: 100%;
    left: 0;
    bottom: 71svh;
    pointer-events: none;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}

#challenge-tuto-skip {
    z-index: 2;
    position: fixed;
    right: 3svh;
    top: 41svh;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: 300;
    background: none;
    border: none;
    background-color: #272b2e80;
    font-size: min(3.5vh, 5vw);
    padding: min(1svh, 1vw) min(8svh, 12vw) min(1svh, 1vw) min(2svh, 2vw);
    color: white;
    pointer-events: initial;
    background-image: url("../datas/icons/puce.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: 98%;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}

#challenge-next {
    text-align: center;
    font-size: 3vh;
    color: white;
    width: 100%;
    left: 0;
    top: 41svh;
    pointer-events: none;
}

#challenge-next a:link { 
    text-decoration: none; 
}

#challenge-next a:visited { 
    text-decoration: none; 
}

#challenge-next a:hover { 
    text-decoration: none; 
}

#challenge-next a:active { 
    text-decoration: none; 
}

#challenge-next .success-message {
    text-align: center;
    display: block;
    font-family: Roboto;
    font-size: 3.5vh;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    background-color: #272b2eD0;
}

#challenge-next button {
    display: block;
    font-family: Roboto;
    background: none;
    border: min(0.3svh, 0.3vw) solid white;
    border-radius: min(2svh, 2vw);
    background-color: #272b2eD0;
    font-size: min(2.5svh, 3vw);
    padding: min(2svh, 2vw) min(4svh, 4vw) min(2svh, 2vw) min(4svh, 4vw);
    margin: min(5svh, 5vw);
    width: min(90svh, 90vw);
    margin-left: calc((100vw - min(90svh, 90vw)) * 0.5);
    color: white;
    pointer-events: initial;
    text-align: left;
    text-decoration: none;
    background-image: url("../datas/icons/puce.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: 98%;
}

#challenge-next button.prefered {
    background-color: #272b2eE0;
    border: min(0.4svh, 0.7vw) solid white;
    padding: min(3svh, 3vw) min(4svh, 4vw) min(3svh, 3vw) min(4svh, 4vw);
    font-size: min(3svh, 4vw);
    font-weight: 500;
}

#challenge-next .label {
    display: inline-block;
    height: min(3.5svh, 3.5vw);
    margin-right: 2svh;
    vertical-align: bottom;
}

#challenge-next .prefered .label {
    height: min(4.5svh, 4.5vw);
    margin-right: 2svh;
    vertical-align: bottom;
}

share-menu {
    outline: min(0.5svh, 0.5vw) solid white;
    border-radius: 15px;
    position: fixed;
    padding: min(5svh, 5vw);
    top: calc((100svh - min(55svh, 55vw)) * 0.5);
    left: calc((100vw - min(55svh, 55vw)) * 0.5);
    width: min(45svh, 45vw);
    font-family: Roboto;
    color: white;
    background-color: #272b2e;
    user-select: text;
    font-size: min(2svh, 2vw);
}

share-menu .share-menu-title {
    font-size: min(4svh, 4vw);
    margin: min(1svh, 1vw);
    position: absolute;
    left: min(2svh, 2vw);
    top: min(-3svh, -3vw);
    outline: min(0.5svh, 0.5vw) solid white;
    border-radius:  min(2svh, 2vw);
    background-color: #272b2e;
    padding-left: min(8svh, 8vw);
    padding-top: min(2svh, 2vw);
    padding-right: min(8svh, 8vw);
    padding-bottom: min(2svh, 2vw);
}

share-menu nabu-checkbox {
    vertical-align: top;
    display: inline-block;
    padding: 0;
    width: min(2.2svh, 2.2vw);
    height: min(2.2svh, 2.2vw);
    border: min(0.3svh, 0.3vw) solid white;
    border-radius: min(1svh, 1vw);
    color: white;
    text-align: center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}

nabu-checkbox[value="1"] {
    background-image: url("../datas/icons/checked.svg");
}

share-menu .line {
    height: min(3svh, 3vw);
}

share-menu .label {
    margin-left: min(1svh, 1vw);
    margin-right: min(1svh, 1vw);
    font-size: min(2svh, 2vw);
}

share-menu .inline-button {
    vertical-align: top;
    font-family: Roboto;
    font-size: min(2svh, 2vw);
    font-weight: bold;
    display: inline-block;
    text-align: center;
    padding-top: min(0.5svh, 0.5vw);
    padding-bottom: min(0.5svh, 0.5vw);
    padding-left: min(2svh, 2vw);
    padding-right: min(2svh, 2vw);
    border: min(0.3svh, 0.3vw) solid white;
    background-color: #00000080;
    color: white;
    border-radius: min(1svh, 1vw);
}

share-menu .medium-button {
    font-family: Roboto;
    font-size: min(2svh, 2vw);
    font-weight: bold;
    display: inline-block;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: min(2svh, 2vw);
    padding-right: min(2svh, 2vw);
    margin-left: 2%;
    margin-right: 2%;
    text-align: center;
    border: min(0.3svh, 0.3vw) solid white;
    background-color: #00000060;
    color: white;
    border-radius: min(1svh, 1vw);
}

share-menu .large-button {
    font-family: Roboto;
    font-size: min(3svh, 3vw);
    font-weight: bold;
    display: block;
    margin-top: 7%;
    margin-bottom: 7%;
    padding-top: 2%;
    padding-bottom: 2%;
    width: 65%;
    margin-left: 17.5%;
    text-align: center;
    border: min(0.5svh, 0.5vw) solid white;
    background-color: #00000080;
    color: white;
    border-radius: min(1svh, 1vw);
}

share-menu button.disabled {
    border-color: gray;
    background-color: #00000020;
    color:gray;
}

share-menu .shared-url {
    margin-top: 5%;
    width: 100%;
    vertical-align: middle;
    margin-top: 5%;
}

share-menu .shared-url .value {
    border: none;
    color: white;
    outline: 1px solid #ffffff80;
    display: inline-block;
    width: 79%;
    height: min(2.6svh, 2.6vw);
    font-size: min(1.6svh, 1.6vw);
    vertical-align: middle;
    padding-left: min(1svh, 1vw);
    background-color: #ffffff10;
}

share-menu .shared-url .copy {
    display: inline-block;
    width: min(3svh, 3vw);
    height: min(3svh, 3vw);
    background: none;
    background-image: url("../datas/icons/copy.svg");
    background-size: contain;
    border: none;
    vertical-align: middle;
    margin-left: min(1svh, 1vw);
}

share-menu .shared-url .open {
    display: inline-block;
    width: min(3svh, 3vw);
    height: min(3svh, 3vw);
    background: none;
    background-image: url("../datas/icons/external_href.svg");
    background-size: contain;
    border: none;
    vertical-align: middle;
    margin-left: min(0.5svh, 0.5vw);
}

#machine-title {
    z-index: 1;
    display: inline-block;
    text-align: right;
    font-size: min(2svh, 2vw);
    font-family: Roboto, Arial, Helvetica, sans-serif;;
    color: white;
    margin: 1svh;
    margin-right: min(2svh, 2vw);
    pointer-events: all;
}

body.vertical #machine-title {
    display: block;
}

#machine-name {
    font-size: min(4svh, 4vw);
    font-weight: bold;
}

#machine-name-edit {
    font-size: min(4svh, 4vw);
    font-weight: bold;
    border: none;
    color: white;
    background-color: #00000080;
    text-align: right;
    padding-right: min(2svh, 2vw);
    width: min(60svh, 60vw);
}

#machine-author {
    font-size: min(3svh, 3vw);
    font-weight: bold;
}

#machine-author-edit {
    font-size: min(3svh, 3vw);
    font-weight: bold;
    border: none;
    color: white;
    background-color: #00000080;
    text-align: right;
    padding-right: min(2svh, 2vw);
    width: min(25svh, 25vw);
}

#machine-title button.edit {
    background: none;
    background-image: url("../datas/icons/edit.svg");
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
    width: min(2.5svh, 2.5vw);
    height: min(2.5svh, 2.5vw);
    display: inline-block;
    margin-left: min(1svh, 1vw);
    margin-right: min(1svh, 1vw);
}

#click-anywhere-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0f0f0fe0;
    z-index: 10;
    color: white;
}

#click-anywhere-screen .container {
    position: fixed;
    width: min(100svh, 100vw);
    height: min(100svh, 100vw);
    top: calc((100svh - min(100svh, 100vw)) * 0.5);
    left: calc((100vw - min(100svh, 100vw)) * 0.5);
    z-index: 2;
}

#click-anywhere-screen .splash-title {
    position: absolute;
    width: min(50%, 628px);
    top: 5%;
    left: calc((100% - min(50%, 628px)) * 0.5);
    z-index: 2;
}

#click-anywhere-screen .message-description {
    position: absolute;
    top: 28%;
    left: 0;
    width: 100%;
    z-index: 2;
    text-align: center;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: min(3svh, 3vw);
    color: white;
    font-weight: 100;
}

#click-anywhere-screen .white-track {
    position: absolute;
    top: 35%;
    left: 10%;
    width: 80%;
    z-index: 2;
}

#click-anywhere-screen .message-description-2 {
    position: absolute;
    top: 75%;
    left: 0;
    width: 100%;
    z-index: 2;
    text-align: center;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: min(3svh, 3vw);
    color: white;
    font-weight: 100;
}

#click-anywhere-screen .message-bottom {
    position: absolute;
    bottom: 12%;
    left: 0;
    width: 100%;
    z-index: 2;
    text-align: center;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: min(5svh, 5vw);
    color: white;
    font-weight: 100;
}

#click-anywhere-screen .message-loading {
    position: absolute;
    bottom: 5%;
    left: 20%;
    width: 100%;
    z-index: 2;
    text-align: left;
    font-family: monospace;
    font-size: min(2svh, 2vw);
    color: white;
    font-weight: 100;
}

#home-button {
    display: inline-block;
    z-index: 2;
    border-radius: min(1vh, 0.5vw);
    pointer-events: all;
}

.mobile #home-button {
    position: block;
}

#music-display {
    position: fixed;
    z-index: 3;
    pointer-events: none;
    width: 80%;
    left: 10%;
    bottom: 100px;
}