* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  overflow: hidden !important;
}

body {
  font-family: "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: normal;
  height: 100vh;
  margin: 0;
  padding: 0;
}

#designerRootHost {
  height: 100vh;
}

@font-face {
  font-family: "FabricMDL2Icons";
  src: url("https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons-3.54.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

.acd-markdown-container :first-child {
  margin-top: 0;
}

.acd-markdown-container :last-child {
  margin-bottom: 0;
}

.acd-designer {
  --acd-scrollbarThumbHoverBackgroundColor: #cdcdcd;

  --acd-tabContainerCollapsedBackgroundColor: #f6f6f6;

  --acd-accentColor: #2d7bb7;
  --acd-cardAreaBackgroundColor: #f6f6f6;
  --acd-propertySheetBackgroundColor: #f9f9f9;

  --acd-toolboxBackgroundColor: white;
  --acd-toolboxBorderColor: #d2d2d2;
  --acd-toolboxBorder: 1px solid var(--acd-toolboxBorderColor);
  --acd-toolboxHeaderFontColor: black;
  --acd-toolboxHeaderBackgroundColor: #f1f1f1;
  --acd-toolboxHeaderCommandButtonFontColor: gray;
  --acd-toolboxHeaderCommandButtonHoverBackgroundColor: rgba(0, 0, 0, 0.1);
  --acd-toolboxHeaderCommandButtonActiveBackgroundColor: rgba(0, 0, 0, 0.3);

  --acd-errorPaneFontColor: white;
  --acd-errorPaneBackgroundColor: var(--acd-accentColor);
  --acd-selectedErrorMessageBackgroundColor: navy;

  --acd-inplaceEditorOutline: 1px dashed var(--acd-accentColor);
  --acd-inplaceEditorBackgroundColor: white;

  --acd-textBlockInplaceEditorFontColor: black !important;
  --acd-toolPaletteItemIconColor: var(--acd-accentColor);
  --acd-treeViewItemIconColor: var(--acd-accentColor);

  --acd-peerBorderColor: var(--acd-accentColor);
  --acd-peerDragdOverBorderColor: green;
  --acd-peerInvisibleBackgroundColor: transparent;
  --acd-peerInvisibleForegroundColor: rgba(255, 255, 255, 0.4);
  --acd-peerOtherLayoutBackgroundColor: rgba(128, 0, 0, 0.2);
  --acd-peerOtherLayoutForegroundColor: rgba(255, 0, 0, 0.4);
  --acd-peerButtonBorder: 1px solid var(--acd-accentColor);
  --acd-peerButtonFontColor: var(--acd-accentColor);
  --acd-peerButtonBackgroundColor: white;
  --acd-peerButtonHoverFontColor: white;
  --acd-peerButtonHoverBackgroundColor: var(--acd-accentColor);
  --acd-peerButtonHeight: 23px;
  --acd-peerSelectedBorder: 1px solid var(--acd-accentColor);

  --acd-paletteCategoryBackgroundColor: #eeeeee;
  --acd-paletteCategoryFontColor: black;
  --acd-paletteItemFontColor: black;
  --acd-paletteItemHoverBackgroundColor: #eeeeee;

  --acd-treeViewInfoMessageFontColor: black;
  --acd-treeItemFontColor: black;
  --acd-treeItemSelectedBackgroundColor: #bce2ff;
  --acd-treeItemHoverBackgroundColor: #eeeeee;
  --acd-treeItemSelectedHoverBackgroundColor: #a3d8ff;
  --acd-treeItemAdditionalTextFontColor: #757575;
  --acd-treeItemExpandCollapseButtonFontColor: black;

  --acd-dataTreeItemAdditionalTextFontColor: var(--acd-accentColor);

  --acd-toolbarBackgroundColor: #f1f1f1;
  --acd-toolbarBorder: 1px solid var(--acd-toolboxBorderColor);
  --acd-toolbarElementFontColor: black;
  --acd-toolbarButtonHoverBackgroundColor: white;
  --acd-toolbarButtonHoverBorder: 1px solid gray;
  --acd-toolbarButtonHoverActiveBackgroundColor: #dddddd;
  --acd-toolbarButtonHoverActiveBorder: 1px solid black;
  --acd-toolbarButtonDisabledFontColor: InactiveCaptionText;
  --acd-toolbarButtonDisabledBackgroundColor: transparent;
  --acd-toolbarSeparatorColor: #d2d2d2;

  --acd-jsonEditorBackgroundColor: transparent;

  --acd-sampleItemThumbnailBorder: 1.5px solid #cccccc;
  --acd-sampleItemThumbnailHoverBoxShadow: 0 0 20px -5px #cccccc;
  --acd-sampleItemTitleFontColor: black;

  --acd-focusRectangleColor: black;

  --popupContainerBorder: 1px solid #eeeeee;
  --popupContainerBackgroundColor: white;
  --popupContainerBoxShadow: 0 0 15px -5px rgba(0, 0, 0, 0.4);
  --dropdownBorder: 1px solid #eeeeee;
  --dropdownHoverBorder: 1px solid #0078d7;
  --dropdownItemFontColor: #333333;
  --dropdownButtonHoverBackgroundColor: #0078d7;
  --dropdownItemHoverBackgroundColor: #eeeeee;

  --dragVisualBoxShadow: 0 0 15px -5px rgba(0, 0, 0, 0.5);

  --teamsContainerBackgroundColor: #e8ebfa;
  --teamsContainerCardHostBorderColor: #e0e0e0;
}

.acd-designer.acd-dark {
  --acd-scrollbarThumbHoverBackgroundColor: #404040;

  --acd-tabContainerCollapsedBackgroundColor: #1f1f1f;

  --acd-cardAreaBackgroundColor: #1f1f1f;
  --acd-propertySheetBackgroundColor: #1a1a1a;

  --acd-toolboxBackgroundColor: #1a1a1a;
  --acd-toolboxHeaderFontColor: white;
  --acd-toolboxHeaderBackgroundColor: #292929;
  --acd-toolboxBorderColor: #333333;
  --acd-toolboxHeaderCommandButtonHoverBackgroundColor: rgba(
    255,
    255,
    255,
    0.1
  );
  --acd-toolboxHeaderCommandButtonActiveBackgroundColor: rgba(
    255,
    255,
    255,
    0.3
  );

  --acd-paletteCategoryBackgroundColor: #292929;
  --acd-paletteCategoryFontColor: white;
  --acd-paletteItemFontColor: white;
  --acd-paletteItemHoverBackgroundColor: #292929;

  --acd-treeViewInfoMessageFontColor: white;
  --acd-treeItemFontColor: white;
  --acd-treeItemSelectedBackgroundColor: #343434;
  --acd-treeItemHoverBackgroundColor: #404040;
  --acd-treeItemSelectedHoverBackgroundColor: #404040;
  --acd-treeItemAdditionalTextFontColor: #757575;
  --acd-treeItemExpandCollapseButtonFontColor: white;

  --acd-jsonEditorBackgroundColor: #1a1a1a;

  --acd-toolbarBackgroundColor: #1a1a1a;
  --acd-toolbarElementFontColor: white;
  --acd-toolbarButtonHoverBackgroundColor: #343434;
  --acd-toolbarButtonHoverBorder: 1px solid gray;
  --acd-toolbarButtonHoverActiveBackgroundColor: #404040;
  --acd-toolbarButtonHoverActiveBorder: 1px solid gray;
  --acd-toolbarButtonDisabledFontColor: InactiveCaptionText;
  --acd-toolbarButtonDisabledBackgroundColor: transparent;
  --acd-toolbarSeparatorColor: gray;

  --acd-peerButtonBorder: 1px solid var(--acd-accentColor);
  --acd-peerButtonFontColor: var(--acd-accentColor);
  --acd-peerButtonBackgroundColor: black;
  --acd-peerButtonHoverFontColor: black;
  --acd-peerButtonHoverBackgroundColor: var(--acd-accentColor);

  --acd-sampleItemThumbnailBorder: 1.5px solid black;
  --acd-sampleItemThumbnailHoverBoxShadow: 0 0 20px -5px rgba(0, 0, 0, 0.4);
  --acd-sampleItemTitleFontColor: white;

  --acd-focusRectangleColor: white;

  --popupContainerBorder: 1px solid #404040;
  --popupContainerBackgroundColor: #1a1a1a;
  --popupContainerBoxShadow: 0 0 15px -5px rgba(0, 0, 0, 0.4);
  --dropdownBorder: 1px solid black;
  --dropdownHoverBorder: 1px solid #0078d7;
  --dropdownItemFontColor: white;
  --dropdownButtonHoverBackgroundColor: #0078d7;
  --dropdownItemHoverBackgroundColor: #404040;

  --paletteItemFocusRectangleColor: white;

  --teamsContainerBackgroundColor: #2b2b40;
  --teamsContainerCardHostBorderColor: #0f0f0f;
}

.teams-card {
  border: 1px solid var(--teamsContainerCardHostBorderColor);
  border-radius: 6px;
}

.acd-designer-root {
}

.acd-treeView-info-message {
  color: var(--acd-treeViewInfoMessageFontColor);
}

.acd-designer *::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.acd-designer *::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 2.5px;
}

.acd-designer *:hover::-webkit-scrollbar-thumb {
  background-color: var(--acd-scrollbarThumbHoverBackgroundColor);
}

.content {
  display: flex;
  flex: 1 1 auto;
  overflow-y: hidden;
}

.acd-designer-cardArea {
  flex: 1 1 70%;
  background-color: var(--acd-cardAreaBackgroundColor);
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.acd-designer-host {
  display: flex;
  margin: 20px 0;
  padding: 0 40px 0 20px;
  width: max-content;
}

.acd-designer-card-header {
  display: none;
}

.acd-canvas {
  outline: none;
}

.acd-hidden {
  display: none !important;
}

.acd-toolPalette-pane {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  background-color: var(--acd-toolboxBackgroundColor);
  border-right: var(--acd-toolboxBorder);
}

.acd-treeView {
  margin: 0;
}

.acd-treeView-pane {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 360px;
  background-color: var(--acd-toolboxBackgroundColor);
}

.acd-treeView-host {
  flex: 1 1 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 6px;
  background-color: var(--acd-toolboxBackgroundColor);
}

.acd-propertySheet-pane {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 360px;
  background-color: var(--acd-propertySheetBackgroundColor);
}

.acd-propertySheet-host {
  flex: 1 1 100%;
}

.acd-vertical-splitter {
  border-left: var(--acd-toolboxBorder);
  cursor: ew-resize;
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  z-index: 1;
}

.acd-horizontal-splitter {
  border-top: var(--acd-toolboxBorder);
  cursor: ns-resize;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  z-index: 1;
}

.acd-code-editor {
  overflow: hidden;
}

.acd-json-editor-pane {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  height: 360px;
  background-color: var(--acd-jsonEditorBackgroundColor);
}

.acd-json-editor-host {
  flex: 1 1 100%;
}

.acd-error-pane {
  flex: 0 0 65px;
  color: var(--acd-errorPaneFontColor);
  background-color: var(--acd-errorPaneBackgroundColor);
  border-top: var(--acd-toolboxBorder);
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
}

.acd-error-pane-message {
  padding: 1px 4px 2px 4px;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acd-error-pane-message.selectable {
  cursor: pointer;
}

.acd-error-pane-message.selectable:hover {
  background-color: var(--acd-selectedErrorMessageBackgroundColor);
}

/*
    In-place editors
*/

.acd-inplace-editor-host {
  box-sizing: border-box;
  position: absolute;
  display: flex;
  outline: var(--acd-inplaceEditorOutline);
  background-color: var(--acd-inplaceEditorBackgroundColor);
}

.acd-inplace-editor {
  flex: 1 1 100%;
  align-items: stretch;
}

.acd-textBlock-inplace-editor {
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  resize: none;
}

.acd-open-sample-item {
  width: 350px;
  padding: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.acd-open-sample-item-thumbnail {
  overflow: hidden;
  width: 100%;
  border: var(--acd-sampleItemThumbnailBorder);
  border-radius: 6px;
}

.acd-open-sample-item-title {
  margin-top: 10px;
  color: var(--acd-sampleItemTitleFontColor);
}

.acd-open-sample-item:hover > .acd-open-sample-item-thumbnail {
  box-shadow: var(--acd-sampleItemThumbnailHoverBoxShadow);
}

.acd-open-sample-item:hover > .acd-open-sample-item-title {
  font-weight: bold;
}

/*
    Icons
*/

.acd-icon {
  font-family: "FabricMDL2Icons";
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
}

.acd-toolPalette-icon {
  color: var(--acd-toolPaletteItemIconColor);
}

.acd-treeView-icon {
  color: var(--acd-treeViewItemIconColor);
}

.acd-icon-compoundButton::before {
  content: "\F6C0";
}

.acd-icon-icon::before {
  content: "\E946";
}

.acd-icon-codeBlock::before {
  content: "\E943";
}

.acd-icon-rating::before {
  content: "\E735";
}

.acd-icon-ratingInput::before {
  content: "\E734";
}

.acd-icon-progressBar::before {
  content: "\F2C2";
}

.acd-icon-progressRing::before {
  content: "\F16A";
}

.acd-icon-donutChart::before {
  content: "\F368";
}

.acd-icon-pieChart::before {
  content: "\EB05";
}

.acd-icon-horizontalBarChart::before {
  content: "\E9EB";
}

.acd-icon-horizontalBarChartStacked::before {
  content: "\F24D";
}

.acd-icon-verticalBarChart::before {
  content: "\E9EC";
}

.acd-icon-verticalBarChartGrouped::before {
  content: "\F831";
}

.acd-icon-lineChart::before {
  content: "\F24E";
}

.acd-icon-gaugeChart::before {
  content: "\EB24";
}

.acd-icon-reset::before {
  content: "\EDDD";
}

.acd-icon-bolt::before {
  content: "\E945";
}

.acd-icon-addColumn::before {
  content: "\F1D6";
}

.acd-icon-remove::before {
  content: "\E711";
}

.acd-icon-drag::before {
  content: "\E7C2";
}

.acd-icon-defaultElementIcon::before {
  content: "\F50B";
}

.acd-icon-image::before {
  content: "\ECAB";
}

.acd-icon-adaptiveCard::before {
  content: "\EEBD";
}

.acd-icon-column::before {
  content: "\E799";
}

.acd-icon-columnSet::before {
  content: "\F1D5";
}

.acd-icon-container::before {
  content: "\E739";
}

.acd-icon-factSet::before {
  content: "\F2A2";
}

.acd-icon-actionSet::before {
  content: "\E945";
}

.acd-icon-image::before {
  content: "\EB9F";
}

.acd-icon-imageSet::before {
  content: "\E7AA";
}

.acd-icon-inputChoiceSet::before {
  content: "\F2C7";
}

.acd-icon-inputDate::before {
  content: "\E787";
}

.acd-icon-inputNumber::before {
  content: "\EDC4";
}

.acd-icon-inputText::before {
  content: "\EDC3";
}

.acd-icon-inputTime::before {
  content: "\E917";
}

.acd-icon-inputToggle::before {
  content: "\E73A";
}

.acd-icon-textBlock::before {
  content: "\E8E9";
}

.acd-icon-richTextBlock::before {
  content: "\EDC2";
}

.acd-icon-carousel::before {
  content: "\F26F";
}

.acd-icon-carouselPage::before {
  content: "\EF6B";
}

.acd-icon-chevronDown::before {
  content: "\E70D";
}

.acd-icon-chevronUp::before {
  content: "\E70E";
}

.acd-icon-chevronRight::before {
  content: "\E76C";
}

.acd-icon-chevronLeft::before {
  content: "\E76B";
}

.acd-icon-newCard::before {
  content: "\F321";
}

.acd-icon-fullScreen::before {
  content: "\E740";
}

.acd-icon-actionShowCard::before {
  content: "\EEBD";
}

.acd-icon-actionOpenUrl::before {
  content: "\E71B";
}

.acd-icon-actionSubmit::before {
  content: "\E73E";
}

.acd-icon-actionToggleVisibility::before {
  content: "\E7B3";
}

.acd-icon-actionHttp::before {
  content: "\E774";
}

.acd-icon-copy::before {
  content: "\E8C8";
}

.acd-icon-help::before {
  content: "\E897";
}

.acd-icon-header-expanded::before {
  content: "\F166";
}

.acd-icon-header-collapsed::before {
  content: "\F164";
}

.acd-icon-undo::before {
  content: "\E7A7";
}

.acd-icon-redo::before {
  content: "\E7A6";
}

.acd-icon-media::before {
  content: "\EB1C";
}

.acd-icon-dot::before {
  content: "\E915";
}

.acd-icon-dataStructure::before {
  content: "\EC8D";
}

.acd-icon-preview::before {
  content: "\E8A1";
}

.acd-icon-open::before {
  content: "\ED25";
}

.acd-icon-customPaletteItem::before {
  content: "\ECAA";
}

.acd-icon-table::before {
  content: "\ED86";
}

.acd-icon-tableRow::before {
  content: "\F82A";
}

.acd-icon-tableCell::before {
  content: "\F50A";
}

.acd-icon-badge::before {
  content: "\EC1B";
}

/*
      Side panes
  */

.acd-dockedLeft {
  border-right: var(--acd-toolboxBorder);
}

.acd-dockedRight {
  border-left: var(--acd-toolboxBorder);
}

.acd-verticalCollapsedTabContainer {
}

.acd-horizontalCollapsedTabContainer {
  display: flex;
  flex: 0 0 auto;
  border-top: var(--acd-toolboxBorder);
}

.acd-horizontalCollapsedTabContainer > .acd-toolbox-header {
  border-right: var(--acd-toolboxBorder);
}

.acd-verticalCollapsedTabContainer.acd-dockedLeft > .acd-toolbox-header {
  width: 32px;
  height: 170px;
  border-bottom: var(--acd-toolboxBorder);
}

.acd-verticalCollapsedTabContainer.acd-dockedLeft .acd-toolbox-header-content {
  width: 170px;
  height: 32px;
  transform-origin: 0 0;
  transform: rotate(-90deg) translate(-170px, 0px);
}

.acd-verticalCollapsedTabContainer.acd-dockedRight > .acd-toolbox-header {
  width: 32px;
  height: 170px;
  border-bottom: var(--acd-toolboxBorder);
}

.acd-verticalCollapsedTabContainer.acd-dockedRight .acd-toolbox-header-content {
  width: 170px;
  height: 32px;
  transform-origin: 0 100%;
  transform: rotate(90deg) translate(-32px, 0px);
}

.acd-sidepanel-parent {
  display: flex;
  position: relative;
}

.acd-sidepanel-parent-vertical {
  flex-direction: row;
  overflow-x: hidden;
}

.acd-sidepanel-parent-horizontal {
  flex-direction: column;
  overflow-y: hidden;
}

.acd-sidepanel-host {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
}

.acd-sidepanel-host-vertical {
  flex-direction: column;
}

.acd-sidepanel-host-horizontal {
  flex-direction: row;
}

.acd-toolbox {
  overflow: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.acd-toolbox-stretch {
  flex: 1 1 auto;
}

.acd-toolbox-no-stretch {
  flex: 0 0 auto;
}

.acd-toolbox-header {
  height: 32px;
  cursor: pointer;
  flex: 0 0 auto;
}

.acd-toolbox-header-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--acd-toolboxHeaderBackgroundColor);
}

.acd-toolbox-header-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--acd-toolboxHeaderFontColor);
  font-weight: 600;
}

.acd-toolbox-header-commandButton {
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 100%;
  padding: 4px 8px;
  color: var(--acd-toolboxHeaderCommandButtonFontColor);
  outline-offset: -2px;
}

.acd-toolbox-header-commandButton:hover {
  background-color: var(--acd-toolboxHeaderCommandButtonHoverBackgroundColor);
}

.acd-toolbox-header-commandButton:active:hover {
  background-color: var(--acd-toolboxHeaderCommandButtonActiveBackgroundColor);
}

.acd-toolbox-header-commandsHost {
  display: flex;
  height: 100%;
}

.acd-previewRightAndBottomDocks {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  overflow: hidden;
}

.acd-previewAndBottomDocks {
  display: flex;
  flex: 1 1 100%;
  overflow: hidden;
  min-height: 30%;
}

.acd-canvas.dragging {
  cursor: move;
}

.acd-canvas.dragging > .acd-peer:hover {
  background-color: transparent;
  border-color: transparent;
}

/*
    Designer peers
*/

.acd-peer {
  outline: none;
}

.acd-peer.invisible {
  background-size: 6px 6px;
  background-image: repeating-linear-gradient(
    45deg,
    var(--acd-peerInvisibleForegroundColor) 0,
    var(--acd-peerInvisibleForegroundColor) 0.6000000000000001px,
    transparent 0,
    transparent 50%
  );
  background-color: var(--acd-peerInvisibleBackgroundColor);
}

.acd-peer.otherLayout {
  background-size: 6px 6px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--acd-peerOtherLayoutForegroundColor) 0,
    var(--acd-peerOtherLayoutForegroundColor) 0.6000000000000001px,
    transparent 0,
    transparent 50%
  );
  background-color: var(--acd-peerOtherLayoutBackgroundColor);
  opacity: var(--acd-peerOtherLayoutOpacity);
}

.acd-peer:hover::after,
.acd-peer.selected::after,
.acd-peer.dragging::after {
  animation-name: acd-peer-frame-appear;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  border: 1px solid var(--acd-peerBorderColor);
  position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
}

.acd-peer.otherLayout:hover,
.acd-peer.selected.otherLayout,
.acd-peer.dragging.otherLayout {
  animation-name: acd-peer-frame-appear;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
}

.acd-peer.dragover {
  outline: 1px dashed var(--acd-peerDragdOverBorderColor) !important;
}

.acd-peer.dragover:hover {
  background-color: none;
}

.acd-peer:focus::after {
  border: 2px dashed var(--acd-peerBorderColor);
  position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
}

.acd-peerButton {
  font-size: 14px;
  border: var(--acd-peerButtonBorder);
  color: var(--acd-peerButtonFontColor);
  background-color: var(--acd-peerButtonBackgroundColor);
  cursor: default;
  user-select: none;
  padding: 1px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all !important;
  height: var(--acd-peerButtonHeight);
  border-radius: 3px;
  outline: none;
}

.acd-peerButton.fixedWidth {
  width: var(--acd-peerButtonHeight);
}

.acd-peerButton.fixedWidth.circular {
  border-radius: 50%;
}

.acd-peerButton.variableWidth {
}

.acd-peerButton-icon {
  font-family: "FabricMDL2Icons";
  font-style: normal;
  font-weight: normal;
  justify-content: center;
}

.acd-peerButton-text {
  font-family: inherit;
  justify-content: center;
  padding: 0px 4px;
}

.acd-peerButton:hover {
  background-color: var(--acd-peerButtonHoverBackgroundColor);
  color: var(--acd-peerButtonHoverFontColor);
}

/*
    Tool box
*/

.acd-palette-category {
  align-items: center;
  display: flex;
  font-size: 16px;
  font-weight: 600;
  list-style-type: none;
  position: relative;
  white-space: nowrap;
  padding: 6px 16px 6px 16px;
  cursor: default;
  color: var(--acd-paletteCategoryFontColor);
}

.acd-palette-item {
  cursor: move;
  display: flex;
  align-items: center;
  padding: 0px 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 32px;
  margin: 3px 0;
  border-radius: 3px;
}

.acd-palette-item:focus-visible {
  outline: 2px solid var(--acd-focusRectangleColor);
  outline-offset: -2px;
}

.acd-palette-item-label {
  color: var(--acd-paletteItemFontColor);
  font-size: 14px;
  white-space: nowrap;
  margin-left: 8px;
  flex: 1 1 100%;
}

.acd-palette-item:hover {
  background-color: var(--acd-paletteItemHoverBackgroundColor);
}

/*
    Tree view
*/

.acd-tree-item-root:focus > .acd-tree-item {
  outline: 2px solid var(--acd-focusRectangleColor);
}

.acd-tree-item {
  cursor: pointer;
  line-height: 22px;
  margin: 3px;
  border-radius: 3px;
}

.acd-tree-item.selected {
  background-color: var(--acd-treeItemSelectedBackgroundColor);
}

.acd-tree-item:hover {
  background-color: var(--acd-treeItemHoverBackgroundColor);
}

.acd-tree-item.selected:hover {
  background-color: var(--acd-treeItemSelectedHoverBackgroundColor);
}

.acd-tree-item-expandCollapseButton {
  font-family: "FabricMDL2Icons";
  font-size: 10px;
  width: 16px;
  color: var(--acd-treeItemExpandCollapseButtonFontColor);
  display: flex;
  justify-content: center;
}

.acd-tree-item-text {
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  padding: 4px 4px 4px 8px;
  color: var(--acd-treeItemFontColor);
}

.acd-tree-item-typeName {
  margin-left: 8px;
}

.acd-tree-item-additionalText {
  color: var(--acd-treeItemAdditionalTextFontColor);
  margin-left: 8px;
}

.acd-data-tree-item-additionalText {
  color: var(--acd-dataTreeItemAdditionalTextFontColor);
  margin-left: 8px;
}

/*
    Toolbar
*/

.acd-toolbar-host {
  display: flex;
  background-color: var(--acd-toolbarBackgroundColor);
  border-bottom: var(--acd-toolbarBorder);
  padding: 4px 0;
}

.acd-toolbar {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  background-color: var(--acd-toolbarBackgroundColor);
}

.acd-toolbar-separator {
  margin-left: 4px;
  padding-right: 4px;
  height: 24px;
  border-left: 1px solid var(--acd-toolbarSeparatorColor);
}

.acd-fieldPicker-host {
  max-height: 200px;
  overflow-y: auto;
}

.acd-verticalCollapsedTabContainer,
.acd-horizontalCollapsedTabContainer {
  background-color: var(--acd-tabContainerCollapsedBackgroundColor);
}

/*
  Adaptive Card renderer styles for Property Sheet and other
  designer AC-based parts of designer UI.
*/

.default-ac-image.default-ac-selectable {
  cursor: pointer;
}

a.default-ac-anchor {
  text-decoration: none;
}

a.default-ac-anchor:link {
  color: #005a9e;
}

a.default-ac-anchor:visited {
  color: #005a9e;
}

a.default-ac-anchor:link:active {
  color: #004d84;
}

a.default-ac-anchor:visited:active {
  color: #004d84;
}

.default-ac-container.default-ac-selectable,
.default-ac-columnSet.default-ac-selectable {
  padding: 0;
}

.default-ac-container.default-ac-selectable:hover,
.default-ac-columnSet.default-ac-selectable:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.default-ac-container.default-ac-selectable:active,
.default-ac-columnSet.default-ac-selectable:active {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

/* Controls */

.acd-ctrl-overlay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10000;
}

.acd-ctrl {
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  font-weight: normal;
}

.acd-ctrl-dropdown-item {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  padding: 0px 12px;
  margin: 3px;
  border-radius: 2px;
  line-height: 30px;
  cursor: pointer;
  color: var(--dropdownItemFontColor);
}

.acd-ctrl-dropdown-item:hover {
  background-color: var(--dropdownItemHoverBackgroundColor);
}

.acd-ctrl-dropdown {
  border: var(--dropdownBorder);
  background-color: white;
  height: 32px;
  display: flex;
  padding-left: 12px;
  padding-right: 12px;
  cursor: pointer;
}

.acd-ctrl-dropdown:hover {
  border: var(--dropdownHoverBorder);
}

.acd-ctrl-popup-container {
  border: var(--popupContainerBorder);
  border-radius: 3px;
  background-color: var(--popupContainerBackgroundColor);
  position: absolute;
  box-shadow: var(--popupContainerBoxShadow);
  overflow-y: auto;
}

.acd-ctrl-popup-container:focus {
  outline: 0;
}

.acd-ctrl-slide {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
}

.acd-ctrl-slide.acd-ctrl-slideTopToBottom {
  animation-name: fadeIn, slideTopToBottom;
}

.acd-ctrl-slide.acd-ctrl-slideBottomToTop {
  animation-name: fadeIn, slideBottomToTop;
}

.acd-ctrl-slide.acd-ctrl-slideLeftToRight {
  animation-name: fadeIn, slideLeftToRight;
}

.acd-ctrl-slide.acd-ctrl-slideRightToLeft {
  animation-name: fadeIn, slideRightToLeft;
}

.acd-dropdown-label {
  line-height: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 100%;
  width: 100%;
  color: var(--dropdownItemFontColor);
  flex: 1 1 100%;
  padding-right: 12px;
}

.acd-ctrl-dropdown-button {
  line-height: 32px;
  flex: 0 0 auto;
}

.acd-ctrl-dropdown-button:hover {
  color: var(--dropdownButtonHoverBackgroundColor);
}

.acd-dragVisual {
  box-shadow: var(--dragVisualBoxShadow);
  box-sizing: content-box;
}