/*
DEPRECATED CSS CLASSES:
(These exist in older form templates that used to have a table-like layout, with labels positioned to the left of fields)
.esp-formTable
.esp-formTableRow
.esp-antiFormTable
.esp-rightLabels
.esp-leftLabels
.esp-rightFields
.esp-leftFields
(This was added to a ton of client form templates by mistake, so it has been replaced with "esp-checkbox")
.esp-checkboxField
*/
/*----------
SYSTEM
----------*/
/* GENERAL STUFF */
html, body {
font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
float: left;
clear: both;
box-sizing: border-box;
color: #444;
}
pre {
white-space: pre-wrap; /* I want tags to wrap */
}
.showAsNew {
font-weight: bold !important;
}
.flag-duplicate {
background-color:#ffc6c6 !important;
}
.flag-successful {
background-color:#c6ffc6 !important;
}
.flag-system {
background-color:#fff0a0 !important;
}
.flag-failed {
color:red !important;
}
.dc-flagged {
background-color:#d5d5ff !important;
}
.deleted {
color: red !important;
text-decoration: line-through !important;
}
.showOverFlow > div {
overflow-y: auto !important;
white-space: normal !important;
word-wrap: break-word !important;
}
.x-scroller {
pointer-events: all;
}
.clickable {
cursor: pointer !important;
text-decoration: underline;
pointer-events: all !important;
}
.esp-clickable-subtle {
cursor: pointer !important;
color:hsl(216deg 60% 40%);
text-decoration: none;
}
i.clickable {
text-decoration: none;
}
.esp-treeNode-unselectable {
opacity: 0.6;
filter: alpha(opacity = 60);
}
.x-tree-icon-leaf.esp-tree-no-options:before {
content: '!';
color: #aa3333;
position: relative;
top: -2px;
}
i.clickable.fa-times-circle {
color:#aa3333;
}
i.clickable.fa-gear {
color:#66aa66;
}
i.clickable.fa-question-circle {
color:#6666aa;
}
i.clickable.fa-search {
color:var(--form-color, #196eb3);
}
i.clickable.fa-commenting {
color:var(--form-color, #196eb3);
}
.clickable-image {
cursor: pointer !important;
}
.not-clickable {
cursor: default !important;
text-decoration: none;
}
.x-masked *,
.esp-no-animations * {
transition: none !important;
}
/* SYSTEM SCROLLBARS */
.x-desktop ::-webkit-scrollbar {
width: 10px !important;
height: 10px !important;
}
.x-desktop ::-webkit-scrollbar-thumb {
background-color: #ccc !important;
border-radius: 10px !important;
}
/* FIELD SCROLLBARS */
/* To change the field scrollbars, you also need to update ESP.overrides.form.field.HtmlEditor--getDocMarkup */
.CodeMirror-vscrollbar::-webkit-scrollbar-track,
.CodeMirror-hscrollbar::-webkit-scrollbar-track,
.esp-searchItemSelector .x-scroller::-webkit-scrollbar-track,
.esp-field .x-tree-view::-webkit-scrollbar-track,
.esp-field textarea::-webkit-scrollbar-track {
background: transparent;
cursor: default;
}
.CodeMirror-vscrollbar::-webkit-scrollbar,
.CodeMirror-hscrollbar::-webkit-scrollbar,
.esp-searchItemSelector .x-scroller::-webkit-scrollbar,
.esp-field .x-tree-view::-webkit-scrollbar,
.esp-field textarea::-webkit-scrollbar{
background: transparent;
width: 16px !important;
height: 16px !important;
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
.esp-searchItemSelector .x-scroller::-webkit-scrollbar-thumb,
.esp-field .x-tree-view::-webkit-scrollbar-thumb,
.esp-field textarea::-webkit-scrollbar-thumb{
border-radius: 99px !important;
background-color: #dadada !important;
border: 4px solid transparent;
background-clip: padding-box;
cursor: default;
}
/* WINDOW SNAPPING */
#ESP_SnapPreview {
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
position: fixed;
z-index: 999999999;
background: #ffffff33;
opacity: 0;
transform: scale(0.75);
}
#ESP_SnapPreview.esp-animateSnapPreview {
opacity: 1 !important;
transform: scale(1) !important;
}
/* TEXT EDITING */
.x-form-checkbox-default {
display: inline-block;
}
.xmleditor-table td {
text-align:left;
border-bottom: 1px solid #eeeeee;
padding-top:2px;
}
.xmleditor-table td:nth-child(2) {
text-align:right;
}
.xmleditor-table td .CodeMirror {
text-align: left;
}
.esp-fullscreen {
position: fixed !important;
transform: none !important;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: white;
z-index: 999999;
}
.esp-parent-fullscreen {
transform: none !important;
overflow: hidden !important;
}
.esp-fieldContainer--fullscreen .esp-fieldMenuBtn {
display: none !important;
}
/* FONT AWESOME CORRECTIONS */
.fa.fa-external-link:before {
font-size: 0.88em;
position: relative;
top: -1px;
}
/* FONT AWESOME COMBINATIONS */
.esp-fa-plus:after {
content: '\f067';
font-size: 0.65em;
margin-left: 0.1em;
vertical-align: top;
}
/* ICONS */
.esp-icon-panelTitle {
padding-right: 3px;
}
.start-help, .start-info, .start-lock, .start-logout, .start-refresh, .start-key, .start-view, .start-settings, .tab-view, .desktop-view, .start-start, .mobile-view {
height:auto;
}
.start-help:before, .start-info:before, .start-lock:before, .start-logout:before, .start-refresh:before, .start-key:before, .start-view:before, .start-settings:before, .tab-view:before, .desktop-view:before, .start-start:before, .mobile-view:before {
font-family: "Font Awesome 5 Free";
}
.start-help:before {
content: "\f059";
}
.start-info:before {
content: "\f05a";
}
.start-lock:before {
content: "\f023";
}
.start-logout:before {
content: "\f011";
}
.start-start:before {
content: "\f1ce";
}
.start-refresh:before {
content: "\f021";
}
.start-key:before {
content: "\f084";
}
.start-view:before {
content:"\f002";
}
.classic-view {
background-image:url(../images/General/classicView16.png) !important;
}
.start-settings:before {
content:"\f013";
}
.tab-view:before {
content: "\f0ca";
}
.mobile-view:before {
content: "\f10b";
}
.desktop-view:before {
content: "\f108";
}
.upload, .edit, .sc, .refresh, .export, .view, .add, .modify, .delete, .save, .copy, .mark-read, .mark-unread, .createDiagram,.paintBrush {
height: auto;
}
.upload:before, .edit:before, .sc:before, .refresh:before, .export:before, .view:before, .add:before, .modify:before, .delete:before, .save:before, .copy:before, .mark-read:before, .mark-unread:before, .createDiagram:before, .paintBrush:before {
font-family: 'Font Awesome 5 Free';
}
.error {
background-image:url(../images/General/delete16.png) !important;
}
.success {
/* TODO find something outside of an app folder */
background-image:url(../images/comCenter/Complete16.gif) !important;
}
.delete:before {
content: "\f00d";
}
.add:before {
content: "\f067";
}
.modify:before {
content: "\f303";
}
.copy:before {
content: "\f0c5";
}
.save:before {
content: "\f0c7";
}
.view:before {
content: "\f002";
}
.edit:before {
content: "\f303";
}
.createDiagram:before{
content: "\f542";
}
.paintBrush:before{
content: "\f1fc";
}
.refresh:before {
content: "\f021";
}
.upload:before {
content: "\f062";
}
.export:before {
content: "\f063";
}
.sc:before {
content: "\f1e5";
}
.mark-read:before {
content: "\f0e0";
}
.mark-unread:before {
content: "\f0e0";
}
.start-notify:before {
font-family: "Font Awesome 5 Free";
content: '\f0f3';
}
.icon-help, .icon-info, .icon-view, .icon-refresh, .icon-lock, .icon-key, .icon-refreshNow, .icon-clock, .icon-table, .icon-hierarchy {
height: auto;
width: auto !important;
}
.icon-help:before, .icon-info:before, .icon-view:before, .icon-refresh:before, .icon-lock:before, .icon-key:before, .icon-refreshNow:before, .icon-clock:before, .icon-table:before, .icon-hierarchy:before {
font: 16px 'Font Awesome 5 Free';
}
.icon-help:before {
content: "\f059";
}
.icon-info:before {
content: "\f05a";
}
.icon-lock:before {
content: "\f023";
}
.icon-refresh:before {
content: "\f021";
}
.icon-refreshNow:before {
content: "\f021";
color:#FF0000;
}
.icon-refreshNow {
color:#FF0000;
}
.icon-clock:before {
content:"\f017";
}
.icon-table:before {
content:"\f0ce";
}
.icon-hierarchy:before {
content:"\f0e8";
}
.icon-key:before {
content: "\f084";
}
.icon-view:before {
content: "\f002";
}
.empty-icon {
background-image:url(../images/s.gif) ! important;
}
.esp-dot-indicator,
.esp_timeTrack_tree .x-tree-view .x-tree-icon.esp-dot-indicator {
margin-right: 0.33em !important;
color: transparent;
font-size: 1em;
width: auto;
min-width: 0px;
font-style: normal;
transform: scale(0.85);
transform-origin: center center;
}
.esp-dot-indicator:before {
content: '\f111' !important;
color: inherit !important;
font-family: 'Font Awesome 5 Free' !important;
font-weight: 900 !important;
}
/*----------------
EXTJS OVERRIDES
-----------------*/
.x-boundlist-item {
border-bottom: 1px solid #eee;
}
.esp-CodeMirrorMerge-fullscreen {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.esp-CodeMirrorMerge-fullscreen .CodeMirror-merge-pane {
height: 100%;
}
.esp-CodeMirrorMerge.x-form-trigger-wrap {
display: block;
}
.esp-CodeMirrorMerge .CodeMirror-merge {
border: 0;
}
.x-toolbar-default .x-tool-tool-el {
color: #000;
opacity: 0.5;
}
/* REMOVE DEAD SPACE IN TABS - MAKES TEXT SHOW UP UNDER THE CLOSE 'X' */
body.x-desktop:not([theme=datava]) .x-tab {
padding: 12px 5px 1px 5px;
}
body:not([theme=datava]) .x-tab-closable.x-tab-default .x-tab-button {
padding: 0px;
}
.x-tab-inner {
text-overflow: clip;
font-weight: normal;
}
/* handle tab wrapping */
.esp-tab-wrap-normal .x-tab-inner {
overflow-wrap: normal;
white-space: normal;
max-height: 9vh;
}
.esp-tab-wrap-aggressive .x-tab-inner {
overflow-wrap: break-word;
white-space: normal;
max-height: 9vh;
}
/* handle column header wrapping */
.esp-column-header-wrap-normal .x-column-header-text-inner {
overflow-wrap: normal;
white-space: normal;
}
.esp-column-header-wrap-aggressive .x-column-header-text-inner {
overflow-wrap: break-word;
white-space: normal;
}
/* IF THERE ARE LOTS OF TABS, MAKE THEM SMALLER */
.esp-tab-small.x-tab {
padding: 12px 5px 1px 5px;
}
.esp-tab-small .x-tab-inner {
font-size: .85em;
font-weight: normal;
line-height: 1em;
}
.esp-tab-small.x-tab .x-tab-button {
padding: 0px;
}
/* Popout add-on for tab. */
.x-tab .esp-tab-popout {
position: absolute;
width: 0px;
height: 12px;
font-family: 'Font Awesome 5 Free';
line-height: 1;
/*color: #888;*/
}
.x-tab:not(.esp-tab-small) .esp-tab-popout {
top: 8px;
font-size: 12px;
}
.x-tab.x-tab-closable:not(.esp-tab-small) .esp-tab-popout {
right: 5px;
}
.x-tab:not(.esp-tab-small):not(.x-tab-closable) .esp-tab-popout {
right: 10px;
}
.x-tab:not(.esp-tab-small):not(.x-tab-closable):hover .esp-tab-popout + .x-tab-wrap {
padding-right: 17px;
}
.x-tab.esp-tab-small .esp-tab-popout {
top: 2px;
left: 5px;
font-size: 10px;
}
.x-tab:hover .esp-tab-popout {
width: 12px;
}
.x-tab.x-tab-closable:hover .esp-tab-popout {
right: 24px;
}
.x-tab:hover .esp-tab-popout:before {
display: block;
line-height: 12px;
text-align: center;
content: '\f35d';
width: 12px;
}
.x-tab:not(.esp-tab-small):hover .esp-tab-poppable-btnWrap {
padding-right: 12px;
/* transition: 0.25s; */
}
.x-tab.x-tab-closable:not(.esp-tab-small):hover .esp-tab-poppable-btnWrap {
padding-right: 20px;
}
.esp-win-popin {
font: 12px/1 'Font Awesome 5 Free';
transform: rotate(180deg);
top: -14px !important;
text-align: right;
}
.esp-win-popin:before {
content: '\f35d';
}
/* LOADING MASK */
.esp-mask--opaque {
background-color: #e7e7e7;
}
.esp-form-container > .x-mask {
/* This tries to make the form loading so it hides it until it's really ready because things move around quite a bit, as the form hides/shows fields. */
background-color: #fafafa;
/* The animation freezes so don't do it. I like the idea, but the framerate is low.
animation-name: esp-animate-panel-load;
animation-duration: 5s;*/
}
/*
@keyframes esp-animate-panel-load {
0% {background-color: #fafafa;}
25% {background-color: #d5d5ff;}
50% {background-color: #fafafa;}
75% {background-color: #d5d5ff;}
100% {background-color: #fafafa;}
}
*/
/*---------------------------
Responsive 12-column layout
----------------------------*/
.esp-row {
display: flex;
}
.esp-row > .esp-span1,
.esp-row > .esp-span2,
.esp-row > .esp-span3,
.esp-row > .esp-span4,
.esp-row > .esp-span5,
.esp-row > .esp-span6,
.esp-row > .esp-span7,
.esp-row > .esp-span8,
.esp-row > .esp-span9,
.esp-row > .esp-span10,
.esp-row > .esp-span11,
.esp-row > .esp-span12 {
float: left;
overflow-x: auto;
}
.esp-row > .esp-span1 { width: 8.333333%; }
.esp-row > .esp-span2 { width: 16.666666%; }
.esp-row > .esp-span3 { width: 25.000000%; }
.esp-row > .esp-span4 { width: 33.333333%; }
.esp-row > .esp-span5 { width: 41.666666%; }
.esp-row > .esp-span6 { width: 50.000000%; }
.esp-row > .esp-span7 { width: 58.333333%; }
.esp-row > .esp-span8 { width: 66.666666%; }
.esp-row > .esp-span9 { width: 75.000000%; }
.esp-row > .esp-span10 { width: 83.333333%; }
.esp-row > .esp-span11 { width: 91.666666%; }
.esp-row > .esp-span12 { width: 100.000000%; }
/*------------------
MULTI-ROWS
------------------*/
.esp-multiRow {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.esp-multiCol {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
/* STACK COLUMNS FOR SMALL WINDOWS */
.esp-antiMultiRow.esp-multiRow,
.esp-antiMultiRow.esp-multiRow > .esp-multiCol,
.esp-antiCenteredWrapper.esp-centeredWrapper {
display: block;
}
.esp-antiMultiRow {
margin-left: 10px;
margin-right: 10px;
max-width: calc(100% - 20px);
}
.esp-antiMultiRow .esp-multiRow,
.esp-antiMultiRow .esp-multiCol {
margin-left: 0px;
margin-right: 0px;
max-width: 100%;
}
/* OPTIONS FOR COLUMN SPACING */
.esp-multiRow.esp-fill{
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.esp-multiRow.esp-fill > .esp-multiCol {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.esp-multiRow.esp-center{
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.esp-multiRow.esp-center-v {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.esp-multiRow.esp-start{
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.esp-multiRow.esp-end{
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.esp-fitContent { display: table; }
/*----------
RULES
----------*/
.esp-thinRule,
.esp-midRule,
.esp-thickRule,
.esp-thinGrayRule,
.esp-midGrayRule,
.esp-thickGrayRule {
margin-top: 5px;
margin-bottom: 5px;
}
.esp-thinRule {
height: 1px;
background-color: #223975;
}
.esp-midRule {
height: 3px;
background-color: #223975;
}
.esp-thickRule {
height: 5px;
background-color: #223975;
}
.esp-thinGrayRule {
height: 1px;
background-color: #eee;
}
.esp-midGrayRule {
height: 3px;
background-color: #eee;
}
.esp-thickGrayRule {
height: 5px;
background-color: #eee;
}
/*--------------------
PANELS
--------------------*/
.esp-reportTitle {
border-radius: 10px;
padding: 0.5em;
margin: 0.5em;
flex-grow: 0;
}
.esp-reportTitle > * {
margin: 0 !important;
padding: 0 !important;
}
.esp-reportTitle:first-child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.esp-reportTitle:last-child {
margin-left: auto;
}
.esp-bg {
background-color: white !important;
}
.esp-bgdiv {
background-color: #ececef;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow:auto;
}
.esp-topdiv {
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: 4px;
padding: 2px 0px 0px 2px;
font-size: 13px;
font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
}
.esp-panel {
background-color: white;
margin: 10px;
padding: 10px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 0px 10px #00000015,
0px 0px 3px #00000010,
0px 1px 2px #00000022;
}
.esp-panel .esp-panel {
box-shadow: none;
border: 1px solid #e0e0e0;
}
.esp-panel--outlined {
border: 1px solid var(--panel-outline-color,#444);
}
/*--------------------
TAB PANELS
-----------------------*/
.esp-tabPanel {
background-color: #f5f5f5;
box-sizing: border-box;
padding: 15px !important;
overflow: hidden;
max-width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
.esp-tabPanel--firstFormEl {
margin-top: 0px;
}
.esp-tabPanel--lastFormEl {
margin-bottom: 0px;
}
.esp-form-container form.esp-form--hasTopTabPanel {
padding-top: 0px;
}
.esp-form-container form.esp-form--hasBottomTabPanel {
padding-bottom: 0px;
}
.esp-form-container form > .esp-field--popout {
margin-top: -10px;
}
.esp-tabPanel--inverted,
.esp-tabPanel .esp-tabPanel {
background-color: white;
padding: 0px !important;
}
.esp-tabHolder.esp-touchTabHolder{
/* touch tab holders should render a little differently. */
overflow-x: auto;
overflow-y: hidden;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.esp-tabPanel--inverted > .esp-tabHolder > div:not(.esp-currentTab),
.esp-tabPanel .esp-tabPanel > .esp-tabHolder > div:not(.esp-currentTab) {
background-color: white;
}
.esp-panelTitle {
background-color: #fff;
color: #444;
padding: 0 0.5em 0.5em;
border-radius: 10px;
letter-spacing: 0.5px;
line-height: 1.25;
font-weight: 515;
position: relative;
z-index: 8;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
}
.esp-panelTitle,
.esp-panelTitle > .esp-fieldHead * {
font-size: 15px;
}
.esp-panelTitle a {
color: hsl(216deg 60% 40%);
display: inline-block;
font-size: 12px;
margin-left: 10px;
font-weight: 400;
}
.esp-panelTitle .esp-panelTitle__right {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: right;
}
.esp-panelSubtitle a {
display: inline-block;
margin-left: 5px;
}
@media print {
.esp-panelTitle a,
.esp-panelSubtitle a {
display: none;
}
}
.esp-panel--outlined > .esp-panelTitle {
border-bottom-color: var(--panel-outline-color,#444);
}
.esp-panel--outlined > .esp-panelTitle,
.esp-panel--outlined > .esp-panelTitle .esp-fieldHeadText {
color: var(--panel-outline-color,#444);
}
.esp-panel > :not(.esp-panelTitle),
.esp-panelContent {
padding-top: 5px 0 0 0;
background-color: white;
}
@media print {
.esp-panel > :not(.esp-panelTitle),
.esp-panelContent {
max-height: none !important;
}
}
.esp-panelTitle + table {
background-color: white;
border-top: 0px;
}
.esp-tabPanel:not(.esp-tabPanel--inverted) .esp-tabContent .esp-panel > :not(.esp-panelTitle),
.esp-tabPanel:not(.esp-tabPanel--inverted) .esp-tabContent .esp-panelContent {
padding: 0px;
}
.esp-tabHolder {
width: 100%;
float: left;
}
.esp-sticky {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999;
box-shadow: 0px 1px 3px #00000017;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.esp-alwaysSticky {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.esp-sticky > .esp-tabHolder {
background-color: white;
padding-top: 5px;
padding-bottom: 5px;
}
.esp-sticky > .esp-tabHolder + .esp-tabHolder {
border-top: 1px solid #ccc;
}
.esp-sticky > .esp-tabHolder > div {
padding-top: 5px;
padding-bottom: 5px;
}
.esp-tabHolder > div {
position: relative;
margin-right: 0px;
letter-spacing: 0.5px;
font-size: 14px;
line-height: 1.25;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
white-space: nowrap;
-webkit-transition: color 0.2s ease;
transition: color 0.2s ease;
display: inline-block;
float: left;
}
.esp-tabViewToggle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.esp-tabHolder > div:not(.esp-tabViewToggle) {
padding: 8px 12px;
}
.esp-sticky > .esp-tabHolder > .esp-tabViewToggle {
padding: 8px 8px 8px 15px;
}
*:not(.esp-sticky) > .esp-tabHolder > .esp-tabViewToggle {
padding: 8px 10px 8px 8px;
}
.esp-tabHolder > div:last-child {
margin-right: 20px;
}
.esp-tabContent {
position: relative;
float: left;
clear: both;
padding: 10px;
width: 100%;
background-color: white !important;
box-shadow: 0px 2px 3px rgba(100,100,100,0.1);
}
.esp-tabContent .esp-tabContent {
box-shadow: none;
}
/*-----------------------
STACKING & PRINTING
------------------------*/
/* STANDARD TABBED LAYOUT */
@media screen {
.esp-tabPanel:not(.esp-stacked) > .esp-tabContent {
border-radius: 8px;
}
body.x-desktop .esp-tabPanel--inverted:not(.esp-stacked) > .esp-tabContent,
body.x-desktop .esp-tabPanel .esp-tabPanel:not(.esp-stacked) > .esp-tabContent {
background-color: #f5f5f5 !important;
}
body:not(.x-desktop) .esp-tabPanel--inverted:not(.esp-stacked) > .esp-tabContent,
body:not(.x-desktop) .esp-tabPanel .esp-tabPanel:not(.esp-stacked) > .esp-tabContent {
padding: 0px !important;
}
.esp-tabPanel--inverted:not(.esp-stacked) > .esp-tabContent {
padding: 0px;
}
.esp-tabPanel:not(.esp-stacked) > .esp-tabHolder > .esp-currentTab {
color: #444 !important;
font-weight: 400;
box-shadow: 0px 2px 3px rgba(100,100,100,0.1);
}
.esp-tabPanel:not(.esp-stacked):not(.esp-tabPanel--inverted) > .esp-tabHolder > .esp-currentTab {
background-color: white;
position: relative;
}
.esp-tabPanel:not(.esp-stacked) > .esp-tabHolder > .esp-currentTab:not(.esp-tabHolder__detached) {
border-radius: 8px 8px 0px 0px;
}
.esp-tabPanel:not(.esp-stacked) > .esp-tabHolder > .esp-currentTab.esp-tabHolder__detached {
border-radius: 8px;
}
body:not(.x-desktop) .esp-tabPanel .esp-tabPanel .esp-tabHolder .esp-currentTab {
border-radius: 8px;
}
.esp-tabPanel:not(.esp-tabPanel--inverted) {
--tab-content-bg: white;
}
.esp-tabPanel .esp-tabPanel,
.esp-tabPanel.esp-tabPanel--inverted {
--tab-content-bg: #f5f5f5;
}
.esp-tabPanel:not(.esp-stacked):not(.esp-tabPanel--inverted) > .esp-tabHolder > .esp-currentTab:not(.esp-tabHolder__detached):before {
pointer-events: none;
content: '';
position: absolute;
display: block;
width: 16px;
height: 16px;
right: calc(100% - 1px);
bottom: -1px;
background: radial-gradient(transparent 60%, var(--tab-content-bg) 0%);
mask: linear-gradient(-45deg, black 30%, transparent 30%);
}
.esp-tabPanel:not(.esp-stacked):not(.esp-tabPanel--inverted) > .esp-tabHolder > .esp-currentTab:not(.esp-tabHolder__detached):after {
pointer-events: none;
content: '';
position: absolute;
display: block;
width: 16px;
height: 16px;
left: calc(100% - 1px);
bottom: -1px;
background: radial-gradient(transparent 60%, var(--tab-content-bg) 0%);
mask: linear-gradient(45deg, black 30%, transparent 30%);
}
body:not(.x-desktop) .esp-tabPanel .esp-tabPanel .esp-currentTab:before,
body:not(.x-desktop) .esp-tabPanel .esp-tabPanel .esp-currentTab:after {
display: none !important;
}
.esp-tabHolder {
padding-left: 31px;
}
.esp-tabHolder > :first-child {
margin-left: -31px;
}
.esp-sticky .esp-tabHolder {
padding-left: 38px;
}
.esp-sticky .esp-tabHolder > :first-child {
margin-left: -38px;
}
.esp-tabPanel:not(.esp-stacked).esp-tabPanel--inverted > .esp-tabHolder > .esp-currentTab,
.esp-tabPanel .esp-tabPanel:not(.esp-stacked) > .esp-tabHolder > .esp-currentTab {
background-color: #f5f5f5;
}
.esp-tabPanel--inverted:not(.esp-stacked) > .esp-tabHolder > div.esp-currentTab,
.esp-tabPanel .esp-tabPanel:not(.esp-stacked) > .esp-tabHolder > div.esp-currentTab {
z-index: 1;
box-shadow: none;
}
.esp-tabContent:not(.esp-currentTabContent) {
display: none;
}
.esp-tabPrintTitle{
display: none;
}
}
/* STACKED LAYOUT -- When making changes here, copy them into the print styles below w/ .esp-stacked removed */
.esp-tabPanel.esp-stacked > .esp-tabContent {
padding: 0px;
}
.esp-tabPanel--inverted.esp-stacked > .esp-tabContent,
.esp-tabPanel .esp-tabPanel.esp-stacked > .esp-tabContent {
padding: 0px;
}
.esp-tabPanel--inverted.esp-stacked > .esp-tabContent:nth-of-type(2),
.esp-tabPanel .esp-tabPanel.esp-stacked > .esp-tabContent:nth-of-type(2) {
border-top: 1px solid #ccc;
}
.esp-tabPanel.esp-stacked > .esp-tabContent:not(.esp-forceHide),
.esp-tabPanel.esp-stacked > .esp-tabContent > .esp-tabPrintTitle{
display: block !important;
visibility: visible !important;
}
.esp-sticky > .esp-tabHolder > div,
.esp-tabPanel--inverted.esp-stacked > .esp-tabHolder > div,
.esp-tabPanel .esp-tabPanel.esp-stacked > .esp-tabHolder > div {
background-color: white !important;
}
.esp-tabPanel.esp-stacked > .esp-tabContent > .esp-tabPrintTitle {
font-size: 14px;
color: #444;
letter-spacing: 0.5px;
border-bottom: 1px solid #ccc;
padding: 10px 15px;
}
.esp-tabPanel:not(.esp-tabPanel--inverted).esp-stacked > .esp-tabContent > .esp-tabPrintTitle + * {
padding: 5px;
}
.esp-tabPanel.esp-stacked > .esp-tabContent:not(:nth-of-type(2)) > .esp-tabPrintTitle {
border-top: 1px solid #ccc;
}
.esp-tabPanel.esp-stacked > .esp-tabHolder > div,
.esp-sticky .esp-tabHolder > div,
.esp-tabHolder > div:not(.esp-currentTab) {
color: #888;
background-color: transparent;
font-weight: 400;
box-shadow: 0px 0px 0px transparent;
}
.esp-stackAll .esp-stackAllHide {
display: none !important;
}
/* PRINTING STYLES */
@media print{
/* DON'T ALLOW PAGE-BREAKS INSIDE IMAGES */
img {
page-break-inside: avoid;
}
/* HIDE TAB HEADERS WHEN PRINTING */
.esp-tabHolder {
display:none;
}
/* STACK TABS -- Same as stacked css from above, with .esp-stacked removed */
.esp-tabPanel > .esp-tabContent {
padding: 0px;
}
.esp-tabPanel--inverted > .esp-tabContent:nth-of-type(2),
.esp-tabPanel .esp-tabPanel > .esp-tabContent:nth-of-type(2) {
border-top: 1px solid #ccc;
}
.esp-tabPanel--inverted > .esp-tabContent:last-of-type,
.esp-tabPanel .esp-tabPanel > .esp-tabContent:last-of-type {
border-bottom: 1px solid #ccc;
}
.esp-tabPanel > .esp-tabContent:not(.esp-forceHide),
.esp-tabPanel > .esp-tabContent > .esp-tabPrintTitle{
display: block !important;
visibility: visible !important;
}
.esp-sticky > .esp-tabHolder > div,
.esp-tabPanel--inverted > .esp-tabHolder > div,
.esp-tabPanel .esp-tabPanel > .esp-tabHolder > div {
background-color: white !important;
}
.esp-tabPanel > .esp-tabContent > .esp-tabPrintTitle {
font-size: 14px;
color: #444;
letter-spacing: 0.5px;
border-bottom: 1px solid #ccc;
padding: 10px 15px;
}
.esp-tabPanel:not(.esp-tabPanel--inverted) > .esp-tabContent > .esp-tabPrintTitle + * {
padding: 5px;
}
.esp-tabPanel > .esp-tabContent:not(:nth-of-type(2)) > .esp-tabPrintTitle {
border-top: 1px solid #ccc;
}
.esp-tabPanel > .esp-tabHolder > div,
.esp-sticky .esp-tabHolder > div,
.esp-tabHolder > div:not(.esp-currentTab) {
color: #888;
background-color: transparent;
font-weight: 400;
box-shadow: 0px 0px 0px transparent;
}
.esp-tabPanel--inverted > .esp-tabHolder > div.esp-currentTab,
.esp-tabPanel .esp-tabPanel > .esp-tabHolder > div.esp-currentTab {
border-bottom: 1px solid #ccc;
}
}
/*-----------------------------------
TOGGLE CONTAINERS
-----------------------------------*/
@keyframes esp-slideUp {
from {}
to {
height: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
}
}
.esp-slideUp {
animation-name: esp-slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
overflow: hidden;
}
@keyframes esp-slideDown {
to {}
from {
height: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
}
}
.esp-slideDown {
animation-name: esp-slideDown;
animation-duration: 0.5s;
overflow: hidden;
}
@keyframes esp-pointUp {
from { transform: rotate(0); }
to { transform: rotate(-180deg); }
}
.esp-pointUp:after {
animation-name: esp-pointUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@keyframes esp-pointDown {
from { transform: rotate(-180deg); }
to { transform: rotate(0deg); }
}
.esp-pointDown:after {
animation-name: esp-pointDown;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
/*
.esp-toggleSection{
background-color: #ececef;
margin: 2px;
}
.esp-toggleContainerToggle{
background-color: #fff;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
*/
.esp-toggleSection {
}
.esp-toggleContainerToggle {
background-color: #fff;
color: #444;
padding: 8px 40px 8px 15px;
border-bottom: 1px solid #ccc;
letter-spacing: 0.5px;
line-height: 1.25;
font-size: 15px;
cursor: pointer;
position: relative;
}
@media screen {
.esp-toggleContainerToggle:after {
content: '\f107';
font-family: 'Font Awesome 5 Free';
position: absolute;
right: 15px;
top: 50%;
margin-top: -10px;
font-size: 16px;
}
.esp-toggleSection.esp-toggleOn > .esp-toggleContainerToggle:after {
transform: rotate(-180deg);
}
}
.esp-toggleContainerToggle > * {
display: inline-block;
}
.esp-toggleContainerToggle a {
display: inline-block;
font-size: 12px;
margin-left: 10px;
font-weight: 400;
}
@media print {
.esp-toggleContainerToggle a {
display: none;
}
}
.esp-toggleContent {
background-color: white;
padding: 15px;
}
@media screen {
.esp-toggleSection:not(.esp-toggleOn) > .esp-toggleContent {
border-bottom: none !important;
padding-top: 0px;
padding-bottom: 0px;
height: 0px !important;
min-height: 0px !important;
max-height: 0px !important;
overflow: hidden;
}
}
@media print {
.esp-toggleContent {
height: auto !important;
min-height: none !important;
max-height: none !important;
}
}
/*---------------------
ACCORDION GROUPS
---------------------*/
.esp-accordionGroup {
background: white;
border-radius: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.esp-accordionGroup .esp-toggleSection {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.esp-accordionGroup .esp-toggleSection.esp-toggleOn {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
overflow: auto;
}
.esp-accordionGroup .esp-toggleSection:not(:last-child) .esp-toggleContent {
border-bottom: 1px solid #ccc;
}
.esp-accordionGroup > :first-child > * {
border-radius: 10px 10px 0 0;
}
.esp-accordionGroup > :last-child > * {
border-radius: 0 0 10px 10px;
}
/*---------------------
FIELD/INPUT STYLING
--------------------*/
/* LEGACY LAYOUTS */
table.esp-form {
border-collapse: separate;
border-spacing: 0px 6px;
padding-left: 6px;
padding-right: 6px;
}
table.esp-form td:first-child {
text-align: left;
color: #777;
}
table.esp-form > tbody > tr > td {
padding: 5px;
background-color: #fff;
}
/* GENERAL FORM LAYOUT */
.esp-fieldDisplay {
display: inline-block;
}
.formBuilderXml div.esp-spacer{
padding:5px;
background-color: #c6c6c6;
position: relative;
z-index: 9;
}
.formBuilderXml div:not(.esp-multiRow) > div.esp-spacer {
margin-top:2px;
margin-bottom:2px;
}
.formBuilderXml div.esp-spacerToRemove{
background-color: #c6c6c6;
}
.esp-spacerToRemove {
position: relative;
border: 2px dashed rgba(46, 204, 113);;
border-radius: 8px;
padding: 20px;
background-color: rgba(46, 204, 113, 0.3);
transition: background-color 0.3s ease, border-color 0.3s ease;
color: #333;
font-size: 16px;
font-family: 'Arial', sans-serif;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.formBuilderXml div.esp-dropAllowed {
background-color: rgba(46, 204, 113, 0.3);
}
.formBuilderXml div.esp-highlight {
background-color: rgba(39, 174, 96, 0.3) !important;
}
.esp-formBuilderDragDiv {
position: fixed;
left: -5000px;
border: solid #c6c6c6 2px;
}
.esp-autoPageGrid td.esp-highlight {
background-color: #eee;
}
.esp-autoPageGrid td.esp-grid-cell-invalid {
border: 1px solid #c62828;
}
.emptySecondHeader:last-child {
display: none;
}
/* SAME-WIDTH FIELDS */
.x-desktop .esp-fieldContainer .esp-fieldListContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-transition: height 0.2s ease;
-o-transition: height 0.2s ease;
transition: height 0.2s ease;
min-width: 100%;
}
.x-desktop .esp-fieldContainer:not(.esp-checkbox) .esp-fieldListContainer {
-webkit-box-pack: stretch;
-ms-flex-pack: stretch;
justify-content: stretch;
}
.x-desktop .esp-fieldContainer:not(.esp-checkbox) .x-form-item {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.x-desktop .esp-fieldContainer:not(.esp-checkbox) .x-form-item:not(.x-form-fieldcontainer) {
min-width: 100%;
}
.x-desktop .esp-fieldContainer .esp-fieldListContainer > :is(.x-form-checkboxgroup, .x-form-radio-group){
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.x-desktop .esp-fieldContainer .x-form-item-body {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-transition: width 0.2s ease;
-o-transition: width 0.2s ease;
transition: width 0.2s ease;
}
.x-desktop .esp-fieldContainer .x-form-field-wrap:has(> table),
.x-desktop .esp-fieldContainer .x-form-field-wrap > table {
width: 100% !important;
}
/* FIELD & LABEL POSITIONING */
.esp-form-container form {
padding-top: 10px;
padding-bottom: 10px;
background: white;
}
.x-desktop .esp-fieldContainerWrap {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.x-desktop .esp-fieldContainer:not(.esp-fieldContainer--clockInOut) {
position: relative;
border-radius: 10px;
overflow: hidden;
background: white;
min-height: 42px;
padding: 0px 12px 5px 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin: 3px 6px;
width: auto !important;
height: auto !important;
gap: 0px !important; /* Fixes grid layouts in some legacy forms */
}
.x-desktop .esp-fieldContainer:not(.esp-fieldContainer--fullscreen) {
z-index: 6;
}
.x-desktop .esp-fieldContainer:has(.esp-fieldListContainer:empty:first-child:last-child) {
opacity: 0;
position: absolute;
height: 0 !important;
width: 0 !important;
overflow: hidden;
pointer-events: none;
}
.x-desktop .esp-fieldContainer--multiTree,
.x-desktop .esp-fieldContainer--searchItemSelector,
.x-desktop .esp-fieldContainer:not(.esp-checklistField):has(.x-form-textarea, .x-html-editor-container, .esp-fileField, .esp-expandableListField) {
padding-bottom: 0px !important;
}
.x-desktop .esp-fieldContainer:has(.esp-fileField) {
width: auto !important;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.x-desktop .esp-fieldContainer .esp-fieldHead {
text-align: left;
color: #444;
font-size: 12px;
line-height: 1.1em;
letter-spacing: 0.25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
transition: all 0.2s ease;
}
.x-desktop .esp-fieldContainer .esp-fieldHead .clickable-image {
margin-left: 5px;
}
.x-desktop .esp-fieldContainer:not(.esp-fieldContainer--list).esp-checkbox .esp-fieldHead {
padding-right: 40px !important;
}
.x-desktop .esp-fieldContainer .esp-fieldHead,
.x-desktop .esp-fieldContainer :is(.x-form-type-text, .x-form-type-password) input {
padding-right: calc((var(--esp-trigger-count, 0) * 20px) + 12px) !important;
}
.x-desktop .esp-fieldContainer:has(.x-form-trigger.x-form-arrow-trigger):has(.x-form-trigger.fa-search, .clickable.fa-search) .esp-expandable-list__row :is(.x-form-type-text, .x-form-type-password) input {
margin-left: 18px !important;
padding-right: 30px !important;
max-width: calc(100% - 18px);
}
.x-desktop .esp-fieldContainer:has(.x-form-trigger.x-form-arrow-trigger):has(.x-form-trigger.fa-search, .clickable.fa-search):has(.esp-del-trigger) .esp-expandable-list__row :is(.x-form-type-text, .x-form-type-password) input {
padding-right: 50px !important;
}
.x-desktop .esp-fieldContainer:not(.esp-fieldContainer--list):has(.x-form-trigger.fa-globe, .x-form-date-trigger) .esp-fieldHead {
padding-right: 22px!important;
}
.x-desktop .esp-fieldContainer:has(.x-form-trigger.fa-globe, .x-form-date-trigger) :is(.x-form-type-text input, .x-form-type-password input) {
padding-right: 34px!important;
}
.x-desktop .esp-fieldContainer--datetime > .esp-field:first-child:last-child:not(:has(.ux-datetime-date)) .x-form-trigger {
margin-top: 13px !important;
}
.x-desktop .esp-fieldContainer--datetime > .esp-field:first-child:last-child .ux-datetime-date .x-form-trigger {
margin-top: 1px !important;
}
@media print {
.esp-fieldContainer .x-form-trigger,
.esp-fieldContainer .fa.fa-search,
.esp-fieldContainer .x-tool-tool-el {
display: none !important;
}
}
.x-desktop .esp-fieldContainer:has(.x-form-type-text textarea.x-form-text-default) .esp-fieldHead {
width: calc(100% - 4px);
padding-bottom: 2px;
position: relative;
z-index: 1;
}
.x-desktop .esp-fieldContainer:has(.x-form-type-text textarea.x-form-text-default):has(.esp-fieldHeadText:empty, .esp-fieldHead.esp-forceHide) .esp-fieldHead {
display: none;
}
.x-desktop .esp-fieldContainer:is(:not(.esp-checkbox), :has(.x-form-check-group, .x-form-radio-group)) .esp-fieldHead {
/* move label up */
padding-top: 6px;
margin-bottom: -6px;
}
.x-desktop .esp-fieldContainer:not(.esp-fieldContainer--focused):not(.esp-fieldContainer--codeMirror):not(.esp-checklistField):not(:has(input[placeholder], .esp-multiTree, .x-form-check-group, .x-form-radio-group)):is(:has(.x-field:not(.not-empty)):has(.esp-fieldListContainer > :is(.x-field.x-form-type-text, .x-form-type-password))) .esp-fieldHead {
/* move label down */
padding-top: 14px;
margin-bottom: -14px;
}
.x-desktop .esp-fieldContainer.esp-checkbox:not(:has(.x-form-check-group, .x-form-radio-group)) .esp-fieldHead {
margin-bottom: 0px;
padding-top: 13px;
padding-bottom: 13px;
}
.x-desktop .esp-fieldContainer.esp-checkbox:has(.esp-fieldListContainer > .esp-expandableListField) .esp-fieldHead {
padding-top: 6px;
margin-bottom: -6px;
padding-bottom: 0px;
}
.x-desktop .esp-fieldContainer.esp-checkbox:has(.esp-fieldListContainer > .esp-expandableListField) .esp-field {
margin-top: 6px;
margin-bottom: 0px;
}
.x-desktop .esp-fieldContainer .esp-field {
color: #444;
width: 100%;
}
.x-desktop .esp-fieldContainer:not(.esp-fieldContainer--fullscreen) .esp-field {
z-index: 10;
}
.x-desktop .esp-fieldContainer:is(:not(.esp-checkbox), :has(.x-form-check-group, .x-form-radio-group)) .esp-field {
margin-top: 6px;
margin-bottom: -6px;
}
.x-desktop .esp-fieldContainer:is(:not(.esp-checkbox), :has(.x-form-check-group, .x-form-radio-group)) .esp-field:first-child {
margin-top: 12px;
}
.x-desktop .esp-fieldContainer:not(.esp-fieldContainer--confirmation):not(.esp-fieldContainer--codeMirror):not(.esp-fieldContainer--datetime):not(:has(.x-form-textarea)):is(:has(.esp-checklist, .esp-multiTree), :not(.esp-checkbox, :has(.esp-fieldDisplay, .esp-fieldListContainer > :is(.x-field.x-form-type-text, .x-form-type-password)))) .esp-field {
margin-top: 10px;
margin-bottom: 0px;
}
.x-desktop .esp-fieldContainer--confirmation .esp-field {
margin-bottom: 0px !important;
}
.x-desktop .esp-fieldContainer--confirmation .esp-expandable-list__row:last-child input {
padding-bottom: 6px;
}
.x-desktop .esp-fieldContainer--codeMirror .esp-field {
margin-top: 6px;
margin-bottom: 0px;
}
.x-desktop .esp-fieldContainer.esp-fieldContainer--datetime .esp-field,
.x-desktop .esp-fieldContainer .esp-field:has(.x-form-textarea) {
margin-top: 4px;
margin-bottom: 0px;
}
.x-desktop .esp-fieldContainer.esp-fieldContainer--datetime .esp-field:first-child:last-child:has(.ux-datetime-date) {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.x-desktop .esp-fieldContainer--list .esp-field {
margin-top: 10px !important;
margin-bottom: 0px !important;
}
.x-desktop .esp-fieldContainer--list .esp-fieldHead {
padding-bottom: 0px !important;
width: 100% !important;
}
.x-desktop .esp-fieldContainer:not(.esp-fieldContainer--codeMirror) > .esp-field > .esp-fieldListContainer > .x-field > .x-form-item-body > .x-form-trigger-wrap:has(> .x-form-text-wrap > :is(input:not([type="hidden"]), textarea:not([type="hidden"]))),
.x-desktop .esp-fieldContainer.esp-fieldContainer--datetime td .x-field .x-form-item-body .x-form-trigger-wrap:has(> .x-form-text-wrap > :is(input:not([type="hidden"]), textarea:not([type="hidden"]))),
.x-desktop .esp-fieldContainer:not(.esp-fieldContainer--codeMirror) .esp-expandableListField:not(.gettingHeights) .esp-expandable-list__row > div > div > .x-field > .x-form-item-body > .x-form-trigger-wrap:has(> .x-form-text-wrap > :is(input:not([type="hidden"]), textarea:not([type="hidden"]))),
.x-desktop .esp-fieldContainer.esp-fieldContainer--datetime .esp-expandableListField:not(.gettingHeights) .esp-expandable-list__row td .x-field .x-form-item-body .x-form-trigger-wrap:has(> .x-form-text-wrap > :is(input:not([type="hidden"]), textarea:not([type="hidden"]))){
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-right: -4px;
}
.x-desktop .esp-fieldContainer > .esp-field > .esp-fieldListContainer > .x-field > .x-form-item-body > .x-form-trigger-wrap > .x-form-text-wrap:has(> input:not([type="hidden"]), > textarea:not([type="hidden"]):not([style*="none"])),
.x-desktop .esp-fieldContainer > .esp-field > .esp-fieldListContainer > .x-field > .x-form-item-body > .x-form-trigger-wrap > .x-form-text-wrap > input:not([type="hidden"]),
.x-desktop .esp-fieldContainer > .esp-field > .esp-fieldListContainer > .x-field > .x-form-item-body > .x-form-trigger-wrap > .x-form-text-wrap > textarea:not([type="hidden"]),
.x-desktop .esp-fieldContainer .esp-expandableListField:not(.gettingHeights) .esp-expandable-list__row > div > div > .x-field > .x-form-item-body > .x-form-trigger-wrap > .x-form-text-wrap:has(> input:not([type="hidden"]), > textarea:not([type="hidden"]):not([style*="none"])),
.x-desktop .esp-fieldContainer .esp-expandableListField:not(.gettingHeights) .esp-expandable-list__row > div > div > .x-field > .x-form-item-body > .x-form-trigger-wrap > .x-form-text-wrap > input:not([type="hidden"]),
.x-desktop .esp-fieldContainer .esp-expandableListField:not(.gettingHeights) .esp-expandable-list__row > div > div > .x-field > .x-form-item-body > .x-form-trigger-wrap > .x-form-text-wrap > textarea:not([type="hidden"]) {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.x-desktop .esp-fieldContainer.esp-fieldContainer--datetime td .x-field {
min-height: 18px;
}
.x-desktop .esp-fieldContainer.esp-fieldContainer--datetime td .x-form-item-body {
min-height: 0px;
}
.x-desktop .esp-fieldContainer--datetime .ux-datetime-date .x-field .x-form-item-body .x-form-trigger-wrap .x-form-text-wrap,
.x-desktop .esp-fieldContainer--datetime .ux-datetime-date .x-field .x-form-item-body .x-form-trigger-wrap .x-form-text-wrap input {
position: absolute;
top: 0;
left: 0;
right: 0;
height: auto;
}
.x-desktop .esp-fieldContainer--datetime .ux-datetime-date .x-field .x-form-item-body .x-form-trigger-wrap .x-form-text-wrap {
bottom: 22px;
}
.x-desktop .esp-fieldContainer--datetime .ux-datetime-date .x-field .x-form-item-body .x-form-trigger-wrap .x-form-text-wrap input {
bottom: 0px;
padding-left: 12px;
padding-top: 18px;
padding-bottom: 0px;
height: 17px;
box-sizing: content-box !important;
max-width: calc(100% - 46px);
}
.multi-select-subField-dateTime {
padding-top: unset !important;
}
.x-desktop .esp-fieldContainer--datetime .ux-datetime-time .x-field .x-form-item-body .x-form-trigger-wrap .x-form-text-wrap,
.x-desktop .esp-fieldContainer--datetime .ux-datetime-time .x-field .x-form-item-body .x-form-trigger-wrap .x-form-text-wrap input {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: auto;
}
.x-desktop .esp-fieldContainer--datetime .ux-datetime-time .x-field .x-form-item-body .x-form-trigger-wrap .x-form-text-wrap {
bottom: 0px;
height: 22px;
}
.x-desktop .esp-fieldContainer--datetime .ux-datetime-time .x-field .x-form-item-body .x-form-trigger-wrap .x-form-text-wrap input {
padding-top: 4px;
padding-left: 12px;
padding-bottom: 8px;
}
.x-desktop .esp-fieldContainer .x-form-trigger-wrap > :not(.x-form-trigger) + .x-form-trigger:not(.esp-multiTree-trigger, :has(.x-btn)) {
margin-left: 8px;
}
.x-desktop .esp-fieldContainer .x-form-trigger:not(.esp-multiTree-trigger):last-child {
margin-right: -5px;
}
.x-desktop .esp-fieldContainer .x-form-trigger {
position: relative;
white-space: normal;
font-size: 14px !important;
margin-bottom: -2px;
overflow: visible;
height: 20px;
}
.x-desktop .esp-fieldContainer .x-form-trigger-spinner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: -17px;
height: 32px;
margin-bottom: -32px;
}
.x-desktop .esp-fieldContainer .x-form-trigger.fa-search:not(:last-child) {
margin-right: 1px;
}
.x-desktop .esp-fieldContainer .esp-colorPicker .x-form-trigger-default {
top: -8px;
}
.x-desktop .esp-fieldContainer .esp-field > :not([esp-listmastercolumn]) .x-form-trigger.x-form-arrow-trigger {
top: -9px;
padding-left: 2px;
}
.x-desktop .esp-fieldContainer .esp-field > :not([esp-listmastercolumn]) .x-field:not(.hasDisplayCard) .x-form-trigger.x-form-arrow-trigger {
font-size: 16px !important;
}
.x-desktop .esp-fieldContainer .esp-field > [esp-listmastercolumn] .x-form-trigger.x-form-arrow-trigger {
top: 1px;
}
.x-desktop .esp-fieldContainer .esp-field > :not([esp-listmastercolumn]) .x-form-trigger.x-form-time-trigger {
top: -9px;
}
.x-desktop .esp-fieldContainer--datetime .esp-field > :not([esp-listmastercolumn]) .ux-datetime-time .x-form-trigger.x-form-time-trigger {
top: 0px;
}
.x-desktop .esp-fieldContainer .x-form-trigger.fa-search {
top: -9px;
padding-top: 3px;
}
.x-desktop .esp-fieldContainer .x-form-trigger.fa-plus {
top: -9px;
padding-top: 3px;
}
.x-desktop .esp-fieldContainer .x-form-trigger.fa-globe {
top: -10px;
padding-top: 4px;
}
.x-desktop .esp-fieldContainer .x-form-trigger.x-form-date-trigger {
top: -10px;
}
.x-desktop .esp-fieldContainer .x-form-trigger.esp-del-trigger {
top: -9px;
}
.x-desktop .esp-fieldContainer--datetime .esp-field:nth-child(2) .ux-datetime-date .x-form-trigger.x-form-date-trigger {
top: 0px;
}
.x-desktop .esp-fieldContainer--datetime .esp-field:first-child .ux-datetime-date .x-form-trigger.x-form-date-trigger {
top: 3px;
}
.x-desktop .esp-fieldContainer--datetime .ux-datetime-time .x-form-trigger.x-form-time-trigger {
top: 0px;
}
.x-desktop .esp-fieldContainer .esp-expandable-list__row .x-form-trigger {
top: 0px;
}
.x-desktop .esp-fieldContainer:not(:has(.esp-fieldHead)) .x-form-trigger {
margin-top: 7px;
}
.x-desktop .esp-fieldContainer:has(.esp-fieldHead.esp-forceHide) .x-form-trigger {
margin-top: 13px;
}
.x-desktop .esp-fieldContainer .x-form-spinner {
color: inherit;
height: 12px;
overflow: hidden;
background: transparent;
font-size: 16px;
padding-left: 3px;
}
.x-field:not(.not-empty) .x-form-trigger.fa-search {
display: none;
}
.x-field:not(.not-empty) .x-form-trigger.fa-globe {
pointer-events: none;
}
.x-desktop .esp-checkbox .esp-field {
margin-top: -5px;
}
/* FOCUSED/REQUIRED/DISABLED STYLING */
/* Normal */
.x-desktop .esp-fieldContainer:not(:has(.esp_timeTrack_clockInOut)) {
transition: border 0.4s ease, box-shadow 0.4s ease;
border: 1px solid var(--form-border-color, #d1d8e0);
box-shadow: 0px 0px 4px #aaaaaa00;
}
.x-desktop .esp-fieldContainer .x-form-trigger {
color: var(--form-color, #196eb3);
transition: all 0.3s ease;
}
.x-desktop .esp-fieldContainer .esp-fieldHead {
color: var(--form-dark-color, #2d5e86);
}
.x-desktop .esp-fieldContainer:not(.esp-checkbox):not(.esp-fieldContainer--codeMirror):not(.esp-checklistField):not(:has(input[placeholder], .esp-multiTree, .x-form-check-group, .x-form-radio-group)):has(.x-field:not(.not-empty)):not(.esp-fieldContainer--focused):has(.esp-fieldListContainer > :is(.x-field.x-form-type-text, .x-form-type-password)) .esp-fieldHead {
color: var(--form-grey-color, #919191);
}
/* Focused */
.x-desktop .esp-checklistField:has(textarea:focus, input:focus),
.x-desktop .esp-fieldContainer--focused:not(:has(.x-form-check-group, .x-form-radio-group)) {
border: 1px solid var(--form-focus-border-color, #0570C7);
box-shadow: 0px 0px 4px var(--form-focus-shadow-color, rgba(23,161,207,75%));
}
.x-desktop .esp-checkbox .esp-fieldListContainer .x-field.x-form-type-checkbox:not(.x-checkboxgroup-form-item):not(.esp-expandableListField) :not(label) {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin: 0px;
line-height: 24px !important;
min-width: 40px;
min-height: 40px;
}
.x-desktop .esp-checkbox .esp-fieldListContainer > .x-field .x-form-checkbox:before {
position: absolute;
margin-top: -6px;
}
.x-desktop .esp-checkbox .x-field.x-form-cb-checked .x-form-checkbox:before {
right: 12px;
}
.x-desktop .esp-checkbox .x-field:not(.x-form-cb-checked) .x-form-checkbox:before {
left: 12px;
}
.x-desktop .esp-checkbox .x-field input:not([disabled]):not([readonly]) {
cursor: pointer;
}
.x-desktop .x-form-checkbox-focus,
.x-desktop .x-form-checkbox-focus:before {
border: none !important;
outline: none !important;
}
/* Required */
.x-desktop .esp-fieldContainer--invalid {
border: 1px solid var(--form-required-border-color, #900B09) !important;
}
.x-desktop .esp-fieldContainer--invalid :is(.x-form-trigger, .x-tool-tool-el) {
color: var(--form-required-border-color, #900B09) !important;
}
.x-desktop .esp-fieldContainer--invalid .esp-fieldHeadText:before {
content: '* ';
}
.esp-fieldContainer .esp-expandable-list__row--invalid:before {
background: #ffefef !important;
}
/* Required and Focused */
.x-desktop .esp-fieldContainer--focused.esp-fieldContainer--invalid:not(:has(.x-form-check-group, .x-form-radio-group)) {
box-shadow: 0px 0px 4px var(--form-required-shadow-color, #900B0988);
}
.x-desktop .esp-fieldContainer--invalid .esp-fieldHead {
color: var(--form-required-placeholder-color, #9e6161) !important;
}
/* Disabled */
.x-desktop .esp-fieldContainer:has(.esp-fieldValue),
.x-desktop .esp-fieldContainer--disabled {
box-shadow: none !important;
border: 1px solid #dddddd;
position: relative;
}
.x-desktop .esp-fieldContainer:has(.esp-fieldValue):before,
.x-desktop .esp-fieldContainer--disabled:not(.esp-fieldContainer--allRowsDisabled):before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: #ddd;
opacity: 0.25;
z-index: 12;
}
.x-desktop .esp-fieldContainer--allRowsDisabled,
.x-desktop .esp-fieldContainer--allRowsDisabled .esp-expandable-list__row:before {
background: #f6f6f6 !important;
}
.x-desktop .esp-fieldContainer:not(.esp-fieldContainer--allRowsDisabled) .esp-expandable-list__row--disabled:before,
.x-desktop .esp-fieldContainer:not(.esp-fieldContainer--allRowsDisabled):has(.esp-expandable-list__row--disabled):before {
background: #ddd !important;
opacity: 0.35;
}
.x-desktop .esp-fieldContainer:has(.esp-fieldValue) .esp-fieldHead,
.x-desktop .esp-fieldContainer--disabled .esp-fieldHead {
z-index: 13 !important;
}
.x-desktop .esp-fieldContainer--disabled :is(.x-form-trigger, .x-tool-tool-el):not(.fa.fa-search),
.x-desktop .esp-expandable-list__row--disabled :is(.x-form-trigger, .x-tool-tool-el):not(.fa.fa-search),
.x-desktop .esp-fieldContainer--disabled .x-tool:has(.fa-pencil, .fa-plus),
.x-desktop .x-field:not(.not-empty) .x-form-trigger.fa-globe:before {
color: var(--form-grey-color, #919191);
cursor: default;
pointer-events: none;
}
.esp-fieldContainer--disabled .x-form-trigger.fa.fa-search {
pointer-events: all !important;
cursor: pointer !important;
color: hsl(210 100% 32% / 1);
}
.x-desktop .esp-fieldContainer :is(input, textarea):is([disabled], [readonly]) {
cursor: default;
}
.esp-fieldContainer--disabled .CodeMirror-cursor {
display: none;
}
.x-desktop .x-item-disabled {
opacity: 1 !important;
}
/* Rich Text Editors */
.x-desktop .esp-fieldContainer .x-html-editor-wrap .x-mask {
display: none !important;
}
.x-desktop .esp-fieldContainer .x-html-editor-wrap > div {
border: none !important;
}
.x-desktop .esp-fieldContainer .x-html-editor-wrap .x-toolbar {
padding: 0px 0px 0px 10px !important;
}
.x-desktop .esp-fieldContainer .x-html-editor-wrap:not(.esp-fullscreen) .x-toolbar {
border-radius: 99px;
}
.x-desktop .esp-fieldContainer .x-toolbar select {
background: none;
border: none;
}
.x-desktop .esp-fieldContainer .x-html-editor-tb .x-btn-icon-el {
font-size: 14px !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.x-desktop .x-html-editor-tb .x-edit-bold:before,
.x-desktop .x-html-editor-tb .x-edit-italic:before,
.x-desktop .x-html-editor-tb .x-edit-createlink:before {
margin-top: -4px;
}
.x-desktop .x-html-editor-tb .x-edit-underline:before {
margin-top: -3px;
}
.x-desktop .x-html-editor-tb .x-edit-increasefontsize:before {
margin-top: -1px;
font-size: 15px;
}
.x-desktop .x-html-editor-tb .x-edit-justifyleft:before,
.x-desktop .x-html-editor-tb .x-edit-justifycenter:before,
.x-desktop .x-html-editor-tb .x-edit-justifyright:before,
.x-desktop .x-html-editor-tb .x-edit-insertorderedlist:before,
.x-desktop .x-html-editor-tb .x-edit-insertunorderedlist:before {
margin-top: -2px;
}
.x-desktop .x-html-editor-tb .x-toolbar-more-icon:before {
margin-top: -1px;
}
.x-desktop .x-html-editor-tb .x-btn-wrap:after {
color: var(--form-grey-color, #919191);
}
.x-desktop .x-html-editor-tb .x-btn.x-btn-pressed:not(.x-btn-over) {
background: none;
}
.x-desktop .x-html-editor-tb .x-btn.x-btn-pressed.x-btn-over {
background: #dadada;
}
.x-desktop .x-html-editor-tb .x-btn.x-btn-pressed span,
.x-desktop .x-html-editor-tb .x-btn.x-btn-pressed span:before {
color: var(--form-color, #196eb3);
text-shadow: 1px 1px 1px rgb(0 9 65 / 22%);
}
/* Search Item Selectors */
.x-desktop .esp-field.esp-field--popout .esp-searchItemSelector {
border-top: 1px solid #ddd;
}
.x-desktop .esp-field.esp-field--popout .esp-searchItemSelector .x-tool:has(.fa-plus) {
left: 50px !important;
}
.x-desktop .esp-searchItemSelector .x-panel-header {
background: white;
padding: 5px 12px;
}
.x-desktop .esp-field--popout .esp-searchItemSelector .x-panel-header {
padding: 5px 12px;
}
.x-desktop .esp-field:not(.esp-field--popout) .esp-searchItemSelector .x-panel-header {
padding: 20px 12px 5px 12px;
}
.x-desktop .esp-searchItemSelector .x-title-text {
color: #666;
font-size: 12px;
}
.x-desktop .esp-searchItemSelector .x-tool-tool-el {
opacity: 1;
}
.x-desktop .esp-searchItemSelector .x-panel-header {
position: absolute !important;
top: 0;
right: 0;
}
.x-desktop .esp-searchItemSelector .x-panel-header-default .x-tool-tool-el {
background: white;
color: var(--form-color, #196eb3);
font-weight: 400;
margin-left: 5px !important;
}
.x-desktop .esp-searchItemSelector .x-panel-header-default .x-tool-tool-el.fa-plus {
margin-left: -7px;
font-size: 14px;
}
.x-desktop .esp-searchItemSelector .x-panel-header-default .x-tool-tool-el.fa-pencil {
margin-left: -7px;
font-size: 15px;
}
.x-desktop .esp-searchItemSelector .x-toolbar {
border-radius: 12px;
margin: 0px 12px 5px;
padding: 1px 7px;
}
.x-desktop .esp-searchItemSelector .x-toolbar .x-field {
min-width: calc(100% - 7px);
}
.x-desktop .esp-searchItemSelector .x-toolbar input {
border-bottom: none;
}
.x-desktop .esp-searchItemSelector .x-toolbar input.x-form-field.x-form-text {
padding: 0px 4px !important;
height: 24px;
}
.x-desktop .esp-searchItemSelector .x-form-trigger-wrap {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.x-desktop .esp-searchItemSelector .x-container:has(.x-btn) {
display: none;
}
.x-desktop .esp-searchItemSelector .x-container:has(.x-btn) .x-box-target {
background: #f5f5f5;
border-radius: 12px;
margin-top: 32px;
overflow: hidden;
padding: 8px 0px;
}
.x-desktop .esp-searchItemSelector .x-container + .x-container + .x-container {
margin-left: 10px;
}
.x-desktop .esp-field:not(.esp-field--popout) .esp-searchItemSelector .x-container:nth-child(3):before {
content: '';
position: absolute;
left: 0;
top: 14px;
bottom: 0;
width: 1px;
z-index: 5;
background: linear-gradient(
0deg,
rgba(209 216 224 / 0%),
rgba(209 216 224 / 75%),rgba(209 216 224 / 75%),rgba(209 216 224 / 75%),
rgba(209 216 224 / 0%)
);
}
.x-desktop .esp-field--popout .esp-searchItemSelector .x-container:nth-child(3) {
box-shadow: rgba(0, 0, 0, 0.067) 0px 0px 15px, rgba(0, 0, 0, 0.133) 0px 0px 10px;
}
.x-desktop .esp-searchItemSelector li.x-boundlist-item {
padding: 5px 12px;
line-height: 1.25;
border: none !important;
outline: none !important;
}
.esp-fieldContainer--disabled.esp-fieldContainer--searchItemSelector li.x-boundlist-item {
cursor: default !important;
}
.x-desktop .esp-searchItemSelector li.x-boundlist-item-over:not(.x-boundlist-selected) {
background: white;
}
.x-desktop .esp-searchItemSelector li.x-boundlist-item.x-boundlist-selected {
background: var(--base-highlight-color);
color: var(--color);
}
.x-desktop .esp-searchItemSelector .x-container:has(.x-btn) .x-box-target .x-btn {
padding: 4px !important;
position: unset !important;
}
.x-desktop .esp-searchItemSelector .x-container:has(.x-btn) .x-box-target .x-btn.x-btn-over {
background-color: transparent;
}
.x-desktop .esp-searchItemSelector .x-form-itemselector-top,
.x-desktop .esp-searchItemSelector .x-form-itemselector-up,
.x-desktop .esp-searchItemSelector .x-form-itemselector-add,
.x-desktop .esp-searchItemSelector .x-form-itemselector-remove,
.x-desktop .esp-searchItemSelector .x-form-itemselector-down,
.x-desktop .esp-searchItemSelector .x-form-itemselector-bottom {
background-image: none;
}
.x-desktop .esp-searchItemSelector .x-form-itemselector-top:before,
.x-desktop .esp-searchItemSelector .x-form-itemselector-up:before,
.x-desktop .esp-searchItemSelector .x-form-itemselector-add:before,
.x-desktop .esp-searchItemSelector .x-form-itemselector-remove:before,
.x-desktop .esp-searchItemSelector .x-form-itemselector-down:before,
.x-desktop .esp-searchItemSelector .x-form-itemselector-bottom:before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: var(--form-color, #196eb3);
transition: color 0.2s ease;
}
.x-desktop .esp-searchItemSelector .x-form-itemselector-top:before {
content: '\f102';
}
.x-desktop .esp-searchItemSelector .x-form-itemselector-up:before {
content: '\f106';
}
.x-desktop .esp-searchItemSelector .x-form-itemselector-add:before {
content: '\f105';
}
.x-desktop .esp-searchItemSelector .x-form-itemselector-remove:before {
content: '\f104';
}
.x-desktop .esp-searchItemSelector .x-form-itemselector-down:before {
content: '\f107';
}
.x-desktop .esp-searchItemSelector .x-form-itemselector-bottom:before {
content: '\f103';
}
/* Multi-Tree Selectors */
.x-desktop .esp-fieldContainer .esp-field:has(.esp-multiTree) {
margin-left: -12px;
margin-right: -12px;
width: calc(100% + 24px);
}
.x-desktop .esp-field--popout .esp-multiTree {
border-top: 1px solid #ddd !important;
}
.x-desktop .esp-field--popout .esp-multiTree .x-panel + .x-panel {
box-shadow: rgba(0, 0, 0, 0.067) 0px 0px 15px, rgba(0, 0, 0, 0.133) 0px 0px 10px;
}
.x-desktop .esp-field--popout .esp-multiTree .x-grid-body {
padding-right: 10px !important;
}
.x-desktop .esp-field--popout .esp-multiTree .x-panel-header {
background: transparent;
padding: 8px 12px;
}
.x-desktop .esp-field--popout .esp-multiTree .x-panel-header > .x-box-inner > .x-box-target {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.x-desktop .esp-field--popout .esp-multiTree .x-panel-header > .x-box-inner > .x-box-target > * {
position: initial !important;
}
.x-desktop .esp-field--popout .esp-multiTree .x-panel-header > .x-box-inner > .x-box-target > .x-title {
width: auto !important;
}
.x-desktop .esp-field--popout .esp-multiTree .x-panel-header > .x-box-inner > .x-box-target > .x-tool {
margin-left: 5px !important;
}
.x-desktop .esp-field--popout .esp-multiTree .x-panel-header > .x-box-inner > .x-box-target > .x-tool .x-tool-tool-el {
opacity: 1 !important;
background: white !important;
}
.x-desktop .esp-field--popout .esp-multiTree .x-panel-header > .x-box-inner > .x-box-target > .x-tool .x-tool-tool-el:before {
color: var(--form-color, #196eb3) !important;
font-size: 14px !important;
}
.x-desktop .esp-field--popout .esp-multiTree .x-panel-header > .x-box-inner > .x-box-target > .x-tool .x-tool-refresh:before {
margin-top: -3px !important;
font-size: 13px !important;
}
.x-desktop .esp-field--popout .esp-multiTree .x-panel-header .x-title-text {
color: #666;
font-size: 13px;
font-weight: 400 !important;
}
.x-desktop .esp-field--popout .esp-multiTree .x-field.x-docked {
background: #f5f5f5;
border-radius: 15px;
overflow: hidden;
margin: 0px 12px 6px;
}
.x-desktop .esp-field--popout .esp-multiTree .x-field.x-docked input {
border-bottom: none;
padding: 6px 12px;
}
.x-desktop .esp-field--popout .esp-multiTree .x-field.x-docked .x-form-trigger {
border-bottom: none;
width: 30px;
padding-top: 4px;
}
/* File Upload Fields */
.x-desktop .esp-fileField {
margin-left: -12px;
margin-right: -12px;
border-radius: 0px 0px 10px 10px;
overflow: hidden;
width: calc(100% + 24px);
border: none;
}
.x-desktop .esp-fileField .x-panel-bodyWrap,
.x-desktop .esp-fileField .x-panel-body {
width: 100% !important;
}
.x-desktop .esp-fileDropEl {
text-align: center;
font-size: 1.2em;
padding: 12px;
color: var(--form-dark-color, #2d5e86);
}
.x-desktop .esp-fileDropEl.esp-empty {
font-weight: bold;
background-color: white;
}
.x-desktop .esp-fileDropEl.esp-hasFile {
font-size: 0.9em;
}
.x-desktop .esp-fileDropEl:before {
content: '';
position: absolute;
pointer-events: none;
top: 1px;
bottom: 3px;
left: 3px;
right: 3px;
border: 2px dashed #ccc;
opacity: 0;
transition: opacity 0.2s ease;
}
.x-desktop .esp-fileDropEl.esp-hover:before {
opacity: 1;
}
.x-desktop .esp-fileField tr:last-child {
background: #f5f5f5 !important;
}
.x-desktop .esp-fileField tr:last-child td {
vertical-align: middle !important;
}
.x-desktop .esp-fileField tr:last-child td > * {
display: block;
}
.x-desktop .esp-fileField td .x-field {
margin: 0px !important;
}
.x-desktop .esp-fileField td .x-btn {
margin: 2px !important;
background: transparent !important;
border-radius: 10px;
}
.x-desktop .esp-fileField .x-form-trigger {
height: auto !important;
}
.x-desktop .esp-fileField tr:last-child td:first-child {
width: 50%;
}
.x-desktop .esp-fileField tr:last-child td:first-child > div {
margin: 0px 0px 0px auto !important;
}
.x-desktop .esp-fileField tr:last-child td:nth-child(2) > div {
margin: 0px auto !important;
}
.x-desktop .esp-fileField tr:last-child td:last-child {
width: 50%;
}
.x-desktop .esp-fileField tr:last-child td:last-child > div {
margin: 0px auto 0px 0px !important;
}
.x-desktop .esp-fileField .x-btn:not(.x-btn-disabled) .x-btn-inner > * {
color: #444;
}
.x-desktop .esp-fileField .x-btn.x-btn-disabled .x-btn-inner > * {
color: #bfbfbf;
}
.x-desktop .esp-fileField .x-btn-inner > .fa-folder-open {
margin-bottom: 1px !important;
}
.x-desktop .esp-fileField .x-btn-inner > .fa-trash {
margin-bottom: 4px !important;
}
.x-desktop .esp-fileField .x-btn-inner > .fa-download {
margin-bottom: 3px !important;
}
.x-desktop .esp-fileField .x-btn-inner > div {
margin-top: 0px !important;
letter-spacing: 0.1px !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Textarea Fields */
.x-desktop .esp-fieldContainer--textArea:not(.esp-fieldContainer--disabled) {
cursor: text;
}
.x-desktop .esp-fieldContainer > .esp-field > .esp-fieldListContainer > .x-field:has(> .x-form-item-body > .x-form-trigger-wrap > .x-form-text-wrap > textarea:not([type="hidden"])) {
min-height: 63px;
}
/* CodeMirror Fields */
.x-desktop .CodeMirror {
min-width: 100%;
}
.x-desktop .esp-fieldContainer--codeMirror .esp-field {
margin-left: -12px;
margin-right: -12px;
width: calc(100% + 24px);
}
.x-desktop .esp-fieldContainer--codeMirror .esp-fieldListContainer,
.x-desktop .esp-fieldContainer--codeMirror .esp-fieldListContainer > .x-field {
width: auto !important;
height: auto !important;
}
.x-desktop .esp-field .CodeMirror-gutters {
background: none;
border: none;
}
/* Smaller fields (These appear embedded in toolbars) */
.esp-fieldContainer--mini {
padding-top: 3px;
padding-bottom: 3px;
}
.esp-fieldContainer--mini > div {
box-sizing: content-box;
border: 1px solid var(--form-border-color);
background: white;
border-radius: 8px;
height: 26px;
margin: 0px !important;
}
.esp-fieldContainer--mini input.x-form-text {
padding-left: 8px;
padding-right: 0px;
}
.esp-fieldContainer--mini input,
.esp-fieldContainer--mini .x-form-trigger {
border: none !important;
}
.esp-fieldContainer--mini .x-form-trigger {
color: var(--form-color);
font-size: 14px;
vertical-align: middle;
min-width: 25px;
padding: 0px;
}
.esp-fieldContainer--mini .x-form-arrow-trigger {
padding-bottom: 2px;
}
.x-toolbar .x-btn + .esp-fieldContainer--mini {
margin-left: 10px;
}
/* MISC. HELPER CLASSES */
.esp-stretchedFields .x-field.x-form-text-heighted {
width: 100% !important;
}
.esp-stackedField {
float: left;
}
.esp-stackedSeperator {
clear: both;
height: 5px;
width: 100%;
}
.esp-stackedField > div {
padding: 5px;
}
.esp-big {
font-size: 1.3em;
}
.esp-textAreaValue {
white-space: normal;
}
.esp-printTable th{
background-color: #f5f5f5;
border: 1px solid #ededed;
}
.esp-printTable td{
border: 1px solid #ededed;
}
.esp-printAltRow td{
background-color: #fafafa;
}
.esp-tiphighlight {
border: 1px solid red !important;
border-collapse: collapse !important;
transition: border 0.6s linear !important;
}
.esp-showdesc {
word-wrap: break-word;
}
/* Field Menus */
.esp-fieldMenuBtn {
opacity: 0;
display: inline-block;
text-align: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.esp-fieldMenuBtn--hide,
.esp-fieldContainer--resizing .esp-fieldMenuBtn {
display: none
}
.esp-fieldMenuBtn--forceShow,
.esp-showFieldMenuBtn .esp-fieldMenuBtn {
opacity: 1;
}
.esp-fieldMenu__subtext {
font-size: 0.75em;
color: #999;
font-style: italic;
line-height: 1.25;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.x-desktop .esp-fieldHeadText {
display: inline-block;
position: relative;
padding: 2px;
margin: -2px;
}
body.x-desktop .esp-fieldMenuBtn {
z-index: 999;
}
body.x-desktop .esp-fieldMenuBtn:before {
font-size: 17px;
transition: all 0.4s ease;
display: inline-block;
border-radius: 50%;
overflow: hidden;
position: relative;
z-index: 2;
}
body.x-desktop .esp-fieldMenuBtn:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
border-radius: 50%;
}
body.x-desktop .esp-fieldMenuBtn:not(.esp-fieldMenuBtn--forceShow):before {
color: #ffffff;
box-shadow: 1px 1px 2px #00002222;
}
body.x-desktop .esp-fieldMenuBtn:not(.esp-fieldMenuBtn--forceShow):after {
background: #666;
}
body.x-desktop .esp-fieldMenuBtn--forceShow:before {
color: #e2ebf8;
box-shadow: 1px 1px 2px #0000ff44;
}
body.x-desktop .esp-fieldMenuBtn--forceShow:after {
background: var(--form-dark-color, #2d5e86);
}
body.x-desktop .esp-fieldMenuBtn {
position: fixed;
margin: -5px 0px 0px -6px;
}
body:not(.x-desktop) .esp-fieldMenuBtn {
z-index: 9;
}
body:not(.x-desktop) .esp-fieldMenuBtn {
width: 28px;
height: 20px;
font-size: 17px;
position: relative;
background: white;
top: -2px;
margin-right: -5px;
margin-bottom: -6px;
color: var(--form-grey-color, #919191);
}
body:not(.x-desktop) .esp-fieldMenuBtn:before {
width: 12px;
height: 10px;
line-height: 12px;
position: absolute;
top: 5px;
left: 4px;
}
/* COMBOBOX DISPLAYHTML */
.esp-cbDisplayHtml {
word-break: break-word;
overflow-x: auto;
padding-bottom: 5px;
}
.esp-expandable-list__row .esp-cbDisplayHtml {
padding-right: 20px;
}
.esp-cbDisplayHtml > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.esp-cbDisplayHtml > div > div > i.clickable {
margin-right: 4px;
}
.esp-cbDisplayHtml > div:not(:last-child) {
margin-bottom: 5px;
}
.esp-cbDisplayHtml .card-hide {
display: none;
}
.x-field.hasDisplayCard .x-form-trigger {
margin-top: -8px;
}
.esp-expandable-list__row .x-field.hasDisplayCard .x-form-trigger {
margin-top: 0px;
}
.x-field.hasDisplayCard .x-form-trigger.x-form-arrow-trigger:before {
content: '\f303';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.x-field.hasDisplayCard .x-form-trigger-wrap {
height: 20px !important;
margin-bottom: -18px;
}
.x-field.hasDisplayCard .x-form-text-wrap {
position: absolute;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
/* LIST FIELDS */
.esp-listSubfield {
display: flex;
}
.esp-listSubfield div[data-ref="bodyEl"] {
flex-grow: 1;
min-width: 100px;
}
.esp-listSubfield .clickable {
z-index: 99;
}
.esp-listSubfield i.fa-search {
position: relative;
top: 5px;
margin: 0 2px;
}
tr:last-of-type .esp-listSubfield i.fa-search,
.esp-expandable-list__blank-row i.fa-search {
visibility: hidden;
pointer-events: none;
}
.esp-fieldListContainer table {
border-spacing: 0px;
}
.esp-fieldListContainer td {
padding: 0px;
vertical-align: top !important;
}
.esp-alternatingExpand .esp-expandable-list__row:nth-child(odd) {
background-color: #f5f5f5;
}
.esp-del-trigger.x-form-trigger {
background-image: none;
vertical-align: middle;
}
.esp-del-trigger:before {
content: "\f00d";
}
.esp-multiTree .x-field {
margin-top: 0px;
}
.x-form-trigger.esp-multiTree-trigger {
position: relative;
}
.esp-multiTree-trigger-popout:before {
font: 14px 'Font Awesome 5 Free';
content: '\f35d';
color: #000;
opacity: 0.6;
position: absolute;
}
.esp-multiTree-trigger-popout {
height: 30px;
width: 100%;
background-image: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.esp-multiTree-trigger-picker {
/* position: absolute; */
/* top: 30px; */
/* bottom: 0; */
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.esp-multiTree-trigger-add {
padding-right: 5px;
}
/*-------------------
FORM BUILDER
-------------------*/
.esp-formBuilderWithBorders div,
.esp-formBuilderWithBorders td {
border: 1px dashed lightblue;
padding-top: 3px;
padding-bottom: 3px;
}
.esp-tooltipHolder {
position:absolute;
left: 0px;
top:0px;
z-index:99999999999;
background-color:white;
border-radius:5px;
margin:0px;
border:1px solid #ccc !important;
box-shadow: 1px 1px 5px #ccc !important;
padding: 5px !important;
}
.esp-tooltipHolder div,
.esp-tooltipHolder td {
border: none !important;
margin: initial !important;
padding: initial !important;
}
.esp-tooltipLabel {
font-weight: bold;
font-size: 0.85em;
}
.esp-dragdropWrapper {
display: inline-block;
position: relative;
}
.esp-button {
margin: 5px;
padding: 5px;
font-weight: bold;
border-radius: 4px;
border: 1px solid #126daf;
cursor: pointer;
display: inline-block;
color: white;
background-color: #3892d3;
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.esp-smallButton,a.esp-smallButton,a.esp-smallButton:link {
margin: 1px;
padding: 1px;
border-radius: 1px;
border: 1px solid #126daf;
cursor: pointer;
display: inline-block;
color: white;
background-color: #3892d3;
user-select: none;
}
.esp-button:hover,.esp-smallButton:hover,a.esp-smallButton:hover {
background-color: #1064a1;
}
.esp-button:active,.esp-smallButton:active,a.esp-smallButton:active {
background-color: #0d5183;
}
.formBuilderXml .esp-field {
pointer-events: none;
}
/*----------------------
GENERAL HELPERS
------------------------*/
/* TEXT */
.esp-no-wrap {
white-space: nowrap;
}
/* FONT */
.esp-error { color: red; }
.esp-warning { color: orange; }
.esp-green { color: green; }
.esp-yellow { color: yellow; }
.esp-red { color: red; }
.esp-centerText { text-align: center; }
.esp-leftText { text-align: left; }
.esp-2x { font-size: 2em; }
.esp-3x { font-size: 3em; }
.esp-4x { font-size: 4em; }
.esp-5x { font-size: 5em; }
.esp-6x { font-size: 6em; }
.esp-7x { font-size: 7em; }
.esp-8x { font-size: 8em; }
.esp-9x { font-size: 9em; }
.esp-10x { font-size: 10em; }
.esp-h1,
.esp-h2,
.esp-h3,
.esp-h4,
.esp-h5,
.esp-h6 {
margin-top: 0.5em;
margin-bottom: 0.5em;
line-height: 1.15em;
}
.esp-h1 { font-size: 24px; }
.esp-h2 { font-size: 20px; }
.esp-h3 { font-size: 18px; }
.esp-h4 { font-size: 16px; }
.esp-h5 { font-size: 14px; }
.esp-h6 { font-size: 12px; }
/* JUSTIFICATION AND ALIGNMENT */
.esp-centerChildren > div {
display: table;
margin-left: auto;
margin-right: auto;
}
.esp-centeredWrapper {
display: table !important;
margin-left: auto;
margin-right: auto;
}
.esp-flexRow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; }
.esp-flexColumn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.esp-flexJustifyStart {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
.esp-flexJustifyEnd {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end; }
.esp-flexJustifyCenter {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.esp-flexJustifyBetween {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.esp-flexJustifyAround {
-ms-flex-pack: distribute;
justify-content: space-around;}
.esp-flexAlignStart {
-webkit-box-align: start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start; }
.esp-flexAlignEnd {
-webkit-box-align: end;
-ms-flex-align: end;
-ms-grid-row-align: flex-end;
align-items: flex-end; }
.esp-flexAlignCenter {
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center; }
.esp-flexWrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.esp-flexNoWrap {
-ms-flex-wrap: no-wrap;
flex-wrap: no-wrap; }
.esp-flexGrow, .esp-flexGrowAll > *:not(.esp-spacer) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
/* SPACING BETWEEN ELEMENTS */
.esp-spacing0 { margin: 0px 0px 0px 0px !important; }
.esp-spacing0 > * { margin: 0px 0px 0px 0px !important; }
.esp-forceNoSpacing,
.esp-forceNoSpacing * {
padding: 0px !important;
margin: 0px !important;
border-spacing: 0px !important;
}
/* HIDING SHOWING */
.esp-forceHide {
display: none !important;
}
@media print {
.esp-printHide {
display: none !important;
}
}
/*-----------------
ANIMATION HELPERS
------------------*/
/* GROWING BAR */
@media screen {
.esp-grow-width {
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
-webkit-animation-name: esp-grow-width;
animation-name: esp-grow-width;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
max-width: 0%;
}
@-webkit-keyframes esp-grow-width {
from {
width: 0%;
}
to {
max-width: 100%;
/* Final width is set inline */
}
}
@keyframes esp-grow-width {
from {
width: 0%;
}
to {
max-width: 100%;
/* Final width is set inline */
}
}
/* LEFT NAVIGATION MENU SETTINGS. */
.navigation-panel,
.navigation-panel .x-box-inner,
.navigation-panel .x-panel-body-default,
.navigation-button,
.x-btn-over.navigation-button,
.x-btn-pressed.navigation-button,
.x-btn-menu-active.navigation-button,
.x-btn-focus.navigation-button {
background-color: var(--background-color) !important;
}
.navigation-panel .x-treelist-nav .x-treelist-item-text {
padding-left: 10px;
line-height: 31px;
font-size: 13px;
}
.navigation-panel .x-treelist-nav .x-treelist-item-tool {
padding-left: 0px;
}
.navigation-panel .x-treelist-nav .x-treelist-item-icon:before,
.navigation-panel .x-treelist-nav .x-treelist-item-tool:before,
.navigation-panel .x-treelist-nav .x-treelist-item-expander {
line-height: 26px;
}
.navigation-panel .x-treelist-nav .x-treelist-row {
padding-left: 0px;
padding-right: 0px;
}
.navigation-panel .x-treelist-nav .x-treelist-item-icon,
.navigation-panel .x-treelist-nav .x-treelist-item-tool {
font-size: 13px;
cursor: pointer;
}
.navigation-panel .x-treelist-expander-first .x-treelist-item-expander {
left: auto !important;
right: 10px !important;
}
.navigation-panel .x-treelist-item-wrap {
margin-left: 6px !important;
}
.navigation-panel .x-treelist-item-wrap .x-treelist-item-text {
padding-left: 0px;
line-height: 31px;
font-size: 13px;
}
.navigation-panel .x-treelist-expander-first .x-treelist-item-icon {
left: 0px;
}
.navigation-panel .x-treelist-floater {
left: 36px !important;
}
.navigation-panel .x-treelist-floater .x-treelist-item {
padding-left: 5px;
padding-right: 0px;
}
.navigation-menu .x-menu-body-default{
background: #32404e;
}
.navigation-menu .x-menu-bodyWrap .x-menu-body-default{
background: #32404e;
}
.navigation-menu .x-menu-item-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.navigation-menu:not(.smaller-navigation-menu) .x-menu-item-link {
padding: 8px 5px;
}
.navigation-menu.smaller-navigation-menu .x-menu-item-link {
padding: 5px 5px;
}
.navigation-menu > div > div > div > div > div.navigation-has-submenu > .x-menu-item-link {
padding-left: 20px;
padding-right: 20px;
}
.navigation-menu .x-menu-item-link:before {
content: '';
position: absolute;
bottom: 0;
left: 5px;
right: 5px;
height: 1px;
background: linear-gradient(90deg, transparent,var(--faded-color), transparent);
}
.x-menu-item.esp-no-icon > a > .x-menu-item-text {
margin-left: 10px;
}
.navigation-menu .x-menu-item-text-default,
.navigation-menu .x-menu-item-text-default.x-menu-item-indent {
color: var(--base-color);
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
margin-left: 0px;
margin-right: 0px;
width: 100%;
text-align: center;
font-size: 11px;
line-height: 1.25em;
word-break: break-word;
white-space: normal;
}
.navigation-menu .x-menu-item-focus,
.navigation-menu .x-menu-item-active {
background: #32404e;
}
.navigation-menu .x-menu-item-icon-default {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
color: var(--base-color);
height: auto;
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
line-height: 1em;
margin-top: 0px;
margin-bottom: 2px;
}
.navigation-menu:not(.smaller-navigation-menu) .x-menu-item-icon-default {
font-size: 24px;
margin-bottom: 2px;
}
.navigation-menu.smaller-navigation-menu .x-menu-item-icon-default {
font-size: 14px;
margin-bottom: 0px;
}
.navigation-menu .x-menu-item-default.x-menu-item-focus,
.navigation-menu .x-menu-item-default.x-menu-item-active {
background-color: transparent;
}
.navigation-menu .x-menu-item-arrow-default,
.navigation-menu .x-menu-item-focus .x-menu-item-arrow-default,
.navigation-menu .x-menu-item-active .x-menu-item-arrow-default {
color: var(--base-color);
background-color: rgba(0,0,0,0.05);
top: 0;
bottom: 0;
right: 0;
height: 100%;
width: 18px;
margin: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.navigation-menu .x-menu-item-arrow-default:before,
.navigation-menu .x-menu-item-focus .x-menu-item-arrow-default:before,
.navigation-menu .x-menu-item-active .x-menu-item-arrow-default:before {
content: '\f105';
}
.navigation-submenu .x-menu-body-default {
background-color: var(--background-color);
}
.navigation-submenu .x-menu-item-text-default,
.navigation-submenu .x-menu-item-icon-default {
color: var(--base-color);
}
.navigation-submenu .x-menu-item-icon-default {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.navigation-collapse-btn {
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
background: rgba(0,0,0,0.05);
border-radius: 0px;
}
}
/*--------------
DASHBOARD
---------------*/
/* Dashboard Backgrounds */
.esp-absolute-bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
.x-desktop form > :not(.esp-absolute-bg) {
position: relative;
}
.esp-bg--white {
background: white;
}
.esp-bg--grey {
background: #f5f5f5;
}
/* Dashboard Container */
.esp-dashboard {
background-color: #f5f5f5;
padding: 15px;
color: #444;
font-size: 11px;
line-height: 1.15;
position: relative;
}
/* Dashboard Header */
.esp-dashboard-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 15px 0px;
margin-bottom: -5px;
}
.esp-dashboard-header__title {
font-size: 28px;
text-shadow: 1px 1px 2px #00000022;
letter-spacing: 0.5px;
margin-right: 30px;
}
.esp-dashboard-header__values {
margin: -5px -15px;
padding: 5px 0px;
}
.esp-dashboard-header__values,
.esp-dashboard-header__value-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.esp-dashboard-header__value {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
margin: 5px 15px;
}
.esp-dashboard-header__value > span:first-child {
font-size: 11px;
font-weight: bold;
margin-bottom: 2px;
opacity:0.5;
}
.esp-dashboard-header__value > span:last-child {
font-size: 16px;
}
/* Dashboard panels */
.esp-dashboard .esp-panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.esp-dashboard .esp-panelTitle--tab {
display: inline-block;
}
.esp-dashboard .esp-panelSubtitle {
font-size: 12px;
color: #444;
letter-spacing: 0.5px;
}
.esp-dashboard .esp-panelSubtitle:not(:first-child) {
margin-top: 15px;
}
.esp-dashboard .esp-panelSubtitle {
margin-bottom: 5px;
}
.esp-dashboard .esp-panelTitle,
.esp-dashboard .esp-toggleContainerToggle {
box-sizing: border-box;
width: 100%;
}
.esp-dashboard .esp-panelContent,
.esp-dashboard .esp-toggleContent {
padding: 0px 10px 10px 10px;
width: calc(100% - 20px);
box-sizing: content-box;
overflow-x: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.esp-dashboard .esp-panelTitle {
margin-bottom: 10px;
}
.esp-dashboard .esp-panelContent {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.esp-dashboard .esp-toggleContent:not(.esp-slideUp):not(.esp-slideDown) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.esp-dashboard .esp-panelContent > .esp-metric,
.esp-dashboard .esp-panelContent > .esp-grid,
.esp-dashboard .esp-toggleContent > .esp-metric,
.esp-dashboard .esp-toggleContent > .esp-grid {
-webkit-box-flex:1;
-ms-flex-positive:1;
flex-grow:1;
}
/* Dashboard tables */
.esp-dashboard table {
width: 100%;
}
/* Dashboard Accordions */
.esp-dashboard .esp-toggleSection,
.esp-dashboard .esp-accordionGroup {
box-shadow: 0px 0px 10px #00000015,
0px 0px 3px #00000010,
0px 1px 2px #00000022;
}
.esp-dashboard .esp-accordionGroup > .esp-toggleSection {
box-shadow: none;
}
@media screen {
.esp-dashboard .esp-accordionGroup > .esp-toggleSection:last-child:not(.esp-toggleOn) .esp-toggleContainerToggle,
.esp-dashboard *:not(.esp-accordionGroup) > .esp-toggleSection:not(.esp-toggleOn) .esp-toggleContainerToggle {
border-bottom: none;
}
}
/*-------------
GRID LAYOUTS
--------------*/
/* General */
.esp-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.esp-grid:not(.esp-grid--no-wrap) {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.esp-grid.esp-grid--no-wrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.esp-grid--full-columns {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.esp-grid__cell {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.esp-grid__cell:not(.esp-grid__cell--narrow) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.esp-grid__cell--break {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
margin: 0px !important;
}
.esp-grid__cell--full {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.esp-grid__cell > * {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
/* Spacing Options */
.esp-grid .esp-panel,
.esp-grid .esp-tabPanel {
margin: 0px 0px 10px 0px !important;
}
.esp-grid:not(.esp-grid--small-spacing):not(.esp-grid--medium-spacing):not(.esp-grid--large-spacing) > .esp-grid__cell {
max-width: 100%;
}
.esp-grid--small-spacing {
}
.esp-grid--small-spacing > .esp-grid__cell {
position: relative;
}
.esp-grid--small-spacing > .esp-grid__cell:before {
content: '';
position: absolute;
width: 1px;
height: 100%;
top: 0;
right: 0;
display: block;
background-color: white;
z-index: 5
}
.esp-grid--small-spacing > .esp-grid__cell:after {
content: '';
position: absolute;
height: 1px;
width: 100%;
bottom: 0px;
left: 0px;
display: block;
background-color: white;
z-index: 5
}
.esp-grid--medium-spacing {
margin: 0px -10px -10px 0px;
}
.esp-grid--medium-spacing > .esp-grid__cell {
margin: 0px 10px 10px 0px;
max-width: calc(100% - 10px);
}
.esp-grid--large-spacing {
margin: 0px -20px -20px 0px;
}
.esp-grid--large-spacing > .esp-grid__cell {
margin: 0px 20px 20px 0px;
max-width: calc(100% - 20px);
}
/* Add borders between cells */
.esp-grid--borders {
overflow: hidden;
}
.esp-grid--borders .esp-grid__cell {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 1px -1px -1px 1px;
padding: 15px;
}
/* Grid helpers */
.esp-flex-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.esp-flex-center--h {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.esp-flex-center--v {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.esp-flex-center--v > * {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.esp-align-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.esp-align-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.esp-justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.esp-justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.esp-flex-grow-0 {
-webkit-box-flex: 0 !important;
-ms-flex-positive: 0 !important;
flex-grow: 0 !important;
}
/*-------------
METRICS
--------------*/
/* General/Styles for all Metrics */
.esp-metric {
transition: all 0.2s ease;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 10px;
margin: 5px;
}
.esp-metric:link,
[onclick].esp-metric:not([onclick=""]) {
cursor: pointer;
}
.esp-metric .esp-metric__overlay {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0;
transition: all 0.2s ease;
border-radius: 10px;
}
.esp-metric > * {
position: relative;
z-index: 2;
}
.esp-metric__label {
letter-spacing: 0.5px;
line-height: 1.25em;
display: block;
}
.esp-metric__label--bottom,
.esp-metric__label--right,
.esp-metric__label:not(.esp-metric__label--top):not(.esp-metric__label--left) {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.esp-metric__label--bottom,
.esp-metric__label:not(.esp-metric__label--top):not(.esp-metric__label--left):not(.esp-metric__label--right) {
padding-bottom: 0.25em;
}
.esp-metric__label--top {
padding-bottom: 0.25em;
}
.esp-metric__label--top,
.esp-metric__label--left {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.esp-metric__value {
font-weight: 600;
line-height: normal;
display: block;
}
.esp-metric__label--bottom + .esp-metric__value,
.esp-metric__label:not(.esp-metric__label--top) + .esp-metric__value {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.esp-metric__label--top + .esp-metric__value {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.esp-metric__value .esp-metric__unit {
font-size: 0.75em;
font-weight: 400;
}
/* Default (Colored Tile) */
.esp-metric--bg {
background-color: #444;
border-color: transparent !important;
}
.esp-metric--bg:link:hover .esp-metric__overlay,
[onclick].esp-metric--bg:not([onclick=""]):hover .esp-metric__overlay {
opacity: 0.15;
}
.esp-metric--bg .esp-metric__label {
color: white !important;
}
.esp-metric--bg .esp-metric__value {
color: white !important;
}
@media screen {
.esp-metric--bg span[style*=red] {
color: hsl(0 100% 90% / 1) !important;
}
}
/* Light Tile w/ Border */
.esp-metric--left {
border-left: 8px solid;
border-radius: 5px;
background-color: white !important;
border-color: #444;
}
.esp-metric--left .esp-metric__overlay {
border-radius: 0 10px 10px 0;
}
.esp-metric--left:link:hover .esp-metric__overlay,
[onclick].esp-metric--left:not([onclick=""]):hover .esp-metric__overlay {
opacity: 0.08;
}
.esp-metric--left .esp-metric__label {
color: #444 !important;
}
.esp-metric--left .esp-metric__value {
color: #444 !important;
}
/* Light Tile w/ Colored Text */
.esp-metric--text {
background-color: transparent !important;
border-color: transparent !important;
}
.esp-metric--text:link:hover .esp-metric__overlay,
[onclick].esp-metric--text:not([onclick=""]):hover .esp-metric__overlay {
opacity: 0.08;
}
.esp-metric--text .esp-metric__label {
color: #444 !important;
}
.esp-metric--text .esp-metric__value {
color: #444;
}
/* Default/Non-compact tile sizing */
.esp-metric--full,
.esp-metric:not(.esp-metric--compact) {
padding: 15px 20px;
}
.esp-metric--full .esp-metric__label,
.esp-metric:not(.esp-metric--compact) .esp-metric__label {
font-size: 12px;
}
.esp-metric--full .esp-metric__value,
.esp-metric:not(.esp-metric--compact) .esp-metric__value {
font-size: 32px;
}
/* Horizontal metrics (label to side of value) */
.esp-metric--h {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.esp-metric--h.esp-metric--compact .esp-metric__label--left {
padding-right: 0.5em;
}
.esp-metric--h.esp-metric--compact .esp-metric__label--right {
padding-left: 0.5em;
}
.esp-metric--h:not(.esp-metric--compact) .esp-metric__label--left {
padding-right: 0.75em;
}
.esp-metric--h:not(.esp-metric--compact) .esp-metric__label--right {
padding-left: 0.75em;
}
/* Make any tile more compact */
.esp-metric--compact {
padding: 8px 15px;
}
.esp-metric--compact .esp-metric__label {
font-size: 12px;
}
.esp-metric--compact .esp-metric__value {
font-size: 22px;
}
@media print {
/* Metrics */
.esp-metric {
}
.esp-metric--bg {
}
.esp-metric--bg .esp-metric__overlay {
background-color: white !important;
opacity: 0.85 !important;
}
.esp-metric--bg .esp-metric__label {
color: #444 !important;
}
.esp-metric--bg .esp-metric__value {
color: #444 !important;
}
}
/* GAUGES */
.esp-reportViewer-gauge-value
{
font-weight: 600;
text-align: center;
color: #5f7ba5;
font-family: roboto, sans-serif;
margin-top: -1.4em;
}
.esp-reportViewer-gauge-label
{
font-size: 0.8em;
cursor: pointer !important;
color: #5f7ba5;
font-weight: 400;
font-family: roboto, sans-serif;
text-align: center;
}
/* POINTER WHEN SOMETHING IS LOADING. */
.esp-waiting
{
cursor: wait;
}
.esp-waiting .x-unselectable
{
cursor: wait;
}
/* ReCaptcha */
.esp-recaptchaCtr {
padding: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* EXPANDABLE LIST FIELD CLOSE ROW */
.esp-expandable-list__delete-row-btn-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
font-size: 13px;
padding-top: 1px;
}
/* DRAGGABLE EXPANDABLE LIST FIELD STUFF */
.esp-expandableListWrap {
width: 100%;
}
.esp-expandable-list__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.x-desktop .esp-expandable-list__row {
margin: 0px -12px;
padding: 0px 12px;
}
.x-desktop .esp-fieldContainer:not(.esp-fieldContainer--confirmation) .esp-expandable-list__row:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -12px;
right: -12px;
background: white;
pointer-events: none;
z-index: 0;
}
.esp-fieldContainer:not(.esp-fieldContainer--confirmation) .esp-expandable-list__row:nth-child(odd):not(:first-child:last-child):before {
background: #f0f6ff;
}
.esp-fieldContainer--allRowsDisabled:not(.esp-fieldContainer--confirmation) .esp-expandable-list__row:nth-child(odd):not(:first-child:last-child):before {
background: #ececec !important;
}
.esp-expandable-list__row > :last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.esp-expandable-list__row > * {
position: relative;
z-index: 1;
}
.esp-expandable-list__row > div > div {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.x-desktop .esp-expandable-list__row > div > div {
margin-left: -12px;
margin-right: -12px;
padding-left: 12px;
padding-right: 12px;
}
.esp-expandable-list__row .x-form-text-wrap {
position: unset !important;
}
.esp-expandableListField {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.x-desktop .esp-fieldContainer--list .esp-fieldHead {
z-index: 13 !important;
}
body:not(.x-desktop) .esp-fieldContainer--list .esp-fieldHead {
z-index: 2 !important;
}
.esp-expandableListField.gettingHeights .esp-expandable-list__row > div > div {
height: auto !important;
}
.esp-fieldContainer.esp-checkbox .esp-expandableListField.gettingHeights .esp-expandable-list__row .x-field {
min-height: 40px !important;
}
.esp-expandable-list__delete-row-btn {
color: #c00f0c;
}
.esp-expandable-list__row .x-form-arrow-trigger {
display: block !important;
}
.esp-expandable-list__blank-row .esp-expandable-list__delete-row-btn-container,
.esp-expandable-list__blank-row .esp-expandable-list__drag-handle-container {
opacity: 0.4;
}
.esp-expandable-list__blank-row .esp-expandable-list__delete-row-btn-container,
.esp-expandable-list__blank-row .esp-expandable-list__delete-row-btn-container *,
.esp-expandable-list__blank-row .esp-expandable-list__drag-handle-container,
.esp-expandable-list__blank-row .esp-expandable-list__drag-handle-container * {
pointer-events: none !important;
cursor: default !important;
}
.esp-expandable-list__row:not(:first-child) {
margin-top: 1px;
}
.esp-antiMultiRow .esp-expandable-list__row > div > div {
height: auto !important;
}
.esp-expandable-list__row div[id$="_imageDiv"] {
width: 21px;
}
.esp-expandable-list {
border: 1px solid #ccc;
border-collapse: collapse;
position: relative;
}
.esp-expandable-list__drag-handle-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: flex-start;
-ms-flex-pack: flex-start;
justify-content: flex-start;
width: 15px;
font-size: 16px;
margin-left: -3px;
}
.esp-expandable-list__drag-handle {
color: #aaa;
cursor: grab;
}
.esp-expandable-list__dragging {
position: absolute;
opacity: 0.85;
background: white;
box-shadow: 0 0 12px lightgrey;
border-radius: 5px;
z-index: 999;
overflow: hidden;
}
.esp-expandable-list__dropping {
position: absolute;
background: white;
z-index: 999;
}
.esp-expandable-list__drag-handle:active,
.esp-expandable-list__dragging {
cursor: grabbing;
}
.esp-expandable-list__drag-ghost {
background-color: var(--base-light-color);
border-radius: 5px;
border: 2px dotted var(--base-pressed-color);
opacity: 0.25;
box-sizing: border-box;
}
.esp-expandable-list__order-container {
visibility: hidden;
}
/* Form Differ */
.esp-diff-table__btn-col {
width: 4rem;
}
.form-differ__orig,
.form-differ__current {
display: flex;
width: fit-content;
}
.form-differ__orig .esp-expandable-list__delete-row-btn,
.form-differ__orig .esp-expandable-list__drag-handle-container {
display: none;
}
.form-differ__col-names {
display: flex;
flex-direction: column;
}
/* Groupable View */
.esp-kanbanPanel,
.esp-kanbanPanel .x-panel-body,
.esp-kanbanPanel .x-box-inner,
.esp-kanbanPanel .x-box-item,
.esp-kanbanColumn {
background: white;
}
.esp-kanbanColumn {
position: relative;
margin: 0px 5px 0px 5px;
}
.esp-kanbanColumn .x-panel-header {
background: inherit;
margin-bottom: 5px;
padding: 0px;
}
.esp-kanbanColumn:not(.esp-kanbanColumn--empty) > .x-panel-header .x-title-text > div:first-child:last-child,
.esp-kanbanColumn:not(.esp-kanbanColumn--empty) > .x-panel-header .x-title-text > span:first-child:last-child {
width: calc(100% + 8px) !important;
max-width: calc(100% + 8px) !important;
}
.esp-kanbanColumn:not(.esp-kanbanColumn--empty) .x-panel-header .x-title-text > div:first-child:last-child,
.esp-kanbanColumn:not(.esp-kanbanColumn--empty) .x-panel-header .x-title-text > span:first-child:last-child {
margin: -4px -4px -4px !important;
}
.esp-kanbanColumn:not(.esp-kanbanColumn--empty) .x-panel-header .x-title-text > div:first-child:last-child,
.esp-kanbanColumn:not(.esp-kanbanColumn--empty) .x-panel-header .x-title-text > span:first-child:last-child,
.esp-kanbanColumn:not(.esp-kanbanColumn--empty) .x-panel-header .x-title-text {
padding: 4px 4px 4px !important;
border-radius: 0px 0px 4px 4px !important;
}
.esp-kanbanColumn--empty > .x-panel-header {
position: absolute !important;
top: 0px !important;
margin-left: 22px !important;
transform-origin: top left;
transform: rotate(90deg);
}
.esp-kanbanColumn--empty .x-panel-header {
margin: 0px 0px 5px 0px;
}
.esp-kanbanColumn--empty > .x-panel-header * {
width: 100% !important;
}
.esp-kanbanColumn--empty > .x-panel-header .x-title-text > div:first-child:last-child,
.esp-kanbanColumn--empty > .x-panel-header .x-title-text > span:first-child:last-child {
width: calc(100% + 12px) !important;
min-width: calc(100% + 12px) !important;
max-width: calc(100% + 12px) !important;
}
.esp-kanbanColumn--empty > .x-panel-header .x-title-text > *:not(div:first-child:last-child),
.esp-kanbanColumn--empty > .x-panel-header .x-title-text > div:first-child:last-child *,
.esp-kanbanColumn--empty > .x-panel-header .x-title-text > *:not(span:first-child:last-child),
.esp-kanbanColumn--empty > .x-panel-header .x-title-text > span:first-child:last-child * {
width: auto !important;
}
.esp-kanbanColumn.esp-kanbanColumn--empty .x-panel-header .x-title-text > div:first-child:last-child,
.esp-kanbanColumn.esp-kanbanColumn--empty .x-panel-header .x-title-text > span:first-child:last-child {
margin: -3px -6px !important;
}
.esp-kanbanColumn--empty > .x-panel-header .x-title-text,
.esp-kanbanColumn--empty > .x-panel-header .x-title-text > div:first-child:last-child,
.esp-kanbanColumn--empty > .x-panel-header .x-title-text > span:first-child:last-child {
border-radius: 0px;
padding: 3px 6px !important;
}
.esp-kanbanColumn--empty > .x-panel-header .x-title-text,
.esp-kanbanColumn--empty > .x-panel-header .x-title-text * {
overflow-x: hidden;
text-overflow: ellipsis;
}
.esp-kanbanColumn .x-panel-header .x-title-text {
color: black;
font-weight: 600;
font-size: 14px;
}
.esp-kanbanColumn:not(.esp-kanbanColumn--empty),
.esp-kanbanColumn:not(.esp-kanbanColumn--empty) .x-panel-header,
.esp-kanbanColumn:not(.esp-kanbanColumn--empty) .x-panel-bodyWrap,
.esp-kanbanColumn:not(.esp-kanbanColumn--empty) .x-panel-body {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
}
.esp-kanbanColumn .x-panel-header *,
.esp-kanbanColumn .x-panel-body * {
max-width: 100%;
}
.esp-kanbanItem,
#esp-kanbanDragPreview.esp-kanbanDraggingMore:after {
max-width: 100%;
background: white;
padding: 10px;
margin-bottom: 5px;
border: 1px solid #ddd;
overflow-wrap: break-word;
border-radius: 4px;
position: relative;
}
.esp-kanbanColumn--scrolling .esp-kanbanItem {
margin-right: 3px;
}
.esp-kanbanItem.x-view-item-focused {
outline-color: #888 !important;
}
.esp-kanbanItem:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 4px;
pointer-events: none;
-webkit-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
}
.esp-kanbanItem.dragging:before {
background: hsl(216deg 90% 50%);
}
.esp-selectedKanbanItem:before {
background: hsl(40deg 100% 50%);
}
.esp-kanbanItem:not(.dragging):not(.esp-selectedKanbanItem):before {
opacity: 0;
}
.esp-kanbanItem.dragging:before,
.esp-selectedKanbanItem:before {
opacity: 0.12;
}
.esp-kanbanColumn:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: hsl(216deg 90% 50%);
pointer-events: none;
z-index: 999;
-webkit-transition: 0.17s ease-in-out;
-o-transition: 0.17s ease-in-out;
transition: 0.17s ease-in-out;
}
.esp-kanbanColumn:not(.dropping):before {
opacity: 0;
transform: scale(0.90);
}
.esp-kanbanColumn.dropping:before {
opacity: 0.1;
transform: scale(1);
}
#esp-kanbanDragPreview {
position: absolute;
top: 100%;
left: 100%;
width: 250px;
}
#esp-kanbanDragPreview.esp-kanbanDraggingMore:after {
content: attr(data-esp-msg);
padding-top: 5px;
padding-bottom: 5px;
top: 5px;
}
.esp-sensitivedata-toggle[data-revealed]:before {
content: "\f06e";
}
.esp-sensitivedata-toggle:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f070";
}
.esp-sensitivedata-toggle[data-revealed]:before {
content: "\f06e";
}
/*--------------------
AMChart Customizations
--------------------*/
.amcharts--allowVerticalScrollbars[style*=width][style*=height] .amChartsLegend {
max-height: 100%;
overflow-y: auto !important;
}
/*-------------------
Resize Handles
--------------------*/
.x-grid-cell .esp-resize__drag-handle {
display: none;
}
.esp-resize__drag-handle {
position: absolute;
bottom: 5px;
right: 5px;
width: 16px;
height: 16px;
overflow: hidden;
z-index: 9;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
margin-right: -5px;
margin-bottom: -5px;
cursor: nwse-resize;
}
.esp-fieldContainer--codeMirror .x-field:has(.CodeMirror-vscrollbar[style*="block"]) .esp-resize__drag-handle {
right: 16px;
}
.esp-fieldContainer--codeMirror .x-field:has(.CodeMirror-hscrollbar[style*="block"]) .esp-resize__drag-handle {
bottom: 16px;
}
.esp-resize__drag-handle:before {
content: '\f0c9' !important;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 14px;
color: #dadada;
transform: rotate(-45deg) scale(2, 1);
display: inline-block;
position: absolute;
bottom: -5px;
right: -5px;
pointer-events: none;
}
/*-------------------
Checklist Fields
--------------------*/
/* Display checklists */
body.x-desktop .x-grid-cell-inner > .esp-checklist-display {
height: 100%;
overflow: auto;
}
body.x-desktop .esp-checklist-display {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
body.x-desktop .esp-checklist-display__buttons {
margin-right: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
body.x-desktop .esp-checklist-display__buttons > *:not(:first-child) {
margin-top: 3px;
}
.esp-checklist-display__items {
}
.esp-checklist-display__item {
padding-left: calc(20px * var(--esp-checklist-item-level,0));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.esp-checklist-display__item:not(:first-child) {
margin-top: 4px;
}
.esp-checklist-display__item i {
height: 0px;
overflow: visible;
}
body.x-desktop .esp-checklist-display__item i:before {
font-family: 'Material Icons';
}
body:not(.x-desktop) .esp-checklist-display__item i:before {
font-family: 'FA 5 Free';
}
.esp-checklist-display__item i:before {
font-style: normal;
line-height: 14px;
}
body.x-desktop .esp-checklist-display__item i:before {
font-size: 15px;
}
body:not(.x-desktop) .esp-checklist-display__item i:before {
font-size: 16px;
position: relative;
top: -1px;
}
.esp-checklist-display__item span {
text-wrap: wrap;
word-break: break-word;
line-height: 1.1;
}
body.x-desktop .esp-checklist-display__item span {
padding-left: 3px;
}
body:not(.x-desktop) .esp-checklist-display__item span {
padding-left: 6px;
}
body.x-desktop .esp-checklist-display__item--checked i:before {
content: 'check_box';
}
body:not(.x-desktop) .esp-checklist-display__item--checked i:before {
content: '\f14a';
}
.esp-checklist-display__item--checked i:before {
color: #519551;
}
body.x-desktop .esp-checklist-display__item:not(.esp-checklist-display__item--checked) i:before {
content: 'check_box_outline_blank';
}
body:not(.x-desktop) .esp-checklist-display__item:not(.esp-checklist-display__item--checked) i:before {
content: '\f0c8';
}
.esp-checklist-display__item:not(.esp-checklist-display__item--checked) i:before {
color: #8d0000;
}
.esp-checklist-display__item--checked span {
color: #318931;
}
.esp-checklist-display__item:not(.esp-checklist-display__item--checked) span {
color: #8d0000;
}
/* Interactive checklists */
.esp-checklist {
background: white;
border: 2px solid white;
overflow: hidden;
}
.esp-checklist__scroller {
overflow: auto;
min-width: 100%;
}
.esp-checklist__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding-left: 3px;
margin-left: calc(20px * var(--esp-checklist-item-level,0));
position: relative;
background: white;
}
body:not(.x-desktop) .esp-checklist__item:not(:first-child) {
border-top: 5px solid white;
}
.esp-checklist__item:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -999999vw;
z-index: 0;
}
.esp-checklist__item.esp-checklist__item--has-children:after {
content: '';
position: absolute;
background:#eaeaea;
height: 999999vh;
width: 2px;
}
body.x-desktop .esp-checklist__item.esp-checklist__item--has-children:after {
top: 22px;
left: 11px;
}
body:not(.x-desktop) .esp-checklist__item.esp-checklist__item--has-children:after {
top: 30px;
left: 12px;
}
.esp-checklist__item--dropping-before {
}
.esp-checklist__item--dropping-after {
}
.esp-checklist__item--dropping-on {
}
.esp-checklist__buttons {
margin-right: calc(20px * var(--esp-checklist-item-level,0));
text-wrap: nowrap;
position: absolute;
right: 100%;
}
body:not(.x-desktop) .esp-checklist__item:not(:focus-within) .esp-checklist__buttons,
body.x-desktop .esp-checklist__item:not(:hover) .esp-checklist__buttons {
opacity: 0;
}
body:not(.x-desktop) .esp-checklist__item:focus-within .esp-checklist__buttons,
body.x-desktop .esp-checklist__item:hover .esp-checklist__buttons {
opacity: 1;
}
.esp-checklist__buttons > * {
font-family: 'Font Awesome 5 Free';
display: inline-block;
}
.body.x-desktop .esp-checklist__buttons > *:not(:last-child) {
margin-right: 5px;
}
body:not(.x-desktop) .esp-checklist__buttons > * {
margin-right: 6px;
}
.esp-checklist__delete-btn {
color: #aa3333;
cursor: pointer;
position: relative;
}
body.x-desktop .esp-chdcklist__delete-btn {
font-size: 14px;
}
body:not(.x-desktop) .esp-checklist__delete-btn {
font-size: 20px;
}
body.x-desktop .esp-checklist__delete-btn {
font-size: 14px;
top: 2px;
}
body:not(.x-desktop) .esp-checklist__delete-btn {
font-size: 20px;
}
.esp-checklist__item:first-child:last-child:not(.esp-checklist__item--dragging) input:disabled ~ .esp-checklist__delete-btn {
display: none !important;
}
.esp-checklist__delete-btn:before {
content: '\f056';
}
.esp-checklist__drag-handle {
color: var(--form-grey-color, #919191);
font-size: 18px;
cursor: grab;
position: relative;
top: 3px;
}
.esp-checklist__drag-handle:before {
content: '\f0dc';
}
.esp-checklist input {
width: 0px;
height: 0px;
position: relative;
z-index: 1;
top: 1px;
}
.esp-checklist input[type="checkbox"] {
position: relative;
z-index: 1;
top: 1px;
/*There is a custom checkbox displayed with ::before. We were previously hiding it by making the width and height 0,
however, in firefox, this was also hiding the ::before, making neither the default of custom checkbox visible.
The appearance none solution allows us to hide the default checkbox, while still displaying the custom ::before in both Chrome and Firefox*/
appearance: none;
-webkit-appearance: none; /* For Chrome, Safari */
-moz-appearance: none; /* For Firefox */
}
/*Keep everything else as it previously was*/
.esp-checklist input:not([type="checkbox"]) {
width: 0px;
height: 0px;
position: relative;
z-index: 1;
top: 1px;
}
body.x-desktop .esp-checklist input {
margin: 9px;
}
body:not(.x-desktop) .esp-checklist input {
margin: 20px 14px 8px 14px;
}
.esp-checklist input:not(:disabled) {
cursor: pointer;
}
.esp-checklist input:before {
position: absolute;
}
body.x-desktop .esp-checklist input:before {
font-size: 18px;
top: -9px;
left: -9px;
}
body:not(.x-desktop) .esp-checklist input:before {
font-size: 28px;
top: -23px;
left: -14px;
}
body.x-desktop .esp-checklist input:not(:checked):before {
font-family: 'Material Icons';
content: 'check_box_outline_blank';
}
body:not(.x-desktop) .esp-checklist input:not(:checked):before {
font-family: 'FA 5 Free';
content: '\f0c8';
}
.esp-checklist input:disabled:before {
color: #ccc;
}
.esp-checklist input:not(:disabled):not(:checked):before {
color: #8d0000;
}
.esp-checklist input:checked:before {
color: #66aa66;
}
body.x-desktop .esp-checklist input:checked:before {
font-family: 'Material Icons';
content: 'check_box';
}
body:not(.x-desktop) .esp-checklist input:checked:before {
font-family: 'FA 5 Free';
content: '\f14a';
}
.esp-checklist textarea {
resize: none;
overflow: hidden;
width: 100%;
padding: 3px;
border: 0px;
line-height: 1.15em;
height: 1.15em;
box-sizing: content-box;
font-family: 'Roboto', sans-serif;
position: relative;
z-index: 1;
outline: none;
border: none;
box-shadow: none;
}
body.x-desktop .esp-checklist textarea {
font-size: 13px;
}
body:not(.x-desktop) .esp-checklist textarea {
font-size: 15px;
}
.esp-checklist input:not(:checked) ~ textarea {
color: #8d0000;
}
.esp-checklist input:checked ~ textarea {
color: #3d9e3d;
}
/* Tri-state checkbox for filtering boolean fields */
.tristate-checkbox-off .x-form-checkbox-default:before {
font-family: 'Material Icons';
content: 'check_circle_rounded';
}
.tristate-checkbox-unchecked .x-form-checkbox-default:before {
font-family: 'Material Icons';
content: 'check_box_outline_blank';
}
.tristate-checkbox-checked .x-form-checkbox-default:before {
font-family: 'Material Icons';
content: 'check_box_outlined';
}
.x-form-checkbox:has(input:focus),
.x-form-radio:has(input:focus) {
outline: 2px solid var(--base-focused-color);
outline-offset: 1px;
}
.x-form-radio {
border-radius: 50%;
}
.x-portal-column .x-portlet {
border-radius: 10px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
}
.modern-floating-button {
position: fixed;
bottom: 40px;
right: 20px;
z-index: 100000;
color: #e8eaef;
border-radius: 25px;
box-shadow: 0px 4px 6px rgba(7, 7, 7, 0.2);
font-size: 1rem;
font-weight: bold;
text-align: center;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
user-select: none;
}
.modern-floating-button:hover {
background-color: #dcdddf;
transform: scale(1.05) translateY(-2px);
}
.modern-floating-button.clicked {
border-radius: 15px;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
user-select: auto;
}
.modern-floating-button.clicked:hover {
background-color: #e8eaef;
transform: scale(1);
}
.modern-floating-button:active {
background-color: #bebfc2;
transform: scale(1) translateY(0px);
}
.chat-bubble-text {
display: flex;
background-image: linear-gradient(135deg, #f7f8fb 0%, #e8eaef 100%);
color: #06095b;
font-weight: bold;
width: 100%;
height: 100%;
align-items: center;
text-align: center;
justify-content: center;
margin-right: 5px;
}
.modern-mixblend-image-modifier {
height: 20px;
mix-blend-mode: multiply;
margin-right: 5px;
}
.modern-taskbar-text-modifier {
display: flex;
color: #06095b;
font-weight: bold;
width: 100%;
height: 100%;
align-items: center;
text-align: center;
justify-content: center;
margin-right: 5px;
}
.modern-taskbar-image-modifier {
height: 15px;
mix-blend-mode: multiply;
margin-right: 5px;
}
.modern-titlebar-modifier {
display: flex;
width: 100%;
height: 100%;
align-items: center;
margin-right: 5px;
}
.modern-floating-button:hover .button-text {
background-color: transparent;
color: inherit;
}
.modern-panel-field {
width: 100%;
height: 100%;
background-color: #ffffff;
border-radius: 15px;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
align-items: center;
justify-content: center;
margin: 10px;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
/*Targets both elements that have llm and xcroller classes (case 1) and elements that have the x-scroller class and are a descendant ot llm (case 2)*/
.modern-panel-field.x-scroller::-webkit-scrollbar,
.modern-panel-field .x-scroller::-webkit-scrollbar {
width: 10px !important;
height: 10px !important;
}
.modern-panel-field.x-scroller::-webkit-scrollbar-thumb,
.modern-panel-field .x-scroller::-webkit-scrollbar-thumb {
background-color: #ccc !important;
border-radius: 10px !important;
}
.modern-panel-field .x-tool-expand-bottom:before {
content: '\f0d7';
}
.modern-panel-field .x-tool-collapse-bottom:before {
content: '\f0d7';
}
.modern-panel-field .x-tool-expand-top:before {
content: '\f0d8';
}
.modern-panel-field .x-tool-collapse-top:before {
content: '\f0d8';
}
.modern-title .x-panel-header-horizontal {
background: linear-gradient(135deg, #479dfc, #0262cc);
color: #000000;
font-size: 1.5rem;
font-weight: 700;
text-align: center !important;
padding: 15px;
letter-spacing: 1.5px;
text-transform: uppercase;
border-bottom: 4px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 12px 12px 0 0;
}
.modern-title .x-panel-header-horizontal:hover,
.modern-sub-title .x-panel-header-horizontal:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.modern-sub-title .x-panel-header-horizontal {
background: linear-gradient(135deg, #0258b8, #026ade);
color: #000000;
font-size: 1.5rem;
font-weight: 700;
text-align: center !important;
padding: 15px;
letter-spacing: 1.5px;
text-transform: uppercase;
border-bottom: 4px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 12px 12px 0 0;
}
.flex-modifier {
display: flex;
white-space: pre-wrap;
}
@-moz-document url-prefix() {
.flex-modifier {
display: block;
white-space: preserve-breaks;
}
.flex-modifier br {
display: none;
}
}
.modern-close-button-container {
display: flex;
position: relative;
align-items: center;
justify-content: center;
height: 0px;
z-index: 10;
}
.modern-close-button {
display: flex;
color: white;
position: absolute;
width: 100%;
height: 100%;
top: 2px;
right: 2px;
border: none;
font-size: 16px;
cursor: pointer;
z-index: 1000;
user-select: none;
}
/* Tray ai styles */
.modern-tray-button .x-panel-body {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
background-color: transparent;
font-weight: bold;
line-height: 2;
right: 0px;
padding-left: 0px;
padding-right: 0px;
user-select: none;
}
.modern-tray-button:hover {
background-color: #f1f1f1;
cursor: pointer;
}
/*AI Messaging*/
.modern-messaging-text {
color: #000000;
border-radius: 15px;
box-shadow: 0px 4px 6px rgba(7, 7, 7, 0.1);
font-size: 1rem;
padding-left: 10px;
padding-right: 10px;
line-height: 1.75rem;
margin-top: 15px;
margin-bottom: 15px;
text-align: left;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.modern-messaging-text-received-modifier {
background-color: #ececed;
margin-right: 70px;
margin-left: 20px;
}
.modern-messaging-text-received-modifier-typing {
width: 100px;
align-self: flex-start;
flex-grow: 0;
display: flex;
}
.modern-messaging-text-sent-modifier {
background-color: #c8d9fe;
margin-left: 70px;
margin-right: 20px;
}
.modern-message-bar-container {
background-color: #ffffff;
display: flex;
}
.modern-message-bar-text-input {
border-radius: 15px !important;
}
.modern-selection-button {
background-image: linear-gradient(135deg, #ececed 0%, #dbdbdb 100%);
color: black;
border-radius: 15px;
line-height: 2rem;
transition: background-color 0.3s ease, transform 0.3s ease;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
margin-left: 30px;
margin-right: 30px;
user-select: none;
}
.modern-selection-button:hover,
.modern-selection-button:focus {
background-image: linear-gradient(135deg, #dbdbdb 0%, #c9c9c9 100%);
transform: translateY(-2px);
outline: none;
}
.modern-selection-button:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.modern-selection-button .x-btn-inner {
color: black;
font-size: 1.1rem;
line-height: 1.1rem;
padding: 5px;
}
.modern-selection-button .x-btn-inner:focus {
outline: none;
}
.modern-messaging-send-bar {
border-radius: 25px;
padding: 5px 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
margin: 0 10px 10px 10px;
}
.modern-messaging-send-bar .x-form-textarea,
.modern-messaging-send-bar .x-form-text {
border: none !important;
border-radius: 15px !important;
padding: 10px 15px !important;
font-size: 1rem;
outline: none !important;
resize: none !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
max-height: 150px;
overflow-y: auto !important;
width: 100% !important;
box-sizing: border-box;
}
.modern-messaging-send-bar .x-form-textarea::-webkit-scrollbar,
.modern-messaging-send-bar .x-form-text::-webkit-scrollbar {
width: 5px;
}
.modern-messaging-send-bar .x-form-textarea::-webkit-scrollbar-thumb,
.modern-messaging-send-bar .x-form-text::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 10px;
}
/* Send button styling */
.modern-send-btn {
background-color: transparent;
color: #3472e0;
border: none;
font-size: 1rem;
cursor: pointer;
transition: color 0.3s ease;
border-radius: 25px;
user-select: none;
}
.modern-send-btn:hover {
color: #45a049;
}
.fa-paper-plane-blue-modifier {
color: #3472e0;
}
.modern-minimize-btn {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #f7f8fb;
color: #000;
border: none;
cursor: pointer;
text-align: center;
line-height: 20px;
font-size: 18px;
font-weight: bold;
box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
z-index: 100000 !important;
padding: 0px;
user-select: none;
}
.modern-minimize-btn:hover {
background-color: #f1f1f1;
}
.modern-minimize-btn:active {
background-color: #ddd;
}
.modern-back-button {
width: auto !important;
float: left;
user-select: none;
}
.modern-bubble-animation-message {
display: flex;
align-items: center;
justify-content: center;
}
.modern-bubble-animation-dot-container {
display: flex;
justify-content: space-between;
width: 40px;
margin-left: 10px;
}
.modern-animated-dot {
width: 8px;
height: 8px;
background-color: #333;
border-radius: 50%;
position: relative;
animation: modern-bounce-upwards-animation 1.2s infinite ease-in-out;
}
.modern-animated-dot:nth-child(1) {
animation-delay: -0.32s;
}
.modern-animated-dot:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes modern-bounce-upwards-animation {
0%, 80%, 100% {
transform: translateY(4px) scale(0);
}
40% {
transform: translateY(-1px) scale(1);
}
}
.chatBotMessage {
font-weight: bold;
display: block;
}
.feedback-container {
display: flex;
align-items: center;
gap: 8px;
margin-left: 30px;
margin-bottom: 5px;
}
.feedback-question {
font-size: 0.9em;
color: #555;
}
.feedback-buttons {
display: flex;
gap: 6px;
}
.feedback-btn {
padding: 6px 10px;
border-radius: 4px;
background-color: #eee;
cursor: pointer;
transition: background-color 0.2s;
}
.feedback-btn:hover {
background-color: #ddd;
}
.x-tab .x-tab-inner,
.x-tab .x-tab-inner-default {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.x-tab.enable-multi-line .x-tab-inner,
.x-tab.enable-multi-line .x-tab-inner-default {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-wrap: break-word;
line-height: 1.4;
}
.modern-tooltip {
background-color: #f5f5f5;
font-size: 1.2em;
font-weight: 700;
text-align: center;
border-radius: 12px !important;
margin: 0;
}
.modern-tooltip .x-tip-body {
padding: 0 !important;
margin: 0 !important;
}
.modern-tooltip .tooltip-image {
border-radius: 8px;
object-fit: cover;
width: 100%;
height: auto;
padding: 8px;
}
.modern-tooltip .tooltip-header {
background-color: #f5f5f5;
font-size: 1.2em;
font-weight: 700;
padding: 10px;
text-align: center;
border-radius: 12px !important;
margin: 0;
}
.modern-tooltip.with-image .tooltip-header{
border-bottom: 2px solid #007BFF;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.tab-dock:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
pointer-events: none;
background: var(--alt-background-color);
}
a.search-tab {
background-color: var(--faded-color) !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
min-width: 38px;
max-width: 38px;
border: none !important;
border-radius: 0px;
}
a.search-tab span {
overflow: visible;
color: #444;
}
a.search-tab .fa-search {
font-size: 1em;
line-height: 1em;
vertical-align: middle;
}
a.search-tab:hover {
background-color: #d4d4d4 !important;
}
a.search-tab--active,
a.search-tab--active:hover {
background-color: #f5f5f5 !important;
}
.x-tab:not(.x-tab-closable):not(.esp-tab-small)[style*="width: 1px;"] {
display: none !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
.app-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
overflow-y: auto;
}
.app-item {
width: 200px;
margin: 10px;
text-align: center;
}
.app-icon {
width: 200px;
height: 200px;
background-color: #3f51b5;
color: white;
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
font-weight: bold;
cursor: pointer;
text-align: center;
overflow: hidden;
overflow-wrap: break-word;
padding: 5px;
}
.app-icon span {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 30px;
font-weight: bold;
line-height: 1;
}
.app-title {
font-size: 14px;
color: #333;
word-wrap: break-word;
}
.app-icon:hover {
transform: scale(1.05);
}
.custom-tbar {
display: flex;
justify-content: center;
align-items: center;
}
.custom-search-field {
display: flex;
justify-content: center !important;
align-items: center !important;
margin-top: 25px;
height: 35px;
border-radius: 15px;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
.custom-search-field-container {
display: flex;
justify-content: center !important;
align-items: center !important;
}
.custom-search-field .x-form-text {
border: none;
background: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
overflow-y: auto;
width: 300px;
text-align: center;
}
.custom-search-field .x-form-search-trigger {
background-image: url('search-icon.png');
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center;
}
.modern-tree-list-item {
display: flex;
align-items: center;
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin: 3px 0;
background-color: #fafafa;
width: 250px;
flex: 1;
box-sizing: border-box;
}
.modern-tree-preview {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50px;
height: 40px;
background-color: #f0f0f0;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.modern-tree-text {
margin-left: 10px;
flex-grow: 1;
font-size: 14px;
color: #333;
text-align: left;
}
.modern-tree-folder {
font-size: 14px;
font-weight: 600;
}
.esp-dragDropWrapper {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
.data-load-failed-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.05);
font-size: 16px;
z-index: 1000;
padding: 30px;
text-align: center;
line-height: 1.5;
}
/*LOGO LOADING SCREEN*/
.modern-spinner-mask-content {
display: flex;
flex-direction: column;
align-items: center;
}
.modern-spinner-orbit-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
animation: modern-spinner-rotate 1s linear infinite;
margin-bottom: 10px;
}
.modern-svg-spinner-container {
position: absolute;
display: inline-block;
}
.fixed-spinner {
width: 48px;
height: 48px;
}
.modern-spinner-half1 .modern-spinner-svg {
transform-origin: center;
}
.modern-spinner-half1 .modern-spinner-path {
fill: #1b3a5e;
}
.modern-spinner-half2 {
transform: rotate(180deg);
}
.modern-spinner-half2 .modern-spinner-svg {
transform-origin: center;
}
.modern-spinner-half2 .modern-spinner-path {
fill: #00a7e0;
}
@keyframes modern-spinner-rotate {
100% {
transform: rotate(360deg);
}
}
.custom-mask-spinner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modern-loading-text {
margin-top: 30px;
font-weight: bold;
color: #333;
font-size: 20px;
}