/* Original theme */
/* Theme colours are primarily used for the titlebar, but may be used sparingly for other elements */
:root {
--theme-name:original;
--theme-scheme:light;
--theme-background:rgb(232, 232, 232);
--theme-color:rgb(34, 34, 34);
--theme-border:rgb(187, 187, 187);
--body-font-size:12.75px;
--body-background:rgb(248, 248, 248);
--body-color:rgb(34, 34, 34);
--label-color:rgb(85, 85, 85);
--hr-color:rgb(238, 238, 238);
--selected-color:rgb(34, 34, 34);
--unselected-color:rgb(85, 85, 85);
--input-height:28px;
--input-border-color:rgb(221, 221, 221);
--input-border-color-focus:rgb(170, 170, 170);
--input-border-radius:3px;
--input-background:rgb(255, 255, 255);
--input-color:rgb(32, 32, 32);
--input-padding:5px 5px;
--placeholder-color:rgba(140, 140, 140, 0.75);
--button-background:rgb(238, 238, 238);
--button-color:rgb(34, 34, 34);
--button-background-hover:rgb(221, 221, 221);
--button-color-hover:rgb(0, 0, 0);
--button-background-unsaved: rgb(250, 190, 40);
--dialog-background:rgb(248, 248, 248);
--dialog-background-translucent:rgba(240, 240, 240, 0.9);
--dialog-color:rgb(34, 34, 34);
--dialog-border-color:rgb(187, 187, 187);
--dialog-border-radius:5px;
--dialog-shadow:0px 5px 20px 0px rgba(0, 0, 0, 0.2);
--dialog-shadow-lower:0px 5px 10px 0px rgba(0, 0, 0, 0.2);
--popup-dialog-shadow:0px 5px 15px 0px rgba(0, 0, 0, 0.2);
--popup-dialog-tab-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.2);
--popup-dialog-tab-radius:3px;
--popup-background-translucent:rgba(240, 240, 240, 0.6);
--item-border-color:rgb(242, 242, 242);
--item-header-selection:rgb(244, 244, 244);
--item-background:rgb(240, 240, 240);
--item-background-selection:rgb(232, 232, 232);
--item-border-selection:rgb(216, 216, 216);
--tab-background:rgb(240, 240, 240);
--tab-shadow:0px 1px 5px 0px rgba(0, 0, 0, 0.0);
--bar-color:rgba(128, 128, 128, 0.3);
--status-background:rgb(240, 240, 240);
--status-border-color:rgb(220, 220, 220);
--icon-color:rgb(64, 64, 64);
--font-weight-light:300;
--font-weight-medium:400;
--font-weight-heavy:500;
}
/* V6 Light */
:root {
--theme-name:v6light;
--theme-scheme:light;
--theme-background:rgb(250, 250, 250);
--theme-color:rgb(32, 32, 32);
--theme-border:rgb(250, 250, 250);
--body-font-size:12.75px;
--body-background:rgb(230, 230, 230);
--body-color: #202020;
--label-color:rgb(85, 85, 85);
--hr-color:rgb(220, 220, 220);
--selected-color:rgb(34, 34, 34);
--unselected-color:rgb(85, 85, 85);
--input-height:30px;
--input-border-color:rgba(0, 0, 0, 0);
--input-border-color-focus:rgb(220, 220, 220);
--input-border-radius:3px;
--input-background:rgb(255, 255, 255);
--input-color:rgb(32, 32, 32);
--input-padding:5px 5px;
--placeholder-color:rgba(140, 140, 140, 0.75);
--button-background:rgb(210, 210, 210);
--button-color:rgb(34, 34, 34);
--button-background-hover:rgb(200, 200, 200);
--button-color-hover:rgb(0, 0, 0);
--button-background-unsaved: rgb(250, 190, 40);
--dialog-background:rgb(240, 240, 240);
--dialog-background-translucent:rgba(240, 240, 240, 0.9);
--dialog-color:rgb(32, 32, 32);
--dialog-border-color:rgba(0, 0, 0, 0);
--dialog-border-radius:6px;
--dialog-shadow:0px 5px 20px 0px rgba(0, 0, 0, 0.3);
--dialog-shadow-lower:0px 5px 10px 0px rgba(0, 0, 0, 0.3);
--popup-dialog-shadow:0px 5px 15px 0px rgba(0, 0, 0, 0.3);
--popup-dialog-tab-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.3);
--popup-dialog-tab-radius:3px;
--item-border-color:rgb(242, 242, 242);
--item-header-selection:rgb(244, 244, 244);
--item-background:rgb(250, 250, 250);
--item-background-selection:rgb(240, 240, 240);
--item-border-selection:rgb(216, 216, 216);
--tab-background:rgb(220, 220, 220);
--tab-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.1);
--bar-color:rgba(128, 128, 128, 0.3);
--status-background:rgb(240, 240, 240);
--status-border-color:rgb(220, 220, 220);
--icon-color:rgb(90, 90, 90);
--font-weight-light:300;
--font-weight-medium:400;
--font-weight-heavy:500;
--error-color:rgb(246, 55, 55);
}
/* V6 Dark */
:root {
--theme-name:v6dark;
--theme-scheme:dark;
--theme-background:rgb(90, 90, 90);
--theme-color:rgb(255, 255, 255);
--theme-border:rgba(0, 0, 0, 0);
--body-font-size:12.75px;
--body-background:rgb(80, 80, 80);
--body-color:#FFFFFF;
--label-color:rgb(220, 220, 220);
--hr-color:rgb(60, 60, 60);
--selected-color:rgb(240, 240, 240);
--unselected-color:rgb(220, 220, 220);
--input-height:30px;
--input-border-color:rgba(0, 0, 0, 0);
--input-border-color-focus:rgba(0, 0, 0, 0);
--input-border-radius:3px;
--input-background:rgb(0, 0, 0);
--input-color:rgb(255, 255, 255);
--input-padding:5px 5px;
--placeholder-color:rgba(160, 160, 160, 0.75);
--button-background:rgb(110, 110, 110);
--button-color:rgb(240, 240, 240);
--button-background-hover:rgb(130, 130, 130);
--button-color-hover:rgb(250, 250, 250);
--button-background-unsaved: rgb(250, 190, 40);
--dialog-background:rgb(90, 90, 90);
--dialog-background-translucent:rgba(90, 90, 90, 0.9);
--dialog-color:rgb(250, 250, 250);
--dialog-border-color:rgba(0, 0, 0, 0);
--dialog-border-radius:6px;
--dialog-shadow:0px 5px 20px 0px rgba(0, 0, 0, 0.5);
--dialog-shadow-lower:0px 5px 10px 0px rgba(0, 0, 0, 0.5);
--popup-dialog-shadow:0px 5px 15px 0px rgba(0, 0, 0, 0.5);
--popup-dialog-tab-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.5);
--popup-dialog-tab-radius:3px;
--item-border-color:rgb(75, 75, 75);
--item-header-selection:rgb(80, 80, 80);
--item-background:rgb(50, 50, 50);
--item-background-selection:rgb(90, 90, 90);
--item-border-selection:rgb(153, 153, 153);
--tab-background:rgb(60, 60, 60);
--tab-shadow:0px 1px 5px 0px rgba(0, 0, 0, 0.3);
--bar-color:rgba(128, 128, 128, 0.3);
--status-background:rgb(40, 40, 40);
--status-border-color:rgb(20, 20, 20);
--icon-color:rgb(240, 240, 240);
--font-weight-light:300;
--font-weight-medium:400;
--font-weight-heavy:500;
--error-color:rgb(255, 112, 112);
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
background: var(--body-background);
}
input {
color-scheme: var(--theme-scheme);
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
a:active, a:hover {
outline: 0;
}
b, strong {
font-weight: bold;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code, kbd, pre, samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button, input, optgroup, select, textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button, html input[type="button"], /* 1 */
input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled], html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {
padding: 0;
}
.sorted_up::after {
content: " \2191"
}
.sorted_down::after {
content: " \2193"
}
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.column, .columns {
width: 100%;
float: left;
box-sizing: border-box;
}
/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
width: 85%;
padding: 0;
}
}
/* For devices larger than 550px */
@media (min-width: 550px) {
.container {
width: 80%;
}
.column, .columns {
margin-left: 4%;
}
.column:first-child, .columns:first-child {
margin-left: 0;
}
.one.column, .one.columns {
width: 4.66666666667%;
}
.two.columns {
width: 13.3333333333%;
}
.three.columns {
width: 22%;
}
.four.columns {
width: 30.6666666667%;
}
.five.columns {
width: 39.3333333333%;
}
.six.columns {
width: 48%;
}
.seven.columns {
width: 56.6666666667%;
}
.eight.columns {
width: 65.3333333333%;
}
.nine.columns {
width: 74.0%;
}
.ten.columns {
width: 82.6666666667%;
}
.eleven.columns {
width: 91.3333333333%;
}
.twelve.columns {
width: 100%;
margin-left: 0;
}
.one-third.column {
width: 30.6666666667%;
}
.two-thirds.column {
width: 65.3333333333%;
}
.one-half.column {
width: 48%;
}
/* Offsets */
.offset-by-one.column, .offset-by-one.columns {
margin-left: 8.66666666667%;
}
.offset-by-two.column, .offset-by-two.columns {
margin-left: 17.3333333333%;
}
.offset-by-three.column, .offset-by-three.columns {
margin-left: 26%;
}
.offset-by-four.column, .offset-by-four.columns {
margin-left: 34.6666666667%;
}
.offset-by-five.column, .offset-by-five.columns {
margin-left: 43.3333333333%;
}
.offset-by-six.column, .offset-by-six.columns {
margin-left: 52%;
}
.offset-by-seven.column, .offset-by-seven.columns {
margin-left: 60.6666666667%;
}
.offset-by-eight.column, .offset-by-eight.columns {
margin-left: 69.3333333333%;
}
.offset-by-nine.column, .offset-by-nine.columns {
margin-left: 78.0%;
}
.offset-by-ten.column, .offset-by-ten.columns {
margin-left: 86.6666666667%;
}
.offset-by-eleven.column, .offset-by-eleven.columns {
margin-left: 95.3333333333%;
}
.offset-by-one-third.column, .offset-by-one-third.columns {
margin-left: 34.6666666667%;
}
.offset-by-two-thirds.column, .offset-by-two-thirds.columns {
margin-left: 69.3333333333%;
}
.offset-by-one-half.column, .offset-by-one-half.columns {
margin-left: 52%;
}
}
body {
font-size: var(--body-font-size);
line-height: 1.2;
font-weight: var(--font-weight-medium);
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--body-color);
background-color: var(--body-background);
}
* {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
}
input, textarea {
-moz-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
user-select: text;
}
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3 {
margin-top: 0;
margin-bottom: 10px;
font-weight: var(--font-weight-light);
}
h1 {
font-size: 24px;
line-height: 1.2;
}
h2 {
font-size: 20px;
line-height: 1.25;
}
h3 {
font-size: 16px;
line-height: 1.3;
}
p {
margin-top: 0;
}
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
color: #1EAEDB;
}
a:hover {
color: #0FA0CE;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button, input[type="submit"], input[type="reset"], input[type="button"] {
display: inline-block;
height: var(--input-height);
max-width:100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 20px;
text-align: center;
font-size: 11px;
font-weight: var(--font-weight-heavy);
line-height: 28px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: var(--button-background);
color: var(--button-color);
border-radius: var(--input-border-radius);
border: 1px solid var(--input-border-color);
cursor: pointer;
box-sizing: border-box;
}
button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
background-color: var(--button-background-hover);
color: var(--button-color-hover);
outline: 0;
}
button.unsaved {
background-color: var(--button-background-unsaved);
}
/* Addition added to cope with change in Google Maps v3.53 */
.gm-style button {
max-width: 1000px;
}
::-webkit-input-placeholder {
color: #aaa;
}
:-moz-placeholder {
color: #aaa;
opacity: 1;
}
::-moz-placeholder {
color: #aaa;
opacity: 1;
}
:-ms-input-placeholder {
color: #aaa;
}
::-ms-input-placeholder {
color: #aaa;
}
::placeholder {
color: #aaa;
}
input, textarea, select, progress {
height: var(--input-height);
padding: var(--input-padding);
background-color: var(--input-background);
color: var(--input-color);
border: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
box-shadow: none;
box-sizing: border-box;
}
input::placeholder, textarea::placeholder {
color: var(--placeholder-color);
}
/* Added to resolve an issue with Chrome */
input[type="date"], input[type="time"], input[type="datetime"], input[type="datetime-local"], progress {
min-height: var(--input-height);
}
input[type="datetime"]::-webkit-inner-spin-button, input[type="datetime-local"]::-webkit-inner-spin-button {
display:none;
}
input[type="datetime"]::-webkit-clear-button, input[type="datetime-local"]::-webkit-clear-button {
display:none;
}
input[type="datetime"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator {
color: rgba(0, 0, 0, 0);
background: url("data:image/svg+xml;utf8,");
background-position: right 0px center;
background-repeat: no-repeat;
}
input, textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px;
}
input:focus, textarea:focus, select:focus {
border: 1px solid var(--input-border-color-focus);
outline: 0;
}
label, legend {
display: block;
margin-bottom: 2px;
color: var(--label-color);
}
fieldset {
padding: 0;
border-width: 0;
}
input[type=checkbox], input[type=radio] {
display: inline;
}
label>.label-body {
display: inline-block;
margin-left: 2px;
font-weight: normal;
}
input[type=checkbox] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline:none;
display:inline-block;
height: var(--input-height);
padding-left: calc(var(--input-height) - 2px);
width: var(--input-height);
cursor: pointer;
border: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
background-color: var(--input-background);
}
input[type=checkbox]:checked {
background-image: url("data:image/svg+xml;utf8,");
}
input[type=checkbox]:focus {
border: 1px solid var(--input-border-color-focus);
outline: 0;
}
input[type=radio] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline:none;
display:inline-block;
height: var(--input-height);
padding-left: calc(var(--input-height) - 2px);
width: var(--input-height);
cursor: pointer;
border: 1px solid var(--input-border-color);
border-radius: 20px;
background-color: var(--input-background);
box-sizing: border-box;
}
input[type=radio]:checked {
background-image: url("data:image/svg+xml;utf8,");
}
input[type=radio]:focus {
border: 1px solid var(--input-border-color-focus);
outline: 0;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
padding:0;
border:none;
background: transparent;
}
input[type=range]:focus {
outline: none;
border:none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 1px;
cursor: pointer;
background: rgba(204, 204, 204, 0.78);
border: none;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
height: 28px;
width: 28px;
border: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
background: var(--input-background);
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-thumb {
border: 1px solid var(--input-border-color-focus);
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: rgba(209, 209, 209, 0.78);
}
input[type=range]::-moz-range-track {
width: 100%;
height: 1px;
cursor: pointer;
background: rgba(204, 204, 204, 0.78);
border: none;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
border: 1px solid var(--input-border-color);
height: 28px;
width: 28px;
border-radius: var(--input-border-radius);
background: var(--input-background);
cursor: pointer;
}
input[type=range]:focus::-moz-range-thumb {
border: 1px solid var(--input-border-color-focus);
}
input[type=range]::-ms-track {
width: 100%;
height: 1px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: rgba(199, 199, 199, 0.78);
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 2.6px;
}
input[type=range]::-ms-fill-upper {
background: rgba(204, 204, 204, 0.78);
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 2.6px;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
border: 1px solid var(--input-border-color);
height: 28px;
width: 28px;
border-radius: var(--input-border-radius);
background: var(--input-background);
cursor: pointer;
height: 1px;
}
input[type=range]:focus::-ms-fill-lower {
background: rgba(204, 204, 204, 0.78);
}
input[type=range]:focus::-ms-fill-upper {
background: rgba(209, 209, 209, 0.78);
}
input[type=range].small {
-webkit-appearance: none;
width: 100%;
padding:0;
border:none;
background: transparent;
}
input[type=range].small:focus {
outline: none;
border:none;
}
input[type=range].small::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
cursor: pointer;
background: rgba(128, 128, 128, 0.8);
border: 0px solid rgba(0,0,0,0);
border-radius: 6px;
}
input[type=range].small::-webkit-slider-thumb {
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
height: 14px;
width: 14px;
border: 1px solid rgba(128, 128, 128, 0.8);
border-radius: 14px;
background: var(--input-background);
cursor: pointer;
-webkit-appearance: none;
margin-top: -4px;
}
input[type=range].small:focus::-webkit-slider-thumb {
border: 1px solid var(--input-border-color-focus);
}
input[type=range].small:focus::-webkit-slider-runnable-track {
background: rgba(128, 128, 128, 0.9);
}
input[type=range].small::-moz-range-track {
width: 100%;
height: 8px;
cursor: pointer;
background: rgba(128, 128, 128, 0.8);
border: 0px solid rgba(0,0,0,0);
border-radius: 8px;
}
input[type=range].small::-moz-range-thumb {
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(128, 128, 128, 0.8);
height: 14px;
width: 14px;
border-radius: var(--input-border-radius);
background: var(--input-background);
cursor: pointer;
}
input[type=range].small:focus::-moz-range-thumb {
border: 1px solid var(--input-border-color-focus);
}
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
list-style: circle inside;
}
ol {
list-style: decimal inside;
}
ol, ul {
padding-left: 0;
margin-top: 0;
}
ul ul, ul ol, ol ol, ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%;
}
li {
margin-bottom: 1rem;
}
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: var(--input-border-radius);
}
pre>code {
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th, td {
/* padding: 12px 15px; */
text-align: left;
}
th:first-child, td:first-child {
padding-left: 0;
}
th:last-child, td:last-child {
padding-right: 0;
}
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button, .button {
margin-bottom: 15px;
}
input, textarea, select, progress, fieldset {
margin-bottom: 15px;
}
pre, blockquote, dl, figure, table, p, ul, ol, form {
margin-bottom: 15px;
}
/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
width: 100%;
box-sizing: border-box;
}
.u-max-full-width {
max-width: 100%;
box-sizing: border-box;
}
.u-pull-right {
float: right;
}
.u-pull-left {
float: left;
}
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
margin-top: 30px;
margin-bottom: 30px;
border-width: 0;
border-top: 1px solid var(--hr-color);
}
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after, .row:after, .u-cf {
content: "";
display: table;
clear: both;
}
input[type="date"], input[type="time"], input[type="datetime"], input[type="datetime-local"] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-position: right 5px center;
background-repeat: no-repeat;
background-color: var(--input-background);
outline: none;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime"]::-webkit-inner-spin-button,
input[type="datetime"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
/* resolve issues with firefox */
@-moz-document url-prefix() {
input[type="date"], input[type="time"], input[type="datetime"], input[type="datetime-local"] {
background-image: none;
}
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
/* background-image: url("data:image/svg+xml;utf8,"); */
background-image: url("data:image/svg+xml;utf8,");
background-position: right 5px center;
background-repeat: no-repeat;
outline: none;
padding-right:22px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
select[multiple] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background-image: none;
background-position: right 5px center;
background-repeat: no-repeat;
outline: none;
padding-right: 5px;
height:auto;
}
select[multiple] option {
padding: 3px 5px;
}
/* progress {
} */
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
padding:4px;
/* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; */
}
progress::-webkit-progress-bar {
background-color: transparent;
border: 1px solid #f2f2f2;
border-radius: 1px;
}
progress::-webkit-progress-value {
background: #aaa;
border-radius: 1px;
}
progress::-moz-progress-bar {
background: #aaa;
border-radius: 1px;
}
/* input:focus, textarea:focus, button:focus, select:focus {
outline: rgb(0, 128, 255) solid 2px;
} */
.list {
background-color: var(--item-background);
border: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
overflow-y: auto;
height:100%;
position: relative;
}
.list.borderless {
border: none;
}
.list-item {
background-color: var(--item-background);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
padding: 5px 5px 5px 5px;
border-bottom: 1px solid var(--item-border-color);
cursor:default;
}
.list-item-left {
background-color: inherit;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
padding: 0;
cursor:default;
}
/* Detail list item */
.list-item-left>div>p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1.4;
padding:0;
margin:0;
}
/* Detail list item */
.list-item-left>div>small {
display:block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1.2;
/* color: #777; */
opacity: 0.65;
padding:0;
margin:0;
width:100%;
}
/* Normal list item */
.list-item-left>div>p:last-child {
padding-top: 6px;
padding-bottom: 6px;
font-size:14px;
line-height: 1.5;
}
.list-item.hidden {
height:0;
font-size:0;
line-height: 0;
margin:0;
padding:0;
border-bottom: 0px solid transparent;
opacity:0;
display: none;
}
.list-item.selected {
background-color: var(--item-background-selection);
}
/* .list-item:last-child {
border-bottom: 1px solid transparent;
} */
/* List item icon */
.list-item>img {
order: 0;
flex: 0 1 1px;
align-self: auto;
/* width:32px; */
height:32px;
padding:0 5px 0 0;
margin:0;
}
.list-item>div {
background-color: inherit;
}
/* List item main area */
.list-item>div:first-of-type {
order: 0;
flex: 1 1 auto;
align-self: auto;
overflow: hidden;
white-space: nowrap;
}
/* List item component */
.list-item>div:last-of-type {
order: 0;
flex: 0 0 auto;
align-self: auto;
overflow: hidden;
white-space: nowrap;
display: flex;
align-items: center;
height:32px;
}
.list-item-left>div {
overflow: hidden;
text-overflow: ellipsis;
}
/* List item link */
.list-item>a {
order: 0;
flex: 0 1 32px;
align-self: auto;
cursor: pointer;
display: table-cell;
vertical-align: middle;
margin:0 0 0 5px;
padding:0;
}
.list-item>a>div {
width:32px;
height:32px;
background-position: 0 0;
background-size: 32px 32px;
/* background-image: url(list-item-link.png); */
background-image: url("data:image/svg+xml;utf8,");
}
.list-item>a:hover>div {
/* background-image: url(list-item-link-active.png); */
background-image: url("data:image/svg+xml;utf8,");
}
/* Detail list item */
.list-item>div>p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1.4;
padding:0;
margin:0;
}
/* Detail list item */
.list-item>div>small {
display:block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1.2;
/* color: #777; */
opacity: 0.65;
padding:0;
margin:0;
width:100%;
}
/* Normal list item */
.list-item>div>p:last-child {
padding-top: 6px;
padding-bottom: 6px;
font-size:14px;
line-height: 1.5;
}
.selection-list {
background-color: var(--item-background);
border: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
overflow-y: auto;
height: 100%;
display: block;
position: relative;
padding: 0;
}
.selection-list.borderless {
border: none;
}
.selection-list-item {
background-color: var(--item-background);
border: 1px solid var(--item-background);
/* display: inline-block;
width: 32px;
height: 32px;
padding: 0;
margin: 5px;
border: 1px solid var(--item-border-color);
cursor:default; */
}
/* .selection-list-item>img {
width: 32px;
height: 32px;
padding: 0;
margin: 0;
}
.selection-list-item>div>p {
overflow: hidden;
text-overflow: ellipsis;
width: 32px;
height: 20px;
font-size: 9px;
text-align: center;
} */
/* .selection-list-item.hidden {
height:0;
font-size:0;
line-height: 0;
margin:0;
padding:0;
border-bottom: 0px solid transparent;
opacity:0;
display: none;
} */
.selection-list-item.selected {
background-color: var(--item-background-selection);
border: 1px solid var(--item-border-selection);
border-radius: 3px;
}
/* Fixed header table */
.table-fixed-header {
overflow-x: hidden;
width: 100%;
height: 100%;
border: 1px solid var(--input-border-color);
margin: 0;
position: relative;
padding-top: 30px;
box-sizing: border-box;
background-color: var(--item-background);
transition: padding 0.25s;
}
.table-fixed-header.borderless {
border: none;
}
.table-fixed-header>div:first-of-type {
background-color: var(--item-header-selection);
border-bottom: 1px solid var(--input-border-color);
height: 30px;
position: absolute;
top: 0;
right: 0;
left: 0;
}
.table-fixed-header>div:last-of-type {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
box-sizing: border-box;
}
.table-fixed-header table {
overflow-x: hidden;
overflow-y: auto;
margin:0;
padding:0;
margin-top: -30px;
}
.table-fixed-header th {
white-space: nowrap;
text-overflow: ellipsis;
font-weight: var(--font-weight-heavy);
line-height: 30px;
border-bottom: 1px solid transparent;
padding: 0;
margin:0;
}
.table-fixed-header th>div {
padding: 0 5px 0 5px;
visibility: hidden;
}
.table-fixed-header th>span {
position: absolute;
top: 0;
text-align: left;
box-sizing: border-box;
padding: 0 5px 0 5px;
border:none;
}
.table-fixed-header th:first-child>span {
border-left: none;
}
.table-fixed-header table {
margin-top: -30px;
}
.table-fixed-header table {
width:100%;
}
.table-fixed-header tbody td {
padding: 5px;
box-sizing: border-box;
height:28px;
vertical-align: top;
/* transition: all 0.2s; */
}
.table-fixed-header tbody tr {
border-bottom: 1px solid var(--item-border-color);
/* transition: all 0.2s; */
}
.table-fixed-header tbody tr:last-of-type {
border-bottom: 1px solid transparent;
}
.table-fixed-header tbody tr.selected {
background-color: var(--item-background-selection);
}
.table-fixed-header tbody tr.hidden, .table-fixed-header tbody tr.hidden td {
height:0;
font-size:0;
line-height: 0;
margin:0;
padding:0;
border-bottom: 0px solid transparent;
opacity:0;
display: none;
}
.table-fixed-header th, .table-fixed-header td {
font-size: var(--body-font-size);
font-weight: var(--font-weight-heavy);
}
.table-fixed-header>span {
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 0;
background-color: var(--item-header-selection);
border-top: 1px solid var(--input-border-color);
overflow: hidden;
transition: height 0.25s;
}
.outer, .outer-intense {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
padding: 0;
background-color: rgba(128, 128, 128, 0.075);
/* opacity:0;
transition: opacity 0.25s linear; */
/*
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
*/
}
.outer-intense {
background-color: rgba(0, 0, 0, 0.5);
}
.dialog {
background-color: var(--dialog-background);
color: var(--dialog-color);
border-radius: var(--dialog-border-radius);
box-shadow: var(--dialog-shadow);
border: 1px solid var(--dialog-border-color);
display: block;
position: absolute;
}
.popup-dialog {
background-color: var(--dialog-background);
color: var(--dialog-color);
border-radius: var(--dialog-border-radius);
box-shadow: var(--popup-dialog-shadow);
border: 1px solid var(--dialog-border-color);
display: block;
position: absolute;
opacity: 0;
transition: opacity 0.25s linear;
}
.popup-dialog>p {
background-color: var(--dialog-background);
border-radius: var(--popup-dialog-tab-radius);
border: 1px solid var(--dialog-border-color);
display: block;
position: absolute;
padding:0;
margin:0;
width:30px;
height:30px;
transform: rotate(45deg);
}
.popup-dialog input, .popup-dialog input[type="date"], .popup-dialog input[type="time"], .popup-dialog input[type="datetime"], .popup-dialog input[type="datetime-local"], .popup-dialog button {
height: 24px;
min-height: 24px;
padding: 2px 4px;
font-size: 11.75px;
}
.popup-dialog .input-panel button {
width: 100%;
padding: 2px;
line-height: 11.75px;
}
.popup-dialog button, .popup-dialog .input-panel button {
width: 100%;
padding: 2px;
line-height: 11.75px;
}
.popup-dialog .button-panel button {
width: auto;
padding: 2px;
line-height: 11.75px;
}
.popup-dialog input[type=text]input:read-only, .popup-dialog input[type=number]input:read-only, .popup-dialog input[type=date]input:read-only, .popup-dialog input[type=time]input:read-only, .popup-dialog input[type=datetime-local]input:read-only, .popup-dialog input[type=email]input:read-only, .popup-dialog input[type=password]input:read-only, .popup-dialog textarea:read-only {
background: rgba(0, 0, 0, 0);
}
.popup-dialog input[type=checkbox] {
width: 24px;
min-width: 24px;
background-size: 24px 24px;
}
.popup-dialog label {
font-size: 11.75px;
font-weight: var(--font-weight-heavy);
line-height: 1;
opacity: 0.75;
}
.popup-dialog label:disabled, .popup-dialog label[disabled="true"] {
opacity: 0.5;
}
/* .popup-dialog input[type=checkbox]:checked {
background-image: url("data:image/svg+xml;utf8,");
} */
.search-dialog {
background-color: var(--input-background);
color: var(--dialog-color);
border-radius: var(--dialog-border-radius);
box-shadow: var(--dialog-shadow);
border: 1px solid var(--dialog-border-color);
display: block;
position: absolute;
}
.search-dialog>input {
font-size: 24px;
font-weight: var(--font-weight-light);
}
@media (max-width: 600px) {
.dialog {
width: 100%;
height: 100%;
top: 0;
left: 0;
margin:0;
}
}
.search-dialog-list {
background-color: var(--button-background);
color: var(--dialog-color);
border-radius: var(--dialog-border-radius);
box-shadow: var(--dialog-shadow-lower);
border: 1px solid var(--dialog-border-color);
display: block;
position: absolute;
opacity: 0.95;
}
.search-dialog-list-help {
/* background-color: rgba(255, 255, 255, 0.75); */
/* background-color: rgba(0, 0, 0, 0.5); */
padding: 1px 15px;
box-shadow: var(--dialog-shadow-lower);
/* border: 1px solid rgb(255, 255, 255); */
border: 1px solid var(--dialog-border-color);
/* border-radius: 15px; */
display: block;
position: absolute;
line-height: 10px;
}
.search-dialog-list-item {
/* background-color: var(--input-background); */
background-color: rgba(0, 0, 0, 0);
color: var(--input-color);
border: none;
border-bottom: 1px solid var(--input-border-color);
width: 100%;
height:48px;
padding:0;
margin:0;
box-sizing: border-box;
font-size: 16px;
display: flex;
flex-direction: row;
}
.search-dialog-list-item.selected {
background-color: var(--input-background);
}
.search-dialog-list-item>p {
padding:15px;
margin:0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex: 1 1 auto;
}
.search-dialog-list-item>p>span {
padding: 0 0 0 15px;
margin:0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex: 1 1 auto;
opacity: 0.5;
}
.search-dialog-list-item>button {
padding:10px;
margin:0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 60px;
max-width: 150px;
height:48px;
box-sizing: border-box;
border: none;
border-left: 1px solid var(--input-border-color);
border-radius: 0;
background-color: rgba(0, 0, 0, 0);
flex: 0 1 auto;
display: none;
}
.search-dialog-list-item>button.warning {
border: none;
border-left: 1px solid var(--input-border-color);
border-bottom: 0.25px solid rgba(220, 220, 220, 0.25);
background: rgb(196, 32, 32);
color: rgb(255, 255, 255);
}
.search-dialog-list-item.selected>button {
display: inline-block;
}
.sheet {
background-color: var(--dialog-background);
color: var(--dialog-color);
border-radius: var(--dialog-border-radius);
border-top-right-radius: 0;
border-top-left-radius: 0;
box-shadow: var(--dialog-shadow);
border: 1px solid var(--dialog-border-color);
border-top:none;
display: block;
position: absolute;
top: 0;
transform: translate(0, -110%);
transition: transform 0.3s;
}
.sheet.visible {
transform: translate(0, 0);
}
.detail-sheet {
background-color: var(--dialog-background);
color: var(--dialog-color);
border-radius: 0;
box-shadow: var(--dialog-shadow);
border:none;
border-left: 1px solid var(--dialog-border-color);
display: block;
position: absolute;
right: 0;
transform: translate(110%, 0);
transition: transform 0.5s;
}
.detail-sheet>p {
background-color: var(--dialog-background);
border-radius: var(--dialog-border-radius);
box-shadow: var(--popup-dialog-tab-shadow);
border: 1px solid var(--dialog-border-color);
display: block;
position: absolute;
padding:0;
margin:0;
width:250px;
height:28px;
left:-140px;
top:120px;
transform: rotate(270deg);
padding:5px 0 0 10px;
font-size:16px;
line-height: 18px;
font-weight: var(--font-weight-medium);
color: #888;
}
.detail-sheet>p>div {
background-color: transparent;
display: block;
position: absolute;
padding:0;
margin:0;
top:0px;
right:2px;
width:28px;
height:28px;
transform: rotate(180deg);
background-position: 0 0;
background-size: 28px 28px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8,");
cursor: pointer;
}
.detail-sheet>p>div:hover {
background-image: url("data:image/svg+xml;utf8,");
}
.detail-sheet>div {
background-color: var(--dialog-background);
border-radius: var(--dialog-border-radius);
border: 1px solid rgba(0, 0, 0, 0);
display: block;
position: absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
box-sizing: border-box;
padding:30px;
}
.detail-sheet.visible {
transform: translate(0, 0);
}
.editor-dialog {
background-color: var(--dialog-background);
color: var(--dialog-color);
border-radius: var(--dialog-border-radius);
/* box-shadow: var(--dialog-shadow); */
box-shadow: var(--popup-dialog-shadow);
border: 1px solid var(--dialog-border-color);
display: block;
position: absolute;
/* transform: scale(0.8); */
}
.editor-dialog input, .editor-dialog input[type="date"], .editor-dialog input[type="time"], .editor-dialog input[type="datetime"], .editor-dialog input[type="datetime-local"], .editor-dialog select, .editor-dialog button {
height: 22px;
min-height: 22px;
padding: 1px 4px;
font-size: 11.75px;
margin-bottom: 10px;
}
.editor-dialog .button-panel button, .editor-dialog .button-panel .right button {
min-width: 70px;
padding: 0px 4px;
line-height: 22px;
}
.editor-dialog input:read-only, .editor-dialog textarea:read-only {
background: rgba(0, 0, 0, 0);
/* border: 1px solid rgba(0, 0, 0, 0); */
}
.editor-dialog label {
font-size: 11.75px;
line-height: 1.1;
}
.editor-dialog hr {
margin: 0px;
margin-bottom: 10px;
}
.popup-editor-dialog {
background-color: var(--dialog-background);
color: var(--dialog-color);
border-radius: var(--dialog-border-radius);
box-shadow: var(--popup-dialog-shadow);
border: 1px solid var(--dialog-border-color);
display: block;
position: absolute;
opacity: 0;
transition: opacity 0.25s linear;
/* transform: scale(0.8); */
}
.popup-editor-dialog>p {
background-color: var(--dialog-background);
border-radius: var(--popup-dialog-tab-radius);
box-shadow: var(--popup-dialog-tab-shadow);
border: 1px solid var(--dialog-border-color);
display: block;
position: absolute;
padding:0;
margin:0;
width:30px;
height:30px;
transform: rotate(45deg);
}
.popup-editor-dialog>div {
background-color: var(--dialog-background);
border-radius: var(--dialog-border-radius);
border: 1px solid rgba(0, 0, 0, 0);
display: block;
position: absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
box-sizing: border-box;
padding:10px;
}
.button-panel .left button {
float: left;
margin-right: 10px;
margin-bottom: 0px;
}
.button-panel .right button {
float: right;
margin-left: 10px;
margin-bottom: 0px;
min-width: 80px;
}
.button-panel {
background-color: transparent;
}
.inline-panel>* {
vertical-align: middle;
margin-right: 5px;
}
.inline-panel>*:last-child {
margin-right: 0px;
}
.inline-panel>label {
display: inline-block;
margin-bottom: 15px;
padding-bottom: 6px;
}
.list-item .inline-panel>* {
vertical-align: middle;
}
.list-item .inline-panel>input, .list-item .inline-panel>select, .list-item .inline-panel>button {
margin-bottom: 0px;
}
.fixed-size-panel {
display: block;
position: relative;
}
.root-panel {
background: var(--body-background);
box-sizing: border-box;
}
.main-panel {
width: 100%;
height: 100%;
box-sizing: border-box;
}
/* @media (max-width: 549px) {
.main-panel {
height: 500px;
}
} */
.vertical-panel {
width: 100%;
height: 100%;
box-sizing: border-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
}
.vertical-panel>* {
flex: 0 1 auto;
align-self: auto;
}
.vertical-panel>* .fill {
flex: 1 1 auto;
align-self: auto;
}
/* @media (max-width: 549px) {
.vertical-panel {
height: 500px;
}
} */
.vertical-fill-panel {
width: 100%;
height: 100%;
box-sizing: border-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
}
.vertical-fill-panel>* {
flex: 1 1 auto;
align-self: auto;
}
.vertical-fill-panel>*.fixed {
flex: 0 0 auto;
align-self: auto;
}
.horizontal-fill-panel {
width: 100%;
height: 100%;
box-sizing: border-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
}
.horizontal-fill-panel>* {
flex: 1 1 auto;
align-self: auto;
}
.horizontal-fill-panel>*.fixed {
flex: 0 0 auto;
align-self: auto;
}
.flow-panel {
clear:both;
}
.flow-panel>.columns {
margin-left: 0;
}
.column-panel {
clear:both;
}
.relative-column-panel {
width:100%;
height:100%;
display:block;
box-sizing: border-box;
}
/* .vertical-panel>.relative-column-panel {
display: flex;
} */
.relative-column-panel>div {
display:inline-block;
margin:0;
padding:0 0 0 20px;
box-sizing: border-box;
vertical-align: top;
}
.relative-column-panel>div:first-child {
padding:0;
}
.header-panel {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.header-panel-item:nth-child(1) {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.header-panel-item:nth-child(2) {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.header-panel-item:nth-child(3) {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.overlay-panel {
overflow:hidden;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.overlay-panel-item {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.overlay-panel-overlay {
background: var(--body-background);
/* display:block; */
position:absolute;
overflow:hidden;
margin:0;
padding:0;
opacity:0;
transition: opacity 0.25s linear, visibility 0.25s linear;
visibility: hidden;
}
.overlay-panel-overlay.full {
top:0;
left:0;
width:100%;
height:100%;
}
.overlay-panel-overlay.right {
top:0;
right:0;
width:200px;
height:100%;
}
.overlay-panel-overlay.top {
top:0;
left:0;
width:100%;
height:200px;
}
.overlay-panel-overlay.visible {
opacity:1;
visibility: visible;
}
.placeholder {
background: transparent;
border: none;
top:0;
left:0;
width:100%;
height:100%;
display:table;
position:absolute;
overflow:hidden;
margin:0;
padding:0;
opacity:0;
transition: opacity 0.25s linear, visibility 0.25s linear;
visibility: hidden;
pointer-events: none;
}
.placeholder.visible {
opacity:1;
visibility: visible;
}
.placeholder>div {
display:table-cell;
text-align: center;
vertical-align: middle;
}
.scroll-panel {
width:100%;
height:100%;
display:block;
position:relative;
overflow:hidden;
border: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
background: var(--body-background);
box-sizing: border-box;
}
.scroll-panel.borderless {
border: none;
}
.tab-panel {
width:100%;
height:100%;
display:block;
position:relative;
overflow:hidden;
border: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
background: var(--tab-background);
box-sizing: border-box;
}
.tab-panel.borderless {
border: none;
}
.tab-panel>p.start {
display: block;
position:absolute;
overflow:hidden;
top:0px;
left:0px;
height:32px;
width:16px;
background: rgba(160, 160, 160, 0.5);
background-position: 0 0;
background-size: 16px 32px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8,");
border:none;
border-radius:0;
border-right:solid 0.5px rgba(255, 255, 255, 0.75);
cursor: pointer;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.tab-panel>p.end {
display: block;
position:absolute;
overflow:hidden;
top:0px;
right:0px;
height:32px;
width:16px;
background: rgba(160, 160, 160, 0.5);
background-position: 0 0;
background-size: 16px 32px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8,");
border:none;
border-radius:0;
border-left:solid 0.5px rgba(255, 255, 255, 0.75);
cursor: pointer;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.tab-panel>ul {
display: block;
position:absolute;
overflow:hidden;
top:0px;
height:32px;
left:0px;
background: var(--tab-background);
white-space:nowrap;
transition: margin 0.2s;
box-shadow: inset var(--tab-shadow);
}
.tab-panel>ul>li {
display: inline-block;
position: relative;
height:32px;
width:auto;
border-right: 1px solid var(--input-border-color);
cursor: pointer;
overflow:hidden;
font-size: 14px;
font-weight: var(--font-weight-light);
padding: 8px 12px 0 12px;
color: var(--unselected-color);
}
.tab-panel>ul>li.selected {
cursor: default;
background: var(--body-background);
color: var(--selected-color);
box-shadow: var(--tab-shadow);
}
.tab-panel>ul>li>p {
display: block;
position: absolute;
box-sizing: border-box;
top: 2px;
right:2px;
height:15px;
min-width:15px;
text-align: center;
pointer-events:none;
background: rgb(221, 32, 40);
color: rgb(255, 255, 255);
border: 0px solid transparent;
border-radius: 8px;
padding: 1px 3px 0 3px;
margin:0;
font-size: 10px;
/* box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5); */
}
.tab-panel>div {
display:block;
position:absolute;
top:32px;
bottom:0px;
left:0px;
right:0px;
border-top: 1px solid var(--input-border-color);
background: var(--body-background);
}
.status-bar {
width:100%;
height:32px;
min-height:32px;
padding: 0;
display:block;
position:relative;
overflow:hidden;
border: none;
border-top: 1px solid var(--status-border-color);
background: var(--status-background);
box-sizing: border-box;
}
.status-bar>div:first-of-type {
width:auto;
height:32px;
min-height:32px;
padding: 8px 10px;
display:block;
position:relative;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: rgba(0, 0, 0, 0);
box-sizing: border-box;
}
.status-bar>div:last-of-type {
width:auto;
height:32px;
min-height:32px;
display:block;
position:absolute;
overflow:hidden;
top:0;
right:0;
background:white;
box-sizing: border-box;
}
.status-item {
display: inline-block;
padding: 0px 0px 0px 0px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.status-item>img {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
vertical-align: middle;
padding: 0px 5px 0px 0px;
}
.status-item>div {
display: inline-block;
position: relative;
width: auto;
height: 16px;
font-size: 12px;
font-weight: var(--font-weight-light);
vertical-align: baseline;
padding: 0px 15px 0px 0px;
}
.icon-tab-panel {
width:100%;
height:100%;
display:block;
position:relative;
overflow:hidden;
border: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
background: var(--tab-background);
box-sizing: border-box;
}
.icon-tab-panel.borderless {
border: none;
}
.icon-tab-panel>p.start {
display: block;
position:absolute;
overflow:hidden;
top:0px;
left:0px;
height:48px;
width:16px;
background: rgba(160, 160, 160, 0.5);
background-position: 0 0;
background-size: 16px 48px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8,");
border:none;
border-radius:0;
border-right:solid 0.5px rgba(255, 255, 255, 0.75);
cursor: pointer;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.icon-tab-panel>p.end {
display: block;
position:absolute;
overflow:hidden;
top:0px;
right:0px;
height:48px;
width:16px;
background: rgba(160, 160, 160, 0.5);
background-position: 0 0;
background-size: 16px 48px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8,");
border:none;
border-radius:0;
border-left:solid 0.5px rgba(255, 255, 255, 0.75);
cursor: pointer;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.icon-tab-panel>ul {
display: block;
position:absolute;
overflow:hidden;
top:0px;
height:48px;
left:0px;
background: var(--tab-background);
white-space:nowrap;
transition: margin 0.2s;
box-shadow: inset var(--tab-shadow);
}
.icon-tab-panel>ul>li {
display: inline-block;
position: relative;
height:48px;
width:48px;
border-right: 1px solid var(--input-border-color);
cursor: pointer;
margin:0;
}
.icon-tab-panel>ul>li>p {
display: block;
position: absolute;
box-sizing: border-box;
top: 2px;
right:2px;
height:15px;
min-width:15px;
text-align: center;
pointer-events:none;
background: rgb(221, 32, 40);
color: rgb(255, 255, 255);
border: 0px solid transparent;
border-radius: 8px;
padding: 1px 3px 0 3px;
margin:0;
font-size: 10px;
/* box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5); */
}
.icon-tab-panel>ul>li.selected {
cursor: default;
background: var(--body-background);
box-shadow: var(--tab-shadow);
}
.icon-tab-panel>ul>li>img {
display: block;
position:absolute;
top:8px;
left:8px;
height:32px;
width:32px;
opacity: 0.33;
}
.icon-tab-panel>ul>li.selected>img {
opacity: 1;
}
.icon-tab-panel>div {
display:block;
position:absolute;
top:48px;
bottom:0px;
left:0px;
right:0px;
border-top: 1px solid var(--input-border-color);
background: var(--body-background);
}
.vertical-tab-panel {
width:100%;
height:100%;
display:block;
position:relative;
overflow:hidden;
border: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
background: var(--tab-background);
box-sizing: border-box;
}
.vertical-tab-panel.borderless {
border: none;
}
.vertical-tab-panel>p.start {
display: block;
position:absolute;
overflow:hidden;
top:0px;
left:0px;
height:16px;
width:48px;
background: rgba(160, 160, 160, 0.5);
background-position: 0 0;
background-size: 48px 16px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8,");
border:none;
border-radius:0;
border-bottom:solid 0.5px rgba(255, 255, 255, 0.75);
cursor: pointer;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
margin:0;
}
.vertical-tab-panel>p.end {
display: block;
position:absolute;
overflow:hidden;
bottom:0px;
left:0px;
height:16px;
width:48px;
background: rgba(160, 160, 160, 0.5);
background-position: 0 0;
background-size: 48px 16px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8,");
border:none;
border-radius:0;
border-top:solid 0.5px rgba(255, 255, 255, 0.75);
cursor: pointer;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
margin:0;
}
.vertical-tab-panel>ul {
display: block;
position:absolute;
overflow:hidden;
top:0px;
width:48px;
left:0px;
background: var(--tab-background);
/* white-space:nowrap; */
transition: margin 0.2s;
box-shadow: inset var(--tab-shadow);
}
.vertical-tab-panel>ul>li {
display: inline-block;
position: relative;
height:48px;
width:48px;
/* border-bottom: 1px solid var(--input-border-color); */
cursor: pointer;
margin:0;
}
.vertical-tab-panel>ul>li>p {
display: block;
position: absolute;
box-sizing: border-box;
top: 2px;
right:2px;
height:15px;
min-width:15px;
text-align: center;
pointer-events:none;
background: rgb(221, 32, 40);
color: rgb(255, 255, 255);
border: 0px solid transparent;
border-radius: 8px;
padding: 1px 3px 0 3px;
margin:0;
font-size: 10px;
box-sizing: border-box;
/* box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5); */
}
.vertical-tab-panel>ul>li.selected {
cursor: default;
background: var(--body-background);
border-top: 1px solid var(--input-border-color);
border-bottom: 1px solid var(--input-border-color);
box-shadow: var(--tab-shadow);
}
.vertical-tab-panel>ul>li>img {
display: block;
position:absolute;
top:8px;
left:8px;
height:32px;
width:32px;
opacity: 0.33;
}
.vertical-tab-panel>ul>li.selected>img {
opacity: 1;
}
.vertical-tab-panel>div {
display:block;
position:absolute;
top:0px;
bottom:0px;
left:48px;
right:0px;
border-left: 1px solid var(--input-border-color);
background: var(--body-background);
}
.detail-navigator-panel {
width:100%;
height:100%;
display:block;
position:relative;
overflow:hidden;
border: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
background: var(--tab-background);
box-sizing: border-box;
}
.detail-navigator-panel.borderless {
border: none;
}
.detail-navigator-panel>div {
display:block;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
background: var(--body-background);
transform: translate(0, 0);
transition: transform 0.5s ease-in-out;
/* box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5); */
}
.detail-navigator-panel>div.left {
transform: translate(-25%, 0);
}
.detail-navigator-panel>div.right {
transform: translate(100%, 0);
}
.detail-navigator-panel>div>div:nth-child(1) {
box-sizing: border-box;
background: var(--body-background);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
padding: 5px 5px;
height:40px;
}
.detail-navigator-panel>div>div:nth-child(1)>a {
order: 0;
flex: 0 1 32px;
align-self: auto;
padding:0 5px 0 0;
margin:0 0 0 -5px;
/* width:32px; */
height:32px;
max-width: 50%;
background-position: 0 0;
background-size: 32px 32px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8,");
cursor: pointer;
}
.detail-navigator-panel>div>div:nth-child(1)>a:hover {
background-image: url("data:image/svg+xml;utf8,");
}
.detail-navigator-panel>div>div:nth-child(1)>a>div {
margin:0 0 0 32px;
height:40px;
font-size: 12px;
font-weight: var(--font-weight-heavy);
padding: 10px 0 0 0;
color: rgba(128, 128, 128, 0.75);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.detail-navigator-panel>div>div:nth-child(1)>p {
display: inline-block;
position: relative;
height:40px;
width:auto;
overflow:hidden;
font-size: 14px;
font-weight: var(--font-weight-heavy);
padding: 8px 12px 0 5px;
color: var(--unselected-color);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.detail-navigator-panel>div>div:nth-child(2) {
box-sizing: border-box;
display:block;
position:absolute;
top:40px;
bottom:40px;
left:0px;
right:0px;
border-top: 1px solid var(--input-border-color);
background: var(--body-background);
}
.detail-navigator-panel>div>div:nth-child(3) {
box-sizing: border-box;
padding:5px 10px;
overflow: hidden;
text-align: right;
display:block;
position:absolute;
height:40px;
bottom:0px;
left:0px;
right:0px;
border-top: 1px solid var(--input-border-color);
background: var(--body-background);
}
.detail-navigator-panel>div>div:last-child {
bottom:0px;
}
/* gap between editor components */
.detail-navigator-panel>div>div:nth-child(3)>* {
margin-left:10px;
}
.border-panel {
width:100%;
height:100%;
display:block;
position:relative;
overflow:hidden;
}
.border-panel>div {
overflow:visble;
}
.border-panel>div>* {
overflow:hidden;
}
.drawer-panel {
width:100%;
height:100%;
display:block;
position:relative;
overflow:hidden;
}
.drawer-panel>div {
overflow:visble;
}
.drawer-panel>div>* {
overflow:hidden;
}
.component-panel {
width:100%;
height:100%;
display:block;
position:relative;
overflow:hidden;
box-sizing: border-box;
}
.component-panel>div {
overflow:hidden;
transition: all 0.2s;
}
.input-panel {
width:100%;
display:block;
position:relative;
box-sizing: border-box;
}
.input-panel>div {
width:100%;
position:relative;
box-sizing: border-box;
margin: 0 0 5px 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
align-content: stretch;
align-items: flex-start;
}
.input-panel label {
display:block;
position: relative;
flex: 1 1 auto;
align-self: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: var(--input-padding);
padding-left:0;
border: 1px solid transparent;
margin: 0;
box-sizing: border-box;
}
.input-panel h3 {
display:block;
position: relative;
flex: 1 1 auto;
align-self: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: var(--input-padding);
padding-left:0;
border: 1px solid transparent;
margin: 0;
box-sizing: border-box;
}
.input-panel hr {
padding: 0;
margin: 5px 0 5px 0;
}
.input-panel input, .input-panel select, .input-panel progress, .input-panel textarea {
display:block;
position: relative;
flex: 0 1 auto;
top:0;
right:0;
width: 300px;
max-width: 60%;
margin: 0;
}
.input-panel input[type=checkbox], .input-panel input[type=radio] {
width: auto;
}
.input-panel button {
display:block;
position: relative;
flex: 0 1 auto;
top:0;
right:0;
width: auto;
margin: 0;
}
.file-drop {
width: 100%;
height: 75px;
min-height: 75px;
box-sizing: content-box;
border-radius: var(--input-border-radius);
border: 5px dotted var(--button-background);
color: #888;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.file-drop {
/* to match input components */
margin-bottom: 1.5rem;
}
input[type="number"] {
text-align: right;
}
*:disabled, *[disabled="true"] {
opacity: 0.5;
}
.one.column>label, .one.columns>label, .two.columns>label, .three.columns>label, .four.columns>label, .five.columns>label, .six.columns>label, .seven.columns>label, .eight.columns>label, .nine.columns>label, .ten.columns>label, .eleven.columns>label, .twelve.columns>label {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.one.column input, .one.columns input, .two.columns input, .three.columns input, .four.columns input, .five.columns input, .six.columns input, .seven.columns input, .eight.columns input, .nine.columns input, .ten.columns input, .eleven.columns input, .twelve.columns input {
width: 100%;
}
.one.column input[type=checkbox], .one.columns input[type=checkbox], .two.columns input[type=checkbox], .three.columns input[type=checkbox], .four.columns input[type=checkbox], .five.columns input[type=checkbox], .six.columns input[type=checkbox], .seven.columns input[type=checkbox], .eight.columns input[type=checkbox], .nine.columns input[type=checkbox], .ten.columns input[type=checkbox], .eleven.columns input[type=checkbox], .twelve.columns input[type=checkbox] {
width: unset;
}
.one.column input[type=radio], .one.columns input[type=radio], .two.columns input[type=radio], .three.columns input[type=radio], .four.columns input[type=radio], .five.columns input[type=radio], .six.columns input[type=radio], .seven.columns input[type=radio], .eight.columns input[type=radio], .nine.columns input[type=radio], .ten.columns input[type=radio], .eleven.columns input[type=radio], .twelve.columns input[type=radio] {
width: unset;
}
.one.column textarea, .one.columns textarea, .two.columns textarea, .three.columns textarea, .four.columns textarea, .five.columns textarea, .six.columns textarea, .seven.columns textarea, .eight.columns textarea, .nine.columns textarea, .ten.columns textarea, .eleven.columns textarea, .twelve.columns textarea {
width: 100%;
}
.one.column select, .one.columns select, .two.columns select, .three.columns select, .four.columns select, .five.columns select, .six.columns select, .seven.columns select, .eight.columns select, .nine.columns select, .ten.columns select, .eleven.columns select, .twelve.columns select {
width: 100%;
}
.one.column progress, .one.columns progress, .two.columns progress, .three.columns progress, .four.columns progress, .five.columns progress, .six.columns progress, .seven.columns progress, .eight.columns progress, .nine.columns progress, .ten.columns progress, .eleven.columns progress, .twelve.columns progress {
width: 100%;
}
/* select {
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
-webkit-appearance: none;
} */
hr {
width: 100%;
}
.one.column .toggle, .one.columns .toggle, .two.columns .toggle, .three.columns .toggle, .four.columns .toggle, .five.columns .toggle, .six.columns .toggle, .seven.columns .toggle, .eight.columns .toggle, .nine.columns .toggle, .ten.columns .toggle, .eleven.columns .toggle, .twelve.columns .toggle {
width: 100%;
}
.toggle {
overflow: hidden;
margin-bottom: 1.5rem;
}
.toggle input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.toggle>label {
float: left;
}
.column .toggle>label.one, .columns .toggle>label.one {
width: 100%;
}
.column .toggle>label.two, .columns .toggle>label.two {
width: 50%;
}
.column .toggle>label.three, .columns .toggle>label.three {
width: 33.3%;
}
.column .toggle>label.four, .columns .toggle>label.four {
width: 25%;
}
.column .toggle>label.five, .columns .toggle>label.five {
width: 20%;
}
.column .toggle>label.six, .columns .toggle>label.six {
width: 16.6%;
}
.toggle>label {
height: var(--input-height);
box-sizing: border-box;
display: inline-block;
color: rgba(0, 0, 0, 0.6);
text-align: center;
padding: 5px;
border: 1px solid var(--input-border-color);
border-left: none;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.toggle>label:hover {
cursor: pointer;
}
.toggle input:checked+label {
background-color: var(--button-background-hover);
-webkit-box-shadow: none;
box-shadow: none;
}
.toggle>label:first-of-type {
border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
border: 1px solid rgba(0, 0, 0, 0.2);
}
.toggle>label:last-of-type {
border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
}
/*
button.message {
background: rgb(192, 192, 192);
border-color: rgb(160, 160, 160);
}
*/
button{
border-radius: 5px;
}
button.warning {
background: rgb(196, 32, 32);
border-color: rgb(128, 0, 0);
color: rgb(255, 255, 255);
}
button.submit {
background: #0c2d48;
color: rgb(255, 255, 255);
}
button.submit:hover{
background: #001827;
color: rgb(255, 255, 255);
}
/* Button embedded within a label */
label button {
display: inline-block;
width:auto;
height:auto;
margin:0px;
padding: 1px;
font-size: 11px;
font-weight: var(--font-weight-heavy);
line-height: 11px;
text-transform: none;
}
.menu {
display:block;
visibility: hidden;
opacity: 0;
position:absolute;
min-width:150px;
margin:0;
padding:5px 0px;
list-style:none;
background:#fff;
border: solid 0px transparent;
color:#333;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
transition: opacity 0.25s linear;
}
.menu ul {
list-style:none;
margin:0;
}
.menu ul li {
margin:0;
padding:8px 15px;
border-bottom: solid 1px #ccc;
}
.menu ul li:hover {
background:#ccc; color:#fff;
}
.menu ul li:last-child {
border:none
}
.filter-panel {
display: inline-flex;
vertical-align: bottom;
margin-right: 5px;
margin-top: 0px;
margin-bottom: 0px;
}
.filter-panel-padded {
display: inline-flex;
vertical-align: bottom;
margin-right: 5px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 11px;
padding-left: 7px;
overflow: hidden;
}
.filter-dropdown {
width: auto;
height: 30px;
display: inline-flex;
cursor: pointer;
position: relative;
}
.filter-dropdown-label {
cursor: pointer;
margin: auto;
padding-left: 5px;
padding-right: 5px;
white-space: nowrap;
}
.filter-dropdown-remove {
cursor: pointer;
margin: auto;
padding-right: 5px;
padding-left: 7px;
}
.filter-dropdown-panel {
display: block;
position: absolute;
width: 250px;
height: auto;
padding: 10px 10px;
top: 32px;
background-color: var(--dialog-background);
color: var(--dialog-color);
border-radius: var(--dialog-border-radius);
box-shadow: var(--popup-dialog-shadow);
border: 1px solid var(--dialog-border-color);
}
.filter-dropdown-panel button {
margin-bottom: 0;
}
.half-second-ease-in-out {
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.quarter-second-ease-in-out {
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.third-second-ease-in-out {
-moz-transition: all 0.33s ease-in-out;
-o-transition: all 0.33s ease-in-out;
-webkit-transition: all 0.33s ease-in-out;
transition: all 0.33s ease-in-out;
}
td input, td select, td button {
margin-top: -2px;
margin-bottom: -2px;
}
/* the box around the slider */
.checkbox-slider-panel {
position: relative;
display: block;
max-width: 85px;
min-width: 85px;
height: 28px;
}
/* Hide the default checkbox */
.checkbox-slider-panel input {display:none;}
/* The on/off slider */
.checkbox-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 34px;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.checkbox-slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 4px;
bottom: 3px;
border-radius: 50%;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.checkbox-slider:after {
color: white;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 55px;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked + .checkbox-slider:after {
left: 30px;
}
.recording-slider:after {
content: 'Idle';
}
input:checked + .recording-slider:after {
content: 'Recording';
}
.enabled-disabled-slider:after {
content: 'Disabled';
}
input:checked + .enabled-disabled-slider:after {
content: 'Enabled';
}
.onoff-slider:after {
content: 'Off';
}
input:checked + .onoff-slider:after {
content: 'On';
}
input:checked + .checkbox-slider.red {
background-color: rgb(196, 32, 32);
}
input:checked + .checkbox-slider.green {
background-color: rgb(0, 160, 64);
}
input:checked + .checkbox-slider.amber {
background-color: rgb(255, 162, 0);
}
input:checked + .checkbox-slider.blue {
background-color: rgb(64, 64, 255);
}
input:checked + .checkbox-slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/* input:checked + .checkbox-slider {
-webkit-animation: RecordingBlink 1s infinite;
-moz-animation: RecordingBlink 1s infinite;
-o-animation: RecordingBlink 1s infinite;
animation: RecordingBlink 1s infinite;
}
@-webkit-keyframes RecordingBlink {
0%, 49% {
background-color: rgb(196, 32, 32);
}
50%, 100% {
background-color: #ccc;
}
} */
/* any label component that has the error class can be used to display errors in a standard format */
label.error{
color: var(--error-color);
text-transform: uppercase;
font-weight: 600;
font-size: 10px;
margin:10px 0px;
}
label.error:not(:empty)::before{
content:"Error:";
color: var(--error-color);
text-transform: uppercase;
font-weight: 600;
font-size: 10px;
}