:host {
  width: 100%; display: block; box-sizing: border-box; --min-height: 430px; --border: #ccc 1px solid; --fullscreen-border-color: #ccc; --focused-border-color: #5b9dd9; --focused-box-shadow: 0px 0px 2px rgba(30, 140, 190, 0.8); --z-index: 100
}
.container {
  width: 100%; height: 100%; display: block !important; position: relative; z-index: var(--z-index)
}
.container div.main {
  width: 100%; box-sizing: border-box; min-height: var(--min-height); background: #fff; border: var(--border); transition: border-color .3s ease, box-shadow .3s ease
}
.container div.main iframe.iframe {
  display: block; width: 100%
}
.container div.mask {
  width: 100%; height: 100%; background: #dddddd; opacity: .3; position: absolute; top: 0px; left: 0px; z-index: -100
}
.container.focused div.main {
  border-color: var(--focused-border-color); box-shadow: var(--focused-box-shadow)
}
.container.fullscreen {
  position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100000 !important
}
.container.fullscreen div.main {
  border-color: var(--fullscreen-border-color)
}
.container.fullscreen div.main iframe.iframe {
  height: 100vh !important
}
.container.disabled div.mask {
  z-index: 10000
}