/* LESS: /cms/admin/stylesheet/design-mode.less */
body .IframeWrapper {
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  flex-direction: column;
  -webkit-flex-direction: column;
  display: flex;
}
body .IframeWrapper iframe {
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.99999;
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
}
body .CMSComponent > div > iframe,
body .CMSComponent .IframeWrapper {
  pointer-events: none;
}
@media screen and (max-width: 991px) {
  .CMSComponentSettingPane,
  .CMSSectionSettingPane,
  .CMSActionButton {
    display: none;
  }
}
@media screen and (min-width: 992px) {
  .CMSSection .CMSComponent {
    min-height: 2em;
    min-width: 2em;
  }
  .CMSSection .CMSComponent.FarLeft {
    min-height: 4em;
    min-width: 2em;
  }
  .CMSComponent {
    position: relative;
    background: transparent;
    transition: background-color 0.4s ease;
  }
  .CMSComponent:hover {
    z-index: 99999;
    overflow: visible !important;
  }
  .CMSComponent:not(:hover) > hbox.CMSComponentSettingPane {
    display: none;
  }
  .CMSComponent > hbox.CMSComponentSettingPane {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #333333;
    color: #FFF;
    visibility: hidden;
    opacity: 0.1;
    font-size: 9pt !important;
    border: solid 1px #FFF;
    cursor: pointer;
    z-index: 999992;
    align-items: center;
  }
  .CMSSection:not([configurable="true"]) .CMSComponent > hbox.CMSComponentSettingPane {
    top: 0px;
    right: 0px;
  }
  .CMSComponent > hbox.CMSComponentSettingPane icon {
    padding: 0.3em;
    font-size: 1.4em;
  }
  .CMSComponent > hbox.CMSComponentSettingPane > hbox.CMSComponentSettingButton {
    align-items: center;
  }
  .CMSComponent > hbox.CMSComponentSettingPane > hbox.CMSComponentSettingButton > span {
    padding: 0.3em 0.5em;
    white-space: nowrap;
  }
  .CMSComponent > hbox.CMSComponentSettingPane > hbox.CMSComponentSettingButton:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .CMSComponent > hbox.CMSComponentSettingPane > icon {
    background: #000000;
    font-weight: 900;
  }
  .CMSComponent > hbox.CMSComponentSettingPane > icon:hover {
    background: #444444;
  }
  .CMSComponent .CMSActionButton.Initialized {
    background: #333333;
    color: #FFF;
    font-size: 9pt !important;
    border: solid 1px #FFF;
    display: inline-block;
    padding: 0.3em 0.5em;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0.7;
  }
  .CMSComponent .CMSActionButton.Initialized:hover {
    opacity: 1;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  }
  .CMSComponent .CMSActionButton.Initialized span {
    position: relative;
    top: -0.2em;
  }
  .CMSComponent .CMSActionButton.Initialized icon {
    font-size: 1.4em;
    margin-left: 0.5em;
  }
  .CMSComponent.FarLeft > hbox.CMSComponentSettingPane {
    top: 2.2em;
  }
  .CMSComponent:hover {
    background: rgba(0, 0, 0, 0.1);
  }
  .CMSComponent:hover > hbox.CMSComponentSettingPane {
    opacity: 1;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  }
  .CMSSection:hover .CMSComponent > hbox.CMSComponentSettingPane {
    visibility: visible;
  }
  .CMSSection.CMSEmpty[configurable="true"] {
    min-height: 2em;
  }
  .CMSSection[configurable="true"] {
    position: relative;
  }
  .CMSSection[configurable="true"] > .CMSSectionSettingPane {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    margin-left: 0px !important;
    height: auto !important;
    width: auto !important;
    min-height: 0em !important;
    visibility: hidden;
    z-index: 999991;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    align-self: flex-start;
  }
  .CMSSection[configurable="true"] > .CMSSectionSettingPane > .Wrapper > hbox {
    align-items: center;
    background: #42B0FD;
    color: #FFF;
    cursor: pointer;
    padding: 0em;
    font-size: 9pt !important;
  }
  .CMSSection[configurable="true"] > .CMSSectionSettingPane > .Wrapper > hbox > label {
    display: inline-block;
    padding: 0.3em 0.5em;
    cursor: inherit;
  }
  .CMSSection[configurable="true"] > .CMSSectionSettingPane > .Wrapper > hbox > icon {
    background: #109CFE;
    padding: 0.3em;
    font-size: 1.4em;
  }
  .CMSSection[configurable="true"]::before {
    transition: opacity 0.4s ease;
    opacity: 0;
  }
  .CMSSection[configurable="true"]:hover::before {
    content: "";
    position: absolute;
    top: 0em;
    left: 0em;
    bottom: 0em;
    right: 0em;
    outline: solid 2px #109CFE;
    outline-offset: -1px;
    z-index: 999990;
    pointer-events: none;
    opacity: 1;
    display: block;
  }
  .CMSSection[configurable="true"]:hover > .CMSSectionSettingPane {
    visibility: visible;/*force visible instead of inherit as the section may be hidden by template style*/
  }
}
.sys-viewport.lg > .CMSSection .CMSComponent {
  min-height: 2em;
  min-width: 2em;
}
.sys-viewport.lg > .CMSSection .CMSComponent.FarLeft {
  min-height: 4em;
  min-width: 2em;
}
.sys-viewport.lg > .CMSComponent {
  position: relative;
  background: transparent;
  transition: background-color 0.4s ease;
}
.sys-viewport.lg > .CMSComponent:hover {
  z-index: 99999;
  overflow: visible !important;
}
.sys-viewport.lg > .CMSComponent:not(:hover) > hbox.CMSComponentSettingPane {
  display: none;
}
.sys-viewport.lg > .CMSComponent > hbox.CMSComponentSettingPane {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #333333;
  color: #FFF;
  visibility: hidden;
  opacity: 0.1;
  font-size: 9pt !important;
  border: solid 1px #FFF;
  cursor: pointer;
  z-index: 999992;
  align-items: center;
}
.CMSSection:not([configurable="true"]) .sys-viewport.lg > .CMSComponent > hbox.CMSComponentSettingPane {
  top: 0px;
  right: 0px;
}
.sys-viewport.lg > .CMSComponent > hbox.CMSComponentSettingPane icon {
  padding: 0.3em;
  font-size: 1.4em;
}
.sys-viewport.lg > .CMSComponent > hbox.CMSComponentSettingPane > hbox.CMSComponentSettingButton {
  align-items: center;
}
.sys-viewport.lg > .CMSComponent > hbox.CMSComponentSettingPane > hbox.CMSComponentSettingButton > span {
  padding: 0.3em 0.5em;
  white-space: nowrap;
}
.sys-viewport.lg > .CMSComponent > hbox.CMSComponentSettingPane > hbox.CMSComponentSettingButton:hover {
  background: rgba(255, 255, 255, 0.1);
}
.sys-viewport.lg > .CMSComponent > hbox.CMSComponentSettingPane > icon {
  background: #000000;
  font-weight: 900;
}
.sys-viewport.lg > .CMSComponent > hbox.CMSComponentSettingPane > icon:hover {
  background: #444444;
}
.sys-viewport.lg > .CMSComponent .CMSActionButton.Initialized {
  background: #333333;
  color: #FFF;
  font-size: 9pt !important;
  border: solid 1px #FFF;
  display: inline-block;
  padding: 0.3em 0.5em;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.7;
}
.sys-viewport.lg > .CMSComponent .CMSActionButton.Initialized:hover {
  opacity: 1;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
.sys-viewport.lg > .CMSComponent .CMSActionButton.Initialized span {
  position: relative;
  top: -0.2em;
}
.sys-viewport.lg > .CMSComponent .CMSActionButton.Initialized icon {
  font-size: 1.4em;
  margin-left: 0.5em;
}
.sys-viewport.lg > .CMSComponent.FarLeft > hbox.CMSComponentSettingPane {
  top: 2.2em;
}
.sys-viewport.lg > .CMSComponent:hover {
  background: rgba(0, 0, 0, 0.1);
}
.sys-viewport.lg > .CMSComponent:hover > hbox.CMSComponentSettingPane {
  opacity: 1;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
.sys-viewport.lg > .CMSSection:hover .CMSComponent > hbox.CMSComponentSettingPane {
  visibility: visible;
}
.sys-viewport.lg > .CMSSection.CMSEmpty[configurable="true"] {
  min-height: 2em;
}
.sys-viewport.lg > .CMSSection[configurable="true"] {
  position: relative;
}
.sys-viewport.lg > .CMSSection[configurable="true"] > .CMSSectionSettingPane {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  margin-left: 0px !important;
  height: auto !important;
  width: auto !important;
  min-height: 0em !important;
  visibility: hidden;
  z-index: 999991;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
  align-self: flex-start;
}
.sys-viewport.lg > .CMSSection[configurable="true"] > .CMSSectionSettingPane > .Wrapper > hbox {
  align-items: center;
  background: #42B0FD;
  color: #FFF;
  cursor: pointer;
  padding: 0em;
  font-size: 9pt !important;
}
.sys-viewport.lg > .CMSSection[configurable="true"] > .CMSSectionSettingPane > .Wrapper > hbox > label {
  display: inline-block;
  padding: 0.3em 0.5em;
  cursor: inherit;
}
.sys-viewport.lg > .CMSSection[configurable="true"] > .CMSSectionSettingPane > .Wrapper > hbox > icon {
  background: #109CFE;
  padding: 0.3em;
  font-size: 1.4em;
}
.sys-viewport.lg > .CMSSection[configurable="true"]::before {
  transition: opacity 0.4s ease;
  opacity: 0;
}
.sys-viewport.lg > .CMSSection[configurable="true"]:hover::before {
  content: "";
  position: absolute;
  top: 0em;
  left: 0em;
  bottom: 0em;
  right: 0em;
  outline: solid 2px #109CFE;
  outline-offset: -1px;
  z-index: 999990;
  pointer-events: none;
  opacity: 1;
  display: block;
}
.sys-viewport.lg > .CMSSection[configurable="true"]:hover > .CMSSectionSettingPane {
  visibility: visible;/*force visible instead of inherit as the section may be hidden by template style*/
}
/*# sourceMappingURL=design-mode.css.map */