Initial Move from Azure DevOps to GitHub

less/Common/Constants.less

@@ -0,0 +1,270 @@
+/******************************************************************************
+                                FONTS
+/******************************************************************************/
+
+@font-face {
+    font-family: wf_segoe-ui_normal;
+    src: url('../../fonts/segoe-ui/west-european/normal/latest.woff');
+}
+
+@DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+@SemiboldFont: "Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+
+@xSmallFontSize: 4px;
+@smallFontSize: 8px;
+@mediumFontSize: 12px;
+@DefaultFontSize: 14px;
+@largeFontSize: 16px;
+
+/******************************************************************************
+                                COLORS
+/******************************************************************************/
+
+@AccentMediumHigh: #0058AD;
+@AccentMedium: #004E87;
+@AccentHigh: #1EBAED;
+@AccentExtraHigh: #55B3FF;
+@AccentLow: #EDF6FF;
+@AccentMediumLow: #DDEEFE;
+@AccentLight: #EEF7FF;
+@AccentExtra: #DDF0FF;
+
+@SelectionHigh: #B91F26;
+@BaseLight: #FFFFFF;
+@BaseDark: #000000;
+@NotificationLow: #FFF4CE;
+@NotificationHigh: #F9E9B0;
+@Purple1: #8A2DA5;
+
+@BaseLow: #F2F2F2;
+@BaseMediumLow: #E6E6E6;
+@BaseMedium: #CCCCCC;
+@BaseMediumHigh: #767676;
+@BaseHigh: #393939;
+
+@BoxShadow: rgba(118, 118, 118, 0.65);
+@GreyOutOpacity: 0.65;
+
+@DefaultFontColor: @BaseHigh;
+@DividerColor: @BaseMedium;
+
+@InfoPointerColor: #3b3b3b;
+
+@ErrorColor: @SelectionHigh;
+
+@SelectionColor: #3074B0;
+
+/******************************************************************************
+                                METRICS
+/******************************************************************************/
+
+@SmallSpace: 4px;
+@DefaultSpace: 8px;
+@MediumSpace: 12px;
+@LargeSpace: 16px;
+
+@ButtonBorderWidth: 1px;
+@RightPaneWidth: 440px;
+@RightPaneMinHeight: 565px;
+
+@PaneLoaderWidth: 110px;
+@PaneLoaderHeight: 10px;
+
+@ButtonIconHeight: 18px;
+
+@ScaleFormWidth: 280px;
+
+@ImgWidth: 14px;
+@ImgHeight: 14px;
+
+@toggleFontWeight:700;
+
+//Resource Tree
+@TreeLineHeight: 17px;
+
+//top command bar height
+@topcommandbarheight: 36px;
+
+//Global Loader
+@LoaderHeight: 6px;
+@LoaderWidth: 24px;
+
+//HDE constants
+@HdeAccountSplitterHeight: 20px;
+@AccountNavigationImgWidth: 350px;
+@AccountNavigationImgHeight: 190px;
+@AccountNavigationExpandCollapseSize: 12px;
+
+// Query Stats
+@IETableDataWidth: 650px;
+
+//New Colleciton Pane textbox width
+@newCollectionPaneInputWidth: 300px;
+@tooltipTextWidth: 280px;
+@sharedCollectionThroughputTooltipTextWidth: 150px;
+@addContainerPaneThroughputInfoWidth: 370px;
+@optionsInfoWidth: 210px;
+@noFixedCollectionsTooltipWidth: 196px;
+@ThroughputInfoWidth: 215px;
+@ThroughputRuInfoWidth: 175px;
+@RenewAccessInfoWidth: 115px;
+@ErrorDetailsInfowidth: 145px;
+@AccessKeyInputWidth: 370px;
+@provisionDatabaseThroughputInfo: 200px;
+
+//tabs container
+@ActiveTabHeight: 31px;
+@ActiveTabWidth: 141px;
+@TabsHeight: 30px;
+@TabsWidth: 140px;
+@StatusIconContainerSize: 18px;
+@LoadingErrorIconSize: 14px;
+@ErrorIconContainer: 16px;
+@ErrorIconWidth: 3px;
+
+//form errors
+@FormErrorWidth: 320px;
+@WarningErrorIconSize: 32px;
+
+// z-index
+@Loader_z-index: 5; //this should be higher than that of the splitter to disable it
+@NotificationConsole_z-index: 2;
+
+@screen: screen\0;
+
+// CommandBar
+@CommandBarButtonHeight: 40px;
+
+/**********************************************************************************
+                              Common Flex Property
+/**********************************************************************************/
+
+.flex-display(@display: flex) {
+	display: ~"-webkit-@{display}";
+	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+	display: ~"-ms-@{display}"; // IE11
+	display: @display;
+}
+
+.flex-direction(@direction: column) {
+  -webkit-flex-direction: @direction;
+      -ms-flex-direction: @direction;
+          flex-direction: @direction;
+}
+
+/*************************************************************************************
+                                 High contrast mode active
+**************************************************************************************/
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .selectedRadio,
+    .selectedRadio:hover,
+    .selectedRadio:active,
+    .selectedRadio.dirty,
+    .tab [type=radio]:checked ~ label,
+    .tab [type=radio]:checked ~ label:hover {
+        -ms-high-contrast-adjust: none;
+        -webkit-text-fill-color: HighlightText;
+        color: HighlightText;
+        border-color: HighlightText;
+        background-color: Highlight;
+    }
+
+    .queryMetricsSummaryTuple {
+
+        th, td {
+
+            &:nth-child(2) {
+                width: @IETableDataWidth;
+            }
+
+            &:nth-child(3) {
+                width: 50%;
+            }
+        }
+    }
+}
+
+/********************************************************************************************
+                            Common Hover and Active color
+*********************************************************************************************/
+
+.hover() {
+    background-color: @AccentLight;
+}
+
+.active() {
+    background-color: @AccentExtra;
+}
+
+.focus() {
+    outline: 1px dashed @AccentMedium;
+}
+
+/************************************************************************************************
+                               Common Toggle Switch
+*************************************************************************************************/
+@ToggleHeight: 30px;
+@ToggleWidth: 180px;
+
+.toggleSwitch() {
+    max-width: 100%;
+    margin-bottom: @SmallSpace;
+    padding: @SmallSpace;
+    cursor: pointer;
+    color: @BaseHigh;
+    font-weight: 400;
+    font-size: @mediumFontSize;
+    font-family: @DataExplorerFont;
+}
+
+.selectedToggle() {
+    border-bottom: 2px solid @BaseHigh;
+}
+
+.unselectedToggle() {
+    color: @AccentMediumHigh;
+}
+
+/********************************************************************************************************
+                             Common Data Explorer Icons
+*********************************************************************************************************/
+.dataExplorerIcons() {
+    cursor: pointer;
+    width: @ImgWidth;
+    height: @ImgHeight;
+}
+
+/*********************************************************************************************************
+                            Info Tooltip
+**********************************************************************************************************/
+.infoTooltip() {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltipText(@textColor: @BaseLight, @backgroundColor: @BaseHigh) {
+    visibility: hidden;
+    background-color: @backgroundColor;
+    color: @textColor;
+    position: absolute;
+    z-index: 1;
+    left: @MediumSpace;
+    padding: @MediumSpace;
+}
+
+.tooltipTextAfter(@color: @BaseDark) {
+    content: "";
+    position: absolute;
+    right: 100%;
+    border-style: solid;
+    border-color: transparent @color transparent transparent;
+    left: 0px;
+    width: 0;
+    height: 0;
+    border-color: @InfoPointerColor transparent;
+}
+
+.tooltipVisible() {
+    visibility: visible;
+}

less/Common/TabCommon.less

@@ -0,0 +1,10 @@
+/******************************************************************************************************
+                         Common tab-base properties
+*******************************************************************************************************/
+
+.tabContentContainer() {
+    height: 100%;
+    .flex-display();
+    .flex-direction();
+}
+

less/TableStyles/CustomizeColumns.less

@@ -0,0 +1,126 @@
+@import "../Common/Constants";
+
+.column-options {
+    margin: 15px 0 0 0;
+    .flex-display();
+    .flex-direction();
+    height:100%;
+    overflow: hidden; //this is to fit the layout in all browsers
+}
+
+.column-options>.content {
+    width: 100%;
+    margin-top: 0px;
+    height:100%;
+    overflow: hidden; //this is to fit the layout in all browsers
+}
+
+.column-options>.content>section {
+    width: 100%;
+    height: 300px;
+    float: left;
+    height:100%;
+    /*border: 1px solid #eeeeee;
+  [1px solid {plugin-treeview-content-selected-border-color}]*/
+}
+
+.column-options>.content>aside {
+    line-height: 30px;
+    height: 300px;
+    width: 25%;
+    float: right;
+    padding-right: 8px;
+    text-align: right;
+}
+
+.column-options>.content>aside>input[type="button"] {
+    width: 76px;
+    margin-bottom: 20px;
+}
+
+div.column-options ul {
+    list-style: none;
+    max-width: inherit;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    white-space: nowrap;
+    color: #000000;
+    margin-left: -45px;
+    outline: none;
+    /*[{plugin-treeview-content-color}]*/
+    /*background-color: #F1F2F5;*/
+    /*[{plugin-treeview-content-background-color}]*/
+}
+
+div.column-options ul>.list-item {
+    margin: 0px 0px 0 6px;
+}
+
+.list-item.selected {
+    /*[{plugin-treeview-content-selected-color}]*/
+    background-color: #DEF;
+    /*[{plugin-treeview-content-selected-background-color}]*/
+}
+
+.list-item:hover {
+    background-color: #e6f8fe;
+}
+
+div.column-options ul>.list-item>input[type="checkbox"] {
+    vertical-align: sub;
+    margin-right: 8px;
+}
+
+div.column-options ul>.list-item>span {
+    display: inline-block;
+    width: calc(~"80%");
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+}
+
+div.column-options label {
+    padding: 0px;
+}
+
+.buttons {
+    margin-top: 15px;
+}
+
+.row-label {
+    display: block;
+    margin-top: 10px;
+}
+
+.all-select-check {
+    vertical-align: sub;
+    margin-right: 10px !important;
+}
+
+.columns-border {
+    border-bottom: 1px solid #ddd;
+    width: 85%;
+    line-height: 28px;
+}
+
+.column-opt-arrow-Img {
+    float: right;
+    margin-top: 6px;
+    width: 14px;
+    height: 14px;
+}
+
+.column-arrows-svg {
+    padding: 0px 6px 5px 6px;
+    cursor: pointer;
+    float: right;
+}
+
+.column-arrows-svg:hover {
+    background-color: @BaseLow;
+}
+
+.column-arrows-svg:active {
+    background-color: @AccentMediumLow;
+}

less/TableStyles/EntityEditor.less

@@ -0,0 +1,129 @@
+@import "../Common/Constants";
+
+.entity-table {
+    border-spacing: 10px 4px;
+    display: table;
+    width: 100%;
+    margin-left: -20px;
+}
+
+.entity-table-row {
+    display: row;
+}
+
+.entity-table-cell {
+    display: table-cell;
+    text-align: left;
+    vertical-align: middle;
+    max-width: 210px;
+}
+
+.entity-table-field {
+    width: 100%;
+    border: 1px solid #bbb;
+    padding: 3px 10px;
+}
+
+.entity-table-cell button {
+    height: 30px;
+}
+
+.entity-table-field[readonly] {
+    color: #767676;
+    /*[{plugin-select-background-color}]*/
+    border: 1px solid #CCCEDB;
+    /*[1px solid {plugin-select-border-color}]*/
+}
+
+.entity-table-scroll-box {
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
+    margin-top: -8px;
+    height:100%;
+}
+
+.entity-table-property-column,
+.entity-table-property-header,
+.entity-table-value-column,
+.entity-table-value-header {
+    width: 210px;
+    color: #000;
+}
+
+.entity-table-type-header,
+.entity-table-type-column {
+    width: 100px;
+    color: #000;
+}
+
+.entity-table-property-header,
+.entity-table-type-header,
+.entity-table-value-header {
+    font-weight: bold;
+    color: #000;
+}
+
+.entity-table-action-column>button {
+    min-width: 20px;
+    width: 20px;
+    padding: 0;
+    background: transparent;
+}
+
+.entity-table-right-bottom-buttons {
+    right: 10px;
+}
+
+.addPropertyImg {
+    width: 14px;
+    height: 14px;
+    margin-right: 8px;
+    margin-top: -4px;
+    margin-left: -5px;
+}
+
+.tableParamContent {
+    flex: 1;
+    padding-left: 34px;
+    color: @BaseDark;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin: 24px 0px;
+}
+
+.entity-Editor-Cancel-Img {
+    width: 14px;
+    height: 14px;
+    margin-bottom: @SmallSpace;
+}
+
+.entity-Edit-Cancel {
+    padding: @SmallSpace 6px;
+    cursor: pointer;
+}
+
+.entity-Edit-Cancel:hover {
+    background-color: @BaseLow;
+}
+
+.entity-Edit-Cancel:active {
+    background-color: @AccentMediumLow;
+}
+
+.addProperty {
+    color: #000;
+    margin-top: 5px;
+}
+
+.invalid-field {
+    border: 1px solid red;
+}
+
+.entity-editor-expanded {
+    color: #000;
+    width: 95%;
+    height: 125px;
+    padding-left: 8px;
+    resize: vertical;
+}

less/TableStyles/fulldatatables.less

@@ -0,0 +1,653 @@
+@import "../Common/Constants";
+/*
+ * Table styles
+ */
+
+table.storage {
+    width: 100%;
+    margin: 6px 0px 0px 0px;
+    clear: both;
+    border-collapse: separate;
+    border-spacing: 0;
+    background-color: @BaseLight;
+    /*[{datatable-base-background-color}]*/
+    outline-width: 0;
+    /*Keyboard navigation - ensure table has no border when focused. */
+    /* no select */
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+table.dataTable.azure-table tbody tr {
+    color: #000000;
+    /*[{datatable-name-cell-text}]*/
+}
+
+table.dataTable.azure-table tbody tr td {
+    height: 16px;
+}
+
+table.can-select {
+    /* no select */
+    -webkit-touch-callout: auto;
+    -webkit-user-select: auto;
+    -khtml-user-select: auto;
+    -moz-user-select: auto;
+    -ms-user-select: auto;
+    user-select: auto;
+}
+
+table.can-select.dataTable tbody tr {
+    color: #000000;
+    /*[{datatable-name-cell-text}]*/
+    background-color: transparent;
+    /*[{datatable-base-background}]*/
+}
+
+table.can-select.dataTable tbody tr.selected {
+    color: #000000 !important;
+    /*[{datatable-row-selected-text} !important]*/
+    background-color: #C9DEF5;
+    /*[{datatable-row-selected-background}]*/
+    border: 1px solid #b3d1f1;
+    /*[1px solid {datatable-row-selected-border}]*/
+}
+
+table.can-select.dataTable tbody tr.selected td:first-child {
+    color: #000000 !important;
+    /*[{datatable-name-cell-selected-text} !important]*/
+}
+
+table.can-select.dataTable.hover tbody tr:hover,
+table.dataTable.storage tbody tr:hover {
+    background-color: #C9DEF5;
+    /*[{datatable-row-hover-background}]*/
+}
+
+table.dataTable.storage tbody tr:hover td:empty {
+    background-color: #C9DEF5;
+    /*[{datatable-row-hover-empty-background}]*/
+}
+
+table.can-select.dataTable.hover tbody tr:hover.selected,
+table.can-select.dataTable.storage tbody tr:hover.selected {
+    background-color: #C9DEF5;
+    /*[{datatable-row-selected-background}]*/
+}
+
+table.can-select.dataTable:not(:focus) tbody tr.selected {
+    color: #1E1E1E;
+    /*[{datatable-row-selected-text}]*/
+    background-color: #767676;
+    /*[{datatable-row-selected-background}]*/
+}
+
+table.can-select.dataTable.hover:not(:focus) tbody tr:hover.selected,
+table.can-select.dataTable.storage:not(:focus) tbody tr:hover.selected {
+    background-color: #767676;
+    /*[{datatable-row-selected-background}]*/
+}
+
+table.storage thead th,
+table.storage tfoot th {
+    font-weight: normal;
+    color: #DDDDDD;
+    /*[{datatable-header-text}]*/
+    white-space: nowrap;
+}
+
+table.storage thead th,
+table.storage thead td {
+    padding: 0.5em 1em;
+    border: 1px solid #DDDDDD;
+    /*[1px solid {datatable-header-border}]*/
+    background-color: @BaseLight;
+    /*[{datatable-header-background}]*/
+    text-align: left;
+    color: #808080;
+    /*[{datatable-header-text}]*/
+    outline: none;
+}
+
+table.dataTable thead th:active,
+table.dataTable thead td:active {
+    border: 1px solid #DDDDDD;
+    /*[1px solid {datatable-header-cell-active-border}]*/
+    outline: none;
+    background-color: #B4C7DC !important;
+    /*[{datatable-header-cell-active-background} !important] */
+}
+
+table.dataTable thead th:focus,
+table.dataTable thead td:focus {
+    border-width: 1px;
+    border-style: solid;
+    border-color: #007ACC;
+    /*[{datatable-header-cell-focus-background}]*/
+}
+
+table.dataTable thead th:hover,
+table.dataTable thead td:hover {
+    border: 1px solid #007ACC;
+    /*[1px solid {datatable-header-cell-hover-border}]*/
+    background-color: #C9DEF5;
+    /*[{datatable-header-cell-hover-background}]*/
+    color: #000000;
+    /*[{datatable-header-cell-hover-text}]*/
+}
+
+table.storage thead th:not(:focus):not(:hover),
+table.storage thead td:not(:focus):not(:hover) {
+    border-left-color: transparent;
+}
+
+table.storage thead th:last-child:not(:focus):not(:hover),
+table.storage thead td:last-child:not(:focus):not(:hover) {
+    border-right-color: transparent;
+}
+
+table.dataTable tfoot th,
+table.dataTable tfoot td {
+    padding: 5px 18px 5px 18px;
+    border-top: 1px solid #DDDDDD;
+    /*[1px solid {datatable-header-border}]*/
+    background-color: @BaseLight;
+    /*[{datatable-header-background}]*/
+}
+
+table.dataTable thead .sorting,
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc {
+    cursor: pointer;
+    *cursor: hand;
+}
+
+table.dataTable thead .sorting,
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc,
+table.dataTable thead .sorting_asc_disabled,
+table.dataTable thead .sorting_desc_disabled {
+    background-repeat: no-repeat;
+    background-position: center right;
+}
+
+table.dataTable thead .sorting_asc {
+    background-image: url("../../images/QueryBuilder/CollapseChevronUp_16x.png");
+}
+
+table.dataTable thead .sorting_desc {
+    background-image: url("../../images/QueryBuilder/CollapseChevronDown_16x.png");
+}
+
+table.dataTable tbody tr {
+    color: #808080;
+    /*[{datatable-base-text}]*/
+    background-color: @BaseLight;
+    /*[{datatable-base-background}]*/
+}
+
+table.dataTable tbody tr.selected {
+    color: @BaseLight !important;
+    /*[{datatable-row-selected-text} !important]*/
+    background-color: @SelectionColor;
+    /*[{datatable-row-selected-background]*/
+}
+
+table.dataTable tbody tr.selected td:first-child,
+table.dataTable tbody tr.selected td:nth-child(2) {
+    color: @BaseLight !important;
+    /*[{datatable-row-selected-text} !important]*/
+}
+
+table.dataTable tbody tr td:first-child img {
+    vertical-align: middle;
+}
+
+
+table.dataTable tbody tr td:first-child {
+    border-left-width: 1px;
+}
+
+table.dataTable tbody th,
+table.dataTable tbody td {
+    padding: 0.25em 0.5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 60em;
+    white-space: nowrap;
+}
+
+table.show-gridlines tbody th,
+table.show-gridlines tbody td {
+    border-width: 1px 1px 1px 0px;
+    border-style: solid;
+    border-color: #DDDDDD;
+    /*[{datatable-base-border}]*/
+}
+
+table.show-gridlines tbody td:empty {
+    background-color: #E3E2E6;
+    /*[{datatable-base-border}]*/
+}
+
+table.show-gridlines tbody tr.selected td:empty {
+    background-color: #767676;
+    /*[{datatable-row-selected-empty-background}]*/
+}
+
+table.dataTable.row-border tbody th,
+table.dataTable.row-border tbody td,
+table.dataTable.storage tbody th,
+table.dataTable.storage tbody td {
+    border-top: 1px solid @BaseLight;
+    /*[{datatable-base-border}]*/
+}
+
+table.dataTable.row-border tbody tr:first-child th,
+table.dataTable.row-border tbody tr:first-child td,
+table.dataTable.storage tbody tr:first-child th,
+table.dataTable.storage tbody tr:first-child td {
+    border-top: none;
+}
+
+table.dataTable.cell-border tbody th,
+table.dataTable.cell-border tbody td {
+    border-top: 1px solid @BaseLight;
+    /*[1px solid {datatable-base-border}]*/
+    border-right: 1px solid @BaseLight;
+    /*[1px solid {datatable-base-border}]*/
+}
+
+table.dataTable.cell-border tbody tr th:first-child,
+table.dataTable.cell-border tbody tr td:first-child {
+    border-left: 1px solid @BaseLight;
+    /*[1px solid {datatable-base-border}]*/
+}
+
+table.dataTable.cell-border tbody tr:first-child th,
+table.dataTable.cell-border tbody tr:first-child td {
+    border-top: none;
+}
+
+table.dataTable.hover tbody tr:hover,
+table.dataTable.storage tbody tr:hover {
+    color: #000000;
+    /*[{datatable-row-hover-text}]*/
+    background-color: #FCFCFC;
+    /*[{datatable-row-hover-background}]*/
+}
+
+table.dataTable.hover tbody tr:hover.selected,
+table.dataTable.storage tbody tr:hover.selected {
+    background-color: #3399ff;
+    /*[{datatable-row-selected-background}]*/
+}
+
+table.dataTable.hover:not(:focus) tbody tr:hover.selected,
+table.dataTable.storage:not(:focus) tbody tr:hover.selected {
+    background-color: #767676;
+    /*[{datatable-row-selected-background}]*/
+}
+
+table.dataTable.no-footer {
+    border-bottom: 1px solid #555;
+    /*[1px solid {datatable-base-border}]*/
+}
+
+table.dataTable.nowrap th,
+table.dataTable.nowrap td {
+    white-space: nowrap;
+}
+
+table.dataTable.compact thead th,
+table.dataTable.compact thead td {
+    padding: 4px 17px 4px 4px;
+}
+
+table.dataTable.compact tfoot th,
+table.dataTable.compact tfoot td {
+    padding: 4px;
+}
+
+table.dataTable.compact tbody th,
+table.dataTable.compact tbody td {
+    padding: 4px;
+}
+
+table.dataTable th.dt-left,
+table.dataTable td.dt-left {
+    text-align: left;
+}
+
+table.dataTable th.dt-center,
+table.dataTable td.dt-center,
+table.dataTable td.dataTables_empty {
+    text-align: center;
+}
+
+table.dataTable th.dt-right,
+table.dataTable td.dt-right {
+    text-align: right;
+}
+
+table.dataTable th.dt-justify,
+table.dataTable td.dt-justify {
+    text-align: justify;
+}
+
+table.dataTable th.dt-nowrap,
+table.dataTable td.dt-nowrap {
+    white-space: nowrap;
+}
+
+table.dataTable thead th.dt-head-left,
+table.dataTable thead td.dt-head-left,
+table.dataTable tfoot th.dt-head-left,
+table.dataTable tfoot td.dt-head-left {
+    text-align: left;
+}
+
+table.dataTable thead th.dt-head-center,
+table.dataTable thead td.dt-head-center,
+table.dataTable tfoot th.dt-head-center,
+table.dataTable tfoot td.dt-head-center {
+    text-align: center;
+}
+
+table.dataTable thead th.dt-head-right,
+table.dataTable thead td.dt-head-right,
+table.dataTable tfoot th.dt-head-right,
+table.dataTable tfoot td.dt-head-right {
+    text-align: right;
+}
+
+table.dataTable thead th.dt-head-justify,
+table.dataTable thead td.dt-head-justify,
+table.dataTable tfoot th.dt-head-justify,
+table.dataTable tfoot td.dt-head-justify {
+    text-align: justify;
+}
+
+table.dataTable thead th.dt-head-nowrap,
+table.dataTable thead td.dt-head-nowrap,
+table.dataTable tfoot th.dt-head-nowrap,
+table.dataTable tfoot td.dt-head-nowrap {
+    white-space: nowrap;
+}
+
+table.dataTable tbody th.dt-body-left,
+table.dataTable tbody td.dt-body-left {
+    text-align: left;
+}
+
+table.dataTable tbody th.dt-body-center,
+table.dataTable tbody td.dt-body-center {
+    text-align: center;
+}
+
+table.dataTable tbody th.dt-body-right,
+table.dataTable tbody td.dt-body-right {
+    text-align: right;
+}
+
+table.dataTable tbody th.dt-body-justify,
+table.dataTable tbody td.dt-body-justify {
+    text-align: justify;
+}
+
+table.dataTable tbody th.dt-body-nowrap,
+table.dataTable tbody td.dt-body-nowrap {
+    white-space: nowrap;
+}
+
+table.dataTable,
+table.dataTable th,
+table.dataTable td {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+.dataTables_scrollBody .storage {
+    margin: 0px;
+}
+
+
+/*
+ * Control feature layout
+ */
+
+.dataTables_wrapper {
+    position: relative;
+    clear: both;
+    *zoom: 1;
+    zoom: 1;
+    padding: 0px 10px 0px 10px;
+    .flex-display();
+    .flex-direction();
+    overflow:hidden;
+}
+
+.dataTables_wrapper .dataTables_length {
+    float: left;
+    margin: 10px;
+}
+
+.dataTables_wrapper .dataTables_filter {
+    float: right;
+    text-align: right;
+    margin: 10px;
+}
+
+.dataTables_wrapper .dataTables_filter input {
+    background-color: #333337;
+    /*[{plugin-textbox-background-color}]*/
+    border: 1px solid #3F3F46;
+    /*[1px solid {plugin-textbox-border-color}]*/
+    margin-left: 0.5em;
+    outline: none;
+}
+
+.dataTables_wrapper .dataTables_filter input:active,
+.dataTables_wrapper .dataTables_filter input:focus,
+.dataTables_wrapper .dataTables_filter input:hover {
+    border: 1px solid #007ACC;
+    /*[1px solid {search-control-mouse-over-border}]*/
+}
+
+.dataTables_wrapper .dataTables_length select {
+    outline: none;
+}
+
+.dataTables_wrapper .dataTables_length select:active,
+.dataTables_wrapper .dataTables_length select:focus,
+.dataTables_wrapper .dataTables_length select:hover {
+    outline: 1px solid #007ACC;
+    /*[1px solid {search-control-mouse-over-border}]*/
+}
+
+.dataTables_wrapper .dataTables_info {
+    clear: both;
+    float: left;
+    padding-top: 0.755em;
+    padding-left: 10px;
+}
+
+.dataTables_wrapper .dataTables_paginate {
+    float: right;
+    text-align: right;
+    padding-top: 0.45em;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button {
+    box-sizing: border-box;
+    display: inline-block;
+    min-width: 1.5em;
+    padding: 0.5em 1em;
+    margin-left: 2px;
+    text-align: center;
+    text-decoration: none !important;
+    cursor: pointer;
+    *cursor: hand;
+    color: @SelectionColor !important;
+    /*[{environment-panel-hyperlink} !important]*/
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button.current,
+.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
+    color: black !important;
+    /*[{environment-panel-hyperlink-disabled} !important]*/
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
+    cursor: default;
+    color: white !important;
+    /*[{environment-panel-hyperlink-disabled} !important]*/
+    border: 1px solid transparent;
+    background: transparent;
+    box-shadow: none;
+}
+
+.paginate_button.disabled {
+    visibility: hidden;
+}
+
+.dataTables_wrapper .dataTables_paginate .ellipsis {
+    padding: 0 1em;
+}
+
+.dataTables_wrapper .dataTables_processing {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    margin-top: -25px;
+    padding-top: 20px;
+    background-color: transparent;
+    z-index: 10000;
+}
+
+.dataTables_wrapper .dataTables_length,
+.dataTables_wrapper .dataTables_filter,
+.dataTables_wrapper .dataTables_info,
+.dataTables_wrapper .dataTables_processing,
+.dataTables_wrapper .dataTables_paginate {
+    color: #000000;
+    /*[{common-controls-inner-tab-inactive-text}]*/
+}
+
+.dataTables_wrapper .dataTables_scroll {
+    clear: both;
+    width:100%;
+    overflow: hidden;
+    .flex-display();
+    .flex-direction();
+   
+}
+
+.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
+    *margin-top: -1px;
+    -webkit-overflow-scrolling: touch;
+}
+
+.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th>div.dataTables_sizing,
+.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td>div.dataTables_sizing {
+    height: 0;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.dataTables_wrapper.no-footer .dataTables_scrollHead {
+    height: 50px;
+}
+
+.dataTables_wrapper.no-footer .dataTables_scrollBody {
+    border-bottom: none;
+}
+
+.dataTables_wrapper.no-footer div.dataTables_scrollHead table,
+.dataTables_wrapper.no-footer div.dataTables_scrollBody table {
+    border-bottom: none;
+}
+
+.dataTables_wrapper:after {
+    visibility: hidden;
+    display: block;
+    content: "";
+    clear: both;
+    height: 0;
+}
+
+.dataTables_wrapper a {
+    color: whitesmoke;
+    /*[{common-controls-inner-tab-inactive-background}]*/
+}
+
+tr td.nameColumnText {
+    color: #000000;
+    /*[{plugin-textbox-color}]*/
+}
+
+tr td.nameColumnText.selected,
+tr:hover td.nameColumnText {
+    color: @BaseLight !important;
+    /*[{plugin-treeview-content-selected-color} !important]*/
+}
+
+.textRight {
+    text-align: right;
+}
+
+.dataTables_filter {
+    display: none;
+}
+
+
+/*@media screen and (max-width: 767px) {
+    .dataTables_wrapper .dataTables_info,
+    .dataTables_wrapper .dataTables_paginate {
+        float: none;
+        text-align: center;
+    }
+    .dataTables_wrapper .dataTables_paginate {
+        margin-top: 0.5em;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .dataTables_wrapper .dataTables_length,
+    .dataTables_wrapper .dataTables_filter {
+        float: none;
+        text-align: center;
+    }
+    .dataTables_wrapper .dataTables_filter {
+        margin-top: 0.5em;
+    }
+}*/
+
+.context-menu-item.icon-reset-column-order {
+    background-image: url(../../images/Reset-column-options.svg);
+}
+
+.context-menu-item.icon-shift-non-empty-columns-left {
+    background-image: url(../../images/Reorder.svg);
+}
+
+.context-menu-item.icon-edit-entity {
+    background-image: url(../../images/Edit_entity.svg);
+}
+
+.context-menu-item.icon-delete-entity {
+    background-image: url(../../images/delete.svg);
+}
+
+.context-menu-item.icon-customize-columns {
+    background-image: url(../../images/Options.svg);
+}

less/TableStyles/queryBuilder.less

@@ -0,0 +1,527 @@
+@import "../Common/Constants";
+/*Table Query stylings*/
+@import "../Common/Constants";
+
+.query-panel {
+    display: table;
+    display: none;
+    width: 100%;
+    border-top: 1px solid #DDDDDD;
+    /*[{environment-commandbar-toolbar-separator}]*/
+    background-color: #ffffff;
+    /*[{plugin-background-color}]*/
+    padding: 2px 0px 0px 2px;
+    resize: vertical;
+}
+
+.query-panel .row {
+    display: table-row;
+}
+
+.query-panel .row .cell {
+    display: table-cell;
+}
+
+.query-panel.transition-in {
+    display: table;
+    top: 0px;
+    -webkit-transition: top 2s linear;
+    -ms-transition: top 2s linear;
+    -moz-transition: top 2s linear;
+    -khtml-transition: top 2s linear;
+    -o-transition: top 2s linear;
+    transition: top 2s linear;
+}
+
+.query-builder {
+    width:100%;
+    padding-right: @DefaultSpace;
+    border-bottom: 1px solid @BaseMedium;
+    margin-bottom: @DefaultSpace;
+}
+
+.query-builder-toolbar {
+    background-color: #ffffff;
+    /*[{plugin-background-color}]*/
+    min-width: 600px;
+    height: 30px;
+    border-bottom: 1px solid #DDDDDD;
+    /*[1px solid {environment-commandbar-toolbar-separator}]*/
+}
+
+.query-builder-toolbar .query-toolbar-group {
+    display: inline-block;
+    height: 24px;
+    margin: 2px 0px;
+    vertical-align: middle;
+}
+
+.query-builder-toolbar .query-toolbar-group .query-toolbar-button {
+    min-width: 0px;
+    padding: 0px;
+    margin-left: 2px;
+    background-color: transparent;
+    border: solid transparent;
+}
+
+.query-builder-toolbar .query-toolbar-group .query-toolbar-button:active {
+    outline: 2px solid dodgerblue;
+    /*[2px solid {common-common-controls-button-border-hover}]*/
+}
+
+.query-builder-toolbar .query-toolbar-group .query-toolbar-button:hover {
+    background-color: #CCCEDB;
+    /*[{common-controls-button-hover-background}]*/
+}
+
+.query-builder-toolbar .query-toolbar-group .query-toolbar-button.active {
+    background-color: #E6E7ED;
+    /*[{common-controls-inner-tab-active-background}]*/
+    outline: none
+}
+
+.query-builder-toolbar .query-toolbar-group .query-toolbar-button:disabled,
+.query-builder-toolbar .query-toolbar-group .query-toolbar-button.disabled {
+    background-color: #ffffff;
+    /*[{common-controls-button-disabled-background}]*/
+    background: transparent;
+    border: 1px solid transparent;
+    outline: none;
+    opacity: 0.4;
+}
+
+.tableContainer {
+    overflow: hidden;
+    .flex-display();
+    .flex-direction();
+}
+
+.tablesQueryTab{
+    padding-left: @MediumSpace;
+    width: 100%;
+    margin-bottom:@LargeSpace;
+}
+
+.entity-error-Img {
+    width: @WarningErrorIconSize;
+    height: @WarningErrorIconSize;
+    margin: @DefaultSpace 0px 0px @SmallSpace;
+}
+
+.query-editor-panel {
+    margin-right: 16px;
+    margin-left: 16px;
+    margin-top: 25px;
+    position: relative;
+    vertical-align: middle;
+    cursor: default;
+}
+
+.query-editor-text {
+    width: 100%;
+    margin: 2px;
+    border: solid 1px #A9ACB3;
+    /*[{plugin-textbox-disabled-color}]*/
+    resize: none;
+    margin-top: -39px;
+    background-color: #ddd;
+    padding: 5px;
+}
+
+.error-bar {
+    padding: @LargeSpace 34px @MediumSpace 24px;
+}
+
+.error-message {
+    background-color: @BaseLow;
+    padding: @DefaultSpace;
+    display: inline-flex;
+}
+
+.error-text {
+    padding-left: @MediumSpace;
+}
+
+.query-editor-text-invalid {
+    width: 100%;
+    margin: 2px;
+    border: 1px solid #e51400;
+    resize: none;
+    margin-top: -30px;
+}
+
+.query-editor-panel .warning-bar {
+    width: 100%;
+    height: 20px;
+    background-color: #ffffff;
+    /*[{plugin-background-color}]*/
+    position: absolute;
+    top: -24px;
+}
+
+.query-editor-panel .warning-bar .warning-message {
+    display: inline-flex;
+    padding-top: 2px;
+    vertical-align: middle;
+}
+
+.query-editor-panel .warning-bar .warning-message .warning-text {
+    margin-left: 2px;
+}
+
+.advanced-options-panel{
+    margin-bottom: @DefaultSpace;
+}
+
+.advanced-options-panel .advanced-heading .advanced-title {
+    display: inline-flex;
+    margin-left: 27px;
+    margin-top: 10px;
+    cursor: default;
+}
+
+.advanced-options-panel .advanced-options {
+    margin-left: 32px;
+    margin-top: 5px;
+    border: 1px solid transparent;
+}
+
+hr {
+    margin-top: 10px;
+    margin-bottom: 12px;
+    border: 0;
+    border-top: 1px solid #ccc;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
+
+.advanced-options-panel .advanced-options .top .top-input {
+    width: 100px;
+    word-spacing: normal;
+    color: #1E1E1E;
+    /*[{common-controls-button-foreground}]*/
+    border: 1px solid #CCCEDB;
+    /*[1px solid {plugin-textbox-border-color}]*/
+    height: 20px;
+    margin-left: 8px;
+}
+
+.advanced-options-panel .advanced-options .top .invalid-top {
+    color: red;
+}
+
+.advanced-options-panel .advanced-options .select {
+    margin-top: 18px;
+    display: inline-flex;
+}
+
+.advanced-options-icon {
+    margin-left: 2px;
+    vertical-align: sub;
+}
+
+.advanced-options-panel .advanced-options .select .select-options-text {
+    margin-left: 4px;
+}
+
+.advanced-options-panel .advanced-options .select .select-options-link {
+    margin-left: 4px;
+    cursor: pointer;
+    outline: none;
+}
+
+.query-panel .row .column-headers .Field {
+    padding-left: 95px;
+    padding-right: 0px;
+    padding-bottom: 6px;
+}
+
+.clause-table {
+    border-spacing: 0px;
+    display: table;
+    width: 100%;
+    margin-top: -3px;
+}
+
+.clause-table-row {
+    display: row;
+    margin-bottom: 10px;
+}
+
+.clause-table-cell {
+    display: table-cell;
+    text-align: left;
+    vertical-align: middle;
+}
+
+.action-column>button,
+.group-control-header>button,
+.group-indicator-column>button {
+    min-width: 20px;
+    width: 20px;
+    padding: 0px;
+    background-color: transparent;
+    border-color: transparent;
+    cursor: pointer;
+}
+
+.group-control-header>button:disabled {
+    min-width: 20px;
+    width: 20px;
+    padding: 0px;
+    background-color: transparent;
+    border-color: transparent;
+    outline: none;
+    opacity: 0.4;
+    cursor: default;
+}
+
+.clause-table-field {
+    width: 100%;
+    border: 1px solid #bbbbbb;
+}
+
+.clause-table-cell button {
+    height: 20px;
+}
+
+.clause-table-cell input[type="checkbox"] {
+    padding: 0px;
+    margin-bottom: 12px;
+}
+
+.and-or-svg {
+    margin-top: -8px;
+    margin-right: -5px;
+}
+
+.scroll-box {
+    border-bottom: 1px transparent #DDD;
+    /*[1px solid {plugin-table-border-color}]*/
+    border-top: 1px transparent #DDD;
+    /*[1px solid {plugin-table-border-color}]*/
+    max-height: 20vh;
+    width: 100%;
+}
+
+.scrollable {
+    overflow: auto;
+    overflow-x: hidden;
+}
+
+.and-or-column,
+.and-or-header {
+    min-width: 65px;
+    padding-right: 10px;
+    padding-left: 5px;
+}
+
+.operator-column,
+.operator-header {
+    min-width: 65px;
+    padding-right: 10px;
+}
+
+.field-header,
+.field-column {
+    min-width: 125px;
+    padding-right: 10px;
+}
+
+.type-header,
+.type-column {
+    min-width: 85px;
+}
+
+.and-or-column,
+.and-or-header,
+.operator-column,
+.operator-header,
+.field-header,
+.field-column,
+.type-header,
+.type-column,
+.action-header {
+    padding-right: 10px;
+    margin-bottom: 8px;
+}
+
+.value-header,
+.value-column,
+.time-column {
+    min-width: 230px;
+    padding: 0px 4px 0px 0px;
+    width: 100%;
+    margin-bottom: 8px;
+}
+
+.group-control-header,
+.group-control-column {
+    min-width: 25px;
+    text-align: right;
+}
+
+.group-indicator-table {
+    border-spacing: 0px;
+    min-height: 24px
+}
+
+.group-indicator-column {
+    min-width: 21px;
+    padding: 0px;
+    border-style: none;
+    height: 29px;
+}
+
+.clause-table-cell.action-column, 
+.clause-table-cell.action-header {
+    min-width: 60px;
+    padding-left: @SmallSpace;
+}
+
+.action-header,
+.field-header,
+.type-header,
+.operator-header,
+.value-header,
+.and-or-header {
+    padding-right: 4px;
+    padding-bottom: 5px;
+}
+
+.header-background {
+    background-color: #ffffff;
+}
+
+
+/*.type-header {
+    padding-right: 4px;
+}
+
+.operator-header {
+    padding-right: 4px;
+}
+
+.value-header {
+    padding-right: 4px;
+}*/
+
+.clause-table-field[readonly] {
+    background-color: #EEEEF2;
+    /*[{plugin-table-header-background-color}]*/
+    border: 1px solid #CCCEDB;
+    /*[{plugin-table-border-color}]*/
+}
+
+.addClause-title {
+    /*[{common-common-controls-button-border-hover}]*/
+    cursor: pointer;
+    margin-left: -5px;
+}
+
+.addClause {
+    width: 125px;
+    padding: 8px 0px 5px 5px;
+    border: 1px solid #fff;
+    margin-left: 5px;
+}
+
+.addClause:hover {
+    .hover();
+}
+
+.addClause:active {
+    .active();
+    border: 1px dashed @AccentMedium;
+}
+
+.clause-table-row {
+    min-width: 550px;
+    width: 100%;
+}
+
+.clause-table-field field-column {
+    min-width: 75px;
+    height: 30px;
+    width: 100%;
+}
+
+.clause-table-field field-input {
+    min-width: 54px;
+    margin-left: -78px;
+    height: 25px;
+    border: none;
+}
+
+.query-panel .row .spacing {
+    padding-bottom: 6px;
+}
+
+.query-panel .divider.horizontal {
+    height: 10px;
+    width: 100%
+}
+
+.inline-div {
+    display: inline
+}
+
+.querybuilder-addpropertyImg,
+.querybuilder-cancelImg {
+    width: 14px;
+    height: 14px;
+    margin-left: 3px;
+    margin-bottom: 8px;
+}
+
+.addclauseProperty-Img {
+    width: 14px;
+    height: 14px;
+    margin-bottom: 5px;
+    margin-left: 12px;
+}
+
+.entity-Add-Cancel {
+    padding: @DefaultSpace @SmallSpace @SmallSpace;
+    cursor: pointer;
+}
+
+.entity-Add-Cancel:hover {
+    .hover();
+}
+
+.entity-Add-Cancel:active {
+    .active();
+}
+
+.query-builder-isDisabled {
+    border: 1px solid #CCCEDB;
+    color: #ccc;
+}
+
+.edit-value-text {
+    padding-left: @DefaultSpace;
+}
+
+.expand-triangle {
+    width: 10px;
+    height: 10px;
+}
+
+.expand-triangle-right {
+    margin-bottom: 5px;
+}
+
+
+/*
+@media only screen and (max-width: 1200px) {
+    .clause-table {
+        border-spacing: 0px;
+        display: table;
+        width: 100%;
+        padding-top: 10px;
+    }
+}*/

less/forms.less

@@ -0,0 +1,203 @@
+@import "./Common/Constants";
+
+.dirty {
+    border: 1px solid #9b4f96;
+}
+
+.dirty:focus {
+    outline: 1px solid #9b4f96;
+}
+
+.tabForm {
+    padding: 12px 20px 20px 20px;
+    margin-left: 3px;
+}
+
+.storedTabForm {
+    padding-top: @LargeSpace;
+}
+
+.scaleSettingScrollable {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height:100%;
+}
+
+.disableFocusDefaults[tabindex] {
+    &:focus {
+        outline: none;
+    }
+
+    &:active {
+        outline: none;
+    }
+}
+
+.indexingPolicyEditor {
+    width: 100%;
+    height: calc(~"100vh - 400px");
+}
+
+.scaleDivison {
+    padding: @MediumSpace 0px @DefaultSpace 0px;
+}
+
+.scaleSettingTitle {
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.autoScaleThroughputTitle {
+    margin-bottom: @SmallSpace;
+}
+
+.autoScaleDescription {
+    margin-top: 6px;
+    margin-bottom: @SmallSpace;
+}
+
+.ssExpandCollapseIcon {
+    width: 10px;
+    height: 10px;
+}
+
+.ssCollapseIcon {
+    margin-bottom: 5px;
+}
+
+.ssTextAllignment {
+    padding-left: 19px;
+}
+
+.throughputStorageBlock {
+    border-top: 1px solid #bbb;
+    border-bottom: 1px solid #bbb;
+    background-color: #ccc;
+    padding-left: 10px;
+    width: 315px;
+}
+
+.storageCapacityTitle {
+    padding: @LargeSpace 0px;
+
+}
+.throughputStorageValue {
+    font-size: 12px;
+}
+
+.estimatedCost, .largePartitionKeyEnabled {
+    padding: @SmallSpace 0px @LargeSpace;
+}
+
+.storagePadding {
+    padding-top: 6px;
+    padding-bottom: 14px;
+}
+
+.dirtyTextbox {
+    width: 176px;
+    margin-top: 7px;
+    padding-left: 5px;
+}
+
+.formTitleFirst {
+    padding: @DefaultSpace (2 * @MediumSpace);
+}
+
+.formTitleTextbox {
+    padding: 0px 0px @DefaultSpace (2 * @MediumSpace);
+}
+
+.formTree {
+    border: 1px solid #969696;
+    color: #393939;
+    padding: 0px 12px 1px 8px;
+}
+
+.formTree:hover {
+    border: 1px solid #969696;
+    background-color: #e6f8fe;
+}
+
+.formTree:active {
+    border: 1px solid #1ebbee;
+}
+
+.scaleForm {
+    padding-left: 8px;
+    color: @BaseDark;
+    border: 1px solid #969696;
+    min-width: @ScaleFormWidth;
+
+    &:hover {
+        background-color: #e6f8fe;
+    }    
+}
+
+.formTitle {
+    margin-top: 16px;
+    margin-bottom: 4px; 
+}
+
+
+.spUdfTriggerHeader {
+    padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace); 
+}
+
+.storedUdfTriggerEditor {
+    width: 100%;
+    height: 100%;
+}
+
+.unselectedRadio {
+    background-color: white;
+    border-color: #EEE!important;
+    color: black!important;
+}
+
+.disabledRadio {
+    background-color: #A19F9D;
+    border-color: #EEE!important;
+    color: white!important;
+}
+
+.selectedRadio {
+    background-color: @AccentMediumHigh;
+    border-color: #EEE!important;
+    color: white!important;
+    cursor: pointer;
+}
+
+.selectedRadio:hover {
+    background-color: @AccentMediumHigh;
+    border-color: #EEE!important;
+    color: white!important;
+    cursor: pointer;
+}
+
+.selectedRadio:active {
+    background-color: #0072c6;
+    border-color: #EEE!important;
+    color: white!important;
+    cursor: pointer;
+    border: 1px solid #0072c6;
+}
+
+.selectedRadio.dirty {
+    background-color: #9b4f96;
+}
+
+.tabs {
+    margin: 0;
+}
+
+.formReadOnly {
+    background-color: #ddd;
+    border: 1px solid #969696;
+    min-width: 184px;
+    padding-left: 8px;
+}
+
+.migration:disabled {
+    background-color: #ccc;
+}

less/forms_ase.less

@@ -0,0 +1,17 @@
+@import "./Common/Constants";
+@import "./forms";
+
+.formTree {
+    border: 1px solid inherit;
+    color: inherit;
+    padding: 0px 12px 1px 8px;
+}
+
+.formTree:hover {
+    border: 1px solid inherit;
+    background-color: inherit;
+}
+
+.formTree:active {
+    border: 1px solid inherit;
+}

less/hostedexplorer.less

@@ -0,0 +1,718 @@
+@import "./Common/Constants";
+
+@HeaderHeight: 40px;
+@LeftPaneWidth: 48px;
+
+@LeftPaneIconSize: 24px;
+
+@TitleButtonsSize: 16px;
+
+@CosmosDBTitleFontSize: 14px;
+
+@NavSmallSpace: 5px;
+@NavMediumSpace: 10px;
+@NavLargeSpace: 15px;
+
+html {
+    font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+    padding: 0px;
+    margin: 0px;
+    border: 0px;
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+    padding: 0px;
+    margin: 0px;
+    border: 0px;
+    overflow: hidden;
+
+    header {
+        font-size: @CosmosDBTitleFontSize;
+        background-color: @BaseDark;
+        height: @HeaderHeight;
+        width: 100%;
+        white-space: nowrap;
+
+        .items {
+            .flex-display();
+            align-items: stretch;
+            height: 100%;
+
+            .cosmosDBTitle {
+                .flex-display();
+                
+                line-height: @HeaderHeight;
+
+                img {
+                    width: 24px;
+                    height: 24px;
+                    margin-top: 2px;
+                }
+
+                .title {
+                    font-family: @SemiboldFont;
+                    font-size: 15px;
+                    color: @BaseLight;
+                    padding: 0 @NavLargeSpace;
+
+                    &:hover {
+                        background-color: @BaseHigh;
+                        cursor: pointer;
+                    }
+                }
+
+                .accontSplitter {
+                    border-right: 1px solid @BaseLight;
+                    height: calc(@HeaderHeight / 2);
+                    margin: auto 0;
+                }
+
+                .serviceTitle {
+                    color: @BaseLight;
+                    font-size: 14px;
+                    margin: 0 @NavMediumSpace 0 @NavLargeSpace;
+                }
+
+                .chevronRight {
+                    width: 6px;
+                    height: 10px;
+                    margin: auto 0;
+                }
+
+                .accountSwitchComponentContainer {
+                    
+                    .accountNameHeader {
+                        font-size: 14px;
+                        color: @BaseLight;
+                        margin-left: @NavLargeSpace;
+                    }
+                }                
+            }
+
+            .feedbackConnectSettingIcons {
+                margin: 0px 0px 0px auto;
+                display: flex;
+
+                .commandButtonReact {
+                    cursor: pointer;
+                    padding: @MediumSpace @LargeSpace;
+
+                    &:hover {
+                        background-color: @BaseHigh;
+                    }
+
+                    img {
+                        width: @TitleButtonsSize;
+                        height: @TitleButtonsSize;
+                    }
+                }
+            }
+        }
+    }
+
+    .accountSwitchContextualMenu {
+        margin: @LargeSpace;
+        width: 280;
+
+        .ms-ContextualMenu-item {
+            margin-bottom: @LargeSpace;
+        }
+    }
+
+    .fixedleftpane {
+        background: @BaseLow;
+        height: 100vh;
+        width: @LeftPaneWidth;
+        float: left;
+
+        .fixedLeftPaneIcons {
+            padding: @MediumSpace @DefaultSpace;
+            text-align: center;
+            cursor: pointer;
+
+            &:hover {
+                background-color: @BaseMediumLow;
+            }
+
+            &:active {
+                background-color: @BaseMediumLow;
+            }
+
+            img {
+                width: @LeftPaneIconSize;
+                height: @LeftPaneIconSize;
+            }
+        }
+
+        .topSelected {
+            background: @BaseMediumLow;
+
+            &:hover {
+                color: @BaseDark;
+                background: @BaseMediumLow;
+                cursor: default;
+            }
+        }
+
+        .feedbackstyle,
+        .settingstyle {
+            text-align: center;
+            display: inline-block;
+            width: @LeftPaneIconSize;
+            height: @LeftPaneIconSize;
+            margin: 0 auto;
+            box-sizing: border-box;
+
+            &:hover {
+                color: @BaseDark;
+                background: @BaseMediumLow;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .contextual-pane-out {
+        width: 100%;
+        height: 100vh;
+        z-index: 1;
+        position: absolute;
+        top: 0px;
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .contextual-pane {
+        top: 0px;
+        right: 0 !important;
+        left: auto;
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        right: auto;
+        z-index: 1000 !important;
+        -webkit-align-self: auto !important;
+        -ms-flex-item-align: auto !important;
+        align-self: auto !important;
+        height: 100%;
+        position: absolute;
+        width: 440px;
+        margin: 0;
+        margin-top: @HeaderHeight;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+        outline: none;
+        background-color: #fff;
+        -webkit-animation: mymove 0.2s;
+        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.75, 0.72);
+        animation: mymove 0.2s;
+        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
+        box-shadow: -5px 0px 7px 0px #cbcbcb;
+
+        .contextual-pane-in {
+            width: 100%;
+            height: 100%;
+
+            .firstdivbg {
+                padding: @MediumSpace 0px @DefaultSpace (2 * @LargeSpace);
+                background-color: @BaseLight;
+            }
+            .headerline {
+                color: @BaseDark;
+                font-size: 16px;
+                border-bottom: 1px solid @BaseMedium;
+                height: 20px;
+    
+                .closeImg {
+                    float: right;
+                    margin: @SmallSpace (2 * @MediumSpace) 0px 0px;
+                    cursor: pointer;
+                    padding: @SmallSpace @LargeSpace @LargeSpace @SmallSpace;
+                    background-image: url(../images/cancel.svg);
+                    background-repeat: no-repeat;
+                    width: 16px;
+                    height: 16px;
+                
+                    &:hover {
+                        background-image: url(../images/cancel-hover.svg);
+                        background-repeat: no-repeat;
+                    }
+                }
+            }
+            .paneMainContent {
+                flex: 1;
+                padding-left: 34px;
+                padding-right: 34px;
+                color: @BaseDark;
+                overflow-y: auto;
+                overflow-x: hidden;
+                margin: (2 * @MediumSpace) 0px;
+            }
+        }        
+    }    
+    
+    switch-directory-pane {
+        .directoryDropdownContainer {
+            margin-bottom: @LargeSpace;
+        }
+
+        .directoryListContainer {
+            position: relative;
+            height: calc(100vh - (3 * @HeaderHeight) - 120px);
+        }
+
+        .directoryListComponentContainer {
+            overflow-y: auto;
+        }
+
+        .directoryListItem {
+            padding: @SmallSpace @DefaultSpace;
+            text-align: left;
+            color: @BaseDark;
+        }
+
+        .directoryListItem .directoryListItemName {
+            font-weight: 500;
+        }
+
+        .directoryDivider {
+            border-bottom: 1px solid @DividerColor;
+            margin-bottom: @LargeSpace
+        }
+    }
+
+    img {
+        vertical-align: middle;
+    }
+
+    .iframe {
+        border: 0px;
+        padding: 0px;
+        margin: 0px;
+        overflow: hidden;
+        width: 100%;
+        height: calc(~"100vh -" @HeaderHeight);
+
+        .main {
+            width: 100%;
+            transition: all .0s ease-in-out;
+            -ms-transition: all 0s ease-in-out;
+            -webkit-transition: all 0s ease-in-out;
+            -moz-transition: all .0s ease-in-out;
+            height: 100vh;
+            background-color: @BaseLight;
+        }
+    }
+
+    /************* Refactor below styles to avoid redundancy ****************/
+
+    .mini {
+        width: 0%;
+        float: left;
+        transition: all .4s ease-in-out;
+        -webkit-transition: all .4s ease-in-out;
+        -moz-transition: all .4s ease-in-out;
+        height: 100vh;
+        background-color: white;
+        border-right: solid 1px lightgray;
+    }
+
+    #sidebar-wrapper {
+        z-index: 1000;
+        position: fixed;
+        left: 250px;
+        width: 0;
+        height: 100%;
+        margin-left: -250px;
+        overflow-y: auto;
+        background: white;
+        -webkit-transition: all 0.5s ease;
+        -moz-transition: all 0.5s ease;
+        -o-transition: all 0.5s ease;
+        transition: all 0.5s ease;
+    }
+
+    .toggle-left {
+        width: 0%;
+        overflow: hidden;
+    }
+
+    .toggle-minicontent {
+        width: 100%;
+    }
+
+    .toggle-maincontent {
+        width: 100%;
+    }
+
+    .toggle-mini {
+        width: 50px;
+    }
+
+    .toggle-main {
+        width: 100%;
+    }
+
+    .activepartitionmode {
+        background-color: @AccentMediumHigh;
+    }
+
+    .paddingpartition {
+        color: white;
+        padding-left: 15px;
+        padding-top: 25px;
+    }
+
+    .paddingspan2 {
+        padding-top: 20px;
+        color: white;
+        padding-left: 15px;
+    }
+
+    .paddingspan4 {
+        padding-top: 20px;
+        padding-bottom: 20px;
+        color: white;
+        padding-left: 15px;
+    }
+
+    .whitegroove {
+        width: 344px;
+        border: groove;
+    }
+
+    .dropdownbtn {
+        color: white;
+        width: 340px;
+        background: #262626;
+    }
+
+    .queryclr {
+        color: white;
+        background: #262626;
+    }
+
+    .pointer {
+        cursor: pointer;
+    }
+
+    .gridRowSelected {
+        background-color: #c5e5f5;
+    }
+
+    .gridRowSelected:hover {
+        background-color: #c5e5f5!important;
+        cursor: initial;
+    }
+
+    .collectionNodeSelected {
+        background-color: #c5e5f5;
+    }
+
+    .collectionNodeSelected:hover {
+        background-color: #c5e5f5!important;
+        cursor: default!important;
+    }
+
+    .btncreatecoll1 {
+        border-color: #969696;
+        background-color: #1ebbee;
+        color: white;
+        padding: 2px 30px;
+        cursor: pointer;
+        font-size: 12px;
+    }
+
+    .btnpricepad {
+        margin-left: 24px;
+    }
+
+    .collid {
+        color: white;
+        background: #000000;
+        width: calc(~"100% - 20px");
+    }
+
+    .textfontclr {
+        color: white;
+    }
+
+    .firstdivbg {
+        height: 90px;
+        padding-left: 20px;
+        padding-top: 40px;
+    }
+
+    .seconddivbg {
+        height: 100vh;
+    }
+
+    .pricingtierimg {
+        padding-left: 20px;
+        padding-top: 10px;
+        padding-bottom: 20px;
+    }
+
+    .headerline {
+        color: @BaseDark;
+        font-size: 16px;
+        border-bottom: 1px solid @BaseMedium;
+        padding-bottom: 20px;
+    }
+
+    .partitionkeystyle {
+        font-size: 10px;
+    }
+
+    .arrowprice {
+        margin-left: 230px;
+    }
+
+    .paddingspan {
+        padding: 20px;
+        color: white;
+        font-size: 14px;
+    }
+
+    input::-webkit-calendar-picker-indicator {
+        opacity: 100;
+    }
+
+    .paddingspan3 {
+        padding-top: 20px;
+        padding-left: 20px;
+        color: white;
+        font-size: 14px;
+        position: absolute;
+        width: 100%;
+        height: 100px;
+        bottom: 150px;
+    }
+
+    .paddingspan4 {
+        padding-top: 20px;
+        padding-left: 20px;
+        color: white;
+        font-size: 14px;
+    }
+
+    .closebtnn {
+        float: right;
+        padding: 0 10px;
+        cursor: pointer;
+    }
+
+    label {
+        white-space: nowrap;
+        font: 12px "Segoe UI";
+    }
+
+    .Introlines {
+        padding-top: 27px;
+        padding-left: 40px;
+    }
+
+    .Introline1 {
+        font-size: 16px;
+    }
+
+    .Introline2 {
+        font-size: 14px;
+        padding-top: 10px;
+    }
+
+    .datalist-arrow {
+        position: relative;
+    }
+
+    .datalist-arrow:hover:after {
+        background: #969696;
+    }
+
+    .datalist-arrow:focus:after,
+    .datalist-arrow:active:after {
+        background: #1EBBEE;
+    }
+
+    input::-webkit-calendar-picker-indicator::after {
+        content: '\276F';
+        right: 0;
+        top: -8%;
+        display: block;
+        width: 27px;
+        height: 25px;
+        line-height: 25px;
+        color: #fff;
+        text-align: center;
+        pointer-events: none;
+        transform: rotate(90deg);
+    }
+
+    .datalist-arrow:after:hover {
+        content: '\276F';
+        position: absolute;
+        right: 1px;
+        top: 6%;
+        transform: rotate(90deg);
+        display: block;
+        width: 27px;
+        height: 25px;
+        line-height: 25px;
+        color: #fff;
+        text-align: center;
+        pointer-events: none;
+        background-color: #1EBBEE;
+    }
+
+    .Introline3 {
+        padding-top: 10px;
+        font-size: 14px;
+        font-weight: 1000;
+    }
+
+    .nav>li>a {
+        color: black;
+        font-weight: 400;
+    }
+
+    .qslevel {
+        padding-top: 10px;
+        border: none;
+    }
+
+    .qslevel>li>a {
+        border: none !important;
+    }
+
+    .qslevel>li.active {
+        border-bottom: 4px solid #767676;
+    }
+
+    .qslevel>li.active>a,
+    .qslevel>li>a:focus,
+    .nav.nav-tabs.qslevel>li>a:hover {
+        border: none;
+        border-radius: 0;
+        background-color: transparent !important;
+        border-color: transparent;
+    }
+
+    .numbersize {
+        font-size: 60px;
+        display: inline;
+    }
+
+    .numberheading {
+        display: inline;
+        position: absolute;
+        padding-top: 20px;
+        font-size: 16px;
+        padding-left: 20px;
+    }
+
+    .numberheading>p {
+        padding-top: 10px;
+        font-size: 12px !important;
+    }
+
+    .numberheading>ul {
+        padding-top: 10px;
+    }
+
+    .numberheading>ul>li>a {
+        font-size: 12px !important;
+    }
+
+    .step1 {
+        padding-bottom: 60px;
+    }
+
+    .step1>input {
+        font-size: 12px;
+    }
+
+    .btncreatecoll {
+        background: @AccentMediumHigh;
+        color: #fff;
+        padding: 0 20px;
+        cursor: pointer;
+        font-size: 12px;
+        border: 1px solid @AccentMediumHigh;
+    }
+
+    .btncreatecoll:active {
+        background: #0072c6;
+        border: 1px solid #0072c6;
+    }
+
+    .btncreatecoll:hover {
+        background: @AccentMediumHigh;
+        color: #fff;
+        border-color: @AccentMediumHigh;
+        cursor: pointer;
+        font-size: 12px;
+    }
+
+    .hrline {
+        color: #d6d7d8;
+    }
+
+    .atags:focus {
+        color: @AccentMediumHigh;
+    }
+
+    .atags {
+        color: @AccentMediumHigh;
+        font-weight: 400;
+        cursor: pointer
+    }
+
+    ul {
+        list-style-type: none;
+        padding-left: 0px;
+    }
+
+    .qsmenuicons {
+        width: 25px;
+        height: 25px;
+        margin-right: 5px;
+    }
+
+    .HeaderBg {
+        background-color: @BaseDark;
+        height: @HeaderHeight;
+        width: 100%;
+        min-width: 960px;
+        white-space: nowrap;
+    }
+
+    .DocDBicon {
+        padding-bottom: 10px;
+        width: 24px;
+        height: 24px;
+    }
+
+    .divmenuquickstartpadding {
+        padding-left: 24px;
+        padding-bottom: 8px;
+    }
+
+    .rightarrowimg {
+        padding-left: 5px;
+        padding-bottom: 2px;
+    }
+
+    a:hover,
+    a:visited,
+    a:active,
+    a:link {
+        text-decoration: none;
+    }
+}

less/index.less

@@ -0,0 +1,611 @@
+@import "./Common/Constants";
+
+html {
+    font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+    padding: 0px;
+    margin: 0px;
+    border: 0px;
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+    padding: 0px;
+    margin: 0px;
+    border: 0px;
+    overflow: hidden;
+}
+
+header {
+    font-size: 14px;
+}
+
+img {
+    vertical-align: middle;
+}
+
+.iframe {
+    border: 0px;
+    padding: 0px;
+    margin: 0px;
+    overflow: hidden;
+    width: calc(~"100% - 80px");
+    height: calc(~"100vh - 60px");
+}
+
+.fixedleftpane {
+    background: #2f2d2d;
+    height: 100vh;
+    width: 80px;
+    float: left;
+}
+
+#imgiconwidth1 {
+    width: 72%;
+}
+
+#Quickstart,
+#Explorer {
+    text-align: center;
+    width: 80px;
+    height: 60px;
+    margin: 0 auto;
+    padding-top: 9px;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.feedbackstyle,
+.settingstyle {
+    text-align: center;
+    display: inline-block;
+    width: 80px;
+    height: 60px;
+    margin: 0 auto;
+    padding-top: 9px;
+    position: absolute;
+    box-sizing: border-box;
+}
+
+#Quickstart:active,
+#Explorer:active {
+    color: #fff;
+    background: #666666;
+    box-sizing: border-box;
+}
+
+#Quickstart:hover,
+#Explorer:hover {
+    color: #fff;
+    background: #444444;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.feedbackstyle:hover,
+.settingstyle:hover {
+    color: #fff;
+    background: #444444;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+#Quickstart #imgiconwidth1,
+#Explorer #imgiconwidth1,
+.feedbackstyle #imgiconwidth1,
+.settingstyle #imgiconwidth1 {
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    right: 30px;
+}
+
+#Explorer:hover span.menuExplorer,
+#Explorer:active span.menuExplorer {
+    color: #fff;
+}
+
+#Quickstart span.menuQuickStart {
+    margin-left: 0;
+    padding-left: 0;
+    display: block;
+    right: 12px;
+    top: 30px;
+    position: absolute;
+}
+
+#Explorer span.menuExplorer {
+    margin-left: 0;
+    padding-left: 0;
+    display: block;
+    right: 19px;
+    top: 33px;
+    position: absolute;
+}
+
+.feedbackstyle span.menuExplorer {
+    margin-left: 0;
+    padding-left: 0;
+    display: block;
+    right: 19px;
+    top: 33px;
+    position: absolute;
+}
+
+.settingstyle span.menuExplorer {
+    margin-left: 0;
+    padding-left: 0;
+    display: block;
+    right: 19px;
+    top: 33px;
+    position: absolute;
+}
+
+.topSelected {
+    border-left: 4px solid @AccentMediumHigh;
+    background: #666666;
+}
+
+.topSelected:hover {
+    border-left: 4px solid @AccentMediumHigh;
+    background: #666666!important;
+    cursor: default!important;
+}
+
+.main {
+    width: 100%;
+    float: left;
+    transition: all .0s ease-in-out;
+    -ms-transition: all 0s ease-in-out;
+    -webkit-transition: all 0s ease-in-out;
+    -moz-transition: all .0s ease-in-out;
+    height: 100vh;
+    background-color: white;
+}
+
+.content {
+    display: inline-block;
+    width: 100%;
+    transition: all .4s ease-in-out;
+    -ms-transition: all .4s ease-in-out;
+    -webkit-transition: all .4s ease-in-out;
+    -moz-transition: all .4s ease-in-out;
+    height: 100vh;
+}
+
+.mini {
+    width: 0%;
+    float: left;
+    transition: all .4s ease-in-out;
+    -webkit-transition: all .4s ease-in-out;
+    -moz-transition: all .4s ease-in-out;
+    height: 100vh;
+    background-color: white;
+    border-right: solid 1px lightgray;
+}
+
+#sidebar-wrapper {
+    z-index: 1000;
+    position: fixed;
+    left: 250px;
+    width: 0;
+    height: 100%;
+    margin-left: -250px;
+    overflow-y: auto;
+    background: white;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+}
+
+.toggle-left {
+    width: 0%;
+    overflow: hidden;
+}
+
+.toggle-minicontent {
+    width: 100%;
+}
+
+.toggle-maincontent {
+    width: 100%;
+}
+
+.toggle-mini {
+    width: 50px;
+}
+
+.toggle-main {
+    width: 100%;
+}
+
+.activepartitionmode {
+    background-color: @AccentMediumHigh;
+}
+
+.paddingpartition {
+    color: white;
+    padding-left: 15px;
+    padding-top: 25px;
+}
+
+.paddingspan2 {
+    padding-top: 20px;
+    color: white;
+    padding-left: 15px;
+}
+
+.paddingspan4 {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    color: white;
+    padding-left: 15px;
+}
+
+.whitegroove {
+    width: 344px;
+    border: groove;
+}
+
+.dropdownbtn {
+    color: white;
+    width: 340px;
+    background: #262626;
+}
+
+.queryclr {
+    color: white;
+    background: #262626;
+}
+
+.pointer {
+    cursor: pointer;
+}
+
+.gridRowSelected {
+    background-color: #c5e5f5;
+}
+
+.gridRowSelected:hover {
+    background-color: #c5e5f5!important;
+    cursor: initial;
+}
+
+.collectionNodeSelected {
+    background-color: #c5e5f5;
+}
+
+.collectionNodeSelected:hover {
+    background-color: #c5e5f5!important;
+    cursor: default!important;
+}
+
+.btncreatecoll1 {
+    border-color: #969696;
+    background-color: #1ebbee;
+    color: white;
+    padding: 2px 30px;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.btnpricepad {
+    margin-left: 24px;
+}
+
+.collid {
+    color: white;
+    background: #000000;
+    width: calc(~"100% - 20px");
+}
+
+.textfontclr {
+    color: white;
+}
+
+.firstdivbg {
+    height: 90px;
+    padding-left: 20px;
+    padding-top: 40px;
+}
+
+.seconddivbg {
+    height: 100vh;
+}
+
+.pricingtierimg {
+    padding-left: 20px;
+    padding-top: 10px;
+    padding-bottom: 20px;
+}
+
+.headerline {
+    color: @BaseDark;
+    font-size: 16px;
+    border-bottom: 1px solid @BaseMedium; 
+    padding-bottom: 20px;
+}
+
+.partitionkeystyle {
+    font-size: 10px;
+}
+
+.arrowprice {
+    margin-left: 230px;
+}
+
+.paddingspan {
+    padding: 20px;
+    color: white;
+    font-size: 14px;
+}
+
+input::-webkit-calendar-picker-indicator {
+    opacity: 100;
+}
+
+.paddingspan3 {
+    padding-top: 20px;
+    padding-left: 20px;
+    color: white;
+    font-size: 14px;
+    position: absolute;
+    width: 100%;
+    height: 100px;
+    bottom: 150px;
+}
+
+.paddingspan4 {
+    padding-top: 20px;
+    padding-left: 20px;
+    color: white;
+    font-size: 14px;
+}
+
+.closebtnn {
+    float: right;
+    padding: 0 10px;
+    cursor: pointer;
+}
+
+label {
+    white-space: nowrap;
+    font: 12px "Segoe UI";
+}
+
+.Introlines {
+    padding-top: 27px;
+    padding-left: 40px;
+}
+
+.Introline1 {
+    font-size: 16px;
+}
+
+.Introline2 {
+    font-size: 14px;
+    padding-top: 10px;
+}
+
+.datalist-arrow {
+    position: relative;
+}
+
+.datalist-arrow:hover:after {
+    background: #969696;
+}
+
+.datalist-arrow:focus:after,
+.datalist-arrow:active:after {
+    background: #1EBBEE;
+}
+
+input::-webkit-calendar-picker-indicator::after {
+    content: '\276F';
+    right: 0;
+    top: -8%;
+    display: block;
+    width: 27px;
+    height: 25px;
+    line-height: 25px;
+    color: #fff;
+    text-align: center;
+    pointer-events: none;
+    transform: rotate(90deg);
+}
+
+.datalist-arrow:after:hover {
+    content: '\276F';
+    position: absolute;
+    right: 1px;
+    top: 6%;
+    transform: rotate(90deg);
+    display: block;
+    width: 27px;
+    height: 25px;
+    line-height: 25px;
+    color: #fff;
+    text-align: center;
+    pointer-events: none;
+    background-color: #1EBBEE;
+}
+
+.Introline3 {
+    padding-top: 10px;
+    font-size: 14px;
+    font-weight: 1000;
+}
+
+.nav>li>a {
+    color: black;
+    font-weight: 400;
+}
+
+.qslevel {
+    padding-top: 10px;
+    border: none;
+}
+
+.qslevel>li>a {
+    border: none !important;
+}
+
+.qslevel>li.active {
+    border-bottom: 4px solid #767676;
+}
+
+.qslevel>li.active>a,
+.qslevel>li>a:focus,
+.nav.nav-tabs.qslevel>li>a:hover {
+    border: none;
+    border-radius: 0;
+    background-color: transparent !important;
+    border-color: transparent;
+}
+
+.numbersize {
+    font-size: 60px;
+    display: inline;
+}
+
+.numberheading {
+    display: inline;
+    position: absolute;
+    padding-top: 20px;
+    font-size: 16px;
+    padding-left: 20px;
+}
+
+.numberheading>p {
+    padding-top: 10px;
+    font-size: 12px !important;
+}
+
+.numberheading>ul {
+    padding-top: 10px;
+}
+
+.numberheading>ul>li>a {
+    font-size: 12px !important;
+}
+
+.step1 {
+    padding-bottom: 60px;
+}
+
+.step1>input {
+    font-size: 12px;
+}
+
+.btncreatecoll {
+    background: @AccentMediumHigh;
+    color: #fff;
+    padding: 0 20px;
+    cursor: pointer;
+    font-size: 12px;
+    border: 1px solid @AccentMediumHigh;
+}
+
+.btncreatecoll:active {
+    background: #0072c6;
+    border: 1px solid #0072c6;
+}
+
+.btncreatecoll:hover {
+    background: @AccentMediumHigh;
+    color: #fff;
+    border-color: @AccentMediumHigh;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.hrline {
+    color: #d6d7d8;
+}
+
+.atags:focus {
+    color: @AccentMediumHigh;
+}
+
+.atags {
+    color: @AccentMediumHigh;
+    font-weight: 400;
+    cursor: pointer
+}
+
+ul {
+    list-style-type: none;
+    padding-left: 0px;
+}
+
+.qsmenuicons {
+    width: 25px;
+    height: 25px;
+    margin-right: 5px;
+}
+
+.HeaderBg {
+    background-color: #202428;
+    height: 60px;
+    width: 100%;
+    min-width: 960px;
+}
+
+.title {
+    color: @AccentMediumHigh;
+    font-size: 20px;
+    padding-left: 10px;
+}
+
+.DocDBicon {
+    padding-bottom: 10px;
+    width: 24px;
+    height: 24px;
+}
+
+.items {
+    padding-left: 24px;
+    padding-top: 15px;
+}
+
+.divmenuquickstartpadding {
+    padding-left: 24px;
+    padding-bottom: 8px;
+}
+
+.menuQuickStart {
+    font-size: 12px;
+    color: white;
+    padding-left: 10px;
+}
+
+.menuExplorer {
+    font-size: 12px;
+    color: white;
+    padding-left: 20px;
+}
+
+.rightarrowimg {
+    padding-left: 5px;
+    padding-bottom: 2px;
+}
+
+.createdocdbacnt {
+    text-transform: uppercase;
+    color: #a5ce00;
+    float: right;
+    font-size: 18px;
+    padding-top: 10px;
+    text-decoration: none;
+}
+
+a:hover,
+a:visited,
+a:active,
+a:link {
+    text-decoration: none;
+}

less/infobox.less

@@ -0,0 +1,33 @@
+@import "./Common/Constants";
+
+.infoBoxContainer {
+    padding: 24px 34px 0px 34px;
+
+    .infoBoxContent {
+        background-color: @BaseLow;
+        padding: @DefaultSpace;
+        display: inline-flex;
+    
+        .infoBoxDetails {
+            padding-left: @MediumSpace;
+            margin: auto 0px;
+    
+            .infoBoxMessage {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                width: 320px;
+                padding-top: 2px;
+                color: @BaseHigh;
+                display: block;
+            }
+        }
+
+        .infoBoxIcon {
+            margin-top: 2px;
+            width: 32px;
+            height: 32px;
+            margin-left: @SmallSpace;
+        }
+    }
+}

less/menus.less

@@ -0,0 +1,44 @@
+@import "./Common/Constants";
+
+.context-menu-background {
+    z-index: 1000;
+    position: fixed;
+    cursor: default;
+    width: 100%;
+    height: 100vh;
+    top: 0;
+    left: 0;
+}
+
+.context-menu {
+    .flex-display();
+    .flex-direction();
+    z-index: 1001;
+    position: fixed;
+    background: white;
+    border: solid 1px gainsboro;
+    box-shadow: 4px 4px 4px -2px #888888;
+    line-height: 25px;
+    padding: @DefaultSpace 0px;
+
+    .context-menu-option .commandContent {
+        padding: 0px @DefaultSpace;
+    }
+}
+
+.context-menu:hover {
+    padding-left: 0px;
+}
+
+.context-menu-option .commandButton{
+    display: block;
+}
+
+.context-menu-option:hover .commandButton {
+    background-color: #EEE;
+}
+
+.context-menu-option .commandButton span{
+    /* Reset the padding indent caused by being a TreeNode child*/
+    padding-left: 0px;
+}

less/messagebox.less

@@ -0,0 +1,266 @@
+.messagebox-background {
+    position: fixed;
+    z-index: 200;
+    padding: 8px;
+}
+
+.messagebox-container {
+    color: rgb(45, 50, 57);
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-flow: column nowrap;
+    flex-flow: column nowrap;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-align-items: center;
+    align-items: center;
+    font-family: az_ea_font, wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+    font-size: 16px;
+    font-weight: normal;
+    left: 0px;
+    overflow-x: visible;
+    overflow-y: visible;
+    position: relative;
+    z-index: 200;
+}
+
+.messagebox {
+    background-color: rgb(255, 255, 255);
+    border-bottom-color: rgb(179, 179, 179);
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-image-outset: 0px;
+    border-image-repeat: stretch;
+    border-image-slice: 100%;
+    border-image-source: none;
+    border-image-width: 1;
+    border-left-color: rgb(179, 179, 179);
+    border-left-style: solid;
+    border-left-width: 1px;
+    border-right-color: rgb(179, 179, 179);
+    border-right-style: solid;
+    border-right-width: 1px;
+    border-top-color: rgb(179, 179, 179);
+    border-top-style: solid;
+    border-top-width: 1px;
+    box-sizing: border-box;
+    color: rgb(45, 50, 57);
+    display: block;
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+    font-family: az_ea_font, wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+    font-size: 14px;
+    font-weight: normal;
+    box-shadow: 4px 4px 4px -2px #888888;
+    min-width: 500px;
+}
+
+.messagebox-title {
+    border-bottom-color: rgb(45, 50, 57);
+    border-bottom-style: none;
+    border-bottom-width: 0px;
+    color: rgb(45, 50, 57);
+    display: block;
+    font-family: az_ea_font, wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+    font-size: 15.4px;
+    font-weight: normal;
+    line-height: 14px;
+    margin-bottom: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
+    margin-top: 0px;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    padding-bottom: 7px;
+    padding-left: 27px;
+    padding-right: 27px;
+    padding-top: 24px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -webkit-margin-after: 0px;
+    -webkit-margin-before: 0px;
+    -webkit-margin-end: 0px;
+    -webkit-margin-start: 0px
+}
+
+.messagebox-text {
+    color: rgb(45, 50, 57);
+    display: block;
+    font-family: az_ea_font, wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+    font-size: 14px;
+    font-weight: normal;
+    padding-bottom: 0px;
+    padding-left: 27px;
+    padding-right: 27px;
+    padding-top: 0px;
+    word-wrap: break-word;
+}
+
+.messagebox-buttons {
+    border-bottom-color: rgb(179, 179, 179);
+    border-left-color: rgb(179, 179, 179);
+    border-right-color: rgb(179, 179, 179);
+    border-top-color: rgb(179, 179, 179);
+    border-top-style: solid;
+    border-top-width: 1px;
+    color: rgb(45, 50, 57);
+    display: block;
+    font-family: az_ea_font, wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+    font-size: 14px;
+    font-weight: normal;
+    height: 53px;
+    margin-bottom: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
+    margin-top: 27px;
+    padding-bottom: 0px;
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-top: 0px;
+}
+
+.messagebox-buttons-container {
+    color: rgb(45, 50, 57);
+    display: block;
+    font-family: az_ea_font, wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+    font-size: 14px;
+    font-weight: normal;
+    height: 23px;
+    padding-bottom: 15px;
+    padding-left: 27px;
+    padding-right: 27px;
+    padding-top: 15px;
+}
+
+.messagebox-button-primary {
+    align-items: center;
+    background-attachment: scroll;
+    background-clip: border-box;
+    background-color: rgb(0, 188, 242);
+    background-image: none;
+    background-origin: padding-box;
+    background-position-x: 0%;
+    background-position-y: 0%;
+    background-size: auto;
+    border-bottom-color: rgb(0, 188, 242);
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-image-outset: 0px;
+    border-image-repeat: stretch;
+    border-image-slice: 100%;
+    border-image-source: none;
+    border-image-width: 1;
+    border-left-color: rgb(0, 188, 242);
+    border-left-style: solid;
+    border-left-width: 1px;
+    border-right-color: rgb(0, 188, 242);
+    border-right-style: solid;
+    border-right-width: 1px;
+    border-top-color: rgb(0, 188, 242);
+    border-top-style: solid;
+    border-top-width: 1px;
+    box-sizing: border-box;
+    color: rgb(255, 255, 255);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: az_ea_font, wf_segoe-ui_semibold, "Segoe UI Semibold", "Segoe WP Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+    font-size: 12px;
+    font-stretch: normal;
+    font-style: normal;
+    font-variant-caps: normal;
+    font-variant-ligatures: normal;
+    font-variant-numeric: normal;
+    font-weight: normal;
+    height: 23px;
+    justify-content: center;
+    letter-spacing: normal;
+    line-height: normal;
+    margin-bottom: 0px;
+    margin-left: 0px;
+    margin-right: 5px;
+    margin-top: 0px;
+    min-width: 60px;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    padding-bottom: 3px;
+    padding-left: 22px;
+    padding-right: 22px;
+    padding-top: 2px;
+    text-align: center;
+    text-indent: 0px;
+    text-rendering: auto;
+    text-shadow: none;
+    text-transform: none;
+    user-select: none;
+    word-spacing: 0px;
+    writing-mode: horizontal-tb;
+    -webkit-appearance: none;
+    -webkit-border-image: none;
+}
+
+.messagebox-button-default {
+    align-items: center;
+    background-attachment: scroll;
+    background-clip: border-box;
+    background-color: rgb(172, 172, 172);
+    background-image: none;
+    background-origin: padding-box;
+    background-position-x: 0%;
+    background-position-y: 0%;
+    background-size: auto;
+    border-bottom-color: rgb(172, 172, 172);
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-image-outset: 0px;
+    border-image-repeat: stretch;
+    border-image-slice: 100%;
+    border-image-source: none;
+    border-image-width: 1;
+    border-left-color: rgb(172, 172, 172);
+    border-left-style: solid;
+    border-left-width: 1px;
+    border-right-color: rgb(172, 172, 172);
+    border-right-style: solid;
+    border-right-width: 1px;
+    border-top-color: rgb(172, 172, 172);
+    border-top-style: solid;
+    border-top-width: 1px;
+    box-sizing: border-box;
+    color: rgb(255, 255, 255);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: az_ea_font, wf_segoe-ui_semibold, "Segoe UI Semibold", "Segoe WP Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+    font-size: 12px;
+    font-stretch: normal;
+    font-style: normal;
+    font-variant-caps: normal;
+    font-variant-ligatures: normal;
+    font-variant-numeric: normal;
+    font-weight: normal;
+    height: 23px;
+    justify-content: center;
+    letter-spacing: normal;
+    line-height: normal;
+    margin-bottom: 0px;
+    margin-left: 0px;
+    margin-right: 5px;
+    margin-top: 0px;
+    min-width: 60px;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    padding-bottom: 3px;
+    padding-left: 22px;
+    padding-right: 22px;
+    padding-top: 2px;
+    text-align: center;
+    text-indent: 0px;
+    text-rendering: auto;
+    text-shadow: none;
+    text-transform: none;
+    user-select: none;
+    word-spacing: 0px;
+    writing-mode: horizontal-tb;
+    -webkit-appearance: none;
+    -webkit-border-image: none;
+}

less/resourceTree.less

@@ -0,0 +1,23 @@
+@import "./Common/Constants";
+
+.dataResourceTree {
+  margin-left: @MediumSpace;
+
+  .databaseHeader {
+    font-size: 14px;
+  }
+
+  .collectionHeader {
+    font-size: 12px;
+  }
+}
+
+.notebookResourceTree {
+  margin-left: @MediumSpace;
+
+  .notebookHeader {
+    font-size: 12px;
+  }
+}
+
+

less/tree.less

@@ -0,0 +1,280 @@
+@import "./Common/Constants";
+
+.main {
+    width: 100%;
+    float: left;
+    transition: all .0s ease-in-out;
+    -ms-transition: all 0s ease-in-out;
+    -webkit-transition: all 0s ease-in-out;
+    -moz-transition: all .0s ease-in-out;
+    height: 100%;
+    background-color: white;
+    border-left: 0px solid white;
+}
+
+.resourceTree {
+    height: 100%;
+    flex: 0 0 auto;
+}
+
+.resourceTreeScroll {
+    height: 100%;
+    display: flex;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 10px;
+}
+
+.userSelectNone {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.treeHovermargin {
+    margin-left: 16px;
+}
+
+.highlight {
+    padding: @SmallSpace 2px;
+    outline: 0;
+
+    &:hover {
+        .hover();
+    }
+
+    &:active {
+        .active();
+    }
+
+    &:focus {
+        .focus();
+    }
+}
+
+.contextmenushowing {
+    background-color: #EEE;
+}
+
+.collectionstree {
+    width: 100%;
+    margin-top: @DefaultSpace;
+
+
+    .databaseList {
+        list-style-type: none;
+        padding-left: 0px;
+
+        .collectionList {
+            padding-left:(2 * @MediumSpace);
+        }
+
+        .collectionChildList {
+            padding-left: @LargeSpace;
+        }
+
+        .databaseDocuments {
+            padding-left: (5 * @MediumSpace);
+        }
+    }
+}
+
+.pointerCursor {
+    cursor: pointer;
+}
+
+.menuEllipsis {
+    padding-right: 6px;
+    font-weight: bold;
+    font-size: 18px;
+    position: relative;
+    top: -5px;
+    left: 0px;
+    float: right;
+    display: none;
+    padding-left: 6px!important;
+    line-height: @TreeLineHeight;
+}
+
+.databaseMenu {
+    .flex-display();
+}
+
+.databaseMenu:hover .menuEllipsis,
+.databaseMenu:focus .menuEllipsis {
+    display: block;
+}
+
+.databaseCollChildTextOverflow {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1;
+}
+
+.collectionMenu {
+    .flex-display();
+}
+
+.collectionMenu:hover .menuEllipsis,
+.collectionMenu:focus .menuEllipsis {
+    display: block;
+}
+
+.documentsMenu:hover .menuEllipsis,
+.documentsMenu:focus .menuEllipsis {
+    display: block;
+}
+
+.treeChildMenu {
+    display: flex;
+}
+
+.storedProcedureMenu:hover .menuEllipsis,
+.storedProcedureMenu:focus .menuEllipsis {
+    display: block;
+}
+
+.childMenu {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-left: (6 * @MediumSpace);
+    width: 100%;
+}
+
+.storedChildMenu:hover .menuEllipsis,
+.storedChildMenu:focus .menuEllipsis {
+    display: block;
+}
+
+.contextmenu6 {
+    top: -29px;
+}
+
+.userDefinedMenu:hover .contextmenu6 {
+    display: block;
+}
+
+.userDefinedchildMenu:hover .menuEllipsis,
+.userDefinedchildMenu:focus .menuEllipsis {
+    display: block;
+}
+
+.triggersMenu:hover .menuEllipsis,
+.triggersMenu:focus .menuEllipsis {
+    display: block;
+}
+
+.triggersChildMenu:hover .menuEllipsis,
+.triggersChildMenu:focus .menuEllipsis {
+    display: block;
+}
+
+.databaseId {
+    font-size: 14px;
+}
+
+.storedUdfTriggerMenu {
+    padding-left: 0px;
+}
+
+.collectionstree img {
+    width: 16px;
+    height: 16px;
+    vertical-align: text-top;
+}
+
+img.collectionsTreeCollapseExpand {
+    width: 10px;
+    height: 10px;
+    vertical-align: middle;
+    margin-bottom: 5px;
+}
+
+.collapsed::before {
+    content: "\23F5";
+    margin-left: 0px;
+    font-size: 15px;
+}
+
+.expanded::before {
+    content: '\23F7';
+    margin-left: 0px;
+    font-size: 15px;
+}
+
+.collectionMenuChildren {
+    padding-left: 42px;
+}
+
+.main-nav {
+    width: 100vh;
+    height: 40px;
+    background: white;
+    transform-origin: left top;
+    -webkit-transform-origin: left top;
+    -ms-transform-origin: left top;
+    transform: rotate(-90deg) translateX(-100%);
+    -webkit-transform: rotate(-90deg) translateX(-100%);
+    -ms-transform: rotate(-90deg) translateX(-100%);
+    border-bottom: 1px solid #CCC;
+}
+
+.main-nav-img {
+    width: 16px;
+    height: 16px;
+    margin: -32px 0 0 0;
+    transform: rotate(-90deg) translateX(-100%);
+    -webkit-transform: rotate(-90deg) translateX(-100%);
+    -ms-transform: rotate(-90deg) translateX(-100%);
+}
+
+.main-nav-img.main-nav-sub-img {
+    width: 16px;
+    height: 16px;
+    margin: 0px 0px 0 0;
+    transform: rotate(180deg) translateX(0%);
+    -webkit-transform: rotate(180deg) translateX(0%);
+    -ms-transform: rotate(180deg) translateX(0%);
+    position: absolute;
+    right: -8px;
+    top: 16px;
+}
+
+ul.nav {
+    margin: 0 auto;
+    margin-top: 0px;
+    margin-left: 0px;
+}
+
+.mini ul.nav li {
+    float: right;
+    line-height: 25px;
+    height: auto;
+    margin-top: 3px;
+}
+
+.spancolchildstyle {
+    padding: 4px;
+}
+
+.contextmenubutton {
+    float: right;
+    display: none;
+}
+
+.highlight:hover>.contextmenubutton {
+    display: unset;
+}
+
+.highlight:hover>.contextmenubutton::after {
+    content: "\2026";
+    font-size: 12px;
+}
+
+.showEllipsis {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}