canvasxpress-cli 41.6.61 → 41.7.21

package/src/canvasXpress.css

@@ -2,8 +2,9 @@
 
 /*
 * Favorite Colors
- * rgb(51, 122, 183) - #337ab7
- * rgb(83, 105, 255) - #5369ff
+ * rgb(51,  122,  183) - #337ab7
+ * rgb(76,  159,  224) - #4c9fe0
+ * rgb(83,  105,  255) - #5369ff
  */
 
 /*
@@ -741,749 +742,504 @@ span.CanvasXpressBin::selection {
     margin: 0px !important;
 }
 
+/* BEGIN OF CUSTOMIZER CSS */
+/* https://cssgrid-generator.netlify.app/ */
+
 /*
- * CanvasXpressCustomizer
+ * CanvasXpress Customizer
  */
 
-div.CanvasXpressCustomizerContainer {
-    background-color: rgba(255, 255, 255, 0.95);
-    float: left;
-    margin: 0;
-}
-
-div.CanvasXpressCustomizerContainerActive {
-    background: rgba(83, 105, 255, 0.1);
-    float: left;
-    margin: 0;
-}
-
-div.CanvasXpressCustomizerContainerActive::last-child {
-    border: none;
+svg {
+    -webkit-touch-callout: none;
+    /* iOS Safari */
+    -webkit-user-select: none;
+    /* Safari */
+    -khtml-user-select: none;
+    /* Konqueror HTML */
+    -moz-user-select: none;
+    /* Old versions of Firefox */
+    -ms-user-select: none;
+    /* Internet Explorer/Edge */
+    user-select: none;
+    /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
 }
 
-/*
- * Customizer Left Panel
- */
-
-div.CanvasXpressCustomizerLeftPanel {
-    border-right: 1px solid rgb(83, 105, 255) !important;
-    background-color: rgba(255, 255, 255, 0.95);
-    float: left;
+.customizerPanelLeft {
     display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 8fr 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    position: fixed;
+    z-index: 10001;
+    /*height: calc(100% - 5px);*/
+    background-color: rgb(255,255,255);
+    font-family: arial, tahoma, sans-serif;
+    font-weight: normal;
 }
 
-a.CanvasXpressCustomizerLeft,
-a.CanvasXpressCustomizerLeftActive,
-a.CanvasXpressCustomizerLeftActive:hover {
-    border-style: solid;
-    border-width: 1px;
-    color: rgb(34, 34, 34);
-    cursor: pointer;
-    display: block;
-    font: normal 12px arial, tahoma, sans-serif;
-    line-height: 24px;
-    list-style: none;
-    margin: 5px;
-    display: flex;
-    align-items: center;
-    outline-style: none;
-    outline-width: 0px;
-    position: relative;
-    text-decoration: none !important;
-    white-space: nowrap;
-    border-radius: 5px;
+.customizerLeftPanelTop {
+    grid-area: 1 / 1 / 2 / 2;
+    background: rgb(83, 105, 255);
+    border: 1px solid rgb(83, 105, 255) !important;
+    border-top-left-radius: 10px;
 }
 
-a.CanvasXpressCustomizerLeft {
-    border-color: rgb(83, 105, 255);
+.customizerLeftPanelMiddle {
+    grid-area: 2 / 1 / 3 / 2;
+    background: rgba(0,0,0,0);
 }
 
-a.CanvasXpressCustomizerLeftActive,
-a.CanvasXpressCustomizerLeftActive:hover {
-    background: rgba(83, 105, 255, 0.1);
-    border-color: rgb(83, 105, 255);
+.customizerLeftPanelBottom {
+    grid-area: 3 / 1 / 4 / 2;
+    background: rgb(83, 105, 255);
+    border: 1px solid rgb(83, 105, 255) !important;
+    border-bottom-left-radius: 10px;
 }
 
-svg.CanvasXpressCustomizerLeft {
-    background-position: center;
-    border: 1px solid rgb(83, 105, 255) !important;
-    border-radius: 5px;
-    color: rgb(34, 34, 34);
-    cursor: pointer;
-    font: normal 12px arial, tahoma, sans-serif;
-    height: 24px;
-    line-height: 24px;
-    list-style: none;
-    margin: 0px !important;
-    padding: 5px;
-    position: absolute;
-    vertical-align: top;
-    width: 24px;
-    white-space: nowrap;
-    background: rgba(0, 0, 0, 0) !important;
-    box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
+.customizerLeftPanelTop .customizerLeftItem:hover svg,
+.customizerLeftPanelTop .customizerLeftItemActive svg,
+.customizerLeftPanelBottom .customizerLeftItem:hover svg,
+.customizerLeftPanelBottom .customizerLeftItemActive svg {
+    border: 1px solid rgb(255, 255, 255) !important;
+    background: rgba(0,0,0,0);
 }
 
-span.CanvasXpressCustomizerLeft {
-    color: rgb(34, 34, 34);
-    cursor: pointer;
-    font: normal 16px arial, tahoma, sans-serif;
-    line-height: 28px;
-    list-style: none;
-    white-space: nowrap;
-    position: relative;
-    margin: auto;
+.customizerRightPanel {
+    background: rgba(0,0,0,0);
+    border-left: 1px solid rgb(83, 105, 255) !important;
+    border-right: 1px solid rgb(83, 105, 255) !important;
+    position: absolute;
+    z-index: 10000;
+    top: 0px;
+    font-family: arial, tahoma, sans-serif;
+    font-weight: normal;
 }
 
 /*
- * Customizer Right Panel
+ * CanvasXpress Customizer Left Items
  */
 
-div.CanvasXpressCustomizerRightPanel {
-    top: 0;
-    border-left: 5px solid rgb(83, 105, 255) !important;
-    border-right: 5px solid rgb(83, 105, 255) !important;
-    background-color: rgba(255, 255, 255, 0.95);
-    float: left;
-}
-
-div.CanvasXpressCustomizerRightContainer {
-    background-color: rgba(255, 255, 255, 0.95);
+.customizerLeftItem,
+.customizerLeftItemActive {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 4fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    margin: 5px;
     border: 1px solid rgb(83, 105, 255) !important;
-    border-radius: 4px;
-    margin: 9px 0 0 9px;
+    border-radius: 5px;
+    align-items: center;
 }
 
-div.CanvasXpressCustomizerRightContainerActive {
-    background-color: rgba(255, 255, 255, 0.95);
-    border: 1px dashed rgb(255, 0, 0) !important;
-    border-radius: 4px;
-    margin: 9px 0 0 9px;
+.customizerLeftItem:hover,
+.customizerLeftItemActive {
+    background: rgba(83, 105, 255,0.1);
 }
 
-img.CanvasXpressCustomizerRightContainer,
-svg.CanvasXpressCustomizerRightContainer {
-    background-position: center;
-    border: 1px solid rgb(83, 105, 255) !important;
-    border-radius: 4px;
-    color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    list-style: none;
-    margin: 10px 0px 0px 10px !important;
-    position: relative;
-    padding: 2px;
-    vertical-align: top;
-    white-space: nowrap;
-    background: rgba(0, 0, 0, 0) !important;
-    box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
+.customizerLeftItem:hover svg,
+.customizerLeftItemActive svg {
+    background: rgb(255,255,255);
 }
 
-div.CanvasXpressCustomizerRight {
-    background-color: rgb(238, 238, 238);
-    border-top: 1px solid rgb(83, 105, 255) !important;
-    color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    line-height: 24px;
-    list-style: none;
+.customizerLeftItemTop {
+    grid-area: 1 / 1 / 2 / 2;
     margin: auto;
-    outline-style: none;
-    outline-width: 0px;
-    text-decoration: none;
-    white-space: nowrap;
-    width: -webkit-fill-available;
-    height: -webkit-fill-available;
-    display: flex;
+    margin-top: 5px;
 }
 
-img.CanvasXpressCustomizerRight,
-svg.CanvasXpressCustomizerRight {
-    background-position: center;
-    border: 0px none !important;
-    color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    height: 24px;
-    line-height: 24px;
-    list-style: none;
-    margin: 0px !important;
-    position: relative;
-    padding: 0px;
-    vertical-align: top;
-    width: 24px;
-    white-space: nowrap;
-    background: rgba(0, 0, 0, 0) !important;
-    box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
+.customizerLeftItemBottom {
+    grid-area: 2 / 1 / 3 / 2;
+    margin: auto;
 }
 
-img.CanvasXpressCustomizerRightB,
-svg.CanvasXpressCustomizerRightB {
-    background-position: center;
+.customizerLeftIcon {
+    padding: 5px;
     border: 1px solid rgb(83, 105, 255) !important;
-    border-radius: 4px;
-    color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    height: 24px;
-    line-height: 24px;
-    list-style: none;
-    margin: 0px !important;
-    position: relative;
-    padding: 0px;
-    vertical-align: top;
-    width: 24px;
-    white-space: nowrap;
-    background: rgba(0, 0, 0, 0) !important;
-    box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
+    border-radius: 5px;
 }
 
-span.CanvasXpressCustomizerRight {
-    color: rgb(34, 34, 34);
-    font: normal 16px arial, tahoma, sans-serif;
-    line-height: 28px;
-    list-style: none;
-    white-space: nowrap;
-    position: relative;
-    height: 28px;
-}
+/*
+ * CanvasXpress Customizer Right Items
+ */
 
-span.CanvasXpressCustomizerRightHelp {
-    color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    list-style: none;
-    white-space: normal;
-    position: relative;
+.customizerRightItem {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 3fr 2fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    border: 1px solid rgb(83, 105, 255) !important;
+    border-radius: 5px;
+    width: 95%;
 }
 
-a.CanvasXpressCustomizerRight {
-    color: rgb(34, 34, 34);
-    margin-right: 10px;
-    margin-left: 15px;
+.customizerRightItemTop {
+    grid-area: 1 / 1 / 2 / 2;
+    padding-top: 5px;
+    margin: auto;
 }
 
-/**
- * Customizer Widgets
- */
+.customizerRightItemBottom {
+    display: grid;
+    grid-area: 2 / 1 / 3 / 2;
+    margin: auto;
+}
 
 /*
- * Header
+ * CanvasXpress Customizer Right Items Comb
  */
 
-a.CanvasXpressCustomizerHeader {
-    text-decoration: none;
+.customizerRightItemCombo {
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    grid-template-rows: 2fr 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    border-top: 1px solid rgb(83, 105, 255);
 }
 
-div.CanvasXpressCustomizerHeader {
-    background: rgba(83, 105, 255, 0.1);
-    color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    line-height: 24px;
-    list-style: none;
-    margin: auto;
-    outline-style: none;
-    outline-width: 0px;
-    white-space: nowrap;
-    width: -webkit-fill-available;
-    height: -webkit-fill-available;
-    display: flex;
+.customizerRightItemComboNB {
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    grid-template-rows: 2fr 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    border: none !important;
 }
 
-span.CanvasXpressCustomizerHeader {
-    color: rgb(34, 34, 34);
-    font: normal 16px arial, tahoma, sans-serif;
-    line-height: 28px;
-    list-style: none;
-    white-space: nowrap;
-    position: relative;
-    height: 28px;
+.customizerRightItemComboLeft {
+    grid-area: 1 / 1 / 3 / 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-svg.CanvasXpressCustomizerHeader {
-    background-position: center;
-    border: 0px none !important;
-    color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    height: 24px;
-    line-height: 24px;
-    list-style: none;
-    margin: 0px !important;
-    position: relative;
-    padding: 0px;
-    vertical-align: top;
-    width: 24px;
-    white-space: nowrap;
-    background: rgba(0, 0, 0, 0) !important;
-    box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
+.customizerRightItemComboTopRight {
+    grid-area: 1 / 2 / 2 / 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-span.CanvasXpressCustomizerHeaderHelp {
-    color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    list-style: none;
-    white-space: normal;
-    position: relative;
+.customizerRightItemComboBottomRight {
+    grid-area: 2 / 2 / 3 / 3;
+    display: flex;
+    align-items: center;
+    padding-left: 15px;
+    padding-bottom: 2px;
 }
 
 /*
- * Call Customizer
+ * CanvasXpress Customizer Right Item Header
  */
 
-a.CanvasXpressCallCustomizer,
-div.CanvasXpressCallCustomizer {
+.customizerRightItemHeader {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 2fr 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    background: rgba(83, 105, 255,0.1);
     color: rgb(34, 34, 34);
-    cursor: pointer;
-    display: block;
-    font: normal 12px arial, tahoma, sans-serif;
-    line-height: 24px;
-    list-style: none;
-    margin: 0px;
-    outline-style: none;
-    outline-width: 0px;
-    position: relative;
-    text-decoration: none;
-    white-space: nowrap;
+    border-bottom: 1px solid rgb(83, 105, 255) !important;
+    padding-left: 5px;
 }
 
-a.CanvasXpressCallCustomizerActive {
-    background: rgba(83, 105, 255, 0.1);
+.customizerRightItemHeaderNB {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 2fr 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    background: rgba(83, 105, 255,0.1);
     color: rgb(34, 34, 34);
-    cursor: pointer;
-    display: block;
-    font: normal 12px arial, tahoma, sans-serif;
-    line-height: 24px;
-    list-style: none;
-    margin: 0px;
-    outline-style: none;
-    outline-width: 0px;
-    position: relative;
-    text-decoration: none;
-    white-space: nowrap;
+    border-bottom: none !important;
+    padding-left: 5px;
 }
 
-img.CanvasXpressCallCustomizer,
-svg.CanvasXpressCallCustomizer {
-    background-position: center;
-    border: 0px none !important;
-    color: rgb(34, 34, 34);
-    cursor: pointer;
-    font: normal 12px arial, tahoma, sans-serif;
-    height: 24px;
-    line-height: 24px;
-    list-style: none;
-    margin: 0px !important;
-    padding: 0px;
-    position: relative;
-    vertical-align: top;
-    width: 24px;
-    white-space: nowrap;
-    background: rgba(0, 0, 0, 0) !important;
-    box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
+.customizerRightItemHeaderTop {
+    grid-area: 1 / 1 / 2 / 2;
+    display: flex;
+    align-items: center;
 }
 
-span.CanvasXpressCallCustomizer {
-    color: rgb(34, 34, 34);
-    cursor: pointer;
-    font: normal 16px arial, tahoma, sans-serif;
-    line-height: 28px;
-    list-style: none;
-    white-space: nowrap;
-    position: relative;
+.customizerRightItemHeaderBottom {
+    grid-area: 2 / 1 / 3 / 2;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
 }
 
-/*
- * Button
- */
-div.CanvasXpressButtonCustomizer {
-    float: left;
-    position: relative;
-    background: rgba(83, 105, 255, 0.1);
+.customizerRightItemHeaderMain {
+    grid-area: 1 / 1 / 3 / 2;
+    display: flex;
+    align-items: center;
 }
 
 /*
- * Options Customizer
+ * CanvasXpress Customizer Right Item Sub Header
  */
 
-div.CanvasXpressOptionsCustomizer {
-    top: 0;
-    background-color: rgba(255, 255, 255, 0.95);
-    float: left;
-}
-
-img.CanvasXpressOptionsCustomizer,
-svg.CanvasXpressOptionsCustomizer {
-    background-position: center;
-    border: 1px solid rgb(83, 105, 255) !important;
-    border-radius: 4px;
-    color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    list-style: none;
-    margin: 10px 0px 0px 10px !important;
-    position: relative;
-    padding: 2px;
-    vertical-align: top;
-    white-space: nowrap;
-    background: rgba(0, 0, 0, 0) !important;
-    box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
+.customizerRightItemSubHeader {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    background: rgba(83, 105, 255,0.1);
 }
 
-/*
- * Axes Customizer
- */
-
-div.CanvasXpressAxesCustomizer {
-    background-color: rgba(255, 255, 255, 0.95);
-    border: 1px solid rgb(83, 105, 255);
-    border-radius: 4px;
-    box-sizing: border-box;
-    font: normal 16px arial, tahoma, sans-serif;
-    color: rgb(34, 34, 34);
-    margin: 9px 0 0 9px;
-    white-space: normal;
-    overflow-y: auto;
-    overflow-x: hidden;
+.customizerRightItemSubHeaderRow {
+    grid-area: 1 / 1 / 2 / 2;
+    display: flex;
+    align-items: center;
 }
 
-img.CanvasXpressAxesCustomizer,
-svg.CanvasXpressAxesCustomizer {
-    background-position: center;
-    border: 0px none !important;
-    color: rgb(34, 34, 34);
-    font: normal 12px arial, tahoma, sans-serif;
-    list-style: none;
-    position: relative;
-    padding: 0px;
-    vertical-align: top;
-    white-space: nowrap;
-    background: rgba(0, 0, 0, 0) !important;
-    box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
+.customizerRightItemSubHeaderRaw {
+    display: flex;
+    align-items: center;
+    border: 1px solid rgb(83, 105, 255) !important;
+    border-radius: 5px;
+    background-color: rgba(83, 105, 255,0.1);
 }
 
 /*
- * Search Customizer
+ * CanvasXpress Customizer Right Item Launcher
  */
-input.CanvasXpressSearchCustomizer {
-    margin: 9px;
-    background-color: rgba(255, 255, 255, 0.95);
-    border: 1px solid rgb(83, 105, 255);
-    color: rgb(34, 34, 34);
-    cursor: default;
-    font: normal 16px arial, tahoma, sans-serif;
-    height: 40px;
-    border-radius: 4px;
-    float: left;
-    clear: left;
-}
 
-select.CanvasXpressSearchCustomizer {
-    margin: 9px;
-    background-color: rgba(255, 255, 255, 0.95);
-    border: 1px solid rgb(83, 105, 255);
-    color: rgb(34, 34, 34);
-    cursor: default;
-    font: normal 16px arial, tahoma, sans-serif;
-    padding-left: 3px;
-    border-radius: 4px;
-    float: left;
-    clear: left;
+.customizerRightItemLauncher {
+    display: grid;
+    grid-template-columns: 1fr 6fr;
+    grid-template-rows: 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    border-top: 1px solid rgb(83, 105, 255) !important;
 }
 
-span.CanvasXpressSearchCustomizer {
-    color: rgb(34, 34, 34);
-    font: normal 16px arial, tahoma, sans-serif;
-    line-height: 28px;
-    list-style: none;
-    position: relative;
-    height: 28px;
-    margin-top: 5px;
-    float: left;
-    clear: left;
+.customizerRightItemLauncherNB {
+    display: grid;
+    grid-template-columns: 1fr 6fr;
+    grid-template-rows: 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    border: none !important;
 }
 
-span.CanvasXpressSearchCustomizerSelect,
-span.CanvasXpressSearchCustomizerDescription,
-span.CanvasXpressSearchCustomizerCategory,
-span.CanvasXpressSearchCustomizerCurrent {
-    font: normal 16px arial, tahoma, sans-serif;
-    line-height: 28px;
-    list-style: none;
-    position: relative;
-    height: 28px;
-    margin-top: 5px;
-    float: left;
-    clear: left;
+.customizerRightItemLauncher:hover,
+.customizerRightItemLauncherNB:hover {
+    background-color: rgba(83, 105, 255,0.1);
 }
 
-span.CanvasXpressSearchCustomizerSelect {
-    color: rgb(34, 34, 34);
+.customizerRightItemLauncherLeft {
+    grid-area: 1 / 1 / 2 / 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(83, 105, 255,0.1);
 }
 
-span.CanvasXpressSearchCustomizerDescription,
-span.CanvasXpressSearchCustomizerCategory {
-    color: rgb(83, 105, 255);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+.customizerRightItemLauncherRight {
+    grid-area: 1 / 2 / 2 / 3;
+    display: flex;
+    align-items: center;
+    padding-left: 5px;
 }
 
-span.CanvasXpressSearchCustomizerCurrent {
-    color: rgb(83, 105, 255);
-}
+/*
+ * CanvasXpress Customizer Right Item Input
+ */
 
-span.CanvasXpressSearchCustomizerSelect:before {
-    color: rgb(34, 34, 34);
-    font-weight: bold;
-    content: "Select property (";
+.customizerRightItemInput {
+    display: grid;
+    grid-template-columns: 1fr 6fr;
+    grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
 }
 
-span.CanvasXpressSearchCustomizerSelect:after {
-    color: rgb(34, 34, 34);
-    font-weight: bold;
-    content: ")";
+.customizerRightItemInputTopLeft {
+    grid-area: 1 / 1 / 2 / 2;
+    display: flex;
+    align-items: center;
 }
 
-span.CanvasXpressSearchCustomizerDescription:before {
-    color: rgb(34, 34, 34);
-    font-weight: bold;
-    content: "Description [ ";
+.customizerRightItemInputTopRight {
+    grid-area: 1 / 2 / 2 / 3;
+    display: flex;
+    align-items: center;
 }
 
-span.CanvasXpressSearchCustomizerCategory:before {
-    color: rgb(34, 34, 34);
-    font-weight: bold;
-    content: "Category [ ";
+.customizerRightItemInputBottom {
+    grid-area: 2 / 1 / 3 / 3;
+    display: flex;
+    align-items: center;
 }
 
-span.CanvasXpressSearchCustomizerDescription:after,
-span.CanvasXpressSearchCustomizerCategory:after {
-    color: rgb(34, 34, 34);
-    font-weight: bold;
-    content: " ]";
-}
+/*
+ * CanvasXpress Customizer Right Item Cols
+ */
 
-span.CanvasXpressSearchCustomizerCurrent:before {
-    color: rgb(34, 34, 34);
-    font-weight: bold;
-    content: "Current Value [ ";
+.customizerRightItemFullCol {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    margin: 5px;
+    height: fit-content;
 }
 
-span.CanvasXpressSearchCustomizerCurrent:after {
-    color: rgb(34, 34, 34);
-    font-weight: bold;
-    content: " ]";
+.customizerRightItemHalfCol {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    margin: 5px;
+    height: fit-content;
 }
 
-/*
- * Tool Customizer
- */
-
-a.CanvasXpressToolCustomizer {
-    text-decoration: none;
+.customizerRightItemThirdCol {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    margin: 5px;
+    height: fit-content;
 }
 
-div.CanvasXpressToolCustomizer {
-    color: rgb(34, 34, 34);
-    cursor: pointer;
-    display: block;
-    font: normal 12px arial, tahoma, sans-serif;
-    line-height: 24px;
-    list-style: none;
-    margin: 0px;
-    outline-style: none;
-    outline-width: 0px;
-    position: relative;
-    text-decoration: none;
-    white-space: nowrap;
+.customizerRightItemFourthCol {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    margin: 5px;
+    height: fit-content;
 }
 
-div.CanvasXpressToolCustomizerActive {
-    background: rgba(83, 105, 255, 0.1);
-    color: rgb(34, 34, 34);
-    cursor: pointer;
-    display: block;
-    font: normal 12px arial, tahoma, sans-serif;
-    line-height: 24px;
-    list-style: none;
-    margin: 0px;
-    outline-style: none;
-    outline-width: 0px;
-    position: relative;
-    text-decoration: none;
-    white-space: nowrap;
+.customizerRightItemFifthCol {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    margin: 5px;
+    height: fit-content;
 }
 
-/*
- * Data Customizer
- */
+.customizerRightItemSixthCol {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    margin: 5px;
+    height: fit-content;
+}
 
-div.CanvasXpressCustomizerPanel {
-    font: normal 16px arial, tahoma, sans-serif;
-    margin: 10px;
-    float: left;
+.customizerRightItemCol1 {
+    grid-area: 1 / 1 / 2 / 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-span.CanvasXpressCustomizerPanel {
-    border-width: 1px 1px 0 1px;
-    border-color: rgb(83, 105, 255);
-    border-style: solid;
-    border-radius: 5px 5px 0 0;
-    padding: 8px;
-    font: normal 16px arial, tahoma, sans-serif;
+.customizerRightItemCol2 {
+    grid-area: 1 / 2 / 2 / 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-span.CanvasXpressCustomizerPanelActive {
-    border-bottom-width: 3px;
-    border-left-color: rgb(83, 105, 255);
-    border-top-color: rgb(83, 105, 255);
-    border-right-color: rgb(83, 105, 255);
-    border-bottom-color: rgb(238, 238, 238);
-    border-style: solid;
-    border-radius: 5px 5px 0 0;
-    padding: 8px;
-    font: normal 16px arial, tahoma, sans-serif;
+.customizerRightItemCol3 {
+    grid-area: 1 / 3 / 2 / 4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-div.CanvasXpressDataCustomizerActive {
-    border: 1px dashed rgb(255, 0, 0);
-    border-radius: 4px;
-    box-sizing: border-box;
-    font: normal 16px arial, tahoma, sans-serif;
-    color: rgb(34, 34, 34);
-    margin: 9px 0 0 9px;
-    padding: 5px;
-    white-space: normal;
-    overflow-y: auto;
-    overflow-x: hidden;
+.customizerRightItemCol4 {
+    grid-area: 1 / 4 / 2 / 5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-div.CanvasXpressDataCustomizer {
-    border: 1px solid rgb(83, 105, 255);
-    border-radius: 4px;
-    box-sizing: border-box;
-    font: normal 16px arial, tahoma, sans-serif;
-    color: rgb(34, 34, 34);
-    margin: 9px 0 0 9px;
-    padding: 5px;
-    white-space: normal;
-    overflow-y: auto;
-    overflow-x: hidden;
+.customizerRightItemCol5 {
+    grid-area: 1 / 5 / 2 / 6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-div.CanvasXpressDataCustomizerPanel {
-    background-color: rgba(255, 255, 255, 0.95);
-    border-radius: 5px;
-    -webkit-transition: all 0.5s ease;
-    -moz-transition: all 0.5s ease;
-    -o-transition: all 0.5s ease;
-    -ms-transition: all 0.5s ease;
-    transition: all 0.5s ease;
-    cursor: default;
-    height: auto;
-    max-height: 1000px;
-    overflow: hidden;
-    padding-top: 10px;
+.customizerRightItemCol6 {
+    grid-area: 1 / 6 / 2 / 7;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-img.CanvasXpressDataCustomizerActive,
-svg.CanvasXpressDataCustomizerActive {
-    background: rgba(0, 0, 0, 0) !important;
-    box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
-    border: 1px dashed rgb(255, 0, 0) !important;
+.customizerRightItemColMid {
+    grid-area: 1 / 3 / 2 / 5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgb(83, 105, 255) !important;
     border-radius: 5px;
-    cursor: pointer;
-    margin: 3px !important;
-    padding: 2px;
 }
 
-img.CanvasXpressDataCustomizer,
-svg.CanvasXpressDataCustomizer {
-    background: rgba(0, 0, 0, 0) !important;
-    box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
-    border: 0px !important;
-    cursor: pointer;
-    margin: 3px !important;
-    padding: 2px;
-    -webkit-transform: scale(1, 1);
-    -ms-transform: scale(1, 1);
-    transform: scale(1, 1);
-    transition-duration: 0.3s;
-    -webkit-transition-duration: 0.3s;
-    /* Safari */
+.customizerRightItemSelect > select:hover,
+.customizerRightItemTextArea > svg:hover,
+.customizerRightItemTextArea > textarea:hover,
+.customizerContainerRaw > svg:hover,
+.customizerRightItemCol1 > svg:hover,
+.customizerRightItemCol2 > svg:hover,
+.customizerRightItemCol3 > svg:hover,
+.customizerRightItemCol4 > svg:hover,
+.customizerRightItemCol5 > svg:hover,
+.customizerRightItemCol6 > svg:hover,
+.customizerRightItem:hover {
+    background-color: rgba(83, 105, 255,0.1);
 }
 
-img.CanvasXpressDataCustomizer:hover,
-img.CanvasXpressDataCustomizer3:hover img.CanvasXpressDataCustomizer4:hover,
-svg.CanvasXpressDataCustomizer:hover,
-svg.CanvasXpressDataCustomizer3:hover svg.CanvasXpressDataCustomizer4:hover {
-    background: rgba(0, 0, 0, 0) !important;
+/*
+ * Other Customizer classes
+ */
+
+.customizerContainer {
+    height: fit-content;
     border: 1px solid rgb(83, 105, 255) !important;
     border-radius: 5px;
-    cursor: pointer;
-    margin: 2px 3px !important;
-    padding: 3px;
-    -webkit-transform: scale(1.8, 1.8);
-    -ms-transform: scale(1.8, 1.8);
-    transform: scale(1.8, 1.8);
-    transition-duration: 0.3s;
-    -webkit-transition-duration: 0.3s;
-    /* Safari */
-    box-shadow: 10px 10px 5px rgb(136, 136, 136) !important;
-    z-index: 2;
-    position: relative;
+    margin: 10px;
+    float: left;
 }
 
-img.CanvasXpressDataCustomizer2,
-img.CanvasXpressDataCustomizer4,
-svg.CanvasXpressDataCustomizer2,
-svg.CanvasXpressDataCustomizer4 {
-    background: rgba(0, 0, 0, 0) !important;
-    box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
-    border: 0px none !important;
-    border-radius: 0px;
-    cursor: pointer;
-    margin: 2px 3px !important;
-    -webkit-transform: scale(1, 1);
-    -ms-transform: scale(1, 1);
-    transform: scale(1, 1);
-    transition-duration: 0.3s;
-    -webkit-transition-duration: 0.3s;
-    /* Safari */
+.customizerContainerRaw {
+    border: none !important;
+    float: left;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-img.CanvasXpressDataCustomizer2:hover,
-svg.CanvasXpressDataCustomizer2:hover {
-    background: rgba(0, 0, 0, 0) !important;
-    border: 0px none !important;
+.customizerWrangling {
+    height: 102px;
+    margin: 0px 0px 10px 10px;
+    border: 1px solid rgb(83, 105, 255) !important;
     border-radius: 5px;
-    cursor: pointer;
-    margin: 2px 4px !important;
-    padding: 4px;
-    -webkit-transform: scale(1.8, 1.8);
-    -ms-transform: scale(1.8, 1.8);
-    transform: scale(1.8, 1.8);
-    transition-duration: 0.3s;
-    -webkit-transition-duration: 0.3s;
-    /* Safari */
-    box-shadow: 10px 10px 5px rgb(136, 136, 136) !important;
-    z-index: 2;
-    position: relative;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
-img.CanvasXpressDataCustomizer3,
-svg.CanvasXpressDataCustomizer3 {
-    background: rgba(0, 0, 0, 0) !important;
-    box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
-    border: 1px solid rgb(83, 105, 255) !important;
-    border-radius: 5px;
-    cursor: pointer;
-    margin: 12px 3px 3px 3px !important;
-    padding: 2px 3px;
-    -webkit-transform: scale(1, 1);
-    -ms-transform: scale(1, 1);
-    transform: scale(1, 1);
-    transition-duration: 0.3s;
-    -webkit-transition-duration: 0.3s;
-    /* Safari */
+.customizerWrangling:hover {
+    border: 1px dashed rgb(255,0,0) !important;
 }
 
-img.CanvasXpressDataCustomizerMask,
-svg.CanvasXpressDataCustomizerMask {
+.customizerMask {
     background: rgba(0, 0, 0, 0) !important;
     border: 0px none !important;
     box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
@@ -1493,25 +1249,14 @@ svg.CanvasXpressDataCustomizerMask {
     margin: 0px !important;
     width: 100%;
     height: 20px;
-    -moz-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -o-user-select: none;
-    -ms-user-select: none;
-    -moz-user-select: none;
 }
 
-span.CanvasXpressDataCustomizerNumeric,
-span.CanvasXpressDataCustomizerString,
-span.CanvasXpressDataCustomizerUnique,
-span.CanvasXpressDataCustomizerNumericActive,
-span.CanvasXpressDataCustomizerStringActive,
-span.CanvasXpressDataCustomizerUniqueActive {
+.customizerNumeric,
+.customizerString,
+.customizerUnique {
     border: 1px solid rgb(83, 105, 255);
     border-radius: 5px;
     cursor: move;
-    font: normal 16px arial, tahoma, sans-serif;
-    color: rgb(34, 34, 34);
     margin: 3px;
     padding: 3px;
     word-wrap: normal;
@@ -1520,135 +1265,214 @@ span.CanvasXpressDataCustomizerUniqueActive {
     max-width: 150px;
     overflow: hidden;
     position: relative;
-    -moz-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -o-user-select: none;
-    -ms-user-select: none;
 }
 
-span.CanvasXpressDataCustomizerString {
-    color: rgb(255, 0, 0);
+.customizerNumeric {
+    color: rgb(34, 34, 34);
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.customizerString {
+    color: rgb(0, 255, 0);
+    background-color: rgba(0, 0, 0, 0);
 }
 
-span.CanvasXpressDataCustomizerUnique {
+.customizerUnique {
     color: rgb(0, 0, 255);
+    background-color: rgba(0, 0, 0, 0);
 }
 
-span.CanvasXpressDataCustomizerListNumeric,
-span.CanvasXpressDataCustomizerListString,
-span.CanvasXpressDataCustomizerListUnique,
-span.CanvasXpressDataCustomizerListNumericActive,
-span.CanvasXpressDataCustomizerListStringActive,
-span.CanvasXpressDataCustomizerListUniqueActive {
+.customizerListNumeric,
+.customizerListString,
+.customizerListUnique {
     border: none;
     cursor: move;
-    font: normal 16px arial, tahoma, sans-serif;
     color: rgb(34, 34, 34);
     margin: 0;
-    padding: 0;
+    padding: 0 0 0 3px;
     width: 350px;
     white-space: nowrap;
     display: inline-block;
     text-align: start;
     overflow: hidden;
     position: relative;
-    -moz-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -o-user-select: none;
-    -ms-user-select: none;
 }
 
-span.CanvasXpressDataCustomizerListNumeric,
-span.CanvasXpressDataCustomizerListNumericActive {
+.customizerListNumeric {
     color: rgb(34, 34, 34);
 }
 
-span.CanvasXpressDataCustomizerListString,
-span.CanvasXpressDataCustomizerListStringActive {
-    color: rgb(255, 0, 0);
+.customizerListString {
+    color: rgb(0, 255, 0);
 }
 
-span.CanvasXpressDataCustomizerListUnique,
-span.CanvasXpressDataCustomizerListUniqueActive {
+.customizerListUnique {
     color: rgb(0, 0, 255);
 }
 
-span.CanvasXpressDataCustomizerListNumeric:before,
-span.CanvasXpressDataCustomizerListNumericActive:before {
+.customizerListNumeric,
+.customizerListString,
+.customizerListUnique {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.customizerListNumeric:hover,
+.customizerListString:hover,
+.customizerListUnique:hover {
+    background: rgba(83, 105, 255, 0.1);
+}
+
+.customizerListNumeric:before {
     font: normal 10px courier;
     color: rgb(83, 105, 255);
-    content: "\00a0#\00a0\00a0\00a0";
+    content: "\00a0#\00a0\00a0";
 }
 
-span.CanvasXpressDataCustomizerListString:before,
-span.CanvasXpressDataCustomizerListStringActive:before {
+.customizerListString:before {
     font: normal 10px courier;
     color: rgb(83, 105, 255);
-    content: "Abc\00a0\00a0";
+    content: "Abc\00a0";
 }
 
-span.CanvasXpressDataCustomizerListUnique:before,
-span.CanvasXpressDataCustomizerListUniqueActive:before {
+.customizerListUnique:before {
     font: normal 10px courier;
     color: rgb(83, 105, 255);
-    content: "Unq\00a0\00a0";
+    content: "Unq\00a0";
 }
 
-span.CanvasXpressDataCustomizer {
-    border: 1px solid rgb(83, 105, 255);
-    border-radius: 5px;
-    cursor: pointer;
-    font: bold 16px arial, tahoma, sans-serif;
-    color: rgb(34, 34, 34);
-    line-height: 380%;
-    padding: 6px 29px;
-    margin-left: -4px;
-}
-
-img.CanvasXpressDataCustomizerActive::selection,
-img.CanvasXpressDataCustomizer::selection,
-svg.CanvasXpressDataCustomizerActive::selection,
-svg.CanvasXpressDataCustomizer::selection,
-div.CanvasXpressDataCustomizerActive::selection,
-div.CanvasXpressDataCustomizer::selection,
-img.CanvasXpressDataCustomizerMask::selection,
-svg.CanvasXpressDataCustomizerMask::selection,
-span.CanvasXpressDataCustomizerNumeric::selection,
-span.CanvasXpressDataCustomizerString::selection,
-span.CanvasXpressDataCustomizerUnique::selection,
-span.CanvasXpressDataCustomizerListNumeric::selection,
-span.CanvasXpressDataCustomizerListString::selection,
-span.CanvasXpressDataCustomizerListUnique::selection,
-span.CanvasXpressDataCustomizer::selection {
+.customizerMask::selection,
+.customizerNumeric::selection,
+.customizerString::selection,
+.customizerUnique::selection,
+.customizerListNumeric::selection,
+.customizerListString::selection,
+.customizerListUnique::selection {
     background: rgba(0, 0, 0, 0);
     color: rgb(0, 0, 0);
     padding: 0;
 }
 
-span.CanvasXpressDataCustomizerListNumericActive,
-span.CanvasXpressDataCustomizerListStringActive,
-span.CanvasXpressDataCustomizerListUniqueActive {
-    background: rgba(83, 105, 255, 0.1);
+/*
+ * Search Customizer
+ */
+
+input.customizerSearch {
+    margin: 9px;
+    background-color: rgba(255, 255, 255, 0.95);
+    border: 1px solid rgb(83, 105, 255);
+    color: rgb(34, 34, 34);
+    cursor: default;
+    font: inherit;
+    height: 40px;
+    border-radius: 4px;
+    float: left;
+    clear: left;
 }
 
-span.CanvasXpressDataCustomizerNumericActive,
-span.CanvasXpressDataCustomizerStringActive,
-span.CanvasXpressDataCustomizerUniqueActive {
-    background: rgba(83, 105, 255, 0.1);
+input.customizerSearch[type="color"] {
+    padding: 0;
+    overflow: hidden;
+}
+input.customizerSearch:not([type="color"]) {
+    padding: 5px;
 }
 
-span.CanvasXpressDataCustomizerListNumeric,
-span.CanvasXpressDataCustomizerListString,
-span.CanvasXpressDataCustomizerListUnique {
-    background-color: rgba(0, 0, 0, 0);
+select.customizerSearch {
+    margin: 9px;
+    background-color: rgba(255, 255, 255, 0.95);
+    border: 1px solid rgb(83, 105, 255);
+    color: rgb(34, 34, 34);
+    cursor: default;
+    font: inherit;
+    padding-left: 3px;
+    border-radius: 4px;
+    float: left;
+    clear: left;
 }
 
-span.CanvasXpressDataCustomizerNumeric,
-span.CanvasXpressDataCustomizerString,
-span.CanvasXpressDataCustomizerUnique {
-    background-color: rgba(0, 0, 0, 0);
+span.customizerSearch {
+    color: rgb(34, 34, 34);
+    font: inherit;
+    line-height: 20px;
+    list-style: none;
+    position: relative;
+    margin: 5px 5px 0 15px;
+    float: left;
+    clear: left;
+}
+
+span.customizerSearchSelect,
+span.customizerSearchDescription,
+span.customizerSearchCategory,
+span.customizerSearchCurrent {
+    font: inherit;
+    line-height: 28px;
+    list-style: none;
+    position: relative;
+    height: 28px;
+    margin-top: 5px;
+    float: left;
+    clear: left;
+    left: 15px;
+}
+
+span.customizerSearchSelect {
+    color: rgb(34, 34, 34);
+}
+
+span.customizerSearchDescription,
+span.customizerSearchCategory {
+    color: rgb(83, 105, 255);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+span.customizerSearchCurrent {
+    color: rgb(83, 105, 255);
+}
+
+span.customizerSearchSelect:before {
+    color: rgb(34, 34, 34);
+    font-weight: bold;
+    content: "Select property (";
+}
+
+span.customizerSearchSelect:after {
+    color: rgb(34, 34, 34);
+    font-weight: bold;
+    content: ")";
+}
+
+span.customizerSearchDescription:before {
+    color: rgb(34, 34, 34);
+    font-weight: bold;
+    content: "Description [ ";
+}
+
+span.customizerSearchCategory:before {
+    color: rgb(34, 34, 34);
+    font-weight: bold;
+    content: "Category [ ";
+}
+
+span.customizerSearchDescription:after,
+span.customizerSearchCategory:after {
+    color: rgb(34, 34, 34);
+    font-weight: bold;
+    content: " ]";
+}
+
+span.customizerSearchCurrent:before {
+    color: rgb(34, 34, 34);
+    font-weight: bold;
+    content: "Current Value [ ";
+}
+
+span.customizerSearchCurrent:after {
+    color: rgb(34, 34, 34);
+    font-weight: bold;
+    content: " ]";
 }
 
 /*