/****************************************************************************** ** corestyle.css ** ** This is the main CSS file used for the OasisOnline/Core/EverydayIPM/etc. ** Specificially this is what is used by the client webapp/PWA app etc. ** A minified version of this is likely also available as corestyle.min.css ** ** ** NOTES: ** ** 1) Lots of things are set as !important. This is unfortunate but seems to ** be necessary the vast majority of the time. Not really great but as ** we don't directly control the stuff we're theming, not much choice. ** 2) There are a lot of comments in this file. It should be used minified! ** 3) This is a work in progress, so don't get hung up on any of the details. ** ** ** Change History ** ** 2021-Jul-15 ADS First Created. ** 2021-Jul-16 ADS Reorganized for fully-integrated theme support. ** Added root section, primarily for color names. ** 2021-Aug-26 ADS Bit of cleanup as work on Login screen winds to a close. ** 2021-Nov-23 ADS Usual housekeeping. Started using Notepad++ again. */ /****************************************************************************** ** These are colours used throughout, so might as well define them here. ** Any colours used should actually be included here for clarity. */ :root { --Black: #000000; --White: #FFFFFF; --DarkestGray: #333333; --DarkerGray: #555555; --DarkGray: #777777; --Gray: #999999; --LightGray: #AAAAAA; --LighterGray: #CCCCCC; --LightestGray: #EEEEEE; --Red: #FF0000; --Green: #00FF00; --Blue: #0000FF; --Yellow: #FFFF00; --Redish: #FF3333; --Greenish: #33FF33; --Blueish: #3333FF; --Yellowish: #FFFF33; --HunterGreen: #355E3B; --TreeGreen: #28903A; --BloodRed: #8A0303; --CobaltBlue: #0047AB; --Eggplant: #614051; --BattleshipGray: #848482; --HotLava: #F8D007; --TreeBark: #4C3C22; --CannabisGreen: #466A4C; } /****************************************************************************** ** Plain Theme ** General idea is to have this reflect default values in most cases */ .theme-01-Plain { --main-bg-0: none; --main-bg-1: var(--Black) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAE0lEQVQYlWNgYGD4TyQeVUhPhQA0vWOdYsHbsQAAAABJRU5ErkJggg==) repeat; --main-bg-2: var(--LightestGray); --main-bg-color: var(--White); --main-bg-position: center; --main-bg-repeat: no-repeat; --main-bg-size: cover; --main-bg-opacity: 1.0; --bg-readonly: var(--color-input-bg) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAK0lEQVQYlWP48OHDfwY8AC6PSyGGOLoAThtgEoScQLwCglYR7WgMcWLCCQAefkDAYjZgwQAAAABJRU5ErkJggg==) repeat; --bd-radius: 0; --color-primary: var(--Black); --color-secondary: var(--LightGray); --color-tertiary: var(--DarkGray); --color-lightbg: var(--LightestGray); --color-blank: var(--White); --color-input: var(--Black); --color-input-bg: var(--White); --color-input-bd: var(--Black); --color-bg-white: var(--White); --color-hl: var(--HotLava); --color-hl-bd: var(--Black); --color-splitter: var(--BattleshipGray); --color-scrollbar: var(--Black); --color-plain-region: var(--White); --color-plain-bd: var(--DarkGray); --color-btn-primary: var(--CobaltBlue); --color-btn-primary-bd: var(--CobaltBlue); --color-btn-secondary: var(--Eggplant); --color-btn-secondary-bd: var(--Eggplant); --color-btn-tertiary: var(--BattleshipGray); --color-btn-tertiary-bd: var(--Black); --color-btn-danger: var(--BloodRed); --color-btn-danger-bd: var(--BloodRed); --color-btn-helper: var(--CobaltBlue); --color-btn-helper-bd: var(--CobaltBlue); --color-btn-hover: var(--LighterGray); --color-Nav: var(--Black); --color-NavInsert: var(--CobaltBlue); --color-NavDelete: var(--Eggplant); --color-NavUpdate: var(--HunterGreen); --color-NavCancel: var(--BloodRed); --color-NavSearch: var(--CobaltBlue); --color-popup: var(--White); --color-popup-bd: var(--Black); --font-color-popup: var(--Black); --color-popup-selected: var(--DarkGray); --color-popup-selected-bd: var(--Black); --font-color-popup-selected: var(--White); --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; --font-weight-normal: 400; --font-weight-heavy: 700; --font-size-xs: 9px; --font-size-sm: 10px; --font-size-md: 11px; --font-size-reg: 12px; --font-size-big: 13px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-xxl: 18px; --font-size-x2: 20px; --font-color-primary: var(--White); --font-color-inverse: var(--Black); --font-color-menu: var(--White); --font-color-keyword: var(--Black); --font-color-atom: var(--Black); --font-color-number: var(--BattleshipGray); --font-color-def: var(--Black); --font-color-variable: var(--Black); --font-color-operator: var(--Black); --font-color-comment: var(--Black); --font-color-string: var(--Black); --font-color-string-2: var(--Black); --font-color-meta: var(--Black); --font-color-builtin: var(--Black); --font-color-tag: var(--CobaltBlue); --font-color-attribute: var(--Eggplant); --font-color-header: var(--Black); --font-color-hr: var(--Black); --font-color-link: var(--Black); --font-color-error: var(--Black); --font-color-bracket: var(--Eggplant); --font-color-punctuation: var(--Black); } /****************************************************************************** ** EverydayIPM Theme ** Should reflect whatever Bejay Mills/Dynamic Crop Protection Systems likes */ .theme-02-EverydayIPM { --main-bg-0: var(--TreeBark) url(../art/dynamicecosystemsbackground2.jpg); --main-bg-1: var(--TreeBark) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQYlWPwtVP8TwgzMDD8ZyBGka+dIn6FMEV4FSIrwqkQXRFWhQwMDIQVorgJl9VYTUH3DDZFGMGDTxGyYgCYApy5c3MDkwAAAABJRU5ErkJggg==) repeat; --main-bg-2: var(--TreeBark) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAO0lEQVQYlWN4+v7pf3z4yZMn/xkIKXj6/iluRTAFOBUhK8CqCF0BhiKYApwmoUtguAmbFSi+w6UAWSEAkXcsn1HO1VEAAAAASUVORK5CYII=) repeat; --main-bg-color: var(--TreeGreen); --main-bg-position: center; --main-bg-repeat: no-repeat; --main-bg-size: cover; --main-bg-opacity: 0.92; --color-primary: var(--TreeBark); --color-secondary: var(--DarkGray); --color-tertiary: var(--LightGray); --color-lightbg: var(--LightestGray); --color-blank: var(--White); --color-input: var(--Black); --color-input-bg: var(--White); --color-input-bd: var(--Black); --color-bg-white: var(--White); --color-hl: var(--HotLava); --color-hl-bd: var(--Black); --color-splitter: var(--BattleshipGray); --color-scrollbar: var(--TreeBark); --color-plain-region: var(--White); --color-plain-bd: var(--TreeBark); --bg-readonly: var(--color-input-bg) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAK0lEQVQYlWP48OHDfwY8AC6PSyGGOLoAThtgEoScQLwCglYR7WgMcWLCCQAefkDAYjZgwQAAAABJRU5ErkJggg==) repeat; --color-btn-primary: var(--CobaltBlue); --color-btn-primary-bd: var(--CobaltBlue); --color-btn-secondary: var(--Eggplant); --color-btn-secondary-bd: var(--Eggplant); --color-btn-tertiary: var(--BattleshipGray); --color-btn-tertiary-bd: var(--Black); --color-btn-danger: var(--BloodRed); --color-btn-danger-bd: var(--BloodRed); --color-btn-helper: var(--DarkGray); --color-btn-helper-bd: var(--DarkGray); --color-btn-hover: var(--DarkGray); --color-Nav: var(--Black); --color-NavInsert: var(--CobaltBlue); --color-NavDelete: var(--Eggplant); --color-NavUpdate: var(--HunterGreen); --color-NavCancel: var(--BloodRed); --color-NavSearch: var(--CobaltBlue); --color-popup: var(--White); --color-popup-bd: var(--Gray); --font-color-popup: var(--TreeBark); --color-popup-selected: var(--TreeBark); --color-popup-selected-bd: var(--Black); --font-color-popup-selected: var(--White); --font-family: 'Roboto', sans-serif; --font-weight-normal: 400; --font-weight-heavy: 700; --font-size-xs: 9px; --font-size-sm: 10px; --font-size-md: 11px; --font-size-reg: 12px; --font-size-big: 13px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-xxl: 18px; --font-size-x2: 20px; --font-color-primary: var(--White); --font-color-inverse: var(--Black); --font-color-menu: var(--White); --font-color-keyword: var(--Black); --font-color-atom: var(--Black); --font-color-number: var(--TreeBark); --font-color-def: var(--Black); --font-color-variable: var(--Black); --font-color-operator: var(--Black); --font-color-comment: var(--DarkGray); --font-color-string: var(--TreeBark); --font-color-string-2: var(--Black); --font-color-meta: var(--Black); --font-color-builtin: var(--Black); --font-color-tag: var(--Black); --font-color-attribute: var(--Black); --font-color-header: var(--Black); --font-color-hr: var(--Black); --font-color-link: var(--Black); --font-color-error: var(--Black); --font-color-bracket: var(--Black); --font-color-punctuation: var(--Black); --bd-radius: 0.25rem; } /****************************************************************************** ** 500Foods Theme ** Mostly pulled directly from the 500Foods theme.scss code */ .theme-03-500Foods { --main-bg-0: url(../art/shutterstock_greenhouse_hd.jpg); --main-bg-1: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJklEQVQImWMwjbP+j4xt05z/M6ALmMZZIwRhAnBBmABcJbIKmAQAPFUtrhZjhn4AAAAASUVORK5CYII=) repeat; --main-bg-2: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVQImWM49fDcf2R86Oax/wzoAqcenkMIwgTggjABuEpkFTAJAKeOVhEmGaLLAAAAAElFTkSuQmCC) repeat; --main-bg-color: var(--HunterGreen); --main-bg-position: center; --main-bg-repeat: repeat; --main-bg-size: cover; --main-bg-opacity: 0.97; --color-primary: var(--HunterGreen); --color-secondary: var(--DarkGray); --color-tertiary: var(--LightGray); --color-lightbg: var(--LightestGray); --color-blank: var(--White); --color-input: var(--Black); --color-input-bg: var(--White); --color-input-bd: var(--Black); --color-bg-white: var(--White); --color-hl: var(--HotLava); --color-hl-bd: var(--Black); --color-splitter: var(--BattleshipGray); --color-scrollbar: var(--HunterGreen); --color-plain-region: var(--White); --color-plain-bd: var(--HunterGreen); --bg-readonly: var(--color-input-bg) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAK0lEQVQYlWP48OHDfwY8AC6PSyGGOLoAThtgEoScQLwCglYR7WgMcWLCCQAefkDAYjZgwQAAAABJRU5ErkJggg==) repeat; --color-btn-primary: var(--CobaltBlue); --color-btn-primary-bd: var(--CobaltBlue); --color-btn-secondary: var(--Eggplant); --color-btn-secondary-bd: var(--Eggplant); --color-btn-tertiary: var(--BattleshipGray); --color-btn-tertiary-bd: var(--Black); --color-btn-danger: var(--BloodRed); --color-btn-danger-bd: var(--BloodRed); --color-btn-helper: var(--CobaltBlue); --color-btn-helper-bd: var(--CobaltBlue); --color-btn-hover: var(--LighterGray); --color-Nav: var(--Black); --color-NavInsert: var(--CobaltBlue); --color-NavDelete: var(--Eggplant); --color-NavUpdate: var(--HunterGreen); --color-NavCancel: var(--BloodRed); --color-NavSearch: var(--CobaltBlue); --color-popup: var(--White); --color-popup-bd: var(--Black); --font-color-popup: var(--Black); --color-popup-selected: var(--DarkGray); --color-popup-selected-bd: var(--Black); --font-color-popup-selected: var(--White); --font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; --font-weight-normal: 400; --font-weight-heavy: 700; --font-size-xs: 9px; --font-size-sm: 10px; --font-size-md: 11px; --font-size-reg: 12px; --font-size-big: 13px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-xxl: 18px; --font-size-x2: 20px; --font-color-primary: var(--White); --font-color-inverse: var(--Black); --font-color-menu: var(--White); --font-color-keyword: var(--Black); --font-color-atom: var(--Black); --font-color-number: var(--Black); --font-color-def: var(--Black); --font-color-variable: var(--Black); --font-color-operator: var(--Black); --font-color-comment: var(--Black); --font-color-string: var(--Black); --font-color-string-2: var(--Black); --font-color-meta: var(--Black); --font-color-builtin: var(--Black); --font-color-tag: var(--Black); --font-color-attribute: var(--Black); --font-color-header: var(--Black); --font-color-hr: var(--Black); --font-color-link: var(--Black); --font-color-error: var(--Black); --font-color-bracket: var(--Black); --font-color-punctuation: var(--Black); --bd-radius: 0.25rem; } /****************************************************************************** ** 500Plants Theme */ .theme-04-500Plants { --main-bg-0: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVQImWN4/eXNf2T8+M2T/wzoAq+/vEEIwgTggjABuEpkFTAJAFBhXhP0dzvUAAAAAElFTkSuQmCC) repeat; --main-bg-1: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJklEQVQImWMwjbP+j4xt05z/M6ALmMZZIwRhAnBBmABcJbIKmAQAPFUtrhZjhn4AAAAASUVORK5CYII=) repeat; --main-bg-2: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVQImWM49fDcf2R86Oax/wzoAqcenkMIwgTggjABuEpkFTAJAKeOVhEmGaLLAAAAAElFTkSuQmCC) repeat; --main-bg-color: var(--HunterGreen); --main-bg-position: center; --main-bg-repeat: no-repeat; --main-bg-size: cover; --main-bg-opacity: 0.92; --color-primary: var(--HunterGreen); --color-secondary: var(--DarkGray); --color-tertiary: var(--LightGray); --color-lightbg: var(--LightestGray); --color-blank: var(--White); --color-input: var(--Black); --color-input-bg: var(--White); --color-input-bd: var(--Black); --color-bg-white: var(--White); --color-hl: var(--HotLava); --color-hl-bd: var(--Black); --color-splitter: var(--BattleshipGray); --color-scrollbar: var(--HunterGreen); --color-plain-region: var(--White); --color-plain-bd: var(--HunterGreen); --bg-readonly: var(--color-input-bg) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAK0lEQVQYlWP48OHDfwY8AC6PSyGGOLoAThtgEoScQLwCglYR7WgMcWLCCQAefkDAYjZgwQAAAABJRU5ErkJggg==) repeat; --color-btn-primary: var(--CobaltBlue); --color-btn-primary-bd: var(--CobaltBlue); --color-btn-secondary: var(--Eggplant); --color-btn-secondary-bd: var(--Eggplant); --color-btn-tertiary: var(--BattleshipGray); --color-btn-tertiary-bd: var(--Black); --color-btn-danger: var(--BloodRed); --color-btn-danger-bd: var(--BloodRed); --color-btn-helper: var(--CobaltBlue); --color-btn-helper-bd: var(--CobaltBlue); --color-btn-hover: var(--LighterGray); --color-Nav: var(--Black); --color-NavInsert: var(--CobaltBlue); --color-NavDelete: var(--Eggplant); --color-NavUpdate: var(--HunterGreen); --color-NavCancel: var(--BloodRed); --color-NavSearch: var(--CobaltBlue); --color-popup: var(--White); --color-popup-bd: var(--Black); --font-color-popup: var(--Black); --color-popup-selected: var(--DarkGray); --color-popup-selected-bd: var(--Black); --font-color-popup-selected: var(--White); --font-family: 'Heebo', sans-serif; --font-weight-normal: 400; --font-weight-heavy: 700; --font-size-xs: 9px; --font-size-sm: 10px; --font-size-md: 11px; --font-size-reg: 12px; --font-size-big: 13px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-xxl: 18px; --font-size-x2: 20px; --font-color-primary: var(--White); --font-color-inverse: var(--Black); --font-color-menu: var(--White); --font-color-keyword: var(--Black); --font-color-atom: var(--Black); --font-color-number: var(--Black); --font-color-def: var(--Black); --font-color-variable: var(--Black); --font-color-operator: var(--Black); --font-color-comment: var(--Black); --font-color-string: var(--Black); --font-color-string-2: var(--Black); --font-color-meta: var(--Black); --font-color-builtin: var(--Black); --font-color-tag: var(--Black); --font-color-attribute: var(--Black); --font-color-header: var(--Black); --font-color-hr: var(--Black); --font-color-link: var(--Black); --font-color-error: var(--Black); --font-color-bracket: var(--Black); --font-color-punctuation: var(--Black); --bd-radius: 0.5rem; } /****************************************************************************** ** 500Files Theme */ .theme-05-500Files { --main-bg-0: url(../art/shutterstock_files_hd.jpg); --main-bg-1: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAP0lEQVQYlWNwy/L5TwhrO+j9ZyBGkVuWD36FMEV4FSIrwqkQXRFWhdgUYSiEKcJrIrokVjfisg7F17gUoSsGAK3pwKPatm7iAAAAAElFTkSuQmCC) repeat; --main-bg-2: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVQImWM49fDcf2R86Oax/wzoAqcenkMIwgTggjABuEpkFTAJAKeOVhEmGaLLAAAAAElFTkSuQmCC) repeat; --main-bg-color: var(--HunterGreen); --main-bg-position: center; --main-bg-repeat: no-repeat; --main-bg-size: cover; --main-bg-opacity: 0.92; --color-primary: var(--HunterGreen); --color-secondary: var(--DarkGray); --color-tertiary: var(--LightGray); --color-lightbg: var(--LightestGray); --color-blank: var(--White); --color-input: var(--Black); --color-input-bg: var(--White); --color-input-bd: var(--Black); --color-bg-white: var(--White); --color-hl: var(--HotLava); --color-hl-bd: var(--Black); --color-splitter: var(--BattleshipGray); --color-scrollbar: var(--HunterGreen); --color-plain-region: var(--White); --color-plain-bd: var(--HunterGreen); --bg-readonly: var(--color-input-bg) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAK0lEQVQYlWP48OHDfwY8AC6PSyGGOLoAThtgEoScQLwCglYR7WgMcWLCCQAefkDAYjZgwQAAAABJRU5ErkJggg==) repeat; --color-btn-primary: var(--CobaltBlue); --color-btn-primary-bd: var(--CobaltBlue); --color-btn-secondary: var(--Eggplant); --color-btn-secondary-bd: var(--Eggplant); --color-btn-tertiary: var(--BattleshipGray); --color-btn-tertiary-bd: var(--Black); --color-btn-danger: var(--BloodRed); --color-btn-danger-bd: var(--BloodRed); --color-btn-helper: var(--CobaltBlue); --color-btn-helper-bd: var(--CobaltBlue); --color-btn-hover: var(--LighterGray); --color-Nav: var(--Black); --color-NavInsert: var(--CobaltBlue); --color-NavDelete: var(--Eggplant); --color-NavUpdate: var(--HunterGreen); --color-NavCancel: var(--BloodRed); --color-NavSearch: var(--CobaltBlue); --color-popup: var(--White); --color-popup-bd: var(--Black); --font-color-popup: var(--Black); --color-popup-selected: var(--DarkGray); --color-popup-selected-bd: var(--Black); --font-color-popup-selected: var(--White); --font-family: 'Georama', sans-serif; --font-weight-normal: 400; --font-weight-heavy: 700; --font-size-xs: 9px; --font-size-sm: 10px; --font-size-md: 11px; --font-size-reg: 12px; --font-size-big: 13px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-xxl: 18px; --font-size-x2: 20px; --font-color-primary: var(--White); --font-color-inverse: var(--Black); --font-color-menu: var(--White); --font-color-keyword: var(--Black); --font-color-atom: var(--Black); --font-color-number: var(--Black); --font-color-def: var(--Black); --font-color-variable: var(--Black); --font-color-operator: var(--Black); --font-color-comment: var(--Black); --font-color-string: var(--Black); --font-color-string-2: var(--Black); --font-color-meta: var(--Black); --font-color-builtin: var(--Black); --font-color-tag: var(--Black); --font-color-attribute: var(--Black); --font-color-header: var(--Black); --font-color-hr: var(--Black); --font-color-link: var(--Black); --font-color-error: var(--Black); --font-color-bracket: var(--Black); --font-color-punctuation: var(--Black); --bd-radius: 0.25rem; } /****************************************************************************** ** CultivateERP Theme */ .theme-06-CultivateERP { --main-bg-0: url(../art/shutterstock_cannabis_hd.jpg); --main-bg-1: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAN0lEQVQYlWNgYGD4Twhr+Oj9Z8AhiI2PKYhOoyjEYxJCIRZB4k0kyo1EmYjDI9jdiNUZuNyGjgFdt3BF+sII+QAAAABJRU5ErkJggg==) repeat; --main-bg-2: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQYlWP4+uvrf0L49YfX/xmwCWLjM2ATRKchCv/jNwmhEIsgNsUMuEwgyo1EmYjNIzjdiM0ZDCiC/3EHOgBxA4JuWJ8mMgAAAABJRU5ErkJggg==) repeat; --main-bg-color: var(--CannabisGreen); --main-bg-position: center; --main-bg-repeat: no-repeat; --main-bg-size: cover; --main-bg-opacity: 0.95; --color-primary: var(--CannabisGreen); --color-secondary: var(--DarkGray); --color-tertiary: var(--LightGray); --color-lightbg: var(--LightestGray); --color-blank: var(--White); --color-input: var(--Black); --color-input-bg: var(--White); --color-input-bd: var(--Black); --color-bg-white: var(--White); --color-hl: var(--HotLava); --color-hl-bd: var(--Black); --color-splitter: var(--BattleshipGray); --color-scrollbar: var(--Black); --color-plain-region: var(--White); --color-plain-bd: var(--CannabisGreen); --bg-readonly: var(--color-input-bg) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAK0lEQVQYlWP48OHDfwY8AC6PSyGGOLoAThtgEoScQLwCglYR7WgMcWLCCQAefkDAYjZgwQAAAABJRU5ErkJggg==) repeat; --color-btn-primary: var(--CannabisGreen); --color-btn-primary-bd: var(--CannabisGreen); --color-btn-secondary: var(--BattleshipGray); --color-btn-secondary-bd: var(--BattleshipGray); --color-btn-tertiary: var(--Eggplant); --color-btn-tertiary-bd: var(--Black); --color-btn-danger: var(--BloodRed); --color-btn-danger-bd: var(--BloodRed); --color-btn-helper: var(--CobaltBlue); --color-btn-helper-bd: var(--CobaltBlue); --color-btn-hover: var(--LighterGray); --color-Nav: var(--Black); --color-NavInsert: var(--CobaltBlue); --color-NavDelete: var(--Eggplant); --color-NavUpdate: var(--HunterGreen); --color-NavCancel: var(--BloodRed); --color-NavSearch: var(--CobaltBlue); --color-popup: var(--White); --color-popup-bd: var(--Black); --font-color-popup: var(--Black); --color-popup-selected: var(--DarkGray); --color-popup-selected-bd: var(--Black); --font-color-popup-selected: var(--White); --font-family: 'PT Sans Narrow', sans-serif; --font-weight-normal: 400; --font-weight-heavy: 700; --font-size-xs: 9px; --font-size-sm: 10px; --font-size-md: 11px; --font-size-reg: 12px; --font-size-big: 13px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-xxl: 18px; --font-size-x2: 20px; --font-color-primary: var(--White); --font-color-inverse: var(--Black); --font-color-menu: var(--White); --font-color-keyword: var(--Black); --font-color-atom: var(--Black); --font-color-number: var(--Black); --font-color-def: var(--Black); --font-color-variable: var(--Black); --font-color-operator: var(--Black); --font-color-comment: var(--Black); --font-color-string: var(--Black); --font-color-string-2: var(--Black); --font-color-meta: var(--Black); --font-color-builtin: var(--Black); --font-color-tag: var(--Black); --font-color-attribute: var(--Black); --font-color-header: var(--Black); --font-color-hr: var(--Black); --font-color-link: var(--Black); --font-color-error: var(--Black); --font-color-bracket: var(--Black); --font-color-punctuation: var(--Black); --bd-radius: 0.25rem; } /****************************************************************************** ** Cobalt/White Theme */ .theme-07-CobaltWhite { --main-bg-0: var(--CobaltBlue); --main-bg-1: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJklEQVQImWMwjbP+j4xt05z/M6ALmMZZIwRhAnBBmABcJbIKmAQAPFUtrhZjhn4AAAAASUVORK5CYII=) repeat; --main-bg-2: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVQImWM49fDcf2R86Oax/wzoAqcenkMIwgTggjABuEpkFTAJAKeOVhEmGaLLAAAAAElFTkSuQmCC) repeat; --main-bg-color: var(--CobaltBlue); --main-bg-position: center; --main-bg-repeat: repeat; --main-bg-size: cover; --main-bg-opacity: 0.92; --color-primary: var(--CobaltBlue); --color-secondary: var(--White); --color-tertiary: var(--LightGray); --color-lightbg: var(--LightestGray); --color-blank: var(--White); --color-input: var(--Black); --color-input-bg: var(--White); --color-input-bd: var(--Black); --color-bg-white: var(--White); --color-hl: var(--HotLava); --color-hl-bd: var(--Black); --color-splitter: var(--BattleshipGray); --color-scrollbar: var(--White); --color-plain-region: var(--CobaltBlue); --color-plain-bd: var(--CobaltBlue); --bg-readonly: var(--color-input-bg) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAK0lEQVQYlWP48OHDfwY8AC6PSyGGOLoAThtgEoScQLwCglYR7WgMcWLCCQAefkDAYjZgwQAAAABJRU5ErkJggg==) repeat; --color-btn-primary: var(--CobaltBlue); --color-btn-primary-bd: var(--CobaltBlue); --color-btn-secondary: var(--Eggplant); --color-btn-secondary-bd: var(--Eggplant); --color-btn-tertiary: var(--BattleshipGray); --color-btn-tertiary-bd: var(--Black); --color-btn-danger: var(--BloodRed); --color-btn-danger-bd: var(--BloodRed); --color-btn-helper: var(--CobaltBlue); --color-btn-helper-bd: var(--CobaltBlue); --color-btn-hover: var(--LighterGray); --color-Nav: var(--Black); --color-NavInsert: var(--CobaltBlue); --color-NavDelete: var(--Eggplant); --color-NavUpdate: var(--HunterGreen); --color-NavCancel: var(--BloodRed); --color-NavSearch: var(--CobaltBlue); --color-popup: var(--White); --color-popup-bd: var(--Black); --font-color-popup: var(--Black); --color-popup-selected: var(--DarkGray); --color-popup-selected-bd: var(--Black); --font-color-popup-selected: var(--White); --font-family: 'Kufam', sans-serif; --font-weight-normal: 400; --font-weight-heavy: 700; --font-size-xs: 9px; --font-size-sm: 10px; --font-size-rg: 12px; --font-size-md: 11px; --font-size-reg: 12px; --font-size-big: 13px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-xxl: 18px; --font-size-x2: 20px; --font-color-primary: var(--White); --font-color-inverse: var(--Black); --font-color-menu: var(--White); --font-color-keyword: var(--White); --font-color-atom: var(--White); --font-color-number: var(--HotLava); --font-color-def: var(--White); --font-color-variable: var(--White); --font-color-operator: var(--LightGray); --font-color-comment: var(--LightestGray); --font-color-string: var(--White); --font-color-string-2: var(--White); --font-color-meta: var(--White); --font-color-builtin: var(--White); --font-color-tag: var(--White); --font-color-attribute: var(--White); --font-color-header: var(--White); --font-color-hr: var(--White); --font-color-link: var(--White); --font-color-error: var(--White); --font-color-bracket: var(--LightGray); --font-color-punctuation: var(--LightGray); --bd-radius: 0.25rem; } /****************************************************************************** ** White/Cobalt Theme */ .theme-08-WhiteCobalt { --main-bg-color: var(--White); --main-bg-position: center; --main-bg-repeat: repeat; --main-bg-size: cover; --main-bg-opacity: 1.0; --main-bg-0: var(--White); --main-bg-1: var(--main-bg-color) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHklEQVQYlWMQCN/zn8F9NQrGJsaAIYALD6DC4eQZALrLwulDsHV2AAAAAElFTkSuQmCC) repeat; --main-bg-2: var(--main-bg-color) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHElEQVQYlWNYefa/LzGYYeXZ/74MxIBRhVRRCAClWzRniZ2ELgAAAABJRU5ErkJggg==) repeat; --color-primary: var(--CobaltBlue); --color-secondary: var(--CobaltBlue); --color-tertiary: var(--LightGray); --color-lightbg: var(--LightestGray); --color-blank: var(--White); --color-input: var(--Black); --color-input-bg: var(--White); --color-input-bd: var(--CobaltBlue); --color-bg-white: var(--White); --color-hl: var(--HotLava); --color-hl-bd: var(--Cobaltblue); --color-splitter: var(--BattleshipGray); --color-scrollbar: var(--CobaltBlue); --color-plain-region: var(--White); --color-plain-bd: var(--CobaltBlue); --bg-readonly: var(--color-input-bg) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAK0lEQVQYlWP48OHDfwY8AC6PSyGGOLoAThtgEoScQLwCglYR7WgMcWLCCQAefkDAYjZgwQAAAABJRU5ErkJggg==) repeat; --color-btn-primary: var(--CobaltBlue); --color-btn-primary-bd: var(--CobaltBlue); --color-btn-secondary: var(--Blueish); --color-btn-secondary-bd: var(--Blueish); --color-btn-tertiary: var(--BattleshipGray); --color-btn-tertiary-bd: var(--Black); --color-btn-danger: var(--BloodRed); --color-btn-danger-bd: var(--BloodRed); --color-btn-helper: var(--CobaltBlue); --color-btn-helper-bd: var(--CobaltBlue); --color-btn-hover: var(--LighterGray); --color-Nav: var(--Black); --color-NavInsert: var(--CobaltBlue); --color-NavDelete: var(--Eggplant); --color-NavUpdate: var(--HunterGreen); --color-NavCancel: var(--BloodRed); --color-NavSearch: var(--CobaltBlue); --color-popup: var(--White); --color-popup-bd: var(--CobaltBlue); --font-color-popup: var(--Black); --color-popup-selected: var(--CobaltBlue); --color-popup-selected-bd: var(--CobaltBlue); --font-color-popup-selected: var(--White); --font-family: 'Heebo', sans-serif; --font-weight-normal: 400; --font-weight-heavy: 700; --font-size-xs: 9px; --font-size-sm: 10px; --font-size-md: 11px; --font-size-reg: 12px; --font-size-big: 13px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-xxl: 18px; --font-size-x2: 20px; --font-color-primary: var(--White); --font-color-inverse: var(--Black); --font-color-menu: var(--White); --font-color-keyword: var(--Black); --font-color-atom: var(--Black); --font-color-number: var(--Black); --font-color-def: var(--Black); --font-color-variable: var(--Black); --font-color-operator: var(--Black); --font-color-comment: var(--Black); --font-color-string: var(--Black); --font-color-string-2: var(--Black); --font-color-meta: var(--Black); --font-color-builtin: var(--Black); --font-color-tag: var(--Black); --font-color-attribute: var(--Black); --font-color-header: var(--Black); --font-color-hr: var(--Black); --font-color-link: var(--Black); --font-color-error: var(--Black); --font-color-bracket: var(--Black); --font-color-punctuation: var(--Black); --bd-radius: 0.20rem; } /****************************************************************************** ** Mustafar Theme ** Mostly a dark theme, black and red with bits of orange and yellow thrown in */ .theme-09-Mustafar { --main-bg-0: url(../art/shutterstock_lava_hd.jpg); --main-bg-1: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAMklEQVQYlWNgYGD4jw13MTOjswkqgGGiTENViMs08qwmYBpxVsMVElCA22qsmKACKAYAAw9u3f+ZodoAAAAASUVORK5CYII=) repeat; --main-bg-2: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAHklEQVQYlWNgYGD4jw03MCgg83FKIDBOCVQ8jK0DAMqRVlBFZdyCAAAAAElFTkSuQmCC) repeat; --main-bg-color: var(--Black); --main-bg-position: center; --main-bg-repeat: no-repeat; --main-bg-size: cover; --main-bg-opacity: 0.90; --color-primary: var(--HotLava); --color-secondary: var(--BloodRed); --color-tertiary: var(--BloodRed); --color-lightbg: var(--LightestGray); --color-blank: var(--White); --color-input: var(--White); --color-input-bg: var(--BloodRed); --color-input-bd: var(--Black); --color-bg-white: var(--Black); --color-hl: var(--HotLava); --color-hl-bd: var(--Black); --color-splitter: var(--BattleshipGray); --color-scrollbar: var(--HotLava); --color-plain-region: var(--Black); --color-plain-bd: var(--BloodRed); --bg-readonly: var(--color-input-bg) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAK0lEQVQYlWMoYGD4z4AHwOVxKcQQRxfAaQNMgpATiFdA0CqiHY0hTkw4AQDNuRhgYcD7OQAAAABJRU5ErkJggg==) repeat; --color-btn-primary: var(--BloodRed); --color-btn-primary-bd: var(--Black); --color-btn-secondary: var(--Black); --color-btn-secondary-bd: var(--BloodRed); --color-btn-tertiary: var(--BloodRed); --color-btn-tertiary-bd: var(--Black); --color-btn-danger: var(--BloodRed); --color-btn-danger-bd: var(--Black); --color-btn-helper: var(--HotLava); --color-btn-helper-bd: var(--HotLava); --color-btn-hover: var(--LighterGray); --color-Nav: var(--Black); --color-NavInsert: var(--Greenish); --color-NavDelete: var(--Redish); --color-NavUpdate: var(--Greenish); --color-NavCancel: var(--Yellowish); --color-NavSearch: var(--CobaltBlue); --color-popup: var(--BloodRed); --color-popup-bd: var(--Black); --font-color-popup: var(--White); --color-popup-selected: var(--HotLava); --color-popup-selected-bd: var(--Black); --font-color-popup-selected: var(--Black); --font-family: 'Oxanium', cursive; --font-weight-normal: 400; --font-weight-heavy: 700; --font-size-xs: 9px; --font-size-sm: 10px; --font-size-md: 11px; --font-size-reg: 12px; --font-size-big: 13px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-xxl: 18px; --font-size-x2: 20px; --font-color-primary: var(--Black); --font-color-inverse: var(--White); --font-color-menu: var(--White); --font-color-keyword: var(--White); --font-color-atom: var(--White); --font-color-number: var(--HotLava); --font-color-def: var(--White); --font-color-variable: var(--White); --font-color-operator: var(--White); --font-color-comment: var(--LightGray); --font-color-string: var(--White); --font-color-string-2: var(--White); --font-color-meta: var(--White); --font-color-builtin: var(--White); --font-color-tag: var(--White); --font-color-attribute: var(--White); --font-color-header: var(--White); --font-color-hr: var(--White); --font-color-link: var(--White); --font-color-error: var(--White); --font-color-bracket: var(--White); --font-color-punctuation: var(--White); --bd-radius: 0.15rem; } /****************************************************************************** ** Mono/Light Theme ** Fewest colours as possible, minimalist white */ .theme-10-MonoLight { --main-bg-0: none; --main-bg-1: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJklEQVQImWMwjbP+j4xt05z/M6ALmMZZIwRhAnBBmABcJbIKmAQAPFUtrhZjhn4AAAAASUVORK5CYII=) repeat; --main-bg-2: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVQImWM49fDcf2R86Oax/wzoAqcenkMIwgTggjABuEpkFTAJAKeOVhEmGaLLAAAAAElFTkSuQmCC) repeat; --main-bg-color: var(--White); --main-bg-position: center; --main-bg-repeat: no-repeat; --main-bg-size: cover; --main-bg-opacity: 0.92; --color-primary: var(--LightestGray); --color-secondary: var(--DarkGray); --color-tertiary: var(--LightGray); --color-blank: var(--White); --color-input: var(--Black); --color-input-bg: var(--White); --color-input-bd: var(--Black); --color-bg-white: var(--White); --color-hl: var(--HotLava); --color-hl-bd: var(--Black); --color-splitter: var(--BattleshipGray); --color-scrollbar: var(--Black); --color-plain-region: var(--White); --color-plain-bd: var(--DarkGray); --bg-readonly: var(--color-input-bg) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAK0lEQVQYlWP48OHDfwY8AC6PSyGGOLoAThtgEoScQLwCglYR7WgMcWLCCQAefkDAYjZgwQAAAABJRU5ErkJggg==) repeat; --color-btn-primary: var(--CobaltBlue); --color-btn-primary-bd: var(--CobaltBlue); --color-btn-secondary: var(--Eggplant); --color-btn-secondary-bd: var(--Eggplant); --color-btn-tertiary: var(--BattleshipGray); --color-btn-tertiary-bd: var(--BattleshipGray); --color-btn-danger: var(--BloodRed); --color-btn-danger-bd: var(--BloodRed); --color-btn-helper: var(--CobaltBlue); --color-btn-helper-bd: var(--CobaltBlue); --color-btn-hover: var(--LighterGray); --color-Nav: var(--Black); --color-NavInsert: var(--CobaltBlue); --color-NavDelete: var(--Eggplant); --color-NavUpdate: var(--HunterGreen); --color-NavCancel: var(--BloodRed); --color-NavSearch: var(--CobaltBlue); --color-popup: var(--White); --color-popup-bd: var(--Black); --font-color-popup: var(--Black); --color-popup-selected: var(--DarkGray); --color-popup-selected-bd: var(--Black); --font-color-popup-selected: var(--White); --font-family: 'Heebo', sans-serif; --font-weight-normal: 400; --font-weight-heavy: 700; --font-size-xs: 9px; --font-size-sm: 10px; --font-size-md: 11px; --font-size-reg: 12px; --font-size-big: 13px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-xxl: 18px; --font-size-x2: 20px; --font-color-primary: var(--White); --font-color-inverse: var(--Black); --font-color-menu: var(--White); --font-color-keyword: var(--Black); --font-color-atom: var(--Black); --font-color-number: var(--Black); --font-color-def: var(--Black); --font-color-variable: var(--Black); --font-color-operator: var(--Black); --font-color-comment: var(--Black); --font-color-string: var(--Black); --font-color-string-2: var(--Black); --font-color-meta: var(--Black); --font-color-builtin: var(--Black); --font-color-tag: var(--Black); --font-color-attribute: var(--Black); --font-color-header: var(--Black); --font-color-hr: var(--Black); --font-color-link: var(--Black); --font-color-error: var(--Black); --font-color-bracket: var(--Black); --font-color-punctuation: var(--Black); --bd-radius: 0.25rem; } /****************************************************************************** ** Mono/Dark Theme ** Fewest colours as possible, minimalist black */ .theme-11-MonoDark { --main-bg-0: none; --main-bg-1: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJklEQVQImWMwjbP+j4xt05z/M6ALmMZZIwRhAnBBmABcJbIKmAQAPFUtrhZjhn4AAAAASUVORK5CYII=) repeat; --main-bg-2: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVQImWM49fDcf2R86Oax/wzoAqcenkMIwgTggjABuEpkFTAJAKeOVhEmGaLLAAAAAElFTkSuQmCC) repeat; --main-bg-color: var(--White); --main-bg-position: center; --main-bg-repeat: no-repeat; --main-bg-size: cover; --main-bg-opacity: 0.92; --color-primary: var(--Black); --color-secondary: var(--DarkGray); --color-tertiary: var(--LightGray); --color-lightbg: var(--LightestGray); --color-blank: var(--White); --color-input: var(--Black); --color-input-bg: var(--White); --color-input-bd: var(--Black); --color-bg-white: var(--White); --color-hl: var(--HotLava); --color-hl-bd: var(--Black); --color-splitter: var(--BattleshipGray); --color-scrollbar: var(--White); --color-plain-region: var(--Black); --color-plain-bd: var(--DarkGray); --bg-readonly: var(--color-input-bg) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAK0lEQVQYlWP48OHDfwY8AC6PSyGGOLoAThtgEoScQLwCglYR7WgMcWLCCQAefkDAYjZgwQAAAABJRU5ErkJggg==) repeat; --color-btn-primary: var(--CobaltBlue); --color-btn-primary-bd: var(--CobaltBlue); --color-btn-secondary: var(--Eggplant); --color-btn-secondary-bd: var(--Eggplant); --color-btn-tertiary: var(--BattleshipGray); --color-btn-tertiary-bd: var(--BattleshipGray); --color-btn-danger: var(--BloodRed); --color-btn-danger-bd: var(--BloodRed); --color-btn-helper: var(--CobaltBlue); --color-btn-helper-bd: var(--CobaltBlue); --color-btn-hover: var(--LighterGray); --color-Nav: var(--Black); --color-NavInsert: var(--CobaltBlue); --color-NavDelete: var(--Eggplant); --color-NavUpdate: var(--HunterGreen); --color-NavCancel: var(--BloodRed); --color-NavSearch: var(--CobaltBlue); --color-popup: var(--White); --color-popup-bd: var(--Black); --font-color-popup: var(--Black); --color-popup-selected: var(--DarkGray); --color-popup-selected-bd: var(--Black); --font-color-popup-selected: var(--White); --font-family: 'Roboto', serif; --font-weight-normal: 400; --font-weight-heavy: 700; --font-size-xs: 9px; --font-size-sm: 10px; --font-size-md: 11px; --font-size-reg: 12px; --font-size-big: 13px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-xxl: 18px; --font-size-x2: 20px; --font-color-primary: var(--Black); --font-color-inverse: var(--White); --font-color-menu: var(--White); --font-color-keyword: var(--White); --font-color-atom: var(--White); --font-color-number: var(--White); --font-color-def: var(--White); --font-color-variable: var(--White); --font-color-operator: var(--White); --font-color-comment: var(--LightestGray); --font-color-string: var(--White); --font-color-string-2: var(--White); --font-color-meta: var(--White); --font-color-builtin: var(--White); --font-color-tag: var(--White); --font-color-attribute: var(--White); --font-color-header: var(--White); --font-color-hr: var(--White); --font-color-link: var(--White); --font-color-error: var(--White); --font-color-bracket: var(--White); --font-color-punctuation: var(--Black); --bd-radius: 0.25rem; } /****************************************************************************** ** CSS Reset */ * { text-decoration: none; font-size: 1em; outline: none; padding: 0; margin: 0; } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { white-space: normal; font-size: 1em; font: inherit; } dfn, i, cite, var, address, em { font-style: normal; } th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td, center { vertical-align: top; text-align: left; } body { background: black; line-height: 1; color: white; } q { quotes: "" ""; } ul, ol, dir, menu { list-style: auto; } sub, sup { vertical-align: baseline; } a { color: inherit; } hr { display: none; } font { color: inherit !important; font: inherit !important; color: inherit !important; /* editor's note: necessary? */ } marquee { overflow: inherit !important; -moz-binding: none; } blink { text-decoration: none; } nobr { white-space: normal; } /****************************************************************************** ** html/body/page styles ** ** As this is typically a one-page app, important to get everything right. ** Particularly the sizing aspects. Other things in here were added to help ** ensure everything looks good on iOS devices as well. */ html, body { -webkit-tap-hl-color: transparent; font-family: var(--font-family) !important; overflow-x:hidden; overflow-y:auto; } .Main { width: 100vw; height: 100vh; min-width: 100vw; min-height: 100vh; background: var(--main-bg-0) !important; background-size: var(--main-bg-size) !important; background-attachment: fixed !important; border-radius: var(--bd-radius) !important; } .noHover{ pointer-events: none; } .DropShadow { filter: drop-shadow(2px 2px 2px black); } .DropShadowThin { filter: drop-shadow(1px 1px 2px black); } .DropShadowLite { filter: drop-shadow(2px 2px 2px #808080); } *:focus, .focus-now { outline: 0 !important; -webkit-box-shadow: 0 0 0 3px var(--color-hl) !important; box-shadow: 0 0 0 3px var(--color-hl) !important; } /* Remove focus styles for non-keyboard :focus */ *:focus:not(.focus-visible), .focus-invisible { outline: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } /* Make sure toasts are on top */ #toast-container { z-index: 9999999 !important; } .Z1 { z-index: 1; } .Z2 { z-index: 2; } .Z3 { z-index: 3; } .FONT-XS { font-size: var(--font-size-xs ); } .FONT-SM { font-size: var(--font-size-sm ); } .FONT-MD { font-size: var(--font-size-md ); } .FONT-REG { font-size: var(--font-size-reg ); } .FONT-BIG { font-size: var(--font-size-big ); } .FONT-LG { font-size: var(--font-size-lg ); } .FONT-XL { font-size: var(--font-size-xl ); } .FONT-XXL { font-size: var(--font-size-xxl ); } .FONT-X2 { font-size: var(--font-size-x2 ); } /****************************************************************************** ** FontAwesome Tweaks */ .fa-spin { -webkit-animation-duration: 1s !important; animation-duration: 1s !important; } .fa-xl { font-size: 1.5em; } .fa-xxl { font-size: 1.75em; } .fa-stack { font-size: 0.5em; } i { vertical-align: middle !important; } /****************************************************************************** ** Bootstrap overrides ** ** Bootstrap defines a bunch of things, and we use the bootstrap classes in the ** app all over the place, so here we make changes to match up with the theme. */ .order-0 { order: 0 !important; } .order-1 { order: 1 !important; } .order-2 { order: 2 !important; } .order-3 { order: 3 !important; } .order-4 { order: 4 !important; } .order-5 { order: 5 !important; } .order-6 { order: 6 !important; } .order-7 { order: 7 !important; } .order-8 { order: 8 !important; } .order-9 { order: 9 !important; } .order-10 { order: 10 !important; } .order-11 { order: 11 !important; } .order-12 { order: 12 !important; } .order-13 { order: 13 !important; } .order-14 { order: 14 !important; } .order-15 { order: 15 !important; } .order-16 { order: 16 !important; } .order-17 { order: 17 !important; } .order-18 { order: 18 !important; } .order-19 { order: 19 !important; } .order-20 { order: 20 !important; } .bg-blank { background-color: var(-color-blank) !important; } .bg-white { background-color: var(--color-bg-white) !important; } .bg-dark { background: var(--main-bg-1) !important; } div.bg-light, span.bg-light, .bg-light { background: var(--main-bg-2) !important; } .bg-lightbg, span.bg-lightbg, div.bg-lightbg { background: var(--color-lightbg) !important; } .btn-primary { background-color: var(--color-btn-primary) !important; border-color: var(--color-btn-primary-bd) !important; } .btn-primary:hover { filter: brightness(75%); } .btn-secondary { background-color: var(--color-btn-secondary)!important; border-color: var(--color-btn-secondary-bd) !important; } .btn-secondary:hover { filter: brightness(75%); } .btn-tertiary { background-color: var(--color-btn-tertiary) !important; border-color: var(--color-btn-tertiary-bd) !important; color: var(--White) !important; } .btn-tertiary:hover { filter: brightness(75%); } .btn-danger { background-color: var(--color-btn-danger) !important; border-color: var(--color-btn-danger-bd) !important; } .btn-helper { background-color: var(--color-btn-helper) !important; border-color: var(--color-btn-helper-bd) !important; } .btn-link { color: var(--color-btn-helper) !important; font-size: var(--font-size-reg) !important; font-weight: var(--font-weight-normal) !important; font-style: normal !important; } .border-primary, div.border-primary, img.border-primary, span.border-primary, input.border-primary, select.border-primary, button.border-primary { border: 1px solid var(--color-primary) !important; } .border-secondary, div.border-secondary, img.border-secondary, span.border-secondary, input.border-secondary, select.border-secondary, button.border-secondary { border: 1px solid var(--color-secondary) !important; } .border-tertiary, div.border-tertiary, img.border-tertiary, span.border-tertiary, input.border-tertiary, select.border-tertiary, button.border-tertiary { border: 1px solid var(--color-tertiary) !important; } .btn-group-sm>.btn, .btn, div.btn, .btn-sm, div.btn-sm, .btn-group-sm>.btn, div.btn-group-sm>.btn { border-radius: var(--bd-radius); } rounded, div.rounded, img.rounded, span.rounded, input.rounded, select.rounded, textarea.rounded, btn.rounded, button.rounded { border-radius: var(--bd-radius) !important; } rounded-top, div.rounded-top, img.rounded-top, span.rounded-top, input.rounded-top, select.rounded-top, button.rounded-top { border-top-left-radius: var(--bd-radius) !important; border-top-right-radius: var(--bd-radius) !important; } rounded-bottom, div.rounded-bottom, img.rounded-bottom, span.rounded-bottom, input.rounded-bottom, select.rounded-bottom, button.rounded-bottom { border-bottom-left-radius: var(--bd-radius) !important; border-bottom-right-radius: var(--bd-radius) !important; } rounded-start, div.rounded-start, img.rounded-start, span.rounded-start, input.rounded-start, select.rounded-start, button.rounded-start { border-top-left-radius: var(--bd-radius) !important; border-bottom-left-radius: var(--bd-radius) !important; } rounded-end, div.rounded-end, img.rounded-end, span.rounded-end, input.rounded-end, select.rounded-end, button.rounded-end { border-top-right-radius: var(--bd-radius) !important; border-bottom-right-radius: var(--bd-radius) !important; } /****************************************************************************** ** Tabulator Tables */ div.ShadeRow { background-color: var(--color-secondary) !important; color: var(--font-color-primary) !important; } div.tabulator-cell.ListHighlight { font-weight: 900 !important; font-style: italic !important; font-size: var(--font-size-md) !important; height: 19px !important; } button.TabOverlay { border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; background: var(--main-bg-1) !important; color: var(--font-color-menu) !important; padding: 0px !important; } div.tabulator { font-size: var(--font-size-sm) !important; font-family: var(--font-family) !important; color: var(--font-color-string); } div.tabulator-tableholder { background: var(--color-blank) !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .TabListBox div > div.tabulator-tableholder { background: var(--color-blank) !important; -webkit-box-shadow: none !important; box-shadow: none !important; min-height: calc(100% - 20px) !important; height: calc(100% - 20px) !important; max-height: calc(100% - 20px) !important; } .TabDashboard div > div.tabulator-tableholder { background: var(--color-blank) !important; -webkit-box-shadow: none !important; box-shadow: none !important; min-height: calc(100% - 44px) !important; height: calc(100% - 44px) !important; max-height: calc(100% - 44px) !important; } #pnl_001 { filter: drop-shadow(0px 0px 4px black); } div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(2), div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(3), div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(4) { display: none !important; } .Searching div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(1), .Searching div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(3), .Searching div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(4) { display: none !important; } .Searching div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(2) { display: inherit !important; } .Preparing div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(1), .Preparing div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(2), .Preparing div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(4) { display: none !important; } .Preparing div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(3) { display: inherit !important; } .Loading div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(1), .Loading div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(2), .Loading div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(3) { display: none !important; } .Loading div.tabulator-tableholder > div.tabulator-placeholder > div > span:nth-child(4) { display: inherit !important; } div.tabulator-placeholder { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: unset !important; color: var(--font-color-string); height:inherit; } div.tabulator-row { min-height: 19px; border-bottom: 1px solid silver; } div.tabulator-footer { border-top: 0px solid var(--White) !important; } div.tabulator-cell { padding: 2px 5px 2px 5px !important; } .tabulator-col .tabulator-col-sorter svg { display: none; } /* Display the fa-sort icon when the column is not sorted */ .tabulator-col[aria-sort="none"] .tabulator-col-sorter svg.fa-sort { display: inline-block; color: #aaa; } /* Display the fa-sort-up icon when the column is sorted in ascending order */ .tabulator-col[aria-sort="asc"] .tabulator-col-sorter svg.fa-sort-up { display: inline-block; color: #000; } /* Display the fa-sort-down icon when the column is sorted in descending order */ .tabulator-col[aria-sort="desc"] .tabulator-col-sorter svg.fa-sort-down { display: inline-block; color: #000; } div.tabulator-row-editing { background-color: var(--HotLava) !important; } div.tabulator-cell.tabulator-editing { margin: 0 !important; padding: 0 !important; } div.tabulator-cell.tabulator-editing, div.tabulator-cell.tabulator-editing:focus, div.tabulator-cell.tabulator-editing > input, div.tabulator-cell.tabulator-editing > input:focus { outline:none !important; border-radius: 0px !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: var(--color-input) !important; background: var(--color-input-bg) !important; border: thin solid var(--HotLava) !important; padding: 0px; margin: 0px; z-index:10; } span.tabulator-header-menu-button, .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button { padding: 0 4px 0px 0px !important; } .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title { padding-right: 15px !important; } div.tabulator-col-content > div > div.tabulator-col-title { padding-right: 15px important; } div.tabulator-menu { z-index: 999999; margin: 0px !important; padding: 0px !important; font-size: var(--font-size-sm) !important; border-radius: var(--bd-radius) !important; } div.tabulator-menu .tabulator-menu-item { position: relative; box-sizing: border-box; padding: 2px 8px; user-select: none; } div.tabulator-menu-item > span > i { display: inline-block; padding-bottom: 2px; padding-right: 2px; } div.tabulator-edit-select-list { max-height: 300px; background: #fff; border: 1px solid #aaa; font-size: var(--font-size-sm); font-family: var(--font-family); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 9999999; } .tabulator-edit-select-list .tabulator-edit-select-list-item { padding: 0px 4px !important; } .IPMSearchButtons.btn-group-sm>.btn { padding:0px !important; } /* Custom navigator buttons */ .DBNavButton { font-size: var(--font-size-reg) !important; height: 22px !important; text-decoration: none !important;; text-align: center !important;; vertical-align: middle !important;; padding: 1px 0px 2px 0px !important; margin: 2px 2px 2px 2px !important; border-radius: var(--bd-radius) !important; /* background-color: var(--color-btn-primary) !important; */ } .DBNav { color: var(--color-Nav) !important; } .DBNav.DBAdd { color: var(--color-NavInsert) !important; margin-left:5px !important;} .DBNav.DBDelete { color: var(--color-NavDelete) !important; } .DBNav.DBSave { color: var(--color-NavUpdate) !important; } .DBNav.DBCancel { color: var(--color-NavCancel) !important; margin-right:5px !important;} .DBNav.DBNope { color: var(--color-NavCancel) !important; } .DBNav.DBSearch { color: var(--color-NavSearch) !important; } button._se-command-save:enabled { color: var(--color-NavUpdate) !important; } button._se-command-save:disabled { color: var(--LighterGray) !important; } button.DBNav { height: 26px !important; text-decoration: none !important;; text-align: center !important;; vertical-align: middle !important;; padding: 0px 0px 2px 0px !important; margin: 2px 2px 2px 2px !important; border-radius: var(--bd-radius) !important; } button.DBToggle { height: 26px !important; text-decoration: none !important;; text-align: center !important;; vertical-align: middle !important;; padding: 0px 0px 3px 0px !important; margin: 2px 2px 2px 2px !important; border-radius: var(--bd-radius) !important; } button.DBNav:hover { background: var(--color-btn-hover) !important; } .DBNavBar { height: 100% !important; width: 100% !important; background: var(--color-popup) !important; } /* Custom counter buttons */ .CounterNav { color: var(--color-Nav) !important; } button.CounterNav { height: 26px !important; text-decoration: none !important;; text-align: center !important;; vertical-align: middle !important;; padding: 0px 0px 2px 0px !important; margin: 0px 2px 2px 2px !important; border-radius: var(--bd-radius) !important; font-size: var(--font-size-xl) !important; } button.CounterNav:hover { background: var(--color-btn-hover) !important; } /****************************************************************************** ** CodeMirror */ div.CodeMirror { background-color: var(--main-bg-2); height: 100%; overflow: hidden; font-family: var(--font-family); color: var(--font-color-string) !important; } #secActionsLogBackground, #cmActionLogBackground { background: var(--color-bg-white) !important; } #cmSearchSummary > div > div.CodeMirror-scroll > div.CodeMirror-sizer > div > div > div > div.CodeMirror-code > pre, #cmActionsLog > div > div.CodeMirror-scroll > div.CodeMirror-sizer > div > div > div > div.CodeMirror-code > pre, #cmLog > div > div.CodeMirror-scroll > div.CodeMirror-sizer > div > div > div > div.CodeMirror-code > pre { font-size: var(--font-size-sm); } #cmActionLog > div > div.CodeMirror-scroll > div.CodeMirror-sizer > div > div > div > div.CodeMirror-code > pre { font-size: var(--font-size-xs); } pre.CodeMirror-line { margin-bottom: 1px; font-family: var(--font-family); font-size: var(--font-size-md); } div.CodeMirror-measure, div.CodeMirror-cursors { height: 0px; visibility: hidden; } div.CodeMirror-scroll { height: 100%; overflow:auto; } div.CodeMirror-scroll::-webkit-scrollbar { display: none; } div.CodeMirror-scroll { -ms-overflow-style: none; scrollbar-width: none; } .CodeMirror-simplescroll-horizontal div, .CodeMirror-simplescroll-vertical div { position: absolute; background: var(--color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid var(--color-secondary); border-radius: 2px; } .CodeMirror-simplescroll-horizontal, .CodeMirror-simplescroll-vertical { position: absolute; z-index: 6; background: var(--color-primary); } .CodeMirror-simplescroll-horizontal { bottom: 0; left: 0; height: 8px; } .CodeMirror-simplescroll-horizontal div { bottom: 0; height: 100%; } .CodeMirror-simplescroll-vertical { right: 0; top: 0; width: 8px; } .CodeMirror-simplescroll-vertical div { right: 0; width: 100%; } .CodeMirror-overlayscroll .CodeMirror-scrollbar-filler, .CodeMirror-overlayscroll .CodeMirror-gutter-filler { display: none; } div > div.CodeMirror-overlayscroll-vertical > div, div > div.CodeMirror-overlayscroll-horizontal > div, CodeMirror-overlayscroll-horizontal div, CodeMirror-overlayscroll-vertical div { position: absolute; background: var(--color-scrollbar); border-radius: 3px; } .CodeMirror-overlayscroll-horizontal, .CodeMirror-overlayscroll-vertical { position: absolute; z-index: 6; } div > .CodeMirror-overlayscroll-horizontal, .CodeMirror-overlayscroll-horizontal { bottom: 0; left: 0; height: 8px; } .CodeMirror-overlayscroll-horizontal div { bottom: 0; height: 100%; } div > .CodeMirror-overlayscroll-vertical, .CodeMirror-overlayscroll-vertical { right: 0; top: 0; width: 8px; } .CodeMirror-overlayscroll-vertical div { right: 0; width: 100%; } .cm-s-custom.CodeMirror { background: var(--color-plain-region); color: #F8F8F8; } .cm-s-custom div.CodeMirror-selected { background: #DDDDDD; } .cm-s-custom .CodeMirror-line::-moz-selection, .cm-s-custom .CodeMirror-line > span::-moz-selection, .cm-s-custom .CodeMirror-line > span > span::-moz-selection { background: rgba(192, 192, 192, .99); } .cm-s-custom .CodeMirror-line::selection, .cm-s-custom .CodeMirror-line > span::selection, .cm-s-custom .CodeMirror-line > span > span::selection { background: rgba(192, 192, 192, .99); } .cm-s-custom .CodeMirror-line::-moz-selection, .cm-s-custom .CodeMirror-line > span::-moz-selection, .cm-s-custom .CodeMirror-line > span > span::-moz-selection { background: rgba(192, 192, 192, .99); } .cm-s-custom .CodeMirror-gutters { background: #0C1021; border-right: 0; } .cm-s-custom .CodeMirror-guttermarker { color: #FBDE2D; } .cm-s-custom .CodeMirror-guttermarker-subtle { color: #888; } .cm-s-custom .CodeMirror-linenumber { color: #888; } .cm-s-custom .CodeMirror-cursor { border-left: 1px solid #A7A7A7; } .cm-s-custom .cm-keyword {color: var(--font-color-keyword); } .cm-s-custom .cm-atom {color: var(--font-color-atom); } .cm-s-custom .cm-number {color: var(--font-color-number); } .cm-s-custom .cm-def {color: var(--font-color-def); } .cm-s-custom .cm-variable {color: var(--font-color-variable); } .cm-s-custom .cm-operator {color: var(--font-color-operator); } .cm-s-custom .cm-comment {color: var(--font-color-comment); } .cm-s-custom .cm-string {color: var(--font-color-string); } .cm-s-custom .cm-string-2 {color: var(--font-color-string-2); } .cm-s-custom .cm-meta {color: var(--font-color-meta); } .cm-s-custom .cm-builtin {color: var(--font-color-builtin); } .cm-s-custom .cm-tag {color: var(--font-color-tag); } .cm-s-custom .cm-attribute {color: var(--font-color-attribute); } .cm-s-custom .cm-header {color: var(--font-color-header); } .cm-s-custom .cm-hr {color: var(--font-color-hr); } .cm-s-custom .cm-link {color: var(--font-color-link); } .cm-s-custom .cm-error {color: var(--font-color-error); } .cm-s-custom .cm-bracket {color: var(--font-color-bracket); } .cm-s-custom .cm-punctuation {color: var(--font-color-punctuation); } div > div.CodeMirror-scroll > div.CodeMirror-sizer > div > div > div > div.CodeMirror-code > pre > span {color: var(--font-color-string); } .cm-s-custom .CodeMirror-activeline-background { background: #3C3636; } .cm-s-custom .CodeMirror-matchingbracket { outline:1px solid grey;color:white !important; } /****************************************************************************** ** SunEditor */ #HTMLBlock-SunEditor { width: 100%; height: 100%; overflow: hidden; background: var(--main-bg-2) !important; border-radius: var(--bd-radius); border: none; outline: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #HTMLBlockEditorToolbar { width: 100%; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: visible; border: 0; border-top-left-radius: var(--bd-radius); border-top-right-radius: var(--bd-radius); background: var(--main-bg-2) !important; } #SunEditor-ResizingBar { background: none; } #SunEditor-ResizingBar > div { margin-left: 3px; margin-right: 3px; border: 1px solid var(--color-popup-bd); border-radius: var(--bd-radius); background: var(--color-popup); font-family: var(--font-family) !important; font-size: var(--font-size-sm) !important; } #SunEditor-ResizingBar > div > div.se-char-counter-wrapper > span.se-char-label { font-family: var(--font-family) !important; font-size: var(--font-size-sm) !important;} #SunEditor-ResizingBar > div > div.se-char-counter-wrapper > span.se-char-counter { font-family: var(--font-family) !important; font-size: var(--font-size-sm) !important; } #SunEditor-ResizingBar > div > div.se-char-counter-wrapper { font-size: unset; height: 16px; } #suneditor_HTMLBlockEditor { border: none; background: var(--main-bg-2) !important; border-radius: var(--bd-radius); border:none; outline: none; height: 100%; overflow: auto; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: var(--bd-radius); border-bottom-right-radius: var(--bd-radius); } .sun-editor-editable { /* font-family: var(--font-family) !important; */ font-size: var(--font-size-reg) !important; line-height: 1.25em !important; padding: 5px 11px !important; margin: 0; } div.sun-editor-editable * { font-family: var(--font-family); -webkit-margin-before: 0 !important; margin-block-start: 0 !important; -webkit-margin-after: 0 !important; margin-block-end: 0 !important; } div > div.se-wrapper > div.se-wrapper-inner.se-wrapper-wysiwyg.sun-editor-editable { background: var(--main-bg-2) !important; } div.se-toolbar.sun-editor-common { border: none; border-radius: var(--bd-radius); margin: 0px; padding: 0px; outline: none; background-color: var(--main-bg-0) !important; background: var(--main-bg-2) !important; } div > div.se-toolbar.sun-editor-common > div.se-btn-tray { background: var(--main-bg-2) !important; border-radius: var(--bd-radius); width: 100%; height: auto; margin: 0px; padding: 6px 3px 0px 3px; outline: none; } div > div.se-toolbar.sun-editor-common > div.se-btn-tray > div { border: 1px solid var(--color-popup-bd); border-radius: var(--bd-radius); background: var(--color-popup); margin: -3px 3px 0px 0px; } .sun-editor .se-btn { float: left !important; width: 25px !important; height: 25px !important; border: 0 !important; border-radius: var(--bd-radius) !important; margin: 1px !important; padding: 2px !important; font-size: 12px !important; line-height: 20px !important; color: var(--font-color-popup); font-family: var(--font-family); } .sun-editor .se-btn-select.se-btn-tool-font { font-size: 11px !important; width: 146px !important; padding: 3px 5px 3px 5px !important; } .sun-editor .se-btn-select.se-btn-tool-size { font-size: 11px !important; width: 60px !important; padding: 3px 5px 3px 5px !important; } .sun-editor .se-btn-select.se-btn-tool-format { font-size: 11px !important; width: 90px !important; padding: 3px 5px 3px 5px !important; } .sun-editor .se-btn:enabled.on, .sun-editor .se-btn:enabled:hover { background-color: var(--color-popup-selected) !important; border: none !important; color: var(--font-color-popup-selected) !important; } .sun-editor .se-btn-module-enter { width: 100%; height: 1px; margin-bottom: -4px !important; background:none !important; border: none !important; } .sun-editor .se-toolbar-separator-vertical { display: none !important; height: 0; width: 0; margin: 1px; vertical-align: top; } div > div.se-wrapper, .sun-editor .se-wrapper .se-wrapper-inner { height: 100% !important; height: 100%; } /****************************************************************************** ** FlatPickr ** ** Component works well but it is needlessly enormous! */ .shortcut-buttons-flatpickr-buttons>.shortcut-buttons-flatpickr-button { border-radius: 5px; border-width: 1px; padding: 0px 4px; margin: 1px !important; height: 18px; line-height: 0; } .light.shortcut-buttons-flatpickr-wrapper { background-color: transparent !important; } .shortcut-buttons-flatpickr-wrapper>.shortcut-buttons-flatpickr-buttons { flex: 1; justify-content: center; } .FlatPickrField > div { font-family: var(--font-family) !important; font-size: var(--font-size-sm) !important; white-space:nowrap; } .FlatPickrField > div > a { margin: -5px -1px 0px 0px; padding: 0px; } .FlatPickrField > div > a > svg { vertical-align: -0.33em !important; } .FlatPickrField > div > input { width: 115px !important; margin-left: 2px; } div.flatpickr-time.time24hr > div > input { margin: 2px -5px 2px -5px !important; width: 30px !important; } .flatpickr-time .numInputWrapper { height: 18px !important; } div.FlatPickr { overflow: hidden; padding: 2px !important; } div.flatpickr-calendar { -webkit-box-shadow: none; box-shadow: none; } div.flatpickr-calendar.inline { top: 0px; width: 100% !important; height: 100% !important; font-family: var(--font-family) !important; font-size: var(--font-size-sm) !important; } div.flatpickr-months { height: 18px; width: 100%; } .numInputWrapper span.arrowDown:after { top: 14% !important; } .numInputWrapper span.arrowDown { top: 45% !important; } .flatpickr-calendar.animate.open div.flatpickr-months .flatpickr-prev-month,.flatpickr-calendar.animate.open div.flatpickr-months .flatpickr-next-month { top: 6px; padding: 0px 0px 0px 0px; } div.flatpickr-months .flatpickr-prev-month, div.flatpickr-months .flatpickr-next-month { top: 3px; padding: 0px 5px; } div.flatpickr-months .flatpickr-prev-month svg, div.flatpickr-months .flatpickr-next-month svg { margin-top: -14px; padding: 0px 5px; width:24px !important; height: 11px !important; } div.flatpickr-current-month .numInputWrapper { width: 9ch; display: inline-block; } div > .flatpickr-current-month input.cur-year { background: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; cursor: text; padding: 1px 0px 0px 0px; margin: 2px 0px 0px 0px; display: inline-block; font-size: inherit; font-family: inherit; font-weight: 400; line-height: 15px; height: 13px; border: 0; border-radius: 0; vertical-align: initial; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; text-align: center; } div > .flatpickr-current-month .flatpickr-monthDropdown-months { appearance: menulist; background: transparent; border: none; border-radius: 0; box-sizing: border-box; color: inherit; cursor: pointer; font-size: inherit; font-family: inherit; font-weight: 400; height: 15px; line-height: 15px; margin: 0px; outline: none; padding: 0px; position: relative; vertical-align: initial; -webkit-box-sizing: border-box; -webkit-appearance: menulist; -moz-appearance: menulist; width: auto; } div > .flatpickr-current-month { font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); width: 90%; left: 5%; padding: 0px; line-height: 1; height: 20px; } div.flatpickr-innerContainer { width: 100%; } div.flatpickr-rContainer { width: 100%; } div.flatpickr-weekdays { width: 100%; height: 15px; margin: 3px 0px 3px 0px; background: var(--color-primary); border-top-right-radius: var(--bd-radius); border-bottom-right-radius: var(--bd-radius); } div > span.flatpickr-weekday { cursor: default; font-size: 80%; background: none; color: var(--font-color-primary); line-height: 1; margin: 1px 0px 0px 0px; text-align: center; display: block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-weight: 400; } div.flatpickr-days { width: 100% !important; } div.dayContainer { width: 100%; min-width: 100%; max-width: 100%; } div > span.flatpickr-day { border-radius: var(--bd-radius); height: 20px; line-height: 20px; } #AvailabilityStartTime > a { color: unset; text-decoration: none; } div.flatpickr-time { line-height: 20px; } div.flatpickr-time input { border: 0; border-radius: 0; text-align: center; margin: 0; padding: 0; height: 16px; line-height: 16px; color: #393939; font-size: var(--font-size-reg); font-family: var(--font-family); font-weight: var(--font-weight-normal) !important; top: 0px; } div.flatpickr-calendar.hasTime .flatpickr-time { height: 20px !important; border-top: none; overflow:hidden; } .flatpickr-calendar.animate.open { z-index: 999999; width: 210px !important; padding: 2px; font-size: var(--font-size-xs); border: 1px solid var(--color-secondary); } .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange { z-index: -1; } div.flatpickr-weekwrapper .flatpickr-weekday { float: none; width: 100%; line-height: 15px; background: var(--color-primary); margin-top: 3px; } div.flatpickr-weekwrapper .flatpickr-weekday { float: none; width: 100%; line-height: 14px; padding-top: 1px; border-top-left-radius: var(--bd-radius); border-bottom-left-radius: var(--bd-radius); } div.flatpickr-weekwrapper { float: left; width: 26px; } #EverydayIPMCalendarContainer > div.flatpickr-calendar.hasWeeks.animate.inline > div.flatpickr-innerContainer > div.flatpickr-weekwrapper > div { padding: 1px 4px 0px 2px; } #BookingsCalendar > div.flatpickr-calendar.hasWeeks.animate.inline > div.flatpickr-innerContainer > div.flatpickr-weekwrapper > div, #AvailabilityCalendar > div.flatpickr-calendar.hasWeeks.animate.inline > div.flatpickr-innerContainer > div.flatpickr-weekwrapper > div { padding: 2px 4px 0px 2px; } div.flatpickr-weekwrapper .flatpickr-weeks { padding: 1px 4px 0px 2px; -webkit-box-shadow: 1px 0 0 #e6e6e6; box-shadow: 1px 0 0 #e6e6e6; margin: 0px 2px 0px 0px; } #EverydayIPMCalendarContainer > div.flatpickr-calendar.hasWeeks.animate.inline > div.flatpickr-innerContainer > div.flatpickr-weekwrapper > div > span { height: 17px; } #BookingsCalHolder, #AvailabilityCalendar { padding: 4px !important; } #BookingsCalendar > div.flatpickr-calendar.hasWeeks.animate.inline > div.flatpickr-innerContainer > div.flatpickr-weekwrapper > div > span, #AvailabilityCalendar > div.flatpickr-calendar.hasWeeks.animate.inline > div.flatpickr-innerContainer > div.flatpickr-weekwrapper > div > span { height: 18px; } div.flatpickr-weekwrapper span.flatpickr-day, div.flatpickr-weekwrapper span.flatpickr-day:hover { display: block; width: 100%; max-width: none; color: rgba(57,57,57,0.3); background: transparent; cursor: default; border: none; font-size: var(--font-size-xs); margin-top: 3px; padding: 0; height: 17px; } button.CalButtons { font-size: var(--font-size-sm) !important; font-family: var(--font-family) !important; border-radius: var(--bd-radius) !important; background: var(--color-primary) !important; color: var(--font-color-primary); margin: 0px !important; padding: 0px !important; width: 38px !important; height: 20px !important; } /****************************************************************************** ** Login Form ** ** Main challenge here was making sure the form is centered on any device. */ #pnlLogin.NOVCENTER.NOHCENTER { top: 10px !important; left: 10px !important; -webkit-transform: translate(0%, 0%) !important; -ms-transform: translate(0%, 0%) !important; transform: translate(0%, 0%) !important; opacity: 0; } #pnlLogin.NOVCENTER { top: 10px !important; left: 50% !important; -webkit-transform: translate(-50%, 0%) !important; -ms-transform: translate(-50%, 0%) !important; transform: translate(-50%, 0%) !important; opacity: 0; } #pnlLogin.NOHCENTER { top: 50% !important; left: 10px !important; -webkit-transform: translate(0%, -50%) !important; -ms-transform: translate(0%, -50%) !important; transform: translate(0%, -50%) !important; opacity: 0; } #pnlLogin { top: 50% !important; left: 50% !important; -webkit-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; opacity: 0; } #pnlLoginBorder { border: 1px solid var(--color-primary) !important; } /* Create Database controls */ .createdblabels > label { font-size: var(--font-size-lg) !important; } .createdbhelp { font-size: var(--font-size-md) !important; } input.createdbedit { font-size: var(--font-size-reg) !important; } select.createdbedit { font-size: var(--font-size-reg) !important; height: 25px !important; } /* Tree view control */ #lstUsernames, #lstDatabases { color: var(--color-input) !important; background: var(--color-input-bg) !important; border:none !important; } #lstUsernames .TVNODE { color: var(--color-input) !important; } .grecaptcha-badge { z-index: 9999990 !important; } /****************************************************************************** ** EverydayIPM Info Page ** ** Main challenge was to get the text blocks to grow and shrink in concert with ** the footer at the bottom of the form. Not so fun. ** ** NOTE: Theme for this page is always the EverydayIPM theme. */ .MainBody { overflow: visible !important; -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } #EverydayIPM_ShopLogo { width: 140px !important; height: 99px !important; display: block !important; left: 50% !important; margin-left:-70px !important; } /* should be the height of the column with the calendar controls */ .MainInfo { min-height: 585px; } .IPMInfo { overflow-y: auto; overflow-x: hidden; } .IPMInfo h1 { font-size: var(--font-size-xl); margin-bottom: 0px !important; color: var(--White) !important; } #pnlCards { white-space: normal !important; } #pnlcards #pnlCards .card-body { padding: 0px 0px 0px 10px !important; } .ipmselect { font-size: var(--font-size-md) !important; height:25px; } .ipmlabel label { font-size: var(--font-size-md) !important; color: black !important; } textarea.ipmlabel { font-size: var(--font-size-reg) !important; color: black !important; white-space: normal; } .Select:disabled, #selectCountry:disabled, #selectProvince:disabled, #selectCity:disabled, #selectConsultant:disabled, #selectStartTime:disabled, #selectEndTime:disabled, #selectService:disabled { opacity: 0.6 !important; pointer-events: none !important; cursor: default !important; } #selectCountry > option { padding: 2px; } /****************************************************************************** ** Main Menu */ button.MenuIcon { color: var(--font-color-menu) !important; } button.MenuIcon:hover { filter: brightness(75%) !important; } button.MenuIconSelected { background: #7777 !important; } div.ToolTip { color: var(--=font-color-menu) !important; background-color: transparent !important; opacity:1 !important; z-index:999999 !important; } div.ToolTipRight { color: var(--=font-color-menu) !important; background-color: transparent !important; opacity:1 !important; z-index:999999 !important; margin-left: -10px !important; } div.tooltip-inner { background-color: var(--color-popup-selected) !important; box-shadow: 0px 0px 4px black; opacity: 1 !important; } div.bs-tooltip-end > .tooltip-arrow::before { border-right-color: var(--color-popup-selected) !important; } div.bs-tooltip-left .tooltip-arrow::before { border-left-color: var(--color-popup-selected) !important; } div.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--color-popup-selected) !important; } div.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--color-popup-selected) !important; } #pnlLogoutWarning { background: none !important; border: none !important; z-index: 5; } #pnlLogoutWarningBlock { background: var(--Black) !important; opacity: 0.50 !important; border: none !important; } #pnlLogoutWarningMessage { background: var(--main-bg-2) !important; } #LogoutWarningMessage label { color: var(--color-primary) !important; font-weight: var(--font-weight-heavy) !important; font-size: var(--font-size-xxl) !important; } #LogoutWarningCountdown label { color: var(--color-primary) !important; font-weight: var(--font-weight-normal) !important; font-size: var(--font-size-xl) !important; } #pnlMenu { height: 100vh; } #pnlModuleBlur { background: var(--color-input-bg) !important; opacity: var(--main-bg-opacity) !important; border: 1px solid var(--color-primary) !important; width: 100% !important; } #pnlMenuFooter { width: 100% !important; } #pnlMenuHeader { border-top: 1px solid var(--color-primary) !important; border-right: 1px solid var(--color-primary) !important; border-left: 1px solid var(--color-primary) !important; border-top-left-radius: var(--bd-radius) !important; border-top-right-radius: var(--bd-radius) !important; } #MenuModuleTitle { border-radius: 25px !important; background: black !important; } #MenuModuleTitle label { font-size: var(--font-size-lg) !important; color: white !important; vertical-align: middle; } #MenuSearch { border-radius: 25px; padding-left: 10px; } #MenuSearchIcon label { color: white !important; } #btnSearchIcon { margin-left: -35px; margin-right: 5px; z-index: 1; } #MainMenu { outline: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; } #SearchResultstblNormalCellTable { background: var(--color-input-bg) !important; border: 1px solid var(--color-input-bd) !important; border-radius: var(--bd-radius) !important; overflow: hidden !important; padding: 0px !important; margin: 4px 10px 10px 10px !important; } table#SearchResultstbl td:first-child { text-align: center; font-size: var(--font-weight-sm) !important; font-weight: var(--font-weight-heavy) !important; padding-bottom: 0px; } table#SearchResultstbl { margin: 4px; } table#SearchResultstbl td { padding-bottom: 3px !important; } #lblUnsupportedModule { font-family: var(--font-family) !important; font-size: var(--font-size-sm) !important; background: none !important; border: none !important; display: block !important; } #lblUnsupportedModule > label { top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; white-space: nowrap !important; background: none !important; border: none !important; font-family: var(--font-family) !important; font-size: var(--font-size-reg) !important; color: var(--font-color-popup) !important; position: absolute; display: Block !important; } /****************************************************************************** ** Main Menu Tree View */ .TVUL { margin: 10px 0px 0px 10px !important; padding: 2px 8px 2px 8px !important; font-size: var(--font-size-big) !important; font-weight: var(--font-weight-heavy) !important; color: var(--font-color-menu); } .TVNESTED { margin: 0px 0px 0px 15px !important; padding: 2px 8px 2px 8px !important; font-size: var(--font-size-reg) !important; font-weight: var(--font-weight-normal) !important; border: 1px solid transparent; } .TVNODE { margin: 0px 0px 0px 0px !important; padding: 2px 8px 2px 8px !important; border: 1px solid transparent; color: var(--font-color-menu); } #lstDatabases .TVNODE { color: var(--font-color-popup); } .TVCARET::before { content: "\25B2" !important; margin-right: 0px !important; -webkit-transform: rotate(90deg) !important; -ms-transform: rotate(90deg) !important; transform: rotate(90deg) !important; } .TVCARET-DOWN::before { -webkit-transform: rotate(180deg) !important; -ms-transform: rotate(180deg) !important; transform: rotate(180deg) !important; margin-bottom: 4px !important; } .TVSELECTED { margin: 0px 0px 0px 0px !important; padding: 4px 8px 2px 8px !important; background-color: var(--color-btn-tertiary) !important; border: 1px solid var(--color-tertiary-bd); border-radius: var(--bd-radius) !important; } .MENUACTIVE .TVSELECTED { color: var(--Black); margin: 0px 0px 0px 0px !important; padding: 2px 8px 2px 8px !important; background-color: var(--color-hl) !important; border: 1px solid var(--color-hl-bd); border-radius: var(--bd-radius) !important; } /****************************************************************************** ** Popup Menus ** ** Used in lots of places, like the grid export menus, the User menu, etc. */ .PopupMenu, .PopupMenu li, .PopupMenu .popup-menu, .PopupMenu .sub-menu, .PopupMenu #toggle-menu, .popup-menu { border: 0 none !important; border-style: none !important; } .PopupMenuUser.PopupMenu li label { width:160px !important; } .PopupMenuExport.PopupMenu li label { width:120px !important; } .PopupMenuParameter.PopupMenu li label { width:170px !important; } .PopupMenuSets.PopupMenu li label { width:150px !important; } .PopupMenuAvailability.PopupMenu li label { width:190px !important; } .PopupMenuWidget.PopupMenu li label { width:120px !important; } label.drop-label { margin: 0px 0px -1px 0px; padding: 5px 0px 4px 9px !important; font-size: var(--font-size-reg) !important; color: var(--font-color-popup) !important; background-color: var(--color-popup) !important; border: 1px solid var(--color-popup-bd) !important; } label.drop-label:focus, label.drop-label:hover { font-size: var(--font-size-reg) !important; color: var(--font-color-popup-selected) !important; background-color: var(--color-popup-selected) !important; border: 1px solid var(--color-popup-selected-bd); cursor: pointer; } label.drop-label svg { pointer-events:none; } /****************************************************************************** ** Notices/Announcements/Other random HTML bits ** */ .Selectable { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; white-space: normal !important; font-size: var(--font-size-reg) !important; font-family: var(--font-family) !important; line-height: 1.25em !important; } .Documentation { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; max-width: 700px; white-space: normal !important; overflow: auto; font-size: var(--font-size-reg) !important; font-family: var(--font-family) !important; line-height: 1.25em !important; } .Documentation > h1 { font-size: 1.2rem !important; font-weight: 700 !important; color: var(--font-color-string) !important; margin-bottom: 0.5rem !important; } .Documentation > h2 { font-size: 1.1rem !important; font-weight: 600 !important; color: var(--font-color-string) !important; margin-bottom: 0.5rem !important; } .Documentation > h3 { font-size: 1.0rem !important; font-weight: 600 !important; color: var(--font-color-string) !important; margin-bottom: 0.5rem !important; } .Documentation > h4 { font-size: 0.9rem !important; font-weight: 600 !important; color: var(--font-color-string) !important; margin-bottom: 0.5rem !important; } .Documentation > h5 { font-size: 0.8rem !important; font-weight: 500 !important; color: var(--font-color-string) !important; } .Documentation > h6 { font-size: 0.7rem !important; font-weight: 400 !important; color: var(--font-color-string) !important; } .Documentation > p { font-size: var(--font-size-reg) !important; font-weight: 400 !important; color: var(--font-color-string) !important; margin-bottom: 0.5rem !important; } .Documentation > ol > li { font-size: var(--font-size-reg) !important; font-weight: 400 !important; white-space: normal; color: var(--font-color-string) !important; } .Documentation > ol { list-style: decimal;} .Documentation > ul { list-style: unset; } h1 { font-size: 1.2rem !important; font-weight: 500 !important; color: var(--font-color-string); margin-bottom: 0.5rem !important; } h2 { font-size: 1.1rem !important; font-weight: 500 !important; color: var(--font-color-string); margin-bottom: 0.5rem !important; } h3 { font-size: 1.0rem !important; font-weight: 500 !important; color: var(--font-color-string); margin-bottom: 0.5rem !important; } h4 { font-size: 0.9rem !important; font-weight: 500 !important; color: var(--font-color-string); margin-bottom: 0.5rem !important; } h5 { font-size: 0.8rem !important; font-weight: 500 !important; color: var(--font-color-string); } h6 { font-size: 0.7rem !important; font-weight: 400 !important; color: var(--font-color-string); margin-bottom: 0.5rem !important; } p { font-size: 0.7rem !important; font-weight: 400 !important; color: var(--font-color-string); white-space: normal !important; margin-bottom: 0.5rem !important; } ol > li { font-size: var(--font-size-reg) !important; font-weight: 400 !important; white-space: normal; color: var(--font-color-string); } ol { list-style: decimal;} ul { list-style: unset; } #Notices { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; white-space: normal !important; overflow: auto; font-size: var(--font-size-reg) !important; font-family: var(--font-family) !important; line-height: 1.25em !important; padding-right:20px; } #Notices > h1, .sun-editor-editable h1 { font-size: 1.2rem !important; font-weight: 500 !important; color: var(--font-color-string) !important; margin-bottom: 0.5rem !important; } #Notices > h2, .sun-editor-editable h2 { font-size: 1.1rem !important; font-weight: 500 !important; color: var(--font-color-string) !important; margin-bottom: 0.5rem !important; } #Notices > h3, .sun-editor-editable h3 { font-size: 1.0rem !important; font-weight: 500 !important; color: var(--font-color-string) !important; margin-bottom: 0.5rem !important; } #Notices > h4, .sun-editor-editable h4 { font-size: 0.9rem !important; font-weight: 500 !important; color: var(--font-color-string) !important; margin-bottom: 0.5rem !important; } #Notices > h5, .sun-editor-editable h5 { font-size: 0.8rem !important; font-weight: 500 !important; color: var(--font-color-string) !important; } #Notices > h6, .sun-editor-editable h6 { font-size: 0.7rem !important; font-weight: 400 !important; color: var(--font-color-string) !important; } #Notices > p, .sun-editor-editable p { font-size: 0.7rem !important; font-weight: 400 !important; color: var(--font-color-string) !important; margin-bottom: 0.5rem !important; } #Notices > ol > li, .sun-editor-editable > ol > li { font-size: var(--font-size-reg) !important; font-weight: 400 !important; white-space: normal; color: var(--font-color-string) !important; } #Notices > ol, .sun-editor-editable > ol {list-style: decimal;} #Notices > ul, .sun-editor-editable > ul {list-style: unset;} dl, ol, ul { margin-top: 0; margin-bottom: 0px !important; } /****************************************************************************** ** Worker Manager ** */ #pnlGridAvailability { border-top: 1px solid var(--Black) !important; border-bottom: none !important; border-left: none !important; border-right: none !important; } /****************************************************************************** ** Dashboard ** */ .bigtext-line1, .bigtext-line2 { margin: -10px 0px; } .DashControls input.FieldEntry { max-width: unset !important; } .DashBody { /*background: var(--color-bg-white) !important;*/ } .DashHeader { padding: 0px !important; margin: 0px !important; background: var(--color-primary) !important; } button.DashHeaderLabel { font-size: var(--font-size-md) !important; color: var(--font-color-primary) !important; text-align: left; text-decoration: none; } .nopointer { pointer-events: none; } #gridWidgets .tabulator-row.tabulator-group { padding: 5px 5px 5px 6px; } #gridWidgets .tabulator-row.tabulator-group .tabulator-group-toggle { display: none; } .StopwatchStart { left: 0px; top: 50% !important; transform: translateY(-50%); } .StopwatchStop { right: 0px; left: unset !important; top: 50% !important; transform: translateY(-50%); } /****************************************************************************** ** Booking ** */ #BookingTerms { font-size: var(--font-size-sm) !important; font-family: var(--font-family) !important; } /****************************************************************************** ** Common Elements ** */ input, select, textarea { color: var(--color-input) !important; background: var(--color-input-bg) !important; border: var(--color-input-bd) !important; border-radius: var(--bd-radius) !important; font-family: var(--font-family) !important; } label { color: var(--color-primary) !important; font-weight: var(--font-weight-normal) !important; font-size: var(--font-size-x2) !important; border-radius: var(--bd-radius) !important; } .Plain, div.Plain, span.Plain { background: var(--color-blank) !important; white-space: normal !important; } .PlainBorder, div.PlainBorder, span.PlainBorder { border: 1px solid var(--color-plain-bd) !important; } .btn-sm.ProgressBusy, .btn-sm.ProgressLogo, .btn-sm.ProgressBack { text-decoration: none !important; color: var(--color-primary) !important; border-top: none !important; border-left: none !important; border-right: 1px solid var(--color-primary) !important; border-bottom: 1px solid var(--color-primary) !important; border-radius: 0px !important; } .btn-sm.ProgressBusy { z-index: 4 !important; background: var(--color-input-bg) !important; } .btn-sm.ProgressLogo { z-index: 3 !important; background: var(--White) !important; } .btn-sm.ProgressBack { z-index: 2 !important; background: var(--color-input-bg) !important; } button.RegularBtn { font-size: var(--font-size-lg) !important; font-family: var(--font-family) !important; } button.PageBtn { font-size: var(--font-size-reg) !important; } button.MiniPageBtn { font-size: var(--font-size-sm) !important; line-height: 12px; } label.SectionTitle { color: var(--font-color-menu) !important; font-size: var(--font-size-lg) !important; height: 36px !important; } label.SectionSubTitle { color: var(--font-color-menu) !important; font-size: var(--font-size-sm) !important; } label.TableFootnote { font-size: var(--font-size-xs) !important; padding: 2px 5px; } label.ModifierModified { font-family: var(--font-family) !important; font-size: var(--font-size-sm) !important; color: var(--font-color-popup) !important; } span.ModifierModified { font-family: var(--font-family) !important; font-size: var(--font-size-sm) !important; background: var(--color-popup) !important; border: 1px solid var(--color-popup-bd) !important; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } span.FieldLabel, label.FieldLabel { font-family: var(--font-family) !important; font-size: var(--font-size-sm) !important; font-weight: var(--font-weight-heavy) !important; color: var(--color-primary) !important; display: inline-block !important; padding-top: 4px; } span.FieldLabel { padding: 0px; margin-top: 5px; } label.FieldLabelLock { font-family: var(--font-family) !important; font-size: var(--font-size-sm) !important; font-weight: var(--font-weight-heavy) !important; padding-top: 2px; z-index: 1; } select.FieldEntry { height: 22px !important; font-size: var(--font-size-sm) !important; padding-bottom: 2px !important; } textarea.FieldEntry, input.FieldEntry { padding-bottom: 1px; max-width: 325px; font-size: var(--font-size-sm); } .FieldEntryPanel { } #pnlCamera { z-index: 5; } .Field { padding-top: 1px !important; } input[type="TEXT"].FieldEntry[disabled], .Field[disabled] { opacity: 0.6 !important; pointer-events: none !important; cursor: default !important; display: inline-block !important; } .FieldReadOnly { background: var(--bg-readonly) !important; } input[type="TEXT"].FieldEntry:-moz-read-only { opacity: 0.6 !important; pointer-events: none !important; cursor: default !important; display: inline-block !important; } input[type="TEXT"].FieldEntry:read-only { opacity: 0.6 !important; pointer-events: none !important; cursor: default !important; display: inline-block !important; } #gridHTMLBlockAccess > div.tabulator-tableholder > div > div > div:nth-child(2), #gridSetElements > div.tabulator-tableholder > div > div > div:nth-child(2) { padding: 0px 5px 0px 5px !important; } #gridHTMLBlockAccess > div.tabulator-tableholder > div > div > div > input, #gridSetElements > div.tabulator-tableholder > div > div > div > input { margin-top: 2px !important; } .UtilityButton { font-family: var(--font-family) !important; font-size: var(--font-size-sm) !important; color: var(--font-color-popup) !important; background: var(--color-popup) !important; border-radius: var(--bd-radius) !important; border: 1px solid var(--color-popup-bd) !important; line-height: 1em; } #pnlPayRates { border-radius: 0px !important; border-top: 1px solid gray !important; } /****************************************************************************** ** TimeClock Status ** */ .TimeClock { font-size: 8px !important; background: var(--color-primary) !important; color: white; border-radius: var(--bd-radius) !important; border: thin solid var(--color-primary) !important; line-height: 6px !important; padding:2px !important; } .TimeClock > span:nth-child(1) { display:none !important; } .TimeClock > span:nth-child(2) { display:none !important; } .TimeClock > span:nth-child(3) { display:none !important; } .TimeClock > span:nth-child(4) { display:none !important; } .TimeClock > span:nth-child(5) { display:none !important; } .TimeClock > span:nth-child(6) { display:none !important; } .TimeClock > span:nth-child(7) { display:none !important; } .TimeClock > span:nth-child(8) { display:none !important; } .TimeClock > span:nth-child(9) { display:none !important; } .TimeClock > span:nth-child(10) { display:none !important; } .TimeClock > span:nth-child(11) { display:none !important; } .TimeClock > span:nth-child(12) { display:none !important; } .TimeClock > span:nth-child(13) { display:none !important; } .TimeClock > span:nth-child(14) { display:none !important; } .TimeClock.TCDefault > span:nth-child( 1) { display: inherit !important;} .TimeClock.TCName > span:nth-child( 2) { display: inherit !important;} .TimeClock.TCNumber > span:nth-child( 3) { display: inherit !important;} .TimeClock.TCIP > span:nth-child( 4) { display: inherit !important;} .TimeClock.TCTemps > span:nth-child( 5) { display: inherit !important;} .TimeClock.TCCheckin > span:nth-child( 6) { display: inherit !important;} .TimeClock.TCCPU > span:nth-child( 7) { display: inherit !important;} .TimeClock.TCFP > span:nth-child( 8) { display: inherit !important;} .TimeClock.TCVersion > span:nth-child( 9) { display: inherit !important;} .TimeClock.TCRAM > span:nth-child(10) { display: inherit !important;} .TimeClock.TCNetBIOS > span:nth-child(11) { display: inherit !important;} .TimeClock.TCDomain > span:nth-child(12) { display: inherit !important;} .TimeClock.TCProcs > span:nth-child(13) { display: inherit !important;} .TimeClock.TCMode > span:nth-child(14) { display: inherit !important;} .TimeClock.TCInactive { background: yellow !important; color:black; } .TimeClock.TCDead { background: white !important; color:black; } .TCLine { background: black; border-radius:0px; border: thin solid var(--color-bg-black); } .TCArea { font-size: 10px !important; line-height: 6px !important; padding:5px 3px !important; background: var(--LighterGray); border-radius:var(--bd-radius); border: thin solid var(--color-bg-black); display:flex; align-items:flex-end; font-weight:900 !important; } .TCLabel { font-size: 8px !important; border-radius: var(--bd-radius) !important; border: thin solid var(--color-primary) !important; line-height: 6px !important; padding:2px !important; background: var(--DarkestGray); color:white; display:flex; align-items: center; justify-content: center; } /****************************************************************************** ** Summernote ** */ .UtilityPanel { min-width: 100px !important; } /****************************************************************************** ** Summernote ** */ .note-modal { z-index: 999999 !important; } .note-editable { font-family: var(--font-family) !imortant; font-size: var(--font-size-reg) !important; } .note-btn { font-size: 10px !important; height: 24px !important; } #SummernoteDiv { background: var(--main-bg-2); } #SummernoteDiv > form > div > div.note-editing-area > div.CodeMirror.cm-s-default { font-size: var(--font-size-sm) !important; white-space: normal !important; } #SummernoteSave { color: silver !important; font-size: 24px !important; top: -10px; position: relative; } #SummernoteSave.Changed { color:darkgreen !important; } .note-editor .note-editing-area .note-editable table td, .note-editor .note-editing-area .note-editable table th { border:unset; } /* .dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; } */