.full-button {

background-color: var(--bg-color);
color: #ccc;
font-family: Menlo, Consolas, monospace;
border: var(--normal-border);
padding: 1em;
text-decoration: none;
display: block;
text-align: center;
margin-top: 0.5em;
margin-bottom: 0.5em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: var(--highlight);
background-image: linear-gradient(180deg, var(--highlight) 0%, #1a1c1e 20%);

} .full-button:hover {

color: #ccc;
background-color: var(--highlight);
background-color: var(--active-highlight);
background-image: linear-gradient(180deg, var(--active-highlight) 0%, var(--highlight) 20%);

} .full-button:active {

background-color: #474c51;
background-color: #2d3033;
background-image: linear-gradient(180deg, #2d3033 0%, var(--active-highlight) 20%);

} .full-button > .label-icon-left {

float: left;

} .full-button > .label-icon-right {

float: right;

} .inline-text-input, .inline-dropdown {

background-color: var(--bg-color);
color: #ccc;
font-family: Menlo, Consolas, monospace;
border: var(--normal-border);
padding: 1em;
text-decoration: none;
display: block;
text-align: center;
margin-top: 0.5em;
margin-bottom: 0.5em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: left;
box-sizing: border-box;
width: 100%;
box-shadow: inset 0px 0px 2px 2px #17191a;

} .inline-text-input:hover, .inline-dropdown:hover {

color: #ccc;
background-color: var(--highlight);

} .inline-text-input:active, .inline-dropdown:active {

background-color: #474c51;

} .inline-text-input > .label-icon-left, .inline-dropdown > .label-icon-left {

float: left;

} .inline-text-input > .label-icon-right, .inline-dropdown > .label-icon-right {

float: right;

} .inline-text-input.unclicked, .inline-dropdown.unclicked {

color: #666;

} textarea.inline-text-input, textarea.inline-dropdown {

height: 25em;

} input::-webkit-input-placeholder {

color: #666;

} input:focus::-webkit-input-placeholder {

opacity: 0;

} .inline-checkbox {

padding: 0.2em;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: Menlo, Consolas, monospace;
min-height: 1.4em;
display: inline-block;

} .inline-checkbox > span {

vertical-align: middle;

} .inline-checkbox input {

display: none;

} .inline-checkbox:before {

display: inline-block;
vertical-align: middle;
content: " ";
width: 1em;
height: 1em;
border: var(--normal-border);
margin-right: 0.5em;
background-color: var(--highlight);
background-image: -webkit-linear-gradient(top, var(--highlight) 0%, #1a1c1e 20%);
background-image: -moz-linear-gradient(top, var(--highlight) 0%, #1a1c1e 20%);
background-image: -ms-linear-gradient(top, var(--highlight) 0%, #1a1c1e 20%);
background-image: -o-linear-gradient(top, var(--highlight) 0%, #1a1c1e 20%);
background-image: linear-gradient(top, var(--highlight) 0%, #1a1c1e 20%);

} .inline-checkbox.checked:before {

content: "X";
font-weight: 900;
color: #717980;
text-align: center;
background-color: #2d3033;
background-image: -webkit-linear-gradient(top, #2d3033 0%, var(--active-highlight) 20%);
background-image: -moz-linear-gradient(top, #2d3033 0%, var(--active-highlight) 20%);
background-image: -ms-linear-gradient(top, #2d3033 0%, var(--active-highlight) 20%);
background-image: -o-linear-gradient(top, #2d3033 0%, var(--active-highlight) 20%);
background-image: linear-gradient(top, #2d3033 0%, var(--active-highlight) 20%);

} .inline-checkbox:hover {

background-color: var(--highlight);

} toolbar {

background-color: #000;
margin: 0px;
font-family: Menlo, Consolas, monospace;
height: calc(2% + 15px);

} .tool-button {

float: left;
padding: 0.5em;
margin: 0;
text-decoration: none;
color: #ccc;
border-right: 1px solid;
border-left: 1px solid;
margin-right: 0em;

} .tool-button:hover {

background-color: var(--fg-color);

} .button-box {

position: absolute;
top: 0.5em;
right: 0.5em;
margin-right: 1em;
background-color: rgba(0,0,0,0.5);
box-shadow: 2px 2px 4px 2px #17191a;
padding: 0;
z-index: 3;

} .button-box .full-button, .button-box .inline-text-input, .button-box .inline-checkbox {

float: left;
margin: 0;
padding: 0.2em;

} .button-box .full-button:active, .button-box .inline-checkbox:active {

margin-top: 0.1em;
margin-bottom: -0.1em;

} .button-box .inline-text-input {

width: auto;

} .button-box .inline-checkbox {

border: var(--normal-border);

} .button-box .inline-checkbox:before {

border: 1px solid #3d3d3d;
height: 50%;

} .button-box .label-icon-left, .button-box .label-icon-right {

margin: 0px 5px;

} .inline-button {

background-color: var(--bg-color);
color: #ccc;
font-family: Menlo, Consolas, monospace;
border: var(--normal-border);
padding: 1em;
text-decoration: none;
display: block;
text-align: center;
margin-top: 0.5em;
margin-bottom: 0.5em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;

} .inline-button:hover {

color: #ccc;
background-color: var(--highlight);

} .inline-button:active {

background-color: #474c51;

} .inline-button > .label-icon-left {

float: left;

} .inline-button > .label-icon-right {

float: right;

} .floating-button {

background-color: var(--bg-color);
color: #ccc;
font-family: Menlo, Consolas, monospace;
border: var(--normal-border);
padding: 1em;
text-decoration: none;
display: block;
text-align: center;
margin-top: 0.5em;
margin-bottom: 0.5em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float: left;
margin: 0;
padding: 0.2em;

} .floating-button:hover {

color: #ccc;
background-color: var(--highlight);

} .floating-button:active {

background-color: #474c51;

} .floating-button > .label-icon-left {

float: left;

} .floating-button > .label-icon-right {

float: right;

} .floating-button:active {

margin-top: 0.1em;
margin-bottom: -0.1em;

}