div[wizdom365-powerpanel] ~ #s4-ribbonrow,
div[wizdom365-powerpanel] ~ #s4-workspace {
  max-width: calc(100vw - 48px);
  margin-left: 48px;
  /*border-left: 1px solid rgba(51, 51, 51, 0.3);*/
  border-left: 1px solid #eaeaea; }

#powerpanel,
#powerpanel-flyout {
  position: absolute;
  top: 50px;
  bottom: 0; }

#powerpanel-flyout {
  z-index: 1000; }

#powerpanel.affix,
#powerpanel.affix ~ #powerpanel-flyout {
  position: fixed;
  top: 0; }

#powerpanel {
  width: 48px;
  background-color: #ffffff;
  box-shadow: 10px 0 30px -15px rgba(31, 31, 31, 0.2);
  z-index: 1001; }
  #powerpanel.toggled {
    box-shadow: none; }
  #powerpanel > a {
    display: inline-block;
    width: 100%;
    /*margin: 10px auto;*/
    padding-top: 13px;
    padding-bottom: 10px;
    font-size: 19px;
    text-align: center;
    vertical-align: middle;
    color: #333;
    cursor: pointer;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent; }
    #powerpanel > a:hover {
      color: #0078d7; }
    #powerpanel > a.panel-button.selected {
      color: #0078d7;
      background-color: #f8f8f8;
      border-top: 1px solid #eaeaea;
      border-bottom: 1px solid #eaeaea;
      margin-left: -1px;
      width: 52px; }

#powerpanel-flyout {
  /*left: 50px;*/
  left: 49px;
  max-width: calc(100vw - 49px);
  overflow: hidden;
  overflow-y: auto;
  background-color: #f8f8f8;
  box-shadow: 10px 0 30px -15px rgba(31, 31, 31, 0.5);
  transition: all 0.2s ease-out;
  /*transform: translateX(0);*/ }
  #powerpanel-flyout > .flyout-container {
    /*margin: 20px;*/
    margin: 0 20px; }
  #powerpanel-flyout .wizdom-fullview {
    margin: 0; }
  #powerpanel-flyout.fade.ng-enter {
    transition: 0.5s ease-out all;
    opacity: 0;
    transform: translateX(calc(-100vw - 51px)); }
  #powerpanel-flyout.fade.ng-enter.ng-enter-active {
    transform: translateX(0);
    opacity: 1; }
  #powerpanel-flyout.fade.ng-leave {
    transition: 0.5s ease-out all;
    opacity: 1;
    transform: translateX(0); }
  #powerpanel-flyout.fade.ng-leave.ng-leave-active {
    opacity: 0;
    transform: translateX(calc(-100vw - 51px)); }
  #powerpanel-flyout .pp-section-hidden {
    display: none; }

.powerpanel-filler {
  position: fixed;
  bottom: 0;
  z-index: 500;
  height: 50px; }
  #powerpanel + .powerpanel-filler {
    left: 0;
    /*background-color: #212121;*/ }
  #powerpanel-flyout + .powerpanel-filler {
    left: 48px;
    max-width: calc(100vw - 50px);
    /*background-color: #333;*/ }

.flyout-container h1.powerpanel-title {
  color: currentColor;
  margin-top: 20px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-size: 28px;
  font-weight: 100;
  /*border-bottom: 2px solid #555;*/ }
  .flyout-container h1.powerpanel-title > .ms-Icon {
    vertical-align: middle; }

.powerpanel-section {
  /*padding: 16px;*/
  margin-top: 20px; }
  .powerpanel-title + .powerpanel-section {
    margin-top: 0; }
  .powerpanel-section.fade1.ng-enter {
    transition: 0.5s ease-in all;
    opacity: 0;
    /*transform: translateX(calc(-100vw - 51px));*/ }
  .powerpanel-section.fade1.ng-enter.ng-enter-active {
    opacity: 1;
    /*transform: translateX(0);*/ }

.powerpanel-section-webpart-background {
  background-color: #fff;
  padding: 16px; }

.powerpanel-webpart {
  margin-top: 20px; }
  .powerpanel-webpart:first-child {
    margin-top: 0; }
