/*! gridster.js - v0.5.6 - 2014-09-25
* http://gridster.net/
* Copyright (c) 2014 ducksboard; Licensed MIT */
.gridster {
  position: relative;
}

.gridster > * {
  margin: 0 auto;
  -webkit-transition: height .4s, width .4s;
  -moz-transition: height .4s, width .4s;
  -o-transition: height .4s, width .4s;
  -ms-transition: height .4s, width .4s;
  transition: height .4s, width .4s;
}

.gridster .gs-w {
  z-index: 2;
  position: absolute;
}

.ready .gs-w:not(.preview-holder) {
  -webkit-transition: opacity .3s, left .3s, top .3s;
  -moz-transition: opacity .3s, left .3s, top .3s;
  -o-transition: opacity .3s, left .3s, top .3s;
  transition: opacity .3s, left .3s, top .3s;
}

.ready .gs-w:not(.preview-holder),
.ready .resize-preview-holder {
  -webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
  -moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
  -o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
  transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
}

.gridster .preview-holder {
  z-index: 1;
  position: absolute;
  background-color: #fff;
  border-color: #fff;
  opacity: 0.3;
}

.gridster .player-revert {
  z-index: 10 !important;
  -webkit-transition: left 0.3s, top 0.3s !important;
  -moz-transition: left 0.3s, top 0.3s !important;
  -o-transition: left 0.3s, top 0.3s !important;
  transition: left 0.3s, top 0.3s !important;
}

.gridster .dragging,
.gridster .resizing {
  z-index: 10 !important;
  -webkit-transition: all 0s !important;
  -moz-transition: all 0s !important;
  -o-transition: all 0s !important;
  transition: all 0s !important;
}

.gs-resize-handle {
  position: absolute;
  z-index: 1;
}

.gs-resize-handle-both {
  width: 20px;
  height: 20px;
  bottom: -8px;
  right: -8px;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=");
  background-position: top left;
  background-repeat: no-repeat;
  cursor: se-resize;
  z-index: 20;
}

.gs-resize-handle-x {
  top: 0;
  bottom: 13px;
  right: -5px;
  width: 10px;
  cursor: e-resize;
}

.gs-resize-handle-y {
  left: 0;
  right: 13px;
  bottom: -5px;
  height: 10px;
  cursor: s-resize;
}

.gs-w:hover .gs-resize-handle,
.resizing .gs-resize-handle {
  opacity: 1;
}

.gs-resize-handle,
.gs-w.dragging .gs-resize-handle {
  opacity: 0;
}

.gs-resize-disabled .gs-resize-handle {
  display: none !important;
}

[data-max-sizex="1"] .gs-resize-handle-x,
[data-max-sizey="1"] .gs-resize-handle-y,
[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle {
  display: none !important;
}

/* Uncomment this if you set helper : "clone" in draggable options */
/*.gridster .player {
  opacity:0;
}
*/
/* The link occupies the entirety of the widget, to intercept clicks, without forcing restyling of rest of control. */
.action-required-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px 14px;
}

.action-required-link .title-container {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  margin: 0;
  font-weight: normal;
}

.action-required-link .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 14px * 2);
  text-align: center;
}

.action-required-link .widget-message-text {
  font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
  font-size: 16px;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  white-space: normal;
  text-align: center;
}

.action-required-link .link-text {
  font-size: 14px;
  font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
  background: transparent;
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
  text-align: center;
  display: block;
}

.action-required-link .bgImage {
  height: 100px;
}

.legacy-shim a.action-required-link:hover {
  text-decoration: none;
}

a.action-required-link:focus {
  outline: none;
  border:  2px solid;
  border-color: rgba( 43, 136, 216 ,  1 );
  border-color: rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 );
}

.rowspan-1 .action-required-link .bgImage {
  height: 40px;
}

/* Styles for states using loading image and unusable widget states */
.with-loading-img .action-required-link .content,
.unusable-widget .action-required-link .content {
  position: absolute;
  width: calc(100% - 14px * 2);
  height: calc(100% - 14px * 2 - 18px);
  top: 34px;
  left: 14px;
  transform: none;
}

.with-loading-img .action-required-link .content .bgImage,
.unusable-widget .action-required-link .content .bgImage {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
  z-index: -1;
}

.with-loading-img .action-required-link.analytics-action-required .widget-message-text {
  margin-top: 50px;
  font-size: 18px;
}

.with-loading-img .action-required-link.analytics-action-required .widget-message-sub-text {
  font-size: 16px;
}

.with-loading-img .action-required-link.analytics-action-required .content .bgImage {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
  left: 180px;
  background-repeat: no-repeat;
}

.with-loading-img .action-required-link .widget-message-text {
  margin-top: 23px;
}

.with-loading-img .action-required-link .link-text {
  margin-top: 20px;
}

/* styles for unusable-widget only*/
.unusable-widget.colspan-1 .action-required-link .title-container {
  width: 90%;
}

.unusable-widget .action-required-link .title-container {
  width: 95%;
}

.unusable-widget .action-required-link .bgImage {
  background-image: url("../../_content/Dashboards/unusable-widget-background.png");
}

.unusable-widget .action-required-link:hover .link-text {
  color: #009ccc;
}

.unusable-widget .action-required-link:hover .link-text::before {
  content: "\EA08";
}

.unusable-widget .action-required-link .link-text {
  position: absolute;
  top: -20px;
  right: -3px;
  width: 16px;
  height: 16px;
  font-family: "bowtie";
  font-size: 14px;
  speak: none;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-align: center;
  line-height: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.unusable-widget .action-required-link .link-text::before {
  content: "\EA09";
}

/* Widget error and unconfigured state styles */
.widget-notification {
  position: absolute;
  top: 0;
  left: 0;
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.widget-notification.error-widget.rowspan-1 .action-required-link .link-text, .widget-notification.configure-widget.rowspan-1 .action-required-link .link-text {
  margin-top: 5px;
}

.widget-notification.error-widget.rowspan-1 .action-required-link .content, .widget-notification.configure-widget.rowspan-1 .action-required-link .content {
  top: 55%;
}

.widget-notification.error-widget .action-required-link, .widget-notification.configure-widget .action-required-link {
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  background: rgba( 255, 255, 255 ,  1 );
  background: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.widget-notification.error-widget .action-required-link .widget-message-text, .widget-notification.configure-widget .action-required-link .widget-message-text {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  margin-bottom: 10px;
}

.widget-notification.error-widget .action-required-link .link-text, .widget-notification.configure-widget .action-required-link .link-text {
  margin-top: 10px;
}

.widget-notification.error-widget.rowspan-1 .action-required-link .widget-message-text {
  margin-bottom: 5px;
}

/* Widget Notification Dialog styles */
.ui-dialog.widget-notification-dialog:focus {
  outline: none;
}

.ui-dialog.widget-notification-dialog.configure .ui-dialog-content, .ui-dialog.widget-notification-dialog.error-notification .ui-dialog-content {
  padding-left: 180px;
}

.ui-dialog.widget-notification-dialog.extension-disabled-widget p {
  padding-top: 20px;
}

.ui-dialog.widget-notification-dialog.no-permission-disabled-widget .ui-dialog-content {
  padding-bottom: 0;
  padding-left: 150px;
}

.ui-dialog.widget-notification-dialog.stakeholder-view .ui-dialog-content {
  padding-bottom: 0;
  padding-left: 150px;
}

.ui-dialog.widget-notification-dialog.configure .ui-dialog-content {
  padding-top: 10px;
}

.ui-dialog.widget-notification-dialog.error-notification .ui-dialog-content {
  background-image: url("../../_content/Dashboards/errorWidget-large.png");
}

.ui-dialog.widget-notification-dialog.configure .ui-dialog-content {
  background-image: url("../../_content/Dashboards/warningPolice.png");
}

.ui-dialog.widget-notification-dialog.extension-disabled-widget .ui-dialog-content {
  background-image: url("../../_content/Dashboards/widget-you-dont-have-permission.png");
  padding-left: 180px;
}

.ui-dialog.widget-notification-dialog.no-permission-disabled-widget .ui-dialog-content {
  background-image: url("../../_content/Dashboards/widget-you-dont-have-permission.png");
}

.ui-dialog.widget-notification-dialog.no-permission-disabled-widget .ui-dialog-content p {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  margin: 0;
  text-align: justify;
}

.ui-dialog.widget-notification-dialog.no-permission-disabled-widget .ui-dialog-content p:first-child {
  padding-top: 0;
  font-size: 16px;
  font-weight: 600;
}

.ui-dialog.widget-notification-dialog.stakeholder-view .ui-dialog-content {
  background-image: url("../../_content/Dashboards/widget-you-dont-have-permission.png");
}

.ui-dialog.widget-notification-dialog.stakeholder-view .ui-dialog-content p {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  margin: 0;
  text-align: justify;
}

.ui-dialog.widget-notification-dialog.stakeholder-view .ui-dialog-content p:first-child {
  padding-top: 0;
  font-size: 16px;
  font-weight: 600;
}

.ui-dialog.widget-notification-dialog button#ok {
  display: none;
}

.ui-dialog.widget-notification-dialog .ui-dialog-content {
  font-size: 14px;
  background-repeat: no-repeat;
  background-position: 20px 50%;
  background-size: auto;
  height: 75px;
}

.ui-dialog.widget-notification-dialog .scrollzone {
  overflow: auto;
  height: 100%;
  width: 100%;
}

/* accounting for the 1px border on top and bottom */
/*
    Remove the progress bar from above the L3 menu. This oddly sits in the content section which isnt very clear.
    Only removes the occurence of the progress indicator above the hub. Important tag since the indicator display state is
    being controlled directly through the element style and selective class targeting wont work.
*/
.hub-view.dashboard-landing .hub-progress.pageProgressIndicator {
  display: none !important;
}

/*
    Prevents any outside the dashboard landing page from taking the grid background and position.
*/
.hub-view.dashboard-landing .hub-content {
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  top: 0;
}

/*
    Allows for the hub content to be pushed down in case of the team view to allow for error messages to be shown.
    50px provides for enough height on a 2 line message.
*/
.hub-view.dashboard-landing .dashboard-notification-message.message-area-control.visible ~ .hub-content {
  top: 50px;
}

#widgets-container > div {
  margin: 0;
}

/*Visual representation of the place holder*/
#widgets-container .preview-holder {
  border: none;
  background: rgba( 199, 224, 244 ,  1 );
  background: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  opacity: 0.3;
}

.ui-dialog-buttonpane .charting-discoverability {
  float: left;
  font-size: 14px;
  margin-top: 6px;
  margin-left: 5px;
  /* Line up with "ADD WIDGET" in the header with 5px margin plus the 5px padding in the button pane */
}

.ui-dialog-buttonpane .charting-discoverability > * {
  vertical-align: top;
  display: inline-block;
}

.ui-dialog-buttonpane .charting-discoverability .charting-discoverability-message-container {
  margin-top: 7px;
}

.ui-dialog-buttonpane .charting-discoverability .charting-discoverability-link {
  color: rgba( 16, 110, 190 ,  1 );
  color: rgba( var(--palette-primary-shade-10,16, 110, 190) ,  1 );
}

.ui-dialog-buttonpane .charting-discoverability .charting-discoverability-message {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}

.ui-dialog-buttonpane .charting-discoverability > .charting-discoverability-icon {
  background-image: url("../../_content/Dashboards/chartingdiscoverability_chart.png");
  display: inline-block;
  margin-right: 10px;
  width: 36px;
  height: 31px;
}

.dialog .widget-preview-tile {
  width: 370px;
  height: 280px;
  display: inline-block;
  padding-top: 25px;
  padding-left: 15px;
  padding-right: 25px;
  cursor: pointer;
  vertical-align: top;
  border: 3px solid transparent;
  margin: 6px;
}

.dialog .widget-preview-tile:hover {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}

.dialog .widget-preview-tile.selected {
  border: 3px solid rgba(0, 120, 212, 1);
  border: 3px solid var(--communication-background,rgba(0, 120, 212, 1));
  position: relative;
}

.dialog .widget-preview-tile.virtualfocus {
  border: 1px solid rgba(0, 120, 212, 1);
  border: 1px solid var(--communication-background,rgba(0, 120, 212, 1));
  position: relative;
  padding-top: 27px;
  padding-left: 17px;
  padding-right: 27px;
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}

.dialog .widget-preview-tile .widget-preview-image {
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  overflow: hidden;
  height: 160px;
  width: 330px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.dialog .widget-preview-tile .widget-name {
  font-size: 14px;
  padding-bottom: 5px;
  margin-top: 14px;
}

.dialog .widget-preview-tile .widget-description {
  font-size: 12px;
  border-bottom:  1px solid;
  border-bottom-color: rgba( 234, 234, 234 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  padding-bottom: 5px;
  height: 40px;
}

.dialog .widget-preview-tile.selected > span {
  display: block;
  position: absolute;
  right: -1px;
  cursor: pointer;
  margin-top: -27px;
  /* create a triangle*/
  border-bottom: none;
  border-right: 32px solid rgba(0, 120, 212, 1);
  border-right: 32px solid var(--communication-background,rgba(0, 120, 212, 1));
}

/* create a L , rotate that and make it a check mark*/
.dialog .widget-preview-tile.selected > span:after {
  content: "\00a0";
  display: block;
  width: 5px;
  height: 9px;
  border:  solid;
  border-color: rgba( 255, 255, 255 ,  1 );
  border-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  border-width: 0 4px 4px 0;
  position: absolute;
  left: 18px;
  top: 30%;
  -webkit-transform: rotate(45deg);
  -moz-transform: translateZ(1px) rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

/* Default ul has a browser defined 40px left margin which misaligns the grid.*/
ul.ready {
  margin-left: 0;
}

#dashboards-top-menu {
  padding: 21px;
}

.new-dashboard-name-input::-ms-clear,
.dashboard-list-item-name::-ms-clear {
  display: none;
}

.hub-error {
  background-color: rgba( 249, 235, 235 ,  1 );
  background-color: rgba( var(--palette-accent1-light,249, 235, 235) ,  1 );
  color: red;
  padding: 10px;
}

.dialog .columnlistview {
  overflow: auto;
  height: 100%;
  padding-bottom: 30px;
  border-bottom: 53px solid transparent;
}

.dialog.modal-dialog.addwidget-dialog.ui-dialog-content.ui-widget-content {
  margin: 0px;
}

/* Empty search text aligns with the add Widget dialog header text.*/
.dialog .addwidget-dialog .columnlistview .widget-search-watermark {
  margin-left: 8px;
  margin-top: 25px;
}

.dialog .widget-search-button {
  height: 20px;
  width: 20px;
  padding-left: 1px;
  border: none;
  background: none;
  position: absolute;
  right: 6px;
  top: 10px;
}

.dialog .widget-searchterm-input {
  width: 236px;
  padding-left: 10px;
  padding-right: 20px;
  margin-left: 40px;
  margin-bottom: 15px;
  position: absolute;
  right: 5px;
  font-size: 12px;
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  outline: 0;
  height: 26px;
}

.dialog .widget-search-container {
  border-bottom:  1px solid;
  border-bottom-color: rgba( 102, 102, 102 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-60,102, 102, 102) ,  1 );
  position: relative;
  padding-bottom: 15px;
  height: 52px;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 10px;
  padding-top: 10px;
  font-size: 16px;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}

/* DashboardEditMenu styling */
.dashboard-edit-menu-container {
  position: fixed;
  right: 20px;
  bottom: 15px;
  z-index: 4;
  /*Just above Gridster z-index*/
  width: 80px;
  height: 160px;
}

.dashboard-edit-menu-container .edit-menu {
  visibility: hidden;
}

.dashboard-edit-menu-container.menu-open .edit-menu {
  visibility: visible;
}

.dashboard-edit-menu-container .button {
  width: 56px;
  height: 56px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28);
  border: 0;
  border-radius: 50%;
  transition: all 0.5s cubic-bezier(0.08, 1.08, 0.58, 1.11);
  transform: scale(1);
  cursor: pointer;
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  opacity: 0;
  text-align: center;
}

.dashboard-edit-menu-container .button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.31);
  transform: scale(1.03);
}

/*Disabling scale animation in IE>=10 and Edge because their output is jittery*/
_:-ms-lang(x),
.dashboard-edit-menu-container .button:hover {
  transform: scale(1);
}

/*
    Workaround to stop Edge changing the font color to black during the transition which
    seems to be a bug in Edge itself.
    Note: One side-effect of this is that the hover-out action doesn't show the button
    fading out / moving back to its original position, but the issue is isolated to Edge.
*/
@supports (-ms-accelerator: true) {
  /*Restrict to Edge only*/
  .dashboard-edit-menu-container .button {
    transition-property: bottom, box-shadow, background-color;
  }
}

.dashboard-edit-menu-container .menu-toggle-button {
  background-color: rgba(0, 120, 212, 1);
  background-color: var(--communication-background,rgba(0, 120, 212, 1));
  z-index: 2;
  /*Menu buttons should appear from under the toggle button*/
  opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: var(--text-on-communication-background,rgba(255, 255, 255, 1));
  /* During animation transition, Edge fails to honor button icon color, and the parent button color wins. This ensures the button glyph uses a white foreground.*/
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.dashboard-edit-menu-container .menu-toggle-button:hover,
.dashboard-edit-menu-container .menu-toggle-button:focus {
  background-color: rgba( 43, 136, 216 ,  1 );
  background-color: rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 );
}

.dashboard-edit-menu-container .button-icon {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 13px);
  font-family: bowtie;
  font-size: 24px;
  color: rgba( 255, 255, 255 ,  1 );
  color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.dashboard-edit-menu-container .closed-icon {
  opacity: 1;
  transform: rotate(0);
}

.dashboard-edit-menu-container .open-icon {
  opacity: 0;
  transform: rotate(180deg);
}

.dashboard-edit-menu-container.menu-pinned-open .closed-icon {
  opacity: 0;
  transform: rotate(-180deg);
}

.dashboard-edit-menu-container.menu-pinned-open .open-icon {
  opacity: 1;
  transform: rotate(0);
}

.dashboard-edit-menu-container .add-widget-button {
  background-color: rgba( 16, 124, 16 ,  1 );
  background-color: rgba( var(--palette-accent2-dark,16, 124, 16) ,  1 );
  color: rgba( 255, 255, 255 ,  1 );
  color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  /* During animation transition, Edge fails to honor button icon color, and the parent button color wins. This ensures the button glyph uses a white foreground.*/
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.dashboard-edit-menu-container .add-widget-button:hover {
  background-color: rgba( 16, 124, 16 ,  1 );
  background-color: rgba( var(--palette-accent2-dark,16, 124, 16) ,  1 );
}

.dashboard-edit-menu-container.menu-open .edit-menu .button {
  opacity: 1;
}

.dashboard-edit-menu-container.menu-open .add-widget-button {
  bottom: 90px;
}

/* BladeCatalog styling */
.blade-menu-blade h3.ui-dialog-title {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  font-size: 25px;
  line-height: 30px;
  font-weight: 300;
  text-transform: none;
  white-space: pre-wrap;
}

.bowtie-blade .inline-error-configuration {
  margin-left: 24px;
}

.widget-searchterm-container {
  float: right;
  width: calc(100% - 40px);
  margin-right: 24px;
  margin-bottom: 24px;
  margin-left: 24px;
  position: relative;
  border:  1px solid;
  border-color: rgba( 218, 218, 218 ,  1 );
  border-color: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
  line-height: 34px;
}

.widget-searchterm-container.focus {
  border-color: rgba(0, 120, 212, 1);
  border-color: var(--communication-background,rgba(0, 120, 212, 1));
}

.widget-searchterm-container .widget-searchterm-input {
  border: 0 !important;
  width: calc(100% - 20px) !important;
}

.blade-menu-blade .config-margin {
  margin-top: 10px;
  width: 100%;
  overflow-x: hidden;
}

.blade-menu-blade .extension-gallery-marketing {
  margin-left: 24px;
  margin-top: 10px;
  margin-right: 10px;
  font-size: 14px;
}

.blade-menu-blade .status-indicator.center {
  height: calc(100% - 26px);
}

.blade-menu-blade .widget-list-noresults {
  clear: both;
  height: calc(100% - 99px);
  text-align: center;
  font-size: 14px;
}

.blade-menu-blade .widget-list-container {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  border-bottom:  1px solid;
  border-bottom-color: rgba( 234, 234, 234 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  border-top:  1px solid;
  border-top-color: rgba( 234, 234, 234 ,  1 );
  border-top-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  min-height: 94px;
}

.blade-menu-blade .widget-preview-tile {
  border-bottom:  1px solid;
  border-bottom-color: rgba( 234, 234, 234 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  min-height: 140px;
  padding: 10px 24px 10px 24px;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* Style for the drag and drop helper */
.blade-menu-blade .widget-preview-tile.ui-draggable-dragging {
  background: rgba( 255, 255, 255 ,  1 ) !important;
  background: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 ) !important;
  /* Added !important to override selected background behavior which is much more specific than this selector */
  border: 0;
  box-shadow: 4px 4px 20px rgba( 166, 166, 166 ,  1 );
  box-shadow: 4px 4px 20px rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
  cursor: move !important;
  /* Added !important to override selected background behavior which is much more specific than this selector */
  overflow: hidden;
  /* Don't overflow content when helper is resized to be smaller */
}

.blade-menu-blade .sort-order.dropdown {
  margin-left: 24px;
  font-size: 14px;
  padding-left: 0px;
  padding-top: 5px;
}

.blade-menu-blade .sort-order.dropdown a.selected {
  font-weight: 600;
}

.blade-menu-blade .widget-maincontent {
  width: 390px;
  height: 120px;
}

.blade-menu-blade .widget-preview-text {
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  margin-top: 10px;
  float: left;
  width: 260px;
  margin-left: 20px;
}

.blade-menu-blade .widget-preview-tile .widget-name {
  font-size: 18px;
  line-height: 24px;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  padding: 0 0 0 0;
  margin-top: -3px;
  /*Adjust for line-height gap*/
  /*Truncate the text and end with ellipsis*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blade-menu-blade .widget-preview-tile .widget-description {
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  margin-top: 7px;
  width: 260px;
  height: 60px;
  overflow: hidden;
}

.blade-menu-blade .widget-preview-moreinfo {
  font-size: 14px;
  line-height: 14px;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  padding-top: 0;
  height: 22px;
  overflow: hidden;
}

.blade-menu-blade .widget-publishername {
  float: left;
  padding: 3px;
  padding-top: 4px;
}

.blade-menu-blade .widget-learnmore-link {
  float: right;
  padding: 3px;
  padding-top: 4px;
  color: rgba( 0, 90, 158 ,  1 );
  color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
}

.blade-menu-blade .widget-learnmore-link a, .blade-menu-blade .widget-learnmore-link a:visited {
  display: inline-block;
  margin-right: 4px;
  color: rgba( 0, 90, 158 ,  1 );
  color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
}

.blade-menu-blade .widget-preview-tile.selected,
.blade-menu-blade .widget-preview-tile:hover {
  cursor: pointer;
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}

.blade-menu-blade .widget-preview-tile:focus {
  outline: 3px solid rgba(0, 120, 212, 1);
  outline: 3px solid var(--communication-background,rgba(0, 120, 212, 1));
  outline-offset: -3px;
  border-color: transparent;
}

/*  This is the element that displays scaled preview tile while keeping aspect ratio, using "contain" rule */
.blade-menu-blade .widget-preview-tile .widget-preview-image {
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 100px;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  border:  1px solid;
  border-color: rgba( 218, 218, 218 ,  1 );
  border-color: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
  float: left;
  margin-top: 10px;
}

/*
    Give space for the buttons bar
*/
.blade-menu-blade #catalog-widgets-container > div {
  height: calc(100% - 30px);
}

.blade-menu-blade #catalog-widgets-container .columnlistview {
  width: 525px;
  height: 100%;
  overflow-y: auto;
}

.blade-menu-blade #catalog-widgets-container .columnlistview .widget-preview-text {
  display: inline-block;
  width: 300px;
  vertical-align: top;
}

.blade-menu-blade #catalog-widgets-container .columnlistview .widget-name {
  font-size: 18px;
  font-weight: bold;
}

.team-dashboard-view {
  margin: 15px 20px 15px 20px;
}

.ms-Overlay.dashboard-overlay {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

#widget-catalog-instructions {
  display: none;
}

/*Background in grid*/
.grid-background-show {
  /*To expand/contract parent container when grid grows or shrinks*/
  display: inline-block;
  /*20px for margin left and 20px for margin right - This is necessary when grid size gets reduced by dragging widgets to left, so grid background still fills up*/
  min-width: calc(100% - 40px);
  /*15px for margin top and 15px for margin bottom and 4px for vertical scrollbar showing up when display is inline-block*/
  min-height: calc(100% - 34px);
  background-color: rgba( 218, 218, 218 ,  1 );
  background-color: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
  background-size: 170px 170px;
  background-image: linear-gradient(90deg, rgba( 234, 234, 234 ,  1 ) 0, rgba( 234, 234, 234 ,  1 ) 3px, rgba(232, 232, 232, 0) 4px, rgba(232, 232, 232, 0) 165px, rgba( 234, 234, 234 ,  1 ) 168px, rgba( 234, 234, 234 ,  1 ) 170px), linear-gradient(0deg, rgba( 234, 234, 234 ,  1 ) 0, rgba( 234, 234, 234 ,  1 ) 3px, rgba(232, 232, 232, 0) 4px, rgba(232, 232, 232, 0) 165px, rgba( 234, 234, 234 ,  1 ) 168px, rgba( 234, 234, 234 ,  1 ) 170px);
  background-image: linear-gradient(90deg, rgba( var(--palette-neutral-8,234, 234, 234) ,  1 ) 0, rgba( var(--palette-neutral-8,234, 234, 234) ,  1 ) 3px, rgba(232, 232, 232, 0) 4px, rgba(232, 232, 232, 0) 165px, rgba( var(--palette-neutral-8,234, 234, 234) ,  1 ) 168px, rgba( var(--palette-neutral-8,234, 234, 234) ,  1 ) 170px), linear-gradient(0deg, rgba( var(--palette-neutral-8,234, 234, 234) ,  1 ) 0, rgba( var(--palette-neutral-8,234, 234, 234) ,  1 ) 3px, rgba(232, 232, 232, 0) 4px, rgba(232, 232, 232, 0) 165px, rgba( var(--palette-neutral-8,234, 234, 234) ,  1 ) 168px, rgba( var(--palette-neutral-8,234, 234, 234) ,  1 ) 170px);
}

.toast-message-container {
  position: absolute;
  left: 35%;
  bottom: 16px;
  overflow: hidden;
  height: 100px;
  z-index: 6;
  /*blade menu is z-index 5, must be above that*/
}

.toast-message-container .toast-message {
  width: 200px;
  height: 40px;
  line-height: 40px;
  margin-top: 60px;
  background: rgba(41, 41, 41, 0.8);
  color: rgba( 255, 255, 255 ,  1 );
  color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  font-size: 13px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.3);
}

.toast-message-container .toast-message.toast-message-transistion {
  margin-top: 0px;
}

/*Start from height of toast-message-container - height of toast-message*/
@keyframes move-toast {
  from {
    margin-top: 60px;
    /*Synchronize this with toast-message margin-top*/
  }
  to {
    margin-top: 0px;
    /*Synchronize this with toast-message-transistion margin-top*/
  }
}

@keyframes fade-in {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

.vsts-header .hub-actions-menubar .menu-item[command="new-dashboard"] {
  color: rgba( 16, 110, 190 ,  1 );
  color: rgba( var(--palette-primary-shade-10,16, 110, 190) ,  1 );
}

/*
    We handle the overflow in a special structure for the Blade menu. This is because we slide-in and slide-out and we do not want the default
    horizontal overflow to kick in. To avoid that, we must have the configuration blade outside the main division which already handle the
    overflow. However, since we implement the Blade menu inside a Hub, we have limited option. Dashboard is creating a legit structure that
    allow to have an obscuring curtain  and the Blade outside the content div which is having a custom horizontal overflow. This
    does not affect hubs other than dashboard. This as the consequence that you may see the horizontal overflow when you have a small
    resolution. This is why we need to have the main-container with overflow to hidden since we handle the overflow somewhere else.
*/
body,
html,
.main .hub-view.dashboard-landing .hub-content,
.main-container {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/*Remove all scrollbars. This is required since we want to move from right to left the menu
without having an horizontal scrollbar appearing during the animation.*/
#container-without-scroll {
  /*We want the dashboard to fill-in the remaining vertical space under any notifications so the parent
      container needs to use the flex display property*/
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  position: absolute;
  /*Used to bypass the browser scrollbar*/
  height: 100%;
  width: 100%;
  /*This is only required because the Hub we are on is having the L2Menu which is absolute positionning*/
  overflow: hidden;
}

/*Enable back the scroll for a specific container where the website content is set but not the side menu.*/
#container-with-scroll {
  /*Force the container to fill-in the remaining vertical space after any notifications that are present*/
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  /*Fallback to 100% for IE9 (notifications will push the bottom ~20px of the dashboard off the screen)*/
  height: 100%;
  overflow: auto;
}

#curtain {
  opacity: 0;
}

#curtain.curtain-open {
  position: fixed;
  background-color: rgba( 0, 0, 0 ,  1 );
  background-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
  opacity: 0.4;
  transition: opacity 200ms ease;
  width: 100%;
  height: 100%;
  z-index: 3;
  /*Gridster is 2*/
}

#blade-menu {
  position: absolute;
  /*We have a right default value that need to be considered*/
  top: 0;
  right: 0;
  /*Make sure it's not displayed when we load the page. After, we rely on JavaScript to handle the transform values*/
  bottom: 0;
  width: 435px;
  /*This should synchronize with OpenBladeWidth of BladeMenu*/
  z-index: 5;
  /*The add dashboard is z-index 4, must be above*/
  box-shadow: -3px 0 8px rgba(0, 0, 0, 0.3);
  /*Shadow for the whole menu*/
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  will-change: right;
  /*Performance : Create a new composite layout*/
  border: 1px solid transparent;
  /*allows for high contrast to show a border around the blade*/
}

#blade-menu > div,
.blade-menu-blade {
  position: absolute;
  /* Fix is not used because of animation */
  top: 0;
  bottom: 0;
}

#container-without-scroll .live-preview {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 4;
  /*Above curtain which is at 3*/
  background: rgba( 255, 255, 255 ,  1 );
  background: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  box-shadow: 1px 3px 8px 1px rgba(0, 0, 0, 0.4);
  list-style-type: none;
  will-change: top, left;
  /*Performance : Create a new composite layout*/
}

/*Block every click for the preview*/
#preview-curtain {
  position: absolute;
  background-color: white;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  /*Make sure we are above inputs and links, this is maximum supported by all browsers*/
}

/*
    Configuration title
*/
.blade-menu-blade h3 {
  font-size: 21px;
  font-family: 'Segoe UI', 'Tahoma', 'Arial', 'Verdana';
  font-weight: normal;
  line-height: 24px;
  margin: 0 24px 0 0;
  padding: 15px 0 0 15px;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
  text-transform: none;
}

/* 
    NOTE: This style should be removed when the configuration blade is updated to have the same title padding.
          This style applies to the new widget catalog title.
*/
.blade-menu-blade.blade-level-1 h3 {
  padding: 20px 0 24px 24px;
}

/*
    Title for sub section (general title and custom title)
*/
.blade-menu-blade h4 {
  font-size: 16px;
  font-family: 'Segoe UI', 'Tahoma', 'Arial', 'Verdana';
  font-weight: normal;
  line-height: 19px;
  padding: 0.3em 0;
  /*Taken from new WIT form because redlines said the distance to the underline should match*/
  margin: 0 0 25px 0;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  border-bottom:  1px;
  border-bottom-color: rgba( 234, 234, 234 ,  1 ) solid;
  border-bottom-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 ) solid;
  width: 396px;
}

.widget-configuration-container {
  height: 100%;
  /*take the maximum space available to host the config*/
}

/*
    Title for custom is a different in its position
*/
#blade-configuration-custom h4 {
  margin-top: 15px;
  /*Redlines (40px-25px)*/
}

.blade-container {
  margin: 0;
}

/*
    Handle overflow by creating scrollbar
*/
.main-blade-container {
  overflow: auto;
  height: calc(100% - 145px);
}

.blade-configuration-buttons {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  margin-right: 24px;
  margin-bottom: 24px;
}

/*Blade call to action buttons are right to left*/
.blade-configuration-buttons > * {
  float: right;
}

.blade-configuration-buttons > div > button:disabled {
  cursor: default;
}

#configuration-containers,
.blade-configuration-buttons {
  margin-left: 15px;
}

.bowtie-blade .blade-configuration-buttons {
  margin-top: 15px;
}

/*Remove the blue effect around the list of widget in the catalog*/
.main-blade-container .columnlistview {
  outline: none;
}

/* Reserve 20px on the right for scrollbars. Without this, horizontal scrollbar will appear when VSS.resize forces a vertical scrollbar*/
.blade-menu-blade .third-party #blade-configuration-custom {
  width: calc(100% - 20px);
}

/********************** Catalog blade Structure *******************/
/*
    The actual catalog structure is not built in a perfect structure. It has two level.
    Level1 : Title + (sort/filter+[catalog+market]) + button
    Level2 : Catalog + market

    Since we have those 2 levels, we need 2 flex display. In the future, this could be collapsed in 1.
*/
/*First level is the blade catalog itself. We want a single column.
Second level in the blade catalog itself. Single column also.
*/
.blade-level-1,
.blade-level-1 > #catalog-widgets-container > div {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

/*
Level 2 (catalog-widget-container + market) will take all the remaining space of Level1.
All widgets is having a growing height that take the remaining space*/
.blade-level-1 > #catalog-widgets-container,
.blade-level-1 .widget-list-container {
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.blade-level-1 > #catalog-widgets-container {
  overflow: auto;
}

/*********************** End Catalog blade ********************/
/************************* Styles for Config Elements */
.blade-menu-blade .configuration-label-container {
  width: 399px;
}

.blade-menu-blade .configuration-label-container .bowtie-status-info-outline {
  float: right;
  cursor: pointer;
  margin-top: 3px;
}

.blade-menu-blade .inline-error-configuration {
  color: rgba( 218, 10, 0 ,  1 );
  color: rgba( var(--palette-accent1,218, 10, 0) ,  1 );
  font-size: 12px;
  line-height: 16px;
  min-height: 25px;
  /*In the case the error message is empty, we want to keep the same height so that there is no jumping experience when the error comes and goes*/
  display: inline-block;
  padding-top: 2px;
  max-width: 399px;
  visibility: hidden;
  /*When there is an error the parent gets the class "configuration-error". The inline-error will be visible then*/
}

.blade-menu-blade .inline-error-configuration .icon-error-exclamation {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
}

.blade-menu-blade .inline-error-configuration .bowtie-status-error {
  margin-right: 4px;
}

.blade-menu-blade .configuration-error .inline-error-configuration {
  visibility: visible;
  /*When there is an error the parent gets the class "configuration-error". The inline-error should be visible then*/
}

.blade-menu-blade .configuration-error.main-error-on-config-blade .inline-error-configuration {
  margin: 10px 0;
  /* In case of the main error under the configuration heading we need some space between heading/error and error/general pane*/
}

.blade-menu-blade .bowtie input[type=text]::-ms-clear {
  display: none;
}

.blade-menu-blade .bowtie input[type=text],
.blade-menu-blade .bowtie .combo.input-text-box {
  width: 399px;
}

.blade-menu-blade .bowtie .configuration-label-container label {
  display: inline-block;
}

.normal #blade-configuration-custom .config-settings-field, .normal #blade-configuration-general .config-settings-field {
  max-width: 399px;
}

.wide #blade-configuration-general .config-settings-field {
  margin-right: 20px;
}

.wide #blade-configuration-general .config-settings-field .combo.input-text-box, .wide #blade-configuration-general .config-settings-field input[type=text] {
  width: 100%;
}

/******************************************************** MENU L2 ******************************************************/
/*
    Define styling and positioning. The idea is to work with the current implementation. This is why we are using an absolute solution to handle
    a full width menu.
*/
#dashboard-l2-menu-bar {
  position: absolute;
  /*We change the positioning to absolute to have the bar to go across the whole page*/
  left: 0;
  /*Make sure to take the whole horizontal space to have a full-band (need right to be set too)*/
  right: -25px;
  /*Make sure to take the whole horizontal space to have a full-band (need left to be set too)*/
  background-color: rgba( 244, 244, 244 ,  1 );
  background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
  /*Color of the current bar*/
  top: -4px;
}

/*  
    Every menu tab need to be horizontally aligned. Remove all list 
*/
#dashboard-l2-menu-bar ul {
  list-style: none;
  /*Clean up default value for the list (remove bullet)*/
  padding: 0;
  float: left;
  /*This is required to have a UL with a height. Also, the UL is for tabs which float, followed by other floating elements.*/
}

.L2-hub-title-separator {
  cursor: default;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  display: inline-block;
}

/*
    Every tab has the same style. The width can be different depending of the text's size
*/
#dashboard-l2-menu-bar ul li {
  float: left;
  /*Instead of being on different line, we want them next to each others*/
  margin: 6px 18px 0 0;
  /*Space between tabs*/
  cursor: pointer;
  /*Make it clickable visually*/
}

/*
    Default style for all tab link
*/
#dashboard-l2-menu-bar ul li a {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  /*Default is black, we want to have something more gray*/
}

/*
    Active dashboard has a special representation to make this one with a bigger focus
*/
#dashboard-l2-menu-bar ul li.selected a {
  font-weight: bold;
  padding: 0 0 4px 0;
  /*Give some space for the fake underline which is done by a bottom-borders*/
  border-bottom: 4px solid rgba(0, 120, 212, 1);
  border-bottom: 4px solid var(--communication-background,rgba(0, 120, 212, 1));
  /*The underline is faked with a border, this way we can have more control on the width*/
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
}

/*
    Change the style when hovering the tab
*/
#dashboard-l2-menu-bar ul li a:hover {
  text-decoration: none;
  /*Remove the underline because we greate a ticker one with border*/
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
  /*Selected color and border are different*/
}

/*===================== MENU BAR OVERIDE =======================*/
/*

/*
    This is not part of the hub. We need to make it aboves it. Since our L2Menu is custom and inside the hub we need to change the z-index. It is in the same
    index context so it is enought to have that visible. This make the info message above some widgets which is fine since the user should leave that page to
    get into the new one anyways.
*/
.main .global-message-section {
  z-index: 3;
  /*This is enought to go on the top of the hub, top of widgets, but still below any popup.*/
}

/*
    Contains the textbox, buttons, validation about the creation of a dashboard
*/
#inline-editor-panel {
  float: left;
  /*Required since we want to have the inline floating next to tabs*/
  margin-top: 4px;
  /*Align the editor with the links which is lower to have the blue underline at the bottom of the container.*/
}

/*
    Styles for the buttons in L2 and Dashboard Manager
*/
#dashboard-inline-add,
#dashboard-management,
.dashboard-refresh-timer,
.new-dashboard-name-button,
.dashboard-list-item-delete {
  padding: 0;
  height: 22px;
  width: 22px;
  vertical-align: top;
  background-color: transparent;
  border: 2px solid transparent;
  /*Transparent border, color will be changed on focus*/
}

/*
    The close button need to merge with the textbox to feel like it is one
*/
#dashboard-inline-add.add-to-close {
  background-color: transparent;
  /*Same as the textbox*/
}

/*
    Change the style of the add button if we cannot add new dashboard
*/
#dashboard-inline-add:disabled {
  opacity: 0.4;
}

/*CSS for the auto refresh timer*/
.dashboard-refresh-timer {
  margin-right: 20px;
  width: auto;
  height: 34px;
}

/*
    Remove VSTS default hover/focus shadow effect on buttons
*/
#dashboard-inline-add:hover,
#dashboard-management:hover,
#dashboard-inline-add:focus,
#dashboard-management:focus,
.dashboard-refresh-timer:hover,
.dashboard-refresh-timer:focus,
.dashboard-list-item-delete:hover,
.dashboard-list-item-delete:focus {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  background-color: transparent;
}

/*
    Ensure border remains transparent on hover for buttons
*/
#dashboard-inline-add:hover,
#dashboard-management:hover,
.dashboard-refresh-timer:hover,
.new-dashboard-name-button:hover,
.dashboard-list-item-delete:hover {
  border-color: transparent;
}

/*
    Add blue border on focus for buttons
*/
#dashboard-inline-add:focus,
#dashboard-management:focus,
.dashboard-refresh-timer:focus,
.new-dashboard-name-button:focus,
.dashboard-list-item-delete:focus {
  border-color: rgba( 43, 136, 216 ,  1 );
  border-color: rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 );
  border-radius: 2px;
}

/*
    Sliding effect. When hidden, we set the width to 0. This will require in the JavaScript to set the display to none otherwise
    we will still see a small border.
*/
.hide-input-inline {
  width: 0;
}

/*
    Sliding effect. When showing, we set the width to a defined size. This require a JavaScript method to set the display to inline/block.
*/
.show-input-inline {
  width: 210px;
}

/*
    We cannot change the color because we are not using GlyphIcon but png file (to do later?)
*/
.add-to-close span.icon.icon-add-thin {
  background-image: url("../../_content/Dashboards/Close.png") !important;
  /*This important is only there to override the useless one in sitecss*/
  background-position: 0, 0 !important;
  /*This important is only there to override the useless one in sitecss*/
  background-repeat: no-repeat !important;
  /*This important is only there to override the useless one in sitecss*/
  margin-top: 2px;
}

#dashboard-management .icon-header-settings {
  background-image: url("../../_content/Dashboards/Settings.png") !important;
  /*This important is only there to override the useless one in sitecss*/
  background-position: 0, 0 !important;
  /*This important is only there to override the useless one in sitecss*/
  background-repeat: no-repeat !important;
  /*This important is only there to override the useless one in sitecss*/
}

/*
    Validation area
*/
#dashboard-inline-validation {
  color: rgba( 218, 10, 0 ,  1 );
  color: rgba( var(--palette-accent1,218, 10, 0) ,  1 );
  margin-left: 5px;
  /*Give some space between the textbox and the message*/
  background-color: rgba( 244, 244, 244 ,  1 );
  background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
  /*Override the white background on focus*/
  padding: 3px;
  /*Ensure to have the background that fill-up all the inline division*/
}

/*
    The further right panel of the L2 menu. This one docked on the right side of the screen.
*/
#menu-right-panel {
  float: right;
  margin-right: 20px;
  /*This is the margin of the search feature of the L0*/
  margin-top: 4px;
  /*Create space from the search box on the L0*/
}

/*
    User input for the name of the new dashboard
*/
#inline-editor-panel input {
  border: none;
  background-color: transparent;
  /*We take the color from the container. This is because we have a button with the same color too that merge as a 1 control (2 html elements)*/
  color: rgba( 102, 102, 102 ,  1 );
  color: rgba( var(--palette-neutral-60,102, 102, 102) ,  1 );
  padding-left: 4px;
  height: 22px;
  /*To fix the size of the button since we do not have any border*/
}

/*Remove IE default 'X' button*/
#inline-editor-panel input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

#inline-editor-panel input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: rgba( 102, 102, 102 ,  1 );
  color: rgba( var(--palette-neutral-60,102, 102, 102) ,  1 );
}

#inline-editor-panel .focus,
#inline-editor-panel input:focus {
  outline: none;
  background-color: white;
}

/*
    Overflow is always next to the last tab of the menu
*/
#dashboard-overflow-panel {
  float: left;
}

/*
    Create some space for the ellipsis
*/
#dashboard-overflow-panel .dropdown-menu {
  width: 30px;
  height: 30px;
  line-height: 24px;
}

/*
    The box that contains all overflow dashboards. This one has a special looks and also is having a height restriction.
*/
#dashboard-overflow-panel .filtered-list-popup.popup-content-control {
  background-color: white;
  box-shadow: 0 0 20px rgba(91, 91, 91, 0.4);
  /*Same as the one for the team in L0*/
  max-height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
}

/*
    Over effect to make the div looks like a button.
*/
#dashboard-overflow-panel .dropdown-menu.menu-opened,
#dashboard-overflow-panel .dropdown-menu:hover {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
  cursor: pointer;
  border:  1px solid;
  border-color: rgba( 199, 224, 244 ,  1 );
  border-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
}

/*
    Center the icon
*/
#dashboard-overflow-panel .dropdown-menu .icon {
  margin-left: 7px;
}

/*
    Remove all margin to have a full hover experience that take the full width and height
*/
#dashboard-overflow-panel ul.dashboard-overflow-list {
  margin: 0;
}

/*
    All items are vertically aligned with enought space between.
*/
#dashboard-overflow-panel ul.dashboard-overflow-list li {
  float: none;
  margin: 0;
}

/*
    Links taking the full LI space. This way the user does not need to click the text of the link but any where in the LI.
*/
#dashboard-overflow-panel ul.dashboard-overflow-list li a,
#dashboard-overflow-panel ul.dashboard-overflow-list li a:visited,
#dashboard-overflow-panel ul.dashboard-overflow-list li a:hover {
  margin: 0;
  display: block;
  width: 100%;
  height: 100%;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
  padding: 6px 15px 9px 8px;
  /*15 pixel on the right is required to have all the dashboard name displayed when we have a scrollbar*/
}

/*
    Hover background color change for all dashboard in the overflow.
*/
#dashboard-overflow-panel ul.dashboard-overflow-list li:hover {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}

.dashboards-manager-dialog .views {
  float: none;
  border-bottom:  1px solid;
  border-bottom-color: rgba( 234, 234, 234 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.dashboards-manager-dialog .views .pivot-view {
  font-size: 14px;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  margin-left: 0px;
}

.dashboards-manager-dialog .views .pivot-view li a:hover {
  color: inherit;
}

.dashboards-manager-dialog .views .pivot-view li:first-child a {
  padding-left: 10px;
}

.dashboards-manager-dialog .views .pivot-view li.selected {
  border-top:  1px solid;
  border-top-color: rgba( 234, 234, 234 ,  1 );
  border-top-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  border-left:  1px solid;
  border-left-color: rgba( 234, 234, 234 ,  1 );
  border-left-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  border-right:  1px solid;
  border-right-color: rgba( 234, 234, 234 ,  1 );
  border-right-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  border-bottom: 1px solid white;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}

.dashboards-manager-dialog .views .pivot-view li.selected a {
  color: inherit;
}

.dashboards-manager-dialog .views .pivot-view li.selected a:hover {
  color: inherit;
}

.permissions-manager.bowtie {
  padding-top: 15px;
}

.permissions-manager.bowtie .description {
  color: rgba( 102, 102, 102 ,  1 );
  color: rgba( var(--palette-neutral-60,102, 102, 102) ,  1 );
  margin-left: 30px;
}

.permissions-manager.bowtie .admin-checkbox-container {
  margin-top: 30px;
  margin-left: 30px;
}

.permissions-manager.bowtie .admin-header-container {
  padding-left: 20px;
}

.permissions-manager.bowtie .admin-header-container .admin-hub-title {
  left: 0;
  right: 0;
  font-family: "Segoe UI VSS (Regular)","Segoe UI","-apple-system",BlinkMacSystemFont,Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-weight: 200;
  font-size: 18px;
  color: rgba( 0, 0, 0 ,  1 );
  color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.permissions-manager.bowtie .admin-header-container .admin-hub-subtitle {
  font-weight: 300;
  font-size: 16px;
  padding-top: 25px;
}

.permissions-manager.bowtie .admin-header-container .admin-hub-description {
  padding-top: 15px;
}

/* CreateDashboard dialog styles */
.create-dashboard-dialog {
  text-align: center;
}

.create-dashboard-dialog .create-dashboard-textbox {
  border:  1px solid;
  border-color: rgba( 244, 244, 244 ,  1 );
  border-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
  padding: 0px 4px 4px 5px;
  font-family: 'Segoe UI';
  font-size: 12px;
  background-color: transparent;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

.create-dashboard-dialog .create-dashboard-warning-message {
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  text-align: left;
}

.dashboard-list-item {
  width: 400px;
  height: 40px;
  padding-bottom: 0px;
  padding-top: 4px;
  padding-left: 5px;
  background-color: rgba( 244, 244, 244 ,  1 );
  background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  margin-bottom: 5px;
}

.dashboards-manager {
  padding-top: 15px;
  /* a vertical icon representing drag handle */
}

.dashboards-manager .dashboard-list-container {
  height: 198px;
  max-height: 285px;
  list-style: none;
  margin: 0;
  padding: 0 14px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.dashboards-manager .dashboard-list-item {
  height: 50px;
  padding: 4px;
  padding-top: 8px;
  background-color: white;
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  margin-bottom: 5px;
  width: 100%;
}

.dashboards-manager .dashboard-list-item > * {
  vertical-align: middle;
}

.dashboards-manager .dashboad-manager-drag-handle {
  height: 32px;
  width: 20px;
  display: inline-block;
  font-size: 32px;
  line-height: 32px;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.dashboards-manager .dashboard-list-item-name-container {
  display: inline-block;
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  margin-left: 15px;
  width: 300px;
}

.dashboards-manager .dashboard-list-item-name {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  outline: 0;
  height: 26px;
  padding-left: 10px;
  width: 300px;
}

.dashboards-manager .auto-refresh-checkbox {
  margin-left: 60px;
  height: 14px;
  background-color: transparent;
}

.dashboards-manager .dashboard-list-item-delete {
  float: right;
  margin: 5px 12px 0 8px;
}

.dashboards-manager:not(.disabled) .dashboard-list-item:hover,
.dashboards-manager:not(.disabled) .dashboard-list-item:focus {
  background-color: rgba( 222, 236, 249 ,  1 );
  background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
  border: 1px solid transparent;
  box-shadow: inset 0px 0px 1px 1px rgba( 199, 224, 244 ,  1 );
  box-shadow: inset 0px 0px 1px 1px rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  outline: none;
}

.dashboards-manager:not(.disabled) .dashboard-list-container li.ui-sortable-helper {
  cursor: move;
}

.dashboards-manager:not(.disabled) .dashboad-manager-drag-handle {
  cursor: move;
}

.dashboard-list-header-container {
  padding-top: 24px;
  padding-bottom: 6px;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.dashboard-list-header-name {
  padding-left: 40px;
}

.dashboard-list-header-autorefresh {
  padding-right: 78px;
  float: right;
}

button[disabled].dashboard-list-item-delete {
  cursor: default;
  border: none;
  background-color: transparent;
}

.new-dashboard-name-button, .new-dashboard-name-button:hover {
  margin-top: 11px;
  padding-left: 1px;
  margin-left: -22px;
}

button[disabled].new-dashboard-name-button {
  cursor: default;
  border: none;
  background: none;
  opacity: 0.4;
}

.new-dashboard-name-input {
  margin-top: 10px;
  width: 330px;
  margin-left: 40px;
  margin-bottom: 15px;
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  outline: 0;
  padding-left: 10px;
  padding-right: 20px;
  height: 26px;
}

.dashboards-manager .create-dashboard-field-wrapper {
  display: flex;
  margin-right: 16px;
}

.dashboards-manager #dashboard-manager-createnew {
  width: auto;
  flex: 1 0 auto;
}

.dashboards-manager .new-dashboardname-create-button {
  margin-left: 10px;
  flex: 0 0 auto;
}

.new-dashboard-name-input::-webkit-input-placeholder,
.new-dashboard-name-input::-moz-placeholder,
.new-dashboard-name-input:-ms-input-placeholder {
  color: rgba( 200, 200, 200 ,  1 );
  color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.ui-dialog .addwidget-dialog.ui-dialog-content.dialog {
  overflow: hidden;
  margin: 0px;
}

#dashboard-refresh-timer-text {
  display: inline-block;
  color: rgba( 16, 110, 190 ,  1 );
  color: rgba( var(--palette-primary-shade-10,16, 110, 190) ,  1 );
  font-size: 11px;
  margin-top: 3px;
  white-space: nowrap;
}

.dashboard-timer-visible-class {
  visibility: visible;
}

.dashboard-timer-hidden-class {
  visibility: hidden;
}

.dashboard-refresh-icon {
  font-size: 11px;
  font-family: bowtie;
  margin-right: 4px;
  color: rgba( 16, 110, 190 ,  1 );
  color: rgba( var(--palette-primary-shade-10,16, 110, 190) ,  1 );
}

.disabled-color {
  color: rgba( 244, 244, 244 ,  1 );
  color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
}

.dashboard-manager-message-area {
  margin-bottom: 12px;
}

/*Every Gridster's container are inside a widget-host. Remove list appearance and place holder list appearance*/
li.widgethost,
li.preview-holder {
  list-style-type: none;
}

/*
    The inherited height ensures that the widget takes the full span of the widget container rather than just the text region of the widget
    This ensures more consistent behaviour for backgrounds on the widget as well as the remove widget hover behaviour.
*/
.widgethost.gs-w > div,
.widget-container,
.widget-container .internal-content-host,
.widget-container .external-content-host,
.widget-lightbox-dialog > div > div {
  height: inherit;
}

.widget-container .internal-content-host {
  background: rgba( 255, 255, 255 ,  1 );
  background: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

/*
    Setup the shadow for every widgethost
*/
.widgethost {
  box-shadow: 2px 2px 3px rgba( 218, 218, 218 ,  1 );
  box-shadow: 2px 2px 3px rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
}

.widget-container {
  /** Apply high contrast-only borders to widget containers */
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.widget-lightbox-dialog .widget-container {
  border: none;
}

.widgethost.hidden-widget-host {
  visibility: hidden;
  opacity: 0;
}

/*
   Setup invalid widget text.
*/
.widgethost .invalid-widget {
  font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
  font-size: 16px;
  margin-left: 20%;
  margin-top: 20%;
  display: block;
}

/*
 This allows to display tooltip or any Html element that goes beyond the widget boundary and still be always visible.
*/
#widgets-container .widgethost:hover {
  z-index: 3;
  /*The value of 3 is not random. It's +1 from the default given to Gridster tile.*/
}

/*
    Setup the animation for the widget host
*/
#widgets-container .widgethost {
  transition: transform 500ms !important;
  /*Argg important here but this is required (for the moment) because this is fighting with Gridster*/
  transition-timing-function: ease-in;
}

/*
    Drag will scale up of few percentage the size of the widget to produce a perspective effect of moving out the widget of the grid
*/
#widgets-container .widgethost.dragging.player {
  transform: scale(1.05, 1.05);
}

/*
    Dragging left change the z axis of few degrees
*/
#widgets-container .widgethost.dragging.player.leftdrag {
  transform: scale(1.05, 1.05) rotateZ(-1deg);
}

/*
    Dragging right change the z axis of few degrees
*/
#widgets-container .widgethost.dragging.player.rightdrag {
  transform: scale(1.05, 1.05) rotateZ(1deg);
}

/*
    Contains a new shadow when dragging
*/
#widgets-container .widgethost.dragging.player {
  box-shadow: 4px 4px 20px rgba( 166, 166, 166 ,  1 );
  box-shadow: 4px 4px 20px rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
}

/* Widget Menu control styles*/
.widget-menu-header {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
}

.widget-menu-header .ellipsis-menubar.menu-bar:not(.no-height) {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
}

.widget-menu-header .ellipsis-menubar.menu-bar:not(.no-height) > li.menu-item {
  padding: 5px;
  border: none;
}

.widget-menu-header .ellipsis-menubar.menu-bar:not(.no-height) > li.menu-item .ms-Icon--Settings {
  font-weight: bold;
  padding-left: 2px;
  margin: 1px 10px 0 0px;
  float: left;
}

.widget-menu-header .ellipsis-menubar.menu-bar:not(.no-height) > li.menu-item .ms-Icon--Cancel {
  margin: 1px 10px 0 0px;
  padding-left: 2px;
  float: left;
  color: red;
  font-weight: bolder;
}

.widget-menu-header .ellipsis-menubar.menu-bar:not(.no-height) > li.menu-item.focus, .widget-menu-header .ellipsis-menubar.menu-bar:not(.no-height) > li.menu-item.hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.widget-menu-header .ellipsis-menubar.menu-bar:not(.no-height) > li.menu-item.hover {
  outline: none;
}

.widget-menu-header .ellipsis-menubar.menu-bar:not(.no-height) > li.menu-item.focus {
  border:  1px solid;
  border-color: rgba( 0, 0, 0 ,  1 );
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.widget-menu-header .ellipsis-menubar.menu-bar:not(.no-height) > li.menu-item .sub-menu li.menu-item.disabled .ms-Icon--Cancel {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.widget-menu-header .ellipsis-menubar.menu-bar > li.menu-item {
  padding: 5px;
  border: none;
}

.widget-menu-header .ellipsis-menubar.menu-bar > li.menu-item .ms-Icon--Settings {
  font-weight: bold;
  padding-left: 2px;
  margin: 1px 10px 0 0px;
  float: left;
}

.widget-menu-header .ellipsis-menubar.menu-bar > li.menu-item .ms-Icon--Cancel {
  margin: 1px 10px 0 0px;
  padding-left: 2px;
  float: left;
  color: red;
  font-weight: bolder;
}

.widget-menu-header .ellipsis-menubar.menu-bar > li.menu-item .sub-menu li.menu-item.disabled .ms-Icon--Cancel {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.widget-menu-header .ellipsis-menubar.menu-bar > li.menu-item > .bowtie-icon {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}

.light-widget .widget-menu-header .ellipsis-menubar.menu-bar > li.menu-item > .bowtie-icon {
  color: black;
}

.dark-widget .widget-menu-header .ellipsis-menubar.menu-bar > li.menu-item.focus, .dark-widget .widget-menu-header .ellipsis-menubar.menu-bar > li.menu-item.hover {
  background-color: rgba(0, 0, 0, 0.18);
}

.dark-widget .widget-menu-header .ellipsis-menubar.menu-bar > li.menu-item > .bowtie-icon {
  color: white;
}

.dark-widget .widget-menu-header .ellipsis-menubar.no-height .menu-bar > li.menu-item {
  background: none;
}

.widget-menu-header .lightbox-button {
  width: 26px;
  height: 26px;
  display: inline-block;
  cursor: pointer;
  padding: 5px;
  margin: 0;
  border: none;
  background-color: transparent;
  border-radius: 0px;
  box-shadow: none;
}

/* Removing focus border in firefox */
.widget-menu-header .lightbox-button::-moz-focus-inner {
  border: 0;
}

.widget-menu-header .lightbox-button.focus:not(.no-height) {
  background-color: rgba( 239, 239, 239 ,  1 );
  background-color: rgba( var(--palette-neutral-6,239, 239, 239) ,  1 );
  border:  1px solid;
  border-color: rgba( 0, 0, 0 ,  1 );
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.widget-menu-header .lightbox-button:hover {
  background-color: rgba( 239, 239, 239 ,  1 );
  background-color: rgba( var(--palette-neutral-6,239, 239, 239) ,  1 );
  border: none !important;
  /**need to override as the button style is applied by the core.css via an override*/
}

.widget-menu-header .lightbox-button.no-height .bowtie-icon {
  visibility: hidden;
  height: 0px;
}

.widget-menu-header .lightbox-button .bowtie-icon.bowtie-view-full-screen {
  vertical-align: text-top;
}

.widget-lightbox-menu-header {
  position: absolute;
  top: 0px;
  right: 48px;
}

/* Overriding dialog styles for a lightbox dialog withotu title, specific enough to override :not in bowtie css */
.widget-lightbox-dialog.no-title .ui-dialog-titlebar {
  margin: 0 !important;
  /* Base bowtie dialog style has :not() which always takes over, so force-overriding it here */
  padding: 14px !important;
  /* Base bowtie dialog style has :not() which always takes over, so force-overriding it here */
}

.widget-lightbox-dialog.no-title .ui-dialog-title {
  display: none !important;
  /* Base bowtie dialog style has :not() which always takes over, so force-overriding it here */
}

.widget-lightbox-dialog.ui-dialog .dialog.ui-dialog-content.modal-dialog {
  overflow: hidden;
}

/* Matching bowtie title button size */
.widget-lightbox-dialog .widget-menu-header .ellipsis-menubar.menu-bar > .menu-item.icon-only {
  padding-top: 8px;
  border: none;
  width: 48px;
  height: 32px;
  padding-left: 15px;
}

.widget-lightbox-dialog .widget-menu-header .ellipsis-menubar.menu-bar > .menu-item.icon-only.focus {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
  /* Matching bowtie title button color*/
  border:  1px solid;
  border-color: rgba( 0, 0, 0 ,  1 );
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.widget-lightbox-dialog .widget-menu-header .ellipsis-menubar.menu-bar > .menu-item.icon-only:hover {
  background-color: rgba(190, 215, 245, 0.2);
  /* Matching bowtie title button color*/
}

/* Overriding bowtie grab handle to look like legacy dialog */
/* Base bowtie dialog style has :not() which always takes over, so force-overriding it here */
.widget-lightbox-dialog .ui-resizable-se {
  width: 18px;
  height: 18px;
  right: 3px !important;
  font-size: 18px !important;
  bottom: 3px !important;
}

/* Widget Loading control styles */
.widget-loading-control-container {
  overflow: hidden;
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.widget-loading-control {
  padding: 14px;
  height: 100%;
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.widget-loading-control > .widgetname {
  font-size: 16px;
  line-height: 21px;
  color: rgba( 200, 200, 200 ,  1 );
  color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  word-wrap: normal;
  cursor: default;
  margin-bottom: 3px;
  margin-top: -3px;
  /* Needed to remove line-height gap on top of the line*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.widget-loading-control .widget-loading-image {
  width: calc(100% - 14px * 2);
  height: calc(100% - 14px * 2  - 18px);
  /* 18px is to account for the gap left at the top for the widget title */
  position: absolute;
  top: 34px;
  left: 14px;
  opacity: 0.5;
  -webkit-animation: loading-opacity 1.5s infinite alternate;
  -moz-animation: loading-opacity 1.5s infinite alternate;
  -ms-animation: loading-opacity 1.5s infinite alternate;
  -o-animation: loading-opacity 1.5s infinite alternate;
  animation: loading-opacity 1.5s infinite alternate;
}

@-webkit-keyframes loading-opacity {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0.1;
  }
}

@-moz-keyframes loading-opacity {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0.1;
  }
}

@-ms-keyframes loading-opacity {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0.1;
  }
}

@-o-keyframes loading-opacity {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0.1;
  }
}

@keyframes loading-opacity {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0.1;
  }
}

.widget-loading-control .widget-lightbox-loading-animation {
  background-image: url(../../_content/dashboards/lightbox-loading.gif);
  width: 128px;
  height: 128px;
  opacity: 0.3;
  top: calc(50% - 64px);
  position: absolute;
  left: calc(50% - 64px);
}

/* Widget Edit Overlay Styles */
.widget-edit-overlay-control {
  display: none;
  /* Hidden by default */
  background: none;
}

.widget-edit-overlay-control.widget-edit-overlay-control-show {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  /*Be sure we are above the error overlay*/
}

.widget-edit-menu {
  margin: 6px;
  text-align: right;
  float: right;
  /*Required to not expand all the width. Give more space for dragging*/
  opacity: 1;
  transition: opacity 1s ease;
}

/* When the grid is obscured, hide the edit menu since users cannot interact with it */
.gridster.obscured .widget-edit-menu {
  opacity: 0;
}

.widget-edit-menu-button-container {
  display: inline-block;
  margin-left: 4px;
}

.widget-edit-menu-button-container:first-child {
  margin-left: 0;
}

.widget-edit-menu-button-container .widget-edit-menu-button {
  display: inline-block;
  background-color: rgba( 239, 239, 239 ,  1 );
  background-color: rgba( var(--palette-neutral-6,239, 239, 239) ,  1 );
  border-radius: 1px;
  border:  2px solid;
  border-color: rgba( 255, 255, 255 ,  1 );
  border-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 0;
  /* Overriding corecss */
  height: 32px;
  width: 32px;
}

.widget-edit-menu-button-container .widget-edit-menu-button:hover,
.widget-edit-menu-button-container .widget-edit-menu-button:focus {
  background-color: rgba( 200, 200, 200 ,  1 );
  background-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.widget-edit-menu-button-container .widget-edit-menu-button:active {
  background-color: rgba(0, 0, 0, .55);
  background-color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  border-color: rgba( 166, 166, 166 ,  1 );
  border-color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
}

/*Change the cursor when dragging a widget*/
.widget-drag-handle {
  cursor: move;
}

/*"When overlay is shown, the cursor over the menu button should remain a normal pointer, not the move cursor*/
.widget-edit-overlay-control-show .widget-edit-menu-button {
  cursor: pointer;
}

.config-settings-field {
  /* NOTE: Needs to be rectified with the settings in BladeMenu.css */
  /* Error underneath field */
}

.config-settings-field .configuration-label-container {
  float: none;
  width: auto;
  padding-top: 2px;
}

.config-settings-field .inline-error-configuration {
  display: block;
}