@function tint($color, $percentage) {
  @return color-mix(white, $color, $percentage);
}

@function shade($color, $percentage) {
  @return color-mix(black, $color, $percentage);
}

@font-face {
    font-family: 'TextBufferTurtle';
    src: url('./fonts/MyFont-Regular.woff') format("woff");
}

@font-face {
    font-family: 'TextBuffer';
    src: url('./fonts/VictorMono-Medium.woff2') format("woff2");
}

:root {
	--background-main: #000000;
	--text-main: #ffffff;
    --left-width: 50vw;
    --right-width: 50vw;
    --left-pc: 50%;
    --right-pc: 50%;
    --aspect: 1.0;
    --base-aspect: 1.777778;
    --browser-height: 640;
    --browser-width: 480;
}

.help-full {
    margin-top: 3.5vh;
    min-height: 80vh !important;
    max-height: 80vh !important;
}

#editprocselect {
    min-width: fit-content;
    max-width: 10vw;
    /*min-height: 4vh;*/
    /*max-height: 4vh;*/
    font-size: smallest;
    border-radius: 6px;
    background-color: var(--background-button);
    color: var(--text-button);
    border: 0px;
    padding: 3px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    vertical-align: middle;
    overflow-x: hidden;
    text-overflow: ellipsis;
    position: relative;
    display: inline-flex;
}

.button {
    border-radius: 5px !important;
    background-color: #2a66d9;
    color: #e0e0e0;
    font-weight: bold;
}

.checkbutton:hover {
    background-color: var(--background-dialog);
}

.checkbutton-off:hover {
   background-color: #2a66d9; 
}

.checkbutton {
    border-radius: 5px !important;
    background-color: #2a66d9;
    border: 2px solid var(--text-card);
    color: var(--text-card);
    font-weight: bold;
    padding: 4px;
}

.checkbutton-off {
    border-radius: 5px !important;
    background-color: var(--background-dialog);
    border: 2px solid var(--text-card);
    color: var(--text-card);
    font-weight: bold;
    padding: 4px; 
    padding-left: 5px;
    padding-right: 5px;
}

.browserbutton {
    border-radius: 5px !important;
    background-color: #2a66d9 !important;
    color: #e0e0e0 !important;
    font-weight: bold;
}


.reveal {
    border-radius: 8px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: var(--background-dialog) !important;
    color: var(--text-dialog) !important;
    border: 0px !important;
}

.card {
    border-radius: 5px !important;
    border-color: var(--background-card) !important;
    background: var(--background-card) !important;
    color: var(--text-card) !important;
    min-width: var(--proj-modal-card-width) !important;
    max-width: var(--proj-modal-card-width) !important;
}

.card-section {
    background: var(--background-card) !important;
    color: var(--text-card) !important;
    min-width: var(--proj-modal-card-width) !important;
}

.card-divider,.tsprojectname {
    background: var(--background-card-header) !important;
    color: var(--text-card-header) !important;
    min-width: var(--proj-modal-card-width) !important;
}

.cell {
    min-width: var(--proj-modal-card-width) !important;    
}

.hg-button {
    background-color: var(--background-button) !important;
    color: var(--text-button) !important;
    border-color: var(--text-color-15) !important;
}

.simple-keyboard {
    background-color: var(--background-card) !important;
    color: var(--text-card) !important;
    display: flexbox;
    z-index: 999 !important;
    position: absolute;
    top: 16px;
    left: 16px;
    width: calc( min(var(--left-width), var(--right-width) ) * 0.90) !important;
    padding: 8px !important;
    padding-top: 32px !important;
    font-size: smaller !important;
}

#textbuffer-kb-toggle {
    text-align: right;
    position: absolute !important;
    display: none !important;
    right: 16px;
}

.wide-key {
    width: calc( var(--browser-width) * 0.33) !important;
}

.badge {
    color: var(--background-card-header) !important;
    background: var(--text-card-header) !important;
}

.cell,.grid-container,#projectgrid,.profile-table,#browser-tags {
    background: var(--background-dialog) !important;
    color: var(--text-dialog) !important;
}

.grid-container table,.grid-container tbody,.grid-container tr,.grid-container td,.grid-container th {
    background: var(--background-dialog) !important;
    color: var(--text-dialog) !important;
}

.profile-table table,.profile-table tbody,.profile-table tr,.profile-table td,.profile-table th {
    background: var(--background-dialog) !important;
    color: var(--text-dialog) !important;
}

.reveal table tbody tr td th label {
    background: var(--background-dialog) !important;
    color: var(--text-dialog) !important;
}

label {
    background: var(--background-dialog) !important;
    color: var(--text-dialog) !important;
}

.form-prompt {
    background: var(--background-dialog) !important;
    color: var(--text-dialog) !important;
}

.ts-zurb {
    background: var(--background-dialog) !important;
    color: var(--text-dialog) !important;
}

.ts-zurb span p h1 h2 h3 h4 h5 h6 {
    background: var(--background-dialog) !important;
    color: var(--text-dialog) !important;
}

.ts-zurb input[type="text"] {
    border-radius: 3px !important;
    height: fit-content !important;
    background: var(--background-input) !important;
    color: var(--text-input) !important;
    background-color: var(--background-input-focus);
    color: var(--text-input);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.element-fullscreen {
    position: absolute  !important;
    top: 0 !important;
    left: 0 !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    width: 100vw;
    height: 100vh;
    /*z-index: 1500;*/
}

.element-fullscreen-non-lb {
    position: relative  !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-width: calc(100vw * calc(var(--aspect) / var(--base-aspect))) !important;
    max-width: calc(100vw * calc(var(--aspect) / var(--base-aspect))) !important;
    min-height: calc( calc( 100vw * calc(1 / var(--base-aspect)) )) !important;
    max-height: calc( 100vw * calc(1 / var(--base-aspect)) ) !important;
    width: calc(100vw * calc(var(--aspect) / var(--base-aspect))) !important;
    height: calc( 100vw * calc(1 / var(--base-aspect)) ) !important;
    /*z-index: 1500;*/
}

.element-fullscreen-lb {
    position: relative  !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-width: calc(100vw * 1) !important;
    max-width: calc(100vw * 1) !important;
    min-height: calc( calc( 100vw * calc(1 / var(--aspect)) )) !important;
    max-height: calc( 100vw * calc(1 / var(--aspect)) ) !important;
    width: calc(100vw * 1) !important;
    height: calc( 100vw * calc(1 / var(--aspect)) ) !important;
    /*z-index: 1500;*/
}

#editprocselect:active {
    background-color: var(--background-procselect);
    color: var(--text-procselect);
}

.turtleSymbol {
    display: inline-block;
	font-family: 'TextBufferTurtle' !important;
    transform: scaleX(67%) !important;

    padding: 0px;
}

.checked::before {
    content: "\2714" !important;
}

.unchecked::before {
    content: "\00a0" !important;
}

#profilemodal {
    width: auto;
    min-width: var(--proj-modal-min-width) !important;;
	max-width: var(--proj-modal-max-width);
    overflow-x: hidden;
    overflow-y: scroll;
}

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

.profile-table tbody {
    width: auto !important;
}

.profile-table tr {
    width: auto !important;
}

.profile-table td {
    width: auto !important;
}

#alertdiv {
    margin: auto;
}

#ts-badge {
	padding-right: 0px;
	padding-left: 8px;
}

#ts-badge:hover {
	background: var(--background-menu);
}

.fadeout {
    opacity : 0;
    z-index: 999;
    transition:opacity 1s z-index 1s;
}

#browser-tags {
    width: var(--proj-modal-tag-width) !important;
	line-height: 26pt;
}


.divider {
	min-height: 10px;
	max-height: 10px;
	/*background-color: #f0f0f0;*/
}

.project-tag {
    background: var(--background-card) !important;
    color: var(--text-card) !important;
	text-decoration: none;
	font-weight: bold;
	padding: 4px;
	border-radius: 5px;
	margin: 2px;
	font-size: normal;
    white-space: nowrap;
}

.project-tag-selected {
	background-color: #01a0e4;
	color: white;
	text-decoration: none;
	font-weight: bold;
	padding: 4px;
	border-radius: 5px;
	margin: 2px;
    white-space: nowrap;
}

::-webkit-scrollbar {
    background: var(--background-dialog) !important;
    color: var(--text-dialog) !important;
}

.project-tag-selected:hover {
    /*background: var(--background-card) !important;*/
    /*color: var(--text-card) !important;*/
    background-color: #11b0f4;
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 4px;
    border-radius: 5px;
    margin: 2px;
}

.project-tag-selected-tiny {
	background-color: #01a0e4;
	color: white;
	text-decoration: none;
	font-weight: bold;
	padding: 3px;
	border-radius: 3px;
	font-size: 9pt !important;
	margin: 1px;
}

.project-tag-selected-tiny:hover {
    background: var(--background-card) !important;
    color: var(--text-card) !important;
    text-decoration: none;
    font-weight: bold;
    padding: 3px;
    border-radius: 3px;
    font-size: 9pt !important;
    margin: 1px;
}

.info {
    background-color: lightblue;
    color: darkblue;
}

.warn {
    background-color: rgb(255, 234, 166);
    color: rgb(184, 101, 0);
}

.error {
    background-color: rgb(255, 166, 166);
    color: rgb(184, 0, 0);
}

.ok {
    background-color: rgb(181, 255, 166);
    color: rgb(26, 83, 0);
}

.tooltip {
    border-radius: 5px;
    position: absolute;
    border: 0px;
    background-color: white;
    color: #404040;
    padding: 10px;
    font-size: small;
    min-width: 600px;
}

.editorassist {
    border-radius: 5px;
    position: relative;
    border: 2px solid;
    border-color: var(--border-button);
    background-color: var(--background-button);
    color: var(--text-button);
    padding: 5px;
    font-size: small;
    min-width: 600px;
    z-index: 999;
    display: inline;
    margin: 10px;
}

.editorassist-menu {
    border-radius: 5px;
    position: fixed;
    border: 2px solid;
    border-color: var(--border-button);
    background-color: var(--background-button);
    color: var(--text-button);
    padding: 5px;
    font-size: small;
    min-width: 128px;
    max-width: 128px;
    z-index: 999;
    display: inline;
    /* margin: 10px; */
}

.editorassist-item {
    background-color: var(--background-button);
    color: var(--text-button);
    font-size: small;
    max-width: 100%;
    min-width: 100%;
    display: block;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0px;
    padding: 0px;
}

.editorassist-item:hover {
    background-color: var(--text-button);
    color: var(--background-button);
    font-size: small;
    max-width: 100%;
    min-width: 100%;
    display: block;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0px;
    padding: 0px;
}

.node-category {
    margin: 5px;
}

input[type="text"] {
    height: fit-content !important;
    line-height: 1.25 !important;
}

#flagrow {
    margin: 0px !important;
    vertical-align: text-top;
}

#flag-cell {
    vertical-align: top !important;
    text-align: right !important;
    opacity: 0;
    background-color: var(--background-main);
    color: var(--text-main);
    overflow: hidden;
    /*padding: 0px !important;*/
}

#flag {
    /*position: absolute;*/
    /*right: 4px;*/
    /*top: 37px;*/
    margin: 0;
    vertical-align: top !important;
    font-size: x-large;
    background-color: var(--background-main);
    color: var(--text-main);
}

#flag-icon {
    vertical-align: top !important;
    margin: 0px !important;
    height: 28px !important;
    width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
}

.tokenErr { /*text-decoration-line: underline overline; text-decoration-style: wavy; text-decoration-color: red; filter: text-decoration-thickness: 4px;*/ border-bottom: 2px solid red; }
.tokenMarker { /*text-decoration-line: underline overline; text-decoration-style: wavy; text-decoration-color: salmon; text-decoration-thickness: 4px;*/ border-bottom: 2px solid salmon; }

.tooltip-hidden {
    border-radius: 5px;
    position: absolute;
    border: 0px;
    background-color: white;
    color: #404040;
    padding: 10px;
    display: none;
    font-size: small;
}

.tooltip-header {
    font-weight: 800;
    color: black;
    margin-bottom: 0px;
}

.tooltip-category {
    font-style: italic;
    color: magenta;
    font-weight: 600;
    margin-top: 0px;
}

.tooltip-takes {
    color: green;
    font-weight: 600;
    margin-bottom: 0px;
}

.tooltip-takes-value {
    color:black;
    font-weight: 600;
    margin-bottom: 0px;
}

.tooltip-returns {
    color: blue;
    font-weight: 600;
    margin-top: 0px;
}

.tooltip-returns-value {
    color:black;
    font-weight: 600;
    margin-top: 0px;
}

.tooltip-desc {
    color: black;
    font-weight: 600;
}

.tooltip-example {
    color: rgb(184, 101, 0);
    font-weight: 600;
}

.tooltip-example-value {
    color:black;
    font-weight: 600;
}

.afloat {
    position: absolute;
    left: 25%;
    top: 48%;
    z-index: 999;
    padding: 20px;
    border-radius: 10px;
    font-family: 'TextBuffer';
    font-weight: 900;
    min-width: 50%;
    max-width: 50%;
    text-align: center;
}

/* large screens */
@media only screen {

    #editcontrols {
        position: absolute;
        top: calc(var(--browser-height) - calc(var(--browser-height) * 0.047));
        width: calc(var(--left-width) - calc(var(--left-width) * 0.12));
        /*position: fixed;*/
        /*bottom: 24px;*/

        /* And if you want the div to be full-width: */
        /*right: calc(var(--right-width) + 0.5vw);*/
        opacity: 0;
        /* overflow: hidden; */
        white-space: nowrap;
        min-width: calc(var(--left-width) - calc(var(--left-width) * 0.12));
        max-width: calc(var(--left-width) - calc(var(--left-width) * 0.12));
    }

    .pane {
        min-width: 100%; /*calc(var(--left-pc) - 2%);*/
        max-width: 100%; /*calc(var(--left-pc) - 2%);*/
        min-height: 100% !important;
        max-height: 100% !important;
        height: 100% !important;
        width: calc(var(--left-pc) - 2%);
        border: none;
    }

    .paner {
        min-width: calc(var(--right-pc) - 2%);
        max-width: calc(var(--right-pc) - 2%);
        min-height: 100% !important;
        max-height: 100% !important;
        height: 100% !important;
        width: calc(var(--right-pc) - 2%);
        border: none;
    }

    #ts-left {
        /* background-color: red; */
        vertical-align: top !important;
        max-width: calc(var(--left-pc) - 0%);
        min-width: calc(var(--left-pc) - 0%);
        /*float: left;*/
        opacity: 0;
        padding: 0px !important;
        margin: 0px !important;
    }

    #ts-right {
        vertical-align: top !important;
        max-width: calc(var(--right-pc) - 2%);
        min-width: calc(var(--right-pc) - 2%);
        min-height: 100% !important;
        max-height: 100% !important;
        /*float: right;*/
        padding: 0px !important;
        margin: 0px !important;
    }

    .CodeMirror {
        border: 1px solid #eee;
        height: auto;
        min-height: 78vh;
        max-height: 78vh;
        min-width: calc(var(--left-width) - 6vw);
        max-width: calc(var(--left-width) - 6vw);
        float: right;
        font-family: 'TextBuffer';
        font-variant-ligatures: none;
      }

    .CodeMirror-exec-context {
/*
		color: var(--background-main) !important;
*/
		background: var(--background-exec) !important;
		color: var(--text-exec) !important;
		border: 2px;
		border-color: var(--background-main) !important;
/*
		padding: 2px;
*/
		position: relative;
	}

/*
    .CodeMirror-exec-context:before {
		content: "ѿ";
		font-family: "TextBufferTurtle";
		position: absolute;
		left: -100%;
		margin-right: -100%;
		color: "green" !important;
		background: var(--text-main) !important;
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
	}
*/

    /*.CodeMirror-line {*/
    /*    font-size: calc(3.5vw / 8);*/
    /*}*/

    #content {
        background-color: var(--background-main);
        padding: 0px;
        margin: 0px;
        min-width: calc(var(--right-width) - 2vw);
        max-width: calc(var(--right-width) - 2vw);
    }

    #turtlebox {
        background-color: var(--background-main);
        padding: 0px;
        margin: 0px;
        min-width: 100%;
        max-width: 100%;
        display: grid;
    }

    #textbuffer {
        margin: 0px;
        text-align: left;
        font-family: 'TextBuffer';
        background: var(--background-textbuffer);
        min-width: calc(var(--right-width) - 2vw) !important;
        max-width: calc(var(--right-width) - 2vw) !important;
        white-space: nowrap;
        font-variant-ligatures: none;
    }

    .singlefont {
        /*font-size:0.8vw;*/
        /*font-size: calc(7vw / 8);*/
        font-size: calc( calc( calc(var(--right-width) - 2vw) / 100 ) * 1.87);
    }

    .middlefont {
        font-size: calc( calc( calc(var(--right-width) - 2vw) / 75 ) * 1.87);
        transform: scaleX(1.25);
        margin-bottom: calc( calc( calc(var(--right-width) - 2vw) / 100 ) * 0.6);
	}

    .doublefont {
        /*font-size: calc(7vw / 4);*/
        font-size: calc( calc( calc( calc(var(--right-width) - 2vw) / 100 ) * 1.87) * 2);
    }

    #tsrendersurface {
        margin-top: 0vw;
        background: #000;
        text-align: center;
        grid-column: 1;
        grid-row: 1;
        z-index: 1;
        display: inline;
        position: relative;
    }

    #grid-container {
        width: calc( calc(var(--right-width) - 2vw) * 1);
        min-width: calc( calc(var(--right-width) - 2vw) * 1);
        max-width: calc( calc(var(--right-width) - 2vw) * 1) !important;
        height: calc( calc(var(--right-width) - 2vw) * calc(1 / var(--base-aspect)) );
        min-height: calc( calc(var(--right-width) - 2vw) * calc(1 / var(--base-aspect)) );
        max-height: calc( calc(var(--right-width) - 2vw) * calc(1 / var(--base-aspect)) ) !important;
    }

    .letterboxed {
        width: calc( calc(var(--right-width) - 2vw) * 1);
        min-width: calc( calc(var(--right-width) - 2vw) * 1);
        max-width: calc( calc(var(--right-width) - 2vw) * 1) !important;
        height: calc( calc(var(--right-width) - 2vw) * calc(1 / var(--aspect)) );
        min-height: calc( calc(var(--right-width) - 2vw) * calc(1 / var(--aspect)) );
        max-height: calc( calc(var(--right-width) - 2vw) * calc(1 / var(--aspect)) ) !important;
        transform: translate(0, -50%);
        left: 0;
        top: 50%;
    }

    .non-letterboxed {
        width: calc( calc(var(--right-width) - 2vw) * calc( var(--aspect) / var(--base-aspect)));
        min-width: calc( calc(var(--right-width) - 2vw) * calc( var(--aspect) / var(--base-aspect)));
        max-width: calc( calc(var(--right-width) - 2vw) * calc( var(--aspect) / var(--base-aspect))) !important;
        height: calc( calc(var(--right-width) - 2vw) * calc(1 / var(--base-aspect)));
        min-height: calc( calc(var(--right-width) - 2vw) * calc(1 / var(--base-aspect)));
        max-height: calc( calc(var(--right-width) - 2vw) * calc(1 / var(--base-aspect))) !important;
        transform: translate(-50%, 0);
        left: 50%;
        top: 0;
    }

    #overlaytextsurface {
        margin-top: 0vw;
        min-width: calc(var(--right-width) - 2vw);
        max-width: calc(var(--right-width) - 2vw);
        min-height: calc( calc(var(--right-width) - 2vw) * 0.56249992968);
        max-height: calc( calc(var(--right-width) - 2vw) * 0.56249992968);
        text-align: center;
        /* display: none; */
        grid-column: 1;
        grid-row: 1;
        z-index: 2;
        opacity: 1;
        display: none;
        /* image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-crisp-edges;
        image-rendering: pixelated;
        image-rendering: crisp-edges; */
    }

    #loading-box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 98;
    }

    #loading {
        background: var(--background-main);
        /* width: 640;
        height: 384; */
        text-align: center;
        /* display: inline;  */
        grid-column: 1;
        grid-row: 1;
        z-index: 2;
        min-width: 48vw;
        max-width: 48vw;
        min-height: 27vw;
        max-height: 27vw;
    }

    .png-splash {
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
    }

    #description {
        font-family: 'TextBuffer';
        font-size: 12pt;
        font-weight: bold;
        border: 1px;
        border-color: aqua;
        min-width: calc(var(--right-width) - 3vw);
        max-width: calc(var(--right-width) - 3vw);
        /*min-width: 100%;*/
        /*max-width: 100%;*/
        opacity: 0;
        margin-bottom: 0px !important;
    }

    #bylabel {
        opacity: 0;
        font-family: 'TextBuffer';
    }

    #projectname {
        font-family: 'TextBuffer';
        font-size: 12pt;
        font-weight: bold;
        border: 1px;
        border-color: aqua;
        opacity: 0;
        max-width: calc(var(--left-width) * 0.4);
        min-width: calc(var(--left-width) * 0.4);
    }

    #creator {
        font-family: 'TextBuffer';
        font-size: 12pt;
        font-weight: bold;
        border: 1px;
        border-color: aqua;
        opacity: 0;
        max-width: calc(var(--left-width) * 0.34);
        min-width: calc(var(--left-width) * 0.34);
    }


    #workspace, #histedit {
        font-family: 'TextBuffer';
        /* width: 50pc;
        height: 60pc; */
        background-color: rgb(255, 254, 235);
        font-size: 12pt;
        opacity: 0;
        max-height: 80vh;
        min-height: 80vh;
        min-width: calc(var(--left-width) - 4vw);
        padding: 0px;
        margin: 0px;
        float: left;
        /* margin-left: 16px;
        margin-right: 16px; */
    }

    .workspace-half {
        flex: 0 1 auto;
        min-height: 31vh;
        max-height: 31vh;
        /* margin-top: 50%;         */
    }

    .font-0 {
        font-size: 11pt;
    }
    .font-1 {
        font-size: 12pt;
    }
    .font-2 {
        font-size: 14pt;
    }
    .font-3 {
        font-size: 16pt;
    }

    .terminal {
		color: #c0c0c0;
	}

    #webtextbuffer {
        text-align: center;
        font-family: 'TextBuffer';
        background: #000000;
        font-size: calc( calc(7vw / 8) * 50vw / var(--right-width));
        max-width: 50vw;
        min-height: 68vh;
        max-height: 68vh;
        min-width: calc(var(--left-width) - 4vw);
        padding: 0px;
        margin: 0px;
    }

    #helptextbuffer {
        text-align: left;
        font-family: 'TextBuffer';
        background: var(--background-main);
        font-size: calc(6.67vw / 7);
        min-width: calc(var(--left-width) - 6vw) !important;
        max-width: calc(var(--left-width) - 6vw) !important;
        min-height: 30vh;
        max-height: 30vh;
        height: 30vh;
        padding: 0px;
        margin: 0px;
        color: var(--text-main) !important;

        position: relative;
        overflow: hidden;

        /* Prevent native touch events on Windows */
        -ms-touch-action: none;

        /* Prevent the callout on tap-hold and text selection */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        /* Prevent text resize on orientation change, useful for web-apps */
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;         
    }

    #helptextbufferContent {
        
    }

    #colortextbuffer {
        text-align: left;
        font-family: 'TextBuffer';
        background: var(--text-color-0);
        font-size: calc(6.67vw / 7);
        min-width: calc(var(--left-width) - 6vw);
        max-width: calc(var(--left-width) - 6vw);
        min-height: 30vh;
        max-height: 30vh;
        height: 30vh;
        padding: 0px;
        margin: 0px;
        color: var(--text-color-15) !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

    #introtextbuffer {
        text-align: left;
        font-family: 'TextBuffer';
        background: var(--text-color-0);
        font-size: calc(6.67vw / 7);
        min-width: calc(var(--left-width) - 6vw) !important;
        max-width: calc(var(--left-width) - 6vw) !important;
        min-height: 30vh;
        max-height: 30vh;
        height: 30vh;
        padding: 0px;
        margin: 0px;
        color: var(--text-color-15) !important;

        position: relative;
        overflow: hidden;

        /* Prevent native touch events on Windows */
        -ms-touch-action: none;

        /* Prevent the callout on tap-hold and text selection */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        /* Prevent text resize on orientation change, useful for web-apps */
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;   
    }

	 #helptextbuffer::-webkit-scrollbar, #colortextbuffer::-webkit-scrollbar, #introtextbuffer::-webkit-scrollbar {
	  width: 8px;               
	}

	#helptextbuffer::-webkit-scrollbar-track, #colortextbuffer::-webkit-scrollbar-track, #introtextbuffer::-webkit-scrollbar-track {
	  background: black;        
	}

	#helptextbuffer::-webkit-scrollbar-thumb, #colortextbuffer::-webkit-scrollbar-thumb, #introtextbuffer::-webkit-scrollbar-thumb {
	  background-color: yellow;   
	  border-radius: 2px;       
	  border: 0px; 
	}

	#tab_errors {
		margin-bottom: -1px;
	}

	#debugbuffer, #statebuffer, #turtlebuffer {
        text-align: left;
        font-family: 'TextBuffer';
        background: var(--background-logger);
        color: var(--text-logger) !important;
        border: 2px var(--background-logger) solid;
        font-size: calc(6.67vw / 8);
        min-width: calc(var(--left-width) - 6vw);
        max-width: calc(var(--left-width) - 6vw);
        min-height: 74vh;
        max-height: 74vh;
        height: 60vh;
        padding: 0px;
        margin: 0px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-top: 0px;
        margin-top: -1px;
    }

	.ctable {
		padding: 0px;
		margin: 0px;
	}

	#debugbuffer::-webkit-scrollbar, #statebuffer::-webkit-scrollbar , #turtlebuffer::-webkit-scrollbar {
	  width: 8px;               /* width of the entire scrollbar */
	}

	#debugbuffer::-webkit-scrollbar-track, #statebuffer::-webkit-scrollbar-track , #turtlebuffer::-webkit-scrollbar-track {
	  background: var(--gutter-scrollbar);        /* color of the tracking area */
	}

	#debugbuffer::-webkit-scrollbar-thumb, #statebuffer::-webkit-scrollbar-thumb, #turtlebuffer::-webkit-scrollbar-thumb {
	  background-color: var(--handle-scrollbar);    /* color of the scroll thumb */
	  border-radius: 2px;       /* roundness of the scroll thumb */
	  border: 0px;  /* creates padding around scroll thumb */
	}

    @keyframes typinganimation {
        from {opacity: 0.25;}
        to {opacity: 1.00;}
    }

    .assistant_typing {
        animation-name: typinganimation;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }

    .assistant_typing_2 {
        animation-name: typinganimation;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-delay: -0.5s;
    }

    .assistant_typing_3 {
        animation-name: typinganimation;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-delay: -1s;
    }

	.assistant_response {
        background: var(--background-main);
        border-radius: 8px;
        border: 2px;
        margin: 16px;
        padding: 16px;
    }

	.assistant_response_hidden {
        background: var(--background-main);
        border-radius: 8px;
        border: 2px;
        margin: 16px;
        padding: 16px;
        display: none;
    }

    code {
        border: 2px var(--button-border) solid;
        background-color: var(--background-button) !important;
        color: var(--text-button) !important;
        border-radius: 4px;
    }

    .code_block_copy {
        position: relative;
        float: right;
        right: 32px;
        top: 16px;
    }

    .code_block {
        border: 2px var(--button-border) solid;
        background-color: var(--background-button) !important;
        color: var(--text-button) !important;
        border-radius: 8px;
        margin: 32px;
        padding: 8px;
        white-space:  pre-wrap;
    }

	#printerbuffer {
        text-align: left;
        font-family: 'TextBuffer';
        background: var(--background-logger);
        color: var(--text-logger) !important;
        border: 2px var(--background-logger) solid;
        font-size: calc(6.67vw / 8);
        max-width: calc(var(--left-width) - 3vw);
        min-height: 74vh;
        max-height: 74vh;
        min-width: calc(var(--left-width) - 3vw);
        height: 60vh;
        padding: 0px;
        margin: 0px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    #assistantbuffer_query, #assistant_query {
        text-align: left;
        font-family: 'TextBuffer';
        background: var(--background-logger);
        color: var(--text-logger) !important;
        border-top: 0px var(--background-logger) solid;
        min-height: 32px;
        max-height: 32px;
        float: bottom;
    }

    #assistantbuffer_inner {
        text-align: left;
        font-family: 'TextBuffer';
        background: var(--background-logger);
        color: var(--text-logger) !important;
        border: 2px var(--background-logger) solid;
    }

	#assistantbuffer {
        text-align: left;
        font-family: 'TextBuffer';
        background: var(--background-logger);
        color: var(--text-logger) !important;
        border: 2px var(--background-logger) solid;
        font-size: calc(6.67vw / 8);
        max-width: calc(var(--left-width) - 3vw);
        min-height: 70vh;
        max-height: 70vh;
        min-width: calc(var(--left-width) - 3vw);
        height: 70vh;
        padding: 0px;
        margin: 0px;
        overflow-y: auto;
        overflow-x: hidden;
    }

	#printerbuffer::-webkit-scrollbar, #assistantbuffer::-webkit-scrollbar {
	  width: 8px;               /* width of the entire scrollbar */
	}

	#printerbuffer::-webkit-scrollbar-track, #assistantbuffer::-webkit-scrollbar-track {
		ackground: var(--gutter-scrollbar);
	}

	#printerbuffer::-webkit-scrollbar-thumb, #assistantbuffer::-webkit-scrollbar-thumb {
	  background-color: var(--handle-scrollbar);   /* color of the scroll thumb */
	  border-radius: 2px;       /* roundness of the scroll thumb */
	  border: 0px;  /* creates padding around scroll thumb */
	}

}

@media only screen and (device-height: 768px) and (device-width: 1366px), (device-width: 1360px) {
    #textbuffer {
        transform: scale(1, 0.8);
        transform-origin: left top;
    }

    #tsrendersurface, #overlaytextsurface {
        min-width: calc(var(--right-width) - 4vw);
        max-width:  calc(var(--right-width) - 4vw);
        min-height: calc( 46vw * 0.56249992968);
        max-height: calc( 46vw * 0.56249992968);
        margin-left: 1vw;
        margin-top: -1vw;
    }

    .CodeMirror {
        margin-top: calc(6.5vw / 16);
        min-height: 70vh;
        max-height: 70vh;
        font-size: 9pt;
        font-variant-ligatures: none;
    }

    .workspace-half {
        flex: 0 1 auto;
        min-height: 35vh;
        max-height: 35vh;
        float: left;
        /* margin-top: 50%;         */
    }

    .tsbutton, .danger {
        font-size: smaller;
    }

    .top-bar {
        font-size: smaller;
        background-color: var(--background-main);
		color: var(--text-main);
    }

    #webtextbuffer {
        font-size: calc(6.67vw / 8);
    }

    #helptextbuffer {
        font-size: calc(6.67vw / 8);
    }


}

@media only screen and (device-height: 1080px) and (device-width: 1920px) {
    /* input[type="text"] {
        height: 36px !important;
    } */

    #flag {
        /*position: absolute;*/
        /*right: 4px;*/
        /*top: 43px;*/
        vertical-align: middle;
        font-size: x-large;
        background-color: var(--background-main);
        color: var(--text-main);
    }

    #flag-icon {
        height: 36px !important;
        width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
    }

    #helptextbuffer {
		min-height: 30vh;
        max-height: 30vh;
		height: 30vh;
	}

	#left-tabs {
        position: absolute;
		margin-top: 20px;
	}

}

@media only screen and (device-height: 1440px) and (device-width: 2560px) {

	#procselect {
		font-size: larger;
	}

	/* #editprocselect {
		margin-top: 8px;
		padding-left: 8px;
		padding-right: 8px;
		min-height: 3vh;
		max-height: 3vh;
		font-size: larger;
	} */

	.CodeMirror {
/*
        margin-top: calc(6.5vw / 16);
*/
        min-height: 78vh;
        max-height: 78vh;
/*
        font-size: 11pt;
*/
        font-variant-ligatures: none;
    }

    .workspace-half {
        flex: 0 1 auto;
        min-height: 39vh;
        max-height: 39vh;
        /* margin-top: 50%;         */
    }

    /* input[type="text"] {
        height: 36px !important;
    } */

    #flag {
        /*position: absolute;*/
        /*right: 16px;*/
        /*top: 48px;*/
        vertical-align: middle;
        font-size: x-large;
        background-color: var(--background-main);
        color: var(--text-main);
    }

    #flag-icon {
        height: 36px !important;
        width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
    }

    #helptextbuffer {
		min-height: 35vh;
        max-height: 35vh;
		height: 35vh;
	}

	#left-tabs {
		margin-top: 12px;
		font-size: normal;
	}

	.top-bar {
        font-size: larger;
    }

    .tsbutton, .danger {
		font-size: larger !important;
	}

	.subtab {
		font-size: normal !important;
	}

}

@media only screen and (device-height: 900px) and (device-width: 1600px) {
    /*#textbuffer {*/
    /*    transform: scale(0.75, 0.8);*/
    /*    transform-origin: left top;*/
    /*}*/

    #editcontrols {
        /*position: fixed;*/
        /*bottom: 20px;*/
    }

    #tsrendersurface, #overlaytextsurface {
        margin-top: -1.1vw;
    }

    .CodeMirror {
        margin-top: calc(6.5vw / 16);
        min-height: 70vh;
        max-height: 70vh;
        font-variant-ligatures: none;
    }

    .workspace-half {
        flex: 0 1 auto;
        min-height: 35vh;
        max-height: 35vh;
        /* margin-top: 50%;         */
    }

    #helptextbuffer {
		min-height: 31vh;
        max-height: 31vh;
        height: 31vh;
	}

}

@media only screen and (device-height: 1050px), (device-height: 1000px) and (device-width: 1680px) {
    /*#textbuffer {*/
    /*    transform: scale(0.75, 0.8);*/
    /*    transform-origin: left top;*/
    /*}*/

    #tsrendersurface, #overlaytextsurface {
        margin-top: -1.1vw;
    }

    .CodeMirror {
        margin-top: calc(6.5vw / 16);
        min-height: 76vh;
        max-height: 76vh;
        font-variant-ligatures: none;
    }

    .workspace-half {
        flex: 0 1 auto;
        min-height: 38vh;
        max-height: 38vh;
        /* margin-top: 50%;         */
    }

    #helptextbuffer {
		min-height: 34vh;
        max-height: 34vh;
        height: 34vh;
	}

}

.tsprojectthumb {
    /* background-color: var(--background-card-header); */
    position: relative;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    /* width: 100%;
    height: calc(var(--browser-height) * 0.125) !important;
    min-height: calc(var(--browser-height) * 0.125) !important;
    max-height: calc(var(--browser-height) * 0.125) !important; */
    /* width: 100%;
    height: 160px; */
    width: var(--proj-modal-card-width) !important;
    height: auto;
    color: white;
    vertical-align: middle;
    text-align: center;
    line-height: 168px !important;
}

@media only screen and (device-height: 800px), (device-height: 1024px) and (device-width: 1280px) {

	#printerbuffer, #debugbuffer, #statebuffer, #turtlebuffer  {
		font-size: calc(6.5vw / 6);
		min-height: 70vh;
        max-height: 70vh;
	}

    #editcontrols {
        /*position: fixed;*/
        /*bottom: 18px;*/
    }

    #tsrendersurface, #overlaytextsurface {
        margin-top: -1.1vw;
    }

    .CodeMirror {
        margin-top: calc(6.5vw / 16);
        min-height: 69vh;
        max-height: 69vh;
        font-variant-ligatures: none;
    }

    .workspace-half {
        flex: 0 1 auto;
        min-height: 34vh;
        max-height: 34vh;
        /* margin-top: 50%;         */
    }

    .top-bar {
        font-size: normal;
    }

    #webtextbuffer {
        font-size: calc(6.67vw / 8);
    }

    #helptextbuffer, #introtextbuffer, #colortextbuffer {
        font-size: calc(6.67vw / 5.5);
		min-height: 30vh;
        max-height: 30vh;
        height: 30vh;
    }

}

@media only screen and (device-height: 720px) {

    body, select {
        font-size: small !important;
    }

	#printerbuffer, #debugbuffer, #statebuffer, #turtlebuffer  {
		font-size: calc(6.5vw / 6);
		min-height: 70vh;
        max-height: 70vh;
	}

    #projectname, #description, #creator {
        font-size: small;
    }

    #editcontrols {
        /*position: fixed;*/
        /*bottom: 16px;*/
    }

    #tsrendersurface, #overlaytextsurface {
        min-width:  calc(var(--right-width) - 6vw);
        max-width:  calc(var(--right-width) - 6vw);
        min-height: calc( 46vw * 0.56249992968);
        max-height: calc( 46vw * 0.56249992968);
        /* margin-left: 2vw; */
        margin-top: -2vh;
    }

    #textbuffer {
        margin-top: -1.5vw;
        transform: scaleY(0.9);
        transform-origin: left top;
    }

    .CodeMirror {
        margin-top: calc(6.5vw / 16);
        min-height: 66vh;
        max-height: 70vh;
        font-size: small !important;
        font-variant-ligatures: none;
    }

    .workspace-half {
        flex: 0 1 auto;
        min-height: 33vh;
        max-height: 33vh;
        /* margin-top: 50%;         */
    }

    .tsbutton, .danger {
        font-size: smaller;
    }

    .top-bar {
        font-size: normal;
    }

    #webtextbuffer {
        font-size: calc(6.67vw / 8);
    }

    #helptextbuffer, #introtextbuffer, #colortextbuffer {
        font-size: calc(6.67vw / 6);
		min-height: 29vh;
        max-height: 29vh;
        height: 29vh;
    }

}

@media only screen and (device-height: 768px) and (device-width: 1024px) {
    #textbuffer {
        transform: scale(1, 1.6);
        transform-origin: left top;
    }

    #tsrendersurface, #overlaytextsurface {
        min-width:  calc(var(--right-width) - 4vw);
        max-width:  calc(var(--right-width) - 4vw);
        min-height: calc( 46vw * 0.56249992968);
        max-height: calc( 46vw * 0.56249992968);
        margin-left: 1vw;
        margin-top: -1vw;
    }

    .CodeMirror {
        margin-top: calc(6.5vw / 16);
        min-height: 70vh;
        max-height: 70vh;
        font-size: 9pt;
        font-variant-ligatures: none;
    }

    .workspace-half {
        flex: 0 1 auto;
        min-height: 35vh;
        max-height: 35vh;
        /* margin-top: 50%;         */
    }

    .tsbutton, .danger {
        font-size: smaller;
    }

    .top-bar {
        font-size: smaller;
    }

    #webtextbuffer {
        font-size: calc(6.67vw / 8);
    }

    #helptextbuffer {
        font-size: calc(6.67vw / 8);
		min-height: 30.5vh;
        max-height: 30.5vh;
        height: 30.5vh;
    }

    input[type=text] {
        font-size: small;
    }

}

@media only screen and (device-height: 769px) and (device-width: 1025px) {
    #textbuffer {
        transform: scale(2, 1);
        transform-origin: left bottom;
        position: absolute;
        bottom: 0px;
        left: 1vw;
        opacity: 1;
        z-index: 99;
    }

    .top-bar {
        display: none;
    }

    #tsrendersurface, #overlaytextsurface {
        min-width: 94vw;
        max-width: 94vw;
        min-height: calc( 94vw * 0.56249992968);
        max-height: calc( 94vw * 0.56249992968);
        /*margin-left: 2vw;*/
        /*margin-top: -1vw;*/
        position: absolute;
        left: 1vw;
        top: 0px;
    }


    #ts-left {
        display: none;
    }

    #ts-right {
        min-width: 98vw;
        max-width: 98vw;
        margin-left: 1vw;
    }

    #projectname, #description, #creator, #editcontrols, #runcontrols, #flag-cell {
        display: none;
    }

}

#helpsearchbox {
	max-width: 10vw;
	min-width: 10vw;
}

#projectname, #description, #creator, #helpsearchbox {
    background-color: var(--background-input);
    color: var(--text-input);
    -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

#projectname:focus, #description:focus, #creator:focus {
    background-color: var(--background-input-focus);
    color: var(--text-input);
    -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

/* body {
    background-color: white;
    width: 99vw;
} */

table, td, tr {
    background-color: var(--background-main);
    color: var(--text-main);
}

#left-tabs {
    /*display: inline;*/
    /*margin-top: 11px;*/
    position: relative;
}

body {
    background-color: var(--background-main);
    color: var(--text-main);
    width: 99vw;
    overflow-x: hidden;
    overflow-y: hidden;
}

::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: var(--background-dialog);  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

#body-container {
    max-width: 98%;
    /* transform: translateY(-17%); */
}

table {
    border: 0px;
    margin: 0px;
    padding: 0px;
    background-color: var(--background-main);
    color: var(--text-main);
}

tr {
    border: 0px;
    margin: 0px;
    padding: 0px;
    background-color: var(--background-main);
    color: var(--text-main);
}

td {
    border: 0px;
    margin: 0px;
    padding: 0px;
    background-color: var(--background-main);
    color: var(--text-main);
    padding: 0px;
}

#userdiv {
    float: right;
}

#ts-container {
    max-width: 96vw;
    max-height: 76vh;
    margin-left: 2%;
    margin-top: 1%;
    background-color: #01a0e4;
    opacity: 1;
}

#canvasbox {
    display: grid;
}

.tabs-title {
    padding: 0px;
    margin: 0px;
}

.tabs {
    padding: 0px;
    margin: 0px;
}

/* .cell {
    min-width: 8px;
    max-width: 8px;
} */

#testdiv {
    color:greenyellow;
}


#errtxt {
    color: red;
    font-size: 9pt;
}

#revtxt {
    color: green;
    font-size: 9pt;
}

.top-bar {
    margin: 0px;
    padding: 0px;
    font-weight: semibold;
    z-index: 99;
    min-width: 100vw;
    background-color: var(--background-menu);
    color: var(--text-menu);
    opacity: 0;
}

.appears {
    opacity : 1;
    transition:opacity 2s;
}

.top-bar-left {
    background-color: var(--background-menu);
    color: var(--text-menu);
}

.top-bar-right {
    background-color: var(--background-menu);
    color: var(--text-menu);
}

.dropdown, .is-dropdown-submenu {
    color: darkgoldenrod;
}

.submenu, .has-submenu, .is-dropdown-submenu-parent {
    background-color: var(--background-menu);
    color: var(--text-menu);
}

.submenu:hover {
    background-color: var(--background-menu);
    color: var(--text-menu);
}

.is-active {
	background-color: var(--background-menu-highlight);
	color: var(--text-menu-highlight);
}

a {
    color: var(--text-menu);
    background-color: var(--background-menu);
}

a:hover {
	background-color: var(--background-menu-highlight);
	color: var(--text-menu-highlight);
}

.menu, .dropdown {
    z-index: 99;
    font-family: TextBuffer;
    background-color: var(--background-menu) !important;
    color: var(--text-menu-dropdown) !important;
    border: 1px;
    border-color: #1d261d;
}

.leftfield {
    text-align: left;
    padding-left: 50px;
    width: 40%;
}

.rightfield {
    text-align: right;
    width: 40%;
}

.centerfield {
    text-align: center;
    width: 20%;
}

tbody {
    border: 0px;
}

#download, #exitfullscreen, #fullscreen {
    cursor: pointer;
}

select {
    display: inline;
    float: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    position:relative;
    height: fit-content !important;
}

#procchooser-sub {
    text-align: right;
    /* margin-top: 20px; */
    margin-bottom: 0px;
}

#procchooser {
    /* margin-top: -2.8vh; */
}

#procselect {
    min-width: 15vw;
    max-width: 15vw;
    /*min-height: 4vh;*/
    /*max-height: 4vh;*/
    font-size: smallest;
    border-radius: 6px;
    background-color: var(--background-button);
    color: var(--text-button);
    border: 0px;
    padding: 3px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    vertical-align: middle;
}

#modeselect {
    min-width: 7vw;
    max-width: 7vw;
    /*min-height: 4vh;*/
    /*max-height: 4vh;*/
    font-size: smallest;
    border-radius: 6px;
    background-color: var(--background-button);
    color: var(--text-button);
    border: 0px;
    padding: 3px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    vertical-align: middle;
}

#modeselect:active {
    background-color: var(--background-button);
    color: var(--text-button);
}


#procselect:active {
    background-color: var(--background-button);
    color: var(--text-button);
}



.insertCodeButton {
	    font-size: smallest;
    border-radius: 6px;
    background-color: var(--background-button);
    color: var(--text-button);
    border: 0px;
    padding: 3px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    /* padding-top: 10px;
    padding-bottom: 10px; */
    margin: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    vertical-align: middle;
}

#helpcategory, #helpprimitive {
    min-width: fit-content;
    max-width: fit-content;
    min-height: fit-content;
    max-height: fit-content;
    font-size: smallest;
    border-radius: 6px;
    background-color: var(--background-button);
    color: var(--text-button);
    border: 0px;
    padding: 3px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    vertical-align: middle;
}

#helpcategory:active, #helpprimitive:active  {
    background-color: var(--background-button);
    color: var(--text-button);
}

#helpcontrols {
/*
    position: fixed;
    bottom: 16px;
*/

    /* And if you want the div to be full-width: */
/*
    right: 16px;
    opacity: 0;
*/
/*
    overflow: hidden;
*/
    min-width: calc(var(--left-width) - 6vw) !important;
    max-width: calc(var(--left-width) - 6vw) !important;
    overflow-x: hidden;
    /*white-space: ;*/
}

#tab_help, #tab_edit {
    min-width: calc(var(--left-width) - 6vw) !important;
    max-width: calc(var(--left-width) - 6vw) !important;
}

.vertical-filler {
    max-height: 100% !important;
    min-height: 100% !important;
    height: 100% !important;
    /*background-color: red !important;*/
}

#editcontrols-cell {
    /* background-color: #01a0e4; */
    width: calc(var(--left-pc) * 0.86) !important;
    /* min-width: var(--left-pc) !important;
    max-width: var(--left-pc) !important; */
    padding: 0px !important;
    margin: 0px !important;
    position: absolute;
    bottom: 8px !important;
    left: calc(var(--left-width) * 0.05) !important;
    vertical-align: baseline !important;
    display: flex;
    height: 39px !important;
}

.spacer {
    flex: 1;
}

#projcontrols {
    /* opacity: 0; */
    white-space: nowrap;
    /* vertical-align: middle !important; */
    padding: 0px !important;
    bottom: 0px !important;
    margin: 0px !important;
    height: auto !important;
    /* flex: 0; */
}

#undocontrols {
    opacity: 1;
    white-space: nowrap;
    /* vertical-align: middle !important; */
    padding: 0px !important;
    bottom: 0px !important;
    margin: 0px !important;
    height: auto !important;
    /* flex: 0; */
}

#runcontrols-cell {
    width: calc(var(--right-width) - calc(var(--right-width) * 0.01)) !important;
    min-width: calc(var(--right-width) - calc(var(--right-width) * 0.01)) !important;
    max-width: calc(var(--right-width) - calc(var(--right-width) * 0.01)) !important;
    padding: 0px !important;
    margin: 0px !important;
    position: absolute;
    bottom: 8px !important;
    right: calc(var(--right-width) * 0.05) !important;
    vertical-align: middle !important;
    display: flex;
    height: 39px !important;
}

.spacer {
    flex: 1;
}

#backtrack {
    opacity: 0;
    white-space: nowrap;
    /* vertical-align: middle !important; */
    padding: 0px !important;
    bottom: 0px !important;
    margin: 0px !important;
    height: auto !important;
    flex: 0;
}

#runcontrols {
    opacity: 0;
    white-space: nowrap;
    /* vertical-align: middle !important; */
    padding: 0px !important;
    bottom: 0px !important;
    margin: 0px !important;
    height: auto !important;
    flex: 0;
}

.tstab {
    padding: 5px;
    margin: 3px;
    font-size: smallest;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    background-color: #1d261d;
    color: white;
    border: 0px;
    min-height: 4vh;
    max-height: 4vh;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    vertical-align: middle;
}

.browserbutton {
	background-color: darkorange;
	padding: 4px;
	border-radius: 1px;
	font-size: 11pt !important;
	font-weight: bold;
}

.tsbutton, .danger {
    font-size-adjust: calc( var(--browser-height) / 1440 ) !important;
}

.tsbutton {
    display: inline-flex;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin: 1px !important;
    font-size: smallest;
    font-size-adjust: calc( var(--browser-height) / 1440 ) !important;
    border-radius: 6px;
    background-color: var(--background-button);
    color: var(--text-button);
    border: 2px solid var(--border-button);
    /*min-height: 4vh;*/
    /*max-height: 4vh;*/
    /* box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; */
    min-width: max-content;
    height: fit-content;
    /* vertical-align: middle; */
}

.tab-div {
	margin-top: -2px;
}

.subtab {
    padding: 2px;
    margin: 0px;
    font-size: 9pt;
    border-radius: 5px 5px 0px 0px;
    padding-bottom: 2px;
    margin: 0px;
}

.danger {
    display: inline-flex;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin: 1px !important;
    font-size: smallest;
    font-size-adjust: calc( var(--browser-height) / 1440 ) !important;
    border-radius: 6px;
    background-color: var(--background-button-caution);
    color: var(--text-button);
    border: 2px solid var(--border-button-caution);
    /*min-height: 4vh;*/
    /*max-height: 4vh;*/
    /* box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; */
    min-width: max-content;
    /* vertical-align: middle; */    
}

.danger a {
    background-color: var(--background-button-caution);
    color: var(--text-button);
}

.danger:hover {
    background-color: var(--background-button-caution);
    color: var(--text-button);
}

.danger:visited {
    background-color: var(--background-button-caution);
    color: var(--text-button);
}

.tsbutton a {
    background-color: var(--background-button);
    color: var(--text-button);
}

.tsbutton:hover {
    background-color: var(--background-button);
    color: var(--text-button);
}

.tsbutton:hover a {
    background-color: var(--background-button);
    color: var(--text-button);
}

.tsbutton:active {
    color: #2d362d;
    background-color: white;
}

.tsbutton:active a {
    background-color: var(--background-button);
    color: var(--text-button);
}

.editor-updated {
    color: var(--text-button-activate) !important;
}

.tsbutton:visited {
    background-color: var(--background-button);
    color: var(--text-button);
}

.disabled {
    opacity: 0.5;
}

.enabled {
    opacity: 1.0;
}

.errorLine {
    background-color: darkred;
}

.errorFloat {
    position: absolute;
    background-color: darkred;
    color: white;
}

.hidecontrol {
    display:none;
}

.menu-text-button {
    color: white;
    position: relative;
    font-size: 24pt !important;
    margin-top: -6pt;
    margin-bottom: -6pt;
    margin-right: -4pt;
}
/* .submenu {
    font-size: 10pt;
}

.dropdown {
    font-size: 10pt;
} */

/* #textbuffer {
    position: fixed;
    bottom: 7vh;
    left: 51vw;
    z-index: 88;
} */

/*#workspace, #histedit {*/
/*    float:right;*/
/*}*/

.pause {
    /* min-width: 36pt;
    max-width: 36pt; */
}

.eb {
    background-color: var(--background-edit-button);
    color: var(--text-edit-button);
}

.eb a {
    background-color: var(--background-edit-button);
    color: var(--text-edit-button);
}

.eb:hover {
    background-color: var(--background-edit-button-hover);
    color: var(--text-edit-button);;
}

.eb:visited {
    background-color: var(--background-edit-button);
    color: var(--text-edit-button);;
}

#login-container {
    width: 800px;
    height: 600px;
    margin: auto;
}

.profile-table {
    font-family: 'TextBuffer';
    background-color: #fff;
    color: #000;
}

.profile-table table {
    font-weight: 600;
    vertical-align: top;
    text-align: left;
    /* width: 100%; */
}

.profile-table tbody, .profile-table tr, .profile-table td, .profile-table th, .profile-table tbody {
    background-color: #fff;
    color: #000;
    vertical-align: top;
    text-align: left;
}

.profile-table th {
    font-weight: 600;
    vertical-align: top;
    text-align: left;
}

.formtext, .formtext:focus {
    background-color: white;
    color: black;
}

.tsprojectfolder {
    background-color: white;
    min-width: 300px;
    max-width: 300px;
    min-height: 168px;
    max-height: 168px;
    color: black;
    vertical-align: middle;
    text-align: center;
    line-height: 168px;
    padding-left: 50px;
    padding-right: 50px;
}


.tsprojectname {
    font-family: 'TextBuffer';
    color: green;
    font-weight: 900;
}

.tsprojectdesc {
    font-size: smallest;
}

/* .full-tags-width {
    width: var(--proj-modal-width) !important;
} */

#browser-tags-publish {
	/* position: absolute; */

	/* Prevent elements to be highlighted on tap */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Put the scroller into the HW Compositing layer right from the start */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);

    max-height: calc(var(--browser-height) * 0.44) !important;

    width: var(--proj-modal-width) !important;

    overflow: hidden;
}

#profilemodal {
    max-height: calc(var(--browser-height) * 0.995) !important;
}

#browser-tags-publish-wrapper {
    line-height: 23pt;
    /* overflow-x: hidden !important;
    overflow-y: scroll !important;
    height: 80vh;
    max-height: 80vh; */
    /* min-height: 80vh;
    max-height: 80vh; */
	position: relative;
	max-width: var(--browser-width) !important;
    min-width: var(--proj-modal-width) !important;;
	overflow: hidden;

	/* Prevent native touch events on Windows */
	-ms-touch-action: none;

	/* Prevent the callout on tap-hold and text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Prevent text resize on orientation change, useful for web-apps */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;    
}

#browser-tags-wrapper {
    /* overflow-x: hidden !important;
    overflow-y: scroll !important;
    height: 80vh;
    max-height: 80vh; */
    /* min-height: 80vh;
    max-height: 80vh; */
	position: relative;
	width: var(--proj-modal-tag-width) !important;
    min-width: var(--proj-modal-tag-width) !important;;
	max-height: calc(var(--browser-height) * 0.75) !important;
	overflow: hidden;

	/* Prevent native touch events on Windows */
	-ms-touch-action: none;

	/* Prevent the callout on tap-hold and text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Prevent text resize on orientation change, useful for web-apps */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;    
    line-height: 24pt !important;
}

#projectgridwrapper {
    /* overflow-x: hidden !important;
    overflow-y: scroll !important;
    height: 80vh;
    max-height: 80vh; */
    /* min-height: 80vh;
    max-height: 80vh; */
	position: relative;
	width: var(--proj-modal-grid-width) !important;
    min-width: var(--proj-modal-grid-width) !important;
	height: calc(var(--browser-height) * 0.75) !important;
	overflow: hidden;

	/* Prevent native touch events on Windows */
	-ms-touch-action: none;

	/* Prevent the callout on tap-hold and text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Prevent text resize on orientation change, useful for web-apps */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;    
}

.iScrollIndicator {
    background: var(--handle-scrollbar) !important;  
    background-color: var(--handle-scrollbar) !important;  
    border-radius: 2px !important;     
    border: 0px !important; 
}

#projectgrid {
	position: absolute;

	/* Prevent elements to be highlighted on tap */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Put the scroller into the HW Compositing layer right from the start */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}

/* #projectgrid::-webkit-scrollbar {
  width: 8px;             
}

#projectgrid::-webkit-scrollbar-track {
  background: var(--background-dialog);       
}

#projectgrid::-webkit-scrollbar-thumb {
  background-color: var(--handle-scrollbar);  
  border-radius: 4px;     
  border: 0px; 
} */

.pagination .current {
    background: var(--background-dialog) !important;
}

.pagination .current a {
    border-radius: 8px !important;
}

.log-in-form .button {
    padding: 8px !important;
}

/* .reveal-overlay {
    max-width: 98vw;
} */

h4.profile {
    color: green;
    text-align: center;
}

h1.profile {
    color: green;
    text-align: center;
}

.CodeMirror-search-field {
    color: #1d1d1d !important;
    background-color: white !important;
}

.notvisible {
    visibility: hidden;
}

.searchLabel {
    color: var(--text-main);
    background-color: var(--background-main) !important;
    margin: 0;
    font-size: smaller;
}

.no-padding {
	margin: 0px !important;
	padding: 0px !important;
}

#helpsearchbox {
    font-family: 'TextBuffer';
    font-size: 10pt;
    font-weight: bold;
    border: 0px;
    min-width: 10vw;
    max-width: 10vw;
    min-height: 4vh;
    max-height: 4vh;
    font-size: smallest;
    border-radius: 6px;
    background-color: var(--background-button);
    color: var(--text-button);
    border: 0px;
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
    margin: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    vertical-align: middle;
}

.show-password {
    width: 100%;
}

.show-password label {
position: absolute;
left: -9999px;
text-indent: -9999px;
}

.password-wrapper {
position: relative;
}

.password + .unmask {
position: absolute;
right: 12px;
top: 50%;
-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);
text-indent: -9999px;
width: 25px;
height: 25px;
background: #aaa;
border-radius: 50%;
cursor: pointer;
border: none;
-webkit-appearance: none;
}

.password + .unmask:before {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 17px;
height: 17px;
background: #e3e3e3;
z-index: 1;
border-radius: 50%;
}

.password[type="text"] + .unmask:after {
content: "";
position: absolute;
top: 6px;
left: 6px;
width: 13px;
height: 13px;
background: #aaa;
z-index: 2;
border-radius: 50%;
}

.centertext {
    text-align: center;
    min-height: 32px;
    vertical-align: middle;
    border-radius: 0px;
    border: 0px;
    /* margin: 0px; */
    padding: 8px;
}

.form-prompt {
    color: black;
}

.option-nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flash {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@media (max-height: 800px) {
    .project-tag {
        background: var(--background-card) !important;
        color: var(--text-card) !important;
        text-decoration: none;
        font-weight: bold;
        padding: 4px;
        border-radius: 5px;
        margin: 2px;
        font-size: smaller;
    }

    .project-tag-selected {
        background-color: #01a0e4;
        color: white;
        text-decoration: none;
        font-weight: bold;
        padding: 4px;
        border-radius: 5px;
        margin: 2px;
        font-size: smaller;
    }
}

/* .fullscreents */

/*@media only screen and (display-mode: fullscreen) and (min-aspect-ratio: 16/9) {*/

/*    #grid-container {*/
/*!*    	    position: absolute;*!*/
/*!*        left:50%;*/
/*        top: 0%;*!*/
/*        min-height: 100vh !important;*/
/*        max-height: 100vh !important;*/
/*        min-width: calc( 100vh * 1.77) !important;*/
/*        max-width: calc( 100vh * 1.77) !important;*/
/*!*        transform: translate(-50%, 0%);*!*/
/*    }*/

/*    #tsrendersurface, #overlaytextsurface {*/
/*    	    margin-top: 0px;*/
/*    	    position: absolute;*/
/*        left:50%;*/
/*        top: 0%;*/
/*        min-height: 100vh !important;*/
/*        max-height: 100vh !important;*/
/*        min-width: calc( 100vh * 1.77) !important;*/
/*        max-width: calc( 100vh * 1.77) !important;*/
/*        transform: translate(-50%, 0%);*/
/*    }*/

/*}*/

/*@media only screen and (display-mode: fullscreen) and (max-aspect-ratio: 16/9) {*/

/*    #grid-container {*/

/*        min-width: 100vw !important;*/
/*        max-width: 100vw !important;*/
/*        min-height: calc( 100vw * 0.56249992968) !important;*/
/*        max-height: calc( 100vw * 0.56249992968) !important;*/
/*        display: inline;*/
/*    }*/

/*    #tsrendersurface, #overlaytextsurface {*/
/*    	   	margin-top: 0px;*/
/*    	    position: absolute;*/
/*        left: 0%;*/
/*        top: 50%;*/
/*        min-width: 100vw !important;*/
/*        max-width: 100vw !important;*/
/*        min-height: calc( 100vw * 0.56249992968) !important;*/
/*        max-height: calc( 100vw * 0.56249992968) !important;*/
/*        transform: translate(0%, -50%);*/
/*	    display: inline;*/
/*    }*/

/*}*/

/*.fullscreents {*/
/*            min-width: 100vw !important;*/
/*            max-width: 100vw !important;*/
/*            min-height: calc( 100vw * 0.56249992968) !important;*/
/*            max-height: calc( 100vw * 0.56249992968) !important;*/
/*            display: inline;*/
/*}*/