/** Apply Widget shadow, if container needs it. */
.dashboard.widget-shadow-enabled .widget-host {
  -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;
  /** This style needs to be generalized off of common color and shadow settings.*/
  box-shadow: 2px 2px 3px #dddddd; }

.widget-host {
  position: absolute;
  background: rgba(255, 255, 255, 1);
  background: var(--background-color,rgba(255, 255, 255, 1));
  /** Apply dark theme to the Widget Host overlay buttons. */ }
  .widget-host.dashboard-config-preview .interaction-overlay {
    background: transparent; }
  .widget-host .interaction-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%; }
  .widget-host.render-in-lightbox {
    position: unset; }
  .widget-host .widget-host-overlay .button-is-dark button {
    background: rgba(0, 0, 0, 0.18); }
    .widget-host .widget-host-overlay .button-is-dark button .fabric-icon {
      color: white; }
  .widget-host .widget-container {
    overflow: unset;
    height: 100%;
    width: 100%;
    position: absolute; }
    .widget-host .widget-container .content-container {
      height: 100%;
      width: 100%; }
      .widget-host .widget-container .content-container:focus {
        outline: none;
        border: 2px solid; }
    .widget-host .widget-container .classic-widget-container .internal-content-host,
    .widget-host .widget-container .classic-widget-container .external-content-host {
      height: 100%; }

.widget-host-error {
  background: rgba(255, 255, 255, 1);
  background: var(--background-color,rgba(255, 255, 255, 1));
  height: 100%;
  width: 100%; }