/*
  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
*/
.propertyPaneFooter {
  background-color: "[theme:primaryBackground, default: #ffffff]";
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  right: 0;
}
:global(.spDeThemeContentPanel) .propertyPaneFooter {
  background-color: unset;
}

.propertyPaneCommandButtonsBox {
  padding-bottom: 20px;
}

.propertyPanePageNav {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.propertyPaneBackNavLink,
.propertyPaneNextNavLink {
  background-color: transparent;
  border: 0;
  color: "[theme:neutralPrimary, default: #333333]";
  font-weight: 400;
  font-size: 14px;
  font-weight: normal;
  height: 32px;
  outline: 0;
  padding: 0;
}
:global(.spDeThemeContentPanel) .propertyPaneBackNavLink,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink {
  color: var(--colorNeutralForeground1);
}
.propertyPaneBackNavLink .propertyPaneBackArrow,
.propertyPaneBackNavLink .propertyPaneNextArrow,
.propertyPaneNextNavLink .propertyPaneBackArrow,
.propertyPaneNextNavLink .propertyPaneNextArrow {
  color: "[theme:themePrimary, default: #0078d4]";
  position: relative;
  top: 2px;
}
:global(.spDeThemeContentPanel) .propertyPaneBackNavLink .propertyPaneBackArrow,
:global(.spDeThemeContentPanel) .propertyPaneBackNavLink .propertyPaneNextArrow,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink .propertyPaneBackArrow,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink .propertyPaneNextArrow {
  color: var(--colorBrandBackground);
}
[dir=ltr] .propertyPaneBackNavLink .propertyPaneBackArrow,
[dir=ltr] .propertyPaneNextNavLink .propertyPaneBackArrow {
  margin-right: 4px;
}
[dir=rtl] .propertyPaneBackNavLink .propertyPaneBackArrow,
[dir=rtl] .propertyPaneNextNavLink .propertyPaneBackArrow {
  margin-left: 4px;
}
[dir=ltr] .propertyPaneBackNavLink .propertyPaneNextArrow,
[dir=ltr] .propertyPaneNextNavLink .propertyPaneNextArrow {
  margin-left: 4px;
}
[dir=rtl] .propertyPaneBackNavLink .propertyPaneNextArrow,
[dir=rtl] .propertyPaneNextNavLink .propertyPaneNextArrow {
  margin-right: 4px;
}
.propertyPaneBackNavLink:disabled,
.propertyPaneNextNavLink:disabled {
  color: "[theme:neutralTertiary, default: #a6a6a6]";
}
:global(.spDeThemeContentPanel) .propertyPaneBackNavLink:disabled,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink:disabled {
  color: var(--colorNeutralStroke1Selected);
}
.propertyPaneBackNavLink:disabled .propertyPaneBackArrow,
.propertyPaneBackNavLink:disabled .propertyPaneNextArrow,
.propertyPaneNextNavLink:disabled .propertyPaneBackArrow,
.propertyPaneNextNavLink:disabled .propertyPaneNextArrow {
  color: "[theme:neutralTertiary, default: #a6a6a6]";
}
:global(.spDeThemeContentPanel) .propertyPaneBackNavLink:disabled .propertyPaneBackArrow,
:global(.spDeThemeContentPanel) .propertyPaneBackNavLink:disabled .propertyPaneNextArrow,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink:disabled .propertyPaneBackArrow,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink:disabled .propertyPaneNextArrow {
  color: var(--colorNeutralStroke1Selected);
}
.propertyPaneBackNavLink:not(:disabled):hover, .propertyPaneBackNavLink:not(:disabled):focus, .propertyPaneBackNavLink:not(:disabled):active,
.propertyPaneNextNavLink:not(:disabled):hover,
.propertyPaneNextNavLink:not(:disabled):focus,
.propertyPaneNextNavLink:not(:disabled):active {
  background-color: "[theme:themeLight, default: #c7e0f4]";
  color: "[theme:themePrimary, default: #0078d4]";
  cursor: pointer;
}
:global(.spDeThemeContentPanel) .propertyPaneBackNavLink:not(:disabled):hover, :global(.spDeThemeContentPanel) .propertyPaneBackNavLink:not(:disabled):focus, :global(.spDeThemeContentPanel) .propertyPaneBackNavLink:not(:disabled):active,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink:not(:disabled):hover,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink:not(:disabled):focus,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink:not(:disabled):active {
  background-color: var(--colorBrandStroke2);
  color: var(--colorBrandBackground);
}
.propertyPaneBackNavLink:not(:disabled):hover .propertyPaneBackArrow,
.propertyPaneBackNavLink:not(:disabled):hover .propertyPaneNextArrow, .propertyPaneBackNavLink:not(:disabled):focus .propertyPaneBackArrow,
.propertyPaneBackNavLink:not(:disabled):focus .propertyPaneNextArrow, .propertyPaneBackNavLink:not(:disabled):active .propertyPaneBackArrow,
.propertyPaneBackNavLink:not(:disabled):active .propertyPaneNextArrow,
.propertyPaneNextNavLink:not(:disabled):hover .propertyPaneBackArrow,
.propertyPaneNextNavLink:not(:disabled):hover .propertyPaneNextArrow,
.propertyPaneNextNavLink:not(:disabled):focus .propertyPaneBackArrow,
.propertyPaneNextNavLink:not(:disabled):focus .propertyPaneNextArrow,
.propertyPaneNextNavLink:not(:disabled):active .propertyPaneBackArrow,
.propertyPaneNextNavLink:not(:disabled):active .propertyPaneNextArrow {
  color: "[theme:themeDark, default: #005a9e]";
}
:global(.spDeThemeContentPanel) .propertyPaneBackNavLink:not(:disabled):hover .propertyPaneBackArrow,
:global(.spDeThemeContentPanel) .propertyPaneBackNavLink:not(:disabled):hover .propertyPaneNextArrow, :global(.spDeThemeContentPanel) .propertyPaneBackNavLink:not(:disabled):focus .propertyPaneBackArrow,
:global(.spDeThemeContentPanel) .propertyPaneBackNavLink:not(:disabled):focus .propertyPaneNextArrow, :global(.spDeThemeContentPanel) .propertyPaneBackNavLink:not(:disabled):active .propertyPaneBackArrow,
:global(.spDeThemeContentPanel) .propertyPaneBackNavLink:not(:disabled):active .propertyPaneNextArrow,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink:not(:disabled):hover .propertyPaneBackArrow,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink:not(:disabled):hover .propertyPaneNextArrow,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink:not(:disabled):focus .propertyPaneBackArrow,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink:not(:disabled):focus .propertyPaneNextArrow,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink:not(:disabled):active .propertyPaneBackArrow,
:global(.spDeThemeContentPanel) .propertyPaneNextNavLink:not(:disabled):active .propertyPaneNextArrow {
  color: var(--colorBrandBackgroundSelected);
}

.propertyPanePageOfPages {
  margin-top: 6px;
}