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

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

:root {
	background-main: #000000;
	text-main: #ffffff;
}

.turtleSymbol {
	font-family: 'TextBufferTurtle' !important;
}

#profilemodal {
	min-width: 80vw;
}

#alertdiv {
    margin: auto;
}

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

#browser-tags {
	line-height: 24pt;
}

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

.project-tag {
	background-color: #e0e0e0;
	color: black;
	text-decoration: none;
	font-weight: bold;
	padding: 2px;
	border-radius: 4px;
	margin: 2px;
	font-size: normal;
}

.project-tag-selected {
	background-color: orange;
	color: white;
	text-decoration: none;
	font-weight: bold;
	padding: 2px;
	border-radius: 4px;
	margin: 2px;
}

.project-tag-selected-tiny {
	background-color: orange;
	color: white;
	text-decoration: none;
	font-weight: bold;
	padding: 1px;
	border-radius: 2px;
	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;
}

input[type="text"] {
    height: 28px !important;
}

#flag-cell {
    text-align: left;
    opacity: 0;
    background-color: var(--background-main);
    color: var(--text-main);
}

#workspace-tabs-inner {
	background-color: var(--background-main);
}

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

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

.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: fixed;
        bottom: 24px;

        /* And if you want the div to be full-width: */
        right: 50.5vw;
        opacity: 0;
        /* overflow: hidden; */
        white-space: nowrap;
        min-width: 47%;
        max-width: 47%;
    }

    .pane {
        min-width: 48%;
        max-width: 48%;
        width: 48%;
        border: none;
    }

    .paner {
        min-width: 48%;
        max-width: 48%;
        width: 48%;
        border: none;
    }

    #ts-left {
        max-width: 48%;
        min-width: 48%;
        float: left;
        opacity: 0;
        padding-left: 2%;
    }

    #ts-right {
        max-width: 48%;
        min-width: 48%;
        float: right;
    }

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

	pre.CodeMirror-line {
			padding-top: 0.5vw !important;
			padding-bottom: 0.5vw !important;
			font-size: calc(1vw) !important;
			font-family: 'TextBuffer' !important;
	}
	
	.CodeMirror-linenumber {
			padding-top: 0.5vw !important;
			padding-bottom: 0.5vw !important;
			font-size: calc(1vw) !important;
			font-family: 'TextBuffer' !important;		
	}
	
	.CodeMirror-cursor { margin-top: 0.5vw; min-height: 1.5vw; max-height: 1.5vw; }

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

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

    #textbuffer {
        margin: 0px;
        text-align: left;
        font-family: 'TextBuffer';
        background: var(--background-textbuffer);
        min-width: 48vw;
        max-width: 48vw;
        white-space: nowrap;
    }

    .singlefont {
        /*font-size:0.8vw;*/
        font-size: calc(7vw / 8);
    }
    
    .middlefont {
		font-size: calc(9.3333333vw / 8);
	}

    .doublefont {
        font-size: calc(7vw / 4);
    }

    #tsrendersurface{
        margin-top: 0vw;
        background: #000;
        min-width: 48vw;
        max-width: 48vw;
        min-height: calc( 48vw * 0.56249992968);
        max-height: calc( 48vw * 0.56249992968);
        text-align: center;
        grid-column: 1;
        grid-row: 1;
        z-index: 1;
        transform: translate(0, 0);
        display: inline;
        position: relative;
        left: 0;
        top: 0;
    }

    #overlaytextsurface {
        margin-top: 0vw;
        min-width: 48vw;
        max-width: 48vw;
        min-height: calc( 48vw * 0.56249992968);
        max-height: calc( 48vw * 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;
    }

    #description {
        font-family: 'TextBuffer';
        font-size: 12pt;
        font-weight: bold;
        border: 1px;
        border-color: aqua;
        min-width: 47vw;
        max-width: 47vw;
        opacity: 0;
    }

    #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: 20vw;
        min-width: 20vw;
    }

    #creator {
        font-family: 'TextBuffer';
        font-size: 12pt;
        font-weight: bold;
        border: 1px;
        border-color: aqua;
        opacity: 0;
        max-width: 17vw;
        min-width: 17vw;
    }


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

    .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(7vw / 8);
        max-width: 50vw;
        min-height: 68vh;
        max-height: 68vh;
        min-width: 46vw;
        padding: 0px;
        margin: 0px;
    }
    
    #helptextbuffer {
        text-align: left;
        font-family: 'TextBuffer';
        background: var(--background-main);
        font-size: calc(6.67vw / 8);
        max-width: 47vw;
        min-height: 60vh;
        max-height: 60vh;
        min-width: 47vw;
        height: 60vh;
        padding: 0px;
        margin: 0px;
        color: var(--text-main) !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

    #colortextbuffer {
        text-align: left;
        font-family: 'TextBuffer';
        background: var(--text-color-0);
        font-size: calc(6.67vw / 8);
        max-width: 47vw;
        min-height: 60vh;
        max-height: 60vh;
        min-width: 47vw;
        height: 60vh;
        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 / 8);
        max-width: 47vw;
        min-height: 60vh;
        max-height: 60vh;
        min-width: 47vw;
        height: 60vh;
        padding: 0px;
        margin: 0px;
        color: var(--text-color-15) !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

	#helptextbuffer::-webkit-scrollbar, #colortextbuffer::-webkit-scrollbar, #introtextbuffer::-webkit-scrollbar {
	  width: 8px;               /* width of the entire scrollbar */
	}

	#helptextbuffer::-webkit-scrollbar-track, #colortextbuffer::-webkit-scrollbar-track, #introtextbuffer::-webkit-scrollbar-track {
	  background: black;        /* color of the tracking area */
	}

	#helptextbuffer::-webkit-scrollbar-thumb, #colortextbuffer::-webkit-scrollbar-thumb, #introtextbuffer::-webkit-scrollbar-thumb {
	  background-color: yellow;    /* color of the scroll thumb */
	  border-radius: 2px;       /* roundness of the scroll thumb */
	  border: 0px;  /* creates padding around scroll thumb */
	}
	
	#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);
        max-width: 47vw;
        min-height: 74vh;
        max-height: 74vh;
        min-width: 47vw;
        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 */
	}

	#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: 47vw;
        min-height: 74vh;
        max-height: 74vh;
        min-width: 47vw;
        height: 60vh;
        padding: 0px;
        margin: 0px;
        overflow-y: auto;
        overflow-x: hidden;
    }

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

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

	#printerbuffer::-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: 46vw;
        max-width: 46vw;
        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: 11pt;
        font-variant-ligatures: none;
    }

    .tsbutton {
        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: 60vh;
        max-height: 60vh;
		height: 60vh;
	}
	
	#left-tabs {
		margin-top: 5px;
	}
	
}

@media only screen and (device-height: 1440px) and (device-width: 2560px) {
    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: 70vh;
        max-height: 70vh;
		height: 70vh;
	}
	
	#left-tabs {
		margin-top: 20px;
	}
	
}

@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;
    }

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

}

@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;
    }

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

}

@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;
        font-size: 10pt;
    }
    
	pre.CodeMirror-line {
			padding-top: 0.65vw !important;
			padding-bottom: 1.3vw !important;
			font-size: calc(1.3vw) !important;
			font-family: 'TextBuffer' !important;
	}
	
	.CodeMirror-linenumber {
			padding-top: 0.65vw !important;
			padding-bottom: 1.3vw !important;
			font-size: calc(1.3vw) !important;
			font-family: 'TextBuffer' !important;	
	}
	
	.CodeMirror-cursor {
			margin-top: 0.65vw !important;
			min-height: 1.8vw !important;
			max-height: 1.8vw !important;
			color: green !important;
	}

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

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

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

}

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

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

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

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

    #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: 66vh;
        font-size: 10pt;
        font-variant-ligatures: none;
    }
    
	.CodeMirror-linenumber {
			padding-top: 0.65vw !important;
			padding-bottom: 0.65vw !important;
			font-size: calc(1.3vw) !important;
			font-family: 'TextBuffer' !important;
	}
    
	pre.CodeMirror-line {
			padding-top: 0.65vw !important;
			padding-bottom: 0.65vw !important;
			font-size: calc(1.3vw) !important;
			font-family: 'TextBuffer' !important;
	}
	
	.CodeMirror-cursor {
			margin-top: 0.65vw !important;
			min-height: 1.8vw !important;
			max-height: 1.8vw !important;
			color: green !important;
	}

    .tsbutton {
        font-size: smaller;
    }

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

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

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

}

@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: 46vw;
        max-width: 46vw;
        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: 11pt;
        font-variant-ligatures: none;
    }

    .tsbutton {
        font-size: smaller;
    }

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

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

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

    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: 20vw;
	min-width: 20vw;
}

#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);
}

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

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

#body-container {
    max-width: 98%;
}

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: 100%;
}

#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;
}

#procchooser-sub {
    text-align: right;
}

#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: 2px;
    padding-left: 8px;
    padding-right: 8px;
    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: 2px;
    padding-left: 8px;
    padding-right: 8px;
    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);
}

#editprocselect {
    min-width: 20vw;
    max-width: 20vw;
    min-height: 4vh;
    max-height: 4vh;
    font-size: smallest;
    background-color: var(--background-procselect);
    color: var(--text-procselect);
    border: 0px;
    padding: 2px;
    margin: 0px;
    /* margin-top: -4vh; */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    vertical-align: middle;
}

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

#helpcategory, #helpprimitive, #filecategory, #fileselect, #asm-env, #cpumult, #workspace-tabs-inner, #workspace-tabs-inner-newbutton, #workspace-tabs-inner-closebutton {
    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;
}

#cpumult {
    min-width: 3vw;
    max-width: 3vw;	
}

#workspace-tabs-inner-newbutton  {
	padding-top: 4px;
	padding-left: 10px;
	float: left;
	min-width: 32px;
	max-width: 32px;
	min-height: 32px;
	max-height: 32px;
	vertical-align: center;
	margin-right: 4px;
}

#workspace-tabs-inner-closebutton  {
	padding-top: 4px;
	padding-left: 10px;
	float: right;
	min-width: 32px;
	max-width: 32px;
	min-height: 32px;
	max-height: 32px;
	vertical-align: center;
	margin-left: 4px;
}


#helpcategory:active, #helpprimitive:active, #filecategory:active, #fileselect:active, #asm-env:active, #workspace-tabs-inner:active, #workspace-tabs-inner-newbutton: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;
*/
    white-space: nowrap;
}

#runcontrols {
    position: fixed;
    bottom: 16px;

    /* And if you want the div to be full-width: */
    right: 16px;
    opacity: 0;
/*
    overflow: hidden;
*/
    white-space: nowrap;
}

.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: var(--background-button);
    color: var(--text-button);
    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 {
    padding: 5px;
    margin: 3px;
    font-size: smallest;
    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;
    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 {
    padding: 5px;
    margin: 3px;
    font-size: smallest;
    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;
    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;
}
/* .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;
}

.tsprojectthumb {
    background-color: black;
    min-width: 300px;
    max-width: 300px;
    min-height: 168px;
    max-height: 168px;
    color: white;
    vertical-align: middle;
    text-align: center;
    line-height: 168px;
}

.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;
}

#projectgrid {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 80vh;
    max-height: 80vh;
}

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

#projectgrid::-webkit-scrollbar-track {
  background: white;        /* color of the tracking area */
}

#projectgrid::-webkit-scrollbar-thumb {
  background-color: orange;    /* color of the scroll thumb */
  border-radius: 2px;       /* roundness of the scroll thumb */
  border: 0px;  /* creates padding around scroll thumb */
}

/* .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);
}

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

#helpsearchbox {
    font-family: 'TextBuffer';
    font-size: 10pt;
    font-weight: bold;
    border: 0px;
    min-width: 20vw;
    max-width: 20vw;
    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;
  }
}

/* .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%);*/
    }
    
    #emulator {
/*    	    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 {
//
}