/* 
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@100..900&display=swap');

:root {
  --font-headline:"Montserrat", sans-serif;
  --font-body:"Lato", sans-serif;
} */

.dnnForm{
  width: 100%;
  fieldset{
      clear: none;
      position: relative;
      margin-bottom: 1.125rem;
      text-align: left;
      fieldset{
          width: 100%;
      }
  }
  .dnnFormItem{
      clear: both;
      width: 100%;
      display: block;
      position: relative;
      text-align: left;
      a.dnnFormHelp{
          span{
              position: relative;
          }
          img{
              display: block;
          }
      }
  }
}

.dnnFormItem{
  input[type="text"],
  select,
  textarea,
  input[type="email"],
  input[type="search"],
  input[type="password"] {
      margin-bottom: 1.125rem;
      padding: 0.5rem;
      background: var(--dnn-color-background, #fff);
      border: 1px solid #c9c9c9;
      border-radius:3px;
      color: var(--dnn-color-foreground, #333);
      font-size: 0.75rem;
      width: 45%;
      max-width: 445px;
      + .dnnTertiaryAction{
          display: inline-block;
          max-width: 60px;
      }
  }
  input[type="checkbox"],
  input[type="radio"] {
      width: 0.8125rem;
      height: 0.8125rem;
      padding: 0;
      box-sizing: border-box;
  }
  input[type="search"] {
      box-sizing: content-box;
  }
  input[type="checkbox"]{
      margin: 0 5px;
  }
  table{
      background: none;
  }
  .dnnSpinner {
      width: 45%;
      margin-bottom: 1.125rem;
  }
  .dnnTagsInput {
      width: 45%;
  }
  textarea {
      min-height: 5rem;
  }
  /* Groupped controls */
  .dnnInputGroup {
      float: left;
      display: block;
      width: 32.075%;
      padding: 0.3125rem;
      margin-bottom: 1.125rem;
      .dnnLeft {
          width: 100%;
      }
      span {
          display: inline-block;
          width: 33%;
          text-align: right;
      }
  }
  /* normal checkbox fix */
  input[type="checkbox"].normalCheckBox {
      display: inline-block;
      margin: 8px 0 4px 0;
  }
  /* Disabled State */
  input.aspNetDisabled,
  textarea.aspNetDisabled {
      background: var(--dnn-color-neutral-light, #ebebeb);
      color: var(--dnn-color-neutral, #444);
      border-color: var(--dnn-color-neutral-dark, #a7a7a7);
      border-width: 1px;
  }
  button[disabled], input[disabled]{
      cursor: default;
      opacity: 0.5;
  }
  /* Active and Focus States */
  input[type="text"]:active, .dnnFormItem input[type="text"]:focus,
  input[type="password"]:focus, .dnnFormItem input[type="password"]:active,
  input[type="email"]:active, .dnnFormItem input[type="email"]:focus,
  select:active, .dnnFormItem select:focus,
  input[type="search"]:active, .dnnFormItem input[type="search"]:focus {
      background: var(--dnn-color-background, #fff);
      border: 1px solid var(--dnn-color-primary, rgba(2,139,255,0.5));
      box-shadow: 0px 0px 3px 0px var(--dnn-color-primary, rgba(2, 139, 255, 0.4));
      color: var(--dnn-color-foreground, #333);
  }
  /* Invalid state */
  input:invalid, textarea:invalid{
      background-color: var(--dnn-color-neutral, #f0dddd);
  }
  /* Error tooltip */
  span.dnnFormMessage.dnnFormError {
      display: block;
      position: absolute;
      overflow: visible;
      bottom: 95%;
      right: 12%;
      width: 200px;
      margin-bottom: 0;
      padding: 0.625rem;
      border: none;
      border-radius: var(--dnn-controls-radius, 3px);
      background: var(--dnn-color-danger, rgba(255,0,0,0.75));
      font-size: 0.75rem;
      color: var(--dnn-color-danger-contrast, #fff);
      text-align: left;
      &:after{
          position: absolute;
          bottom: -0.4375rem;
          left: 0.9375rem;
          content: "";
          width: 0;
          height: 0;
          opacity: 0.75;
          border-left: 0.4375rem solid transparent;
          border-right: 0.4375rem solid transparent;
          border-top: 0.4375rem solid var(--dnn-color-danger, red);
      }
  }
}
div.dnnFormGroup {
  display: inline-block;
  padding: 10px;
  margin-bottom: 5px;
  width: 65%;
}

/* Display hand cursor for clickable form elements */
.dnnFormItem button, .dnnFormItem input[type="button"],
.dnnFormItem input[type="reset"],
.dnnFormItem input[type="submit"],
.dnnPrimaryAction,
.dnnSecondaryAction,
.dnnTertiaryAction,
.dnnLogin .LoginTabGroup span {
  display: inline-block;
  padding: 0.5625rem;
  margin-bottom: 0.5625rem;
  cursor: pointer;
  min-width: 4.6875rem;
  overflow: visible;
  border: 1px solid var(--dnn-color-foreground-light, #c2c2c2);
  background: var(--dnn-color-background-dark, #eaeaea);
  border-radius: var(--dnn-controls-radius, 3px);
  color: var(--dnn-color-foreground, #333);
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
.dnnFormItem button, .dnnFormItem input[type="button"],
.dnnFormItem input[type="reset"],
.dnnFormItem input[type="submit"],
.dnnPrimaryAction,
.dnnSecondaryAction,
.dnnTertiaryAction {
  padding: 0.375rem;
}

.dnnFormMessage{
  display: block;
  padding: 0.95rem 1rem;
  margin-bottom: 1.125rem;
  border: 1px solid var(--dnn-color-info-dark, rgba(2,139,255,0.2));
  background: var(--dnn-color-info, rgba(2,139,255,0.15));
  border-radius: var(--dnn-controls-radius, 3px);
  max-width: 100%;
  color: var(--dnn-color-info-contrast, black);
  a {
      color: var(--dnn-color-info-contrast, black);
      text-decoration: underline;
  }
  &.dnnFormError,
  &.dnnFormValidationSummary {
      background-color: var(--dnn-color-danger, rgba(255,0,0,0.15));
      border-color: var(--dnn-color-danger-dark, rgba(255,0,0,0.2));
      color: var(--dnn-color-danger-contrast, black);
      a {
          color: var(--dnn-color-danger-contrast, black);;
      }
  }
  &.dnnFormWarning {
      background-color: var(--dnn-color-warning, rgba(255,255,0,0.15));
      border-color: var(--dnn-color-warning-dark, #CDB21F);
      color: var(--dnn-color-warning-contrast, black);
      a {
          color: var(--dnn-color-warning-contrast, black);
      }
  }
  &.dnnFormSuccess {
      background-color: var(--dnn-color-success, rgba(0,255,0,0.15));
      border-color: var(--dnn-color-success-dark, rgba(0,255,0,0.5));
      color: var(--dnn-color-success-contrast, black);
      a {
          color: var(--dnn-color-success-contrast, black);
      }
  }
  .dnnLabel {
      float: none;
      width: 90%;
      text-align: left;
  }
}

.dnnFormItem{
  input[type="checkbox"] + span,
  input[type="radio"] + span {
      display: inline-block;
      width: auto;
      margin: 0.375rem 0.3125rem 0.375rem 0.3125rem;
  }
  .dnnLabel{
      margin-top: 0.3125rem;
  }
}

/* Pane header */
.dnnFormSectionHead span {
  font-size: 18px;
  color: #222;
}

/* Tooltips */
.dnnTooltip {
  position: relative;
  display: block;
  width: 32.075%;
  margin-right: 1.125rem;
}
.dnnHelperTip {
  position: relative;
  display: block;
}
.dnnDragdropTip {
  z-index: 10000;
  position: absolute;
  width: auto !important;
  height: auto !important;
  padding: 0.625rem;
  padding-left: 1.875rem;
  border-radius: var(--dnn-controls-radius, 3px);
  background: rgba(
      var(--dnn-color-background-contrast, 0),
      var(--dnn-color-background-contrast, 0),
      var(--dnn-color-background-contrast, 0),
      0.75) url(../../../../../images/pin-icn.png) no-repeat 7px 12px;
  font-size: 0.6875rem;
  color: var(--dnn-color-foreground-contrast, #DDD);
  text-align: left;
}

span.dnnFormRequired:after,
div.dnnFormItem.dnnFormRequired > div.dnnLabel span:after {
  content: "*";
  display: inline-block;
  margin: 0 0 0 0.3125rem;
  color: var(--dnn-color-danger, red);
  font-size: 1rem;
  line-height: 1rem;
  font-weight: bold;
}

a.dnnFormHelp,
.dnnForm .dnnFormItem a.dnnFormHelp,
.dnnTooltip label a.dnnFormHelp {
  color: var(--dnn-color-foreground, #333);
  text-decoration: none;
  font-weight: bold;
}

a.dnnFormHelp {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 2px;
  width: 14px;
  height: 15px;
  background: url(../../../../../images/helpI-icn-grey.png) no-repeat left 2px;
  padding: 0 !important;
  margin: 0 !important;
}

.aspNetDisabled, a.aspNetDisabled,
.dnnDisabled, a.dnnDisabled {
  border: none;
  background-color: var(--dnn-color-neutral, #ebebeb) !important;
  color: var(--dnn-color-neutral-dark, #ccc) !important;
  cursor: not-allowed;
  text-decoration: none;
  opacity: 0.7;
}

/* Required Fields */
.required label:after,
legend.required:after {
  display: inline-block;
  margin-top: -0.125rem;
  margin-left: 0.5625rem;
  padding: 0.0625rem 0.5625rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--dnn-controls-radius, 3px);
  background: rgba(0,0,0,0.03);
  content: 'Required';
  font-weight: normal;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--dnn-color-foreground-light, #777);
}

/* Error Styles */
.error label, legend.error {
  color: var(--dnn-color-danger, rgba(255,0,0,0.9));
}
.error{
  input[type="text"],
  select, .error textarea,
  input[type="email"],
  input[type="search"] {
      border: 1px solid var(--dnn-color-danger, rgba(255,0,0,0.6));
      color: var(--dnn-color-danger, rgba(255,0,0,0.7));
  }
}
.dnnFormError{
  label a span {
      color: var(--dnn-color-danger, red);
  }
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
      border: 1px solid var(--dnn-color-danger, red);
  }
}
/* Address field */
.dnnAddress input[type="checkbox"] {
  margin: 0 5px;
}

/* Action Items */
.dnnActions {
  float: none;
  clear: both;
  display: block;
  margin: 0;
  padding-top: 1.125rem;
  text-align: left;
  li {
      float: left;
      margin-right: 0.3125rem;
      list-style: none;
  }
}

/* Primary Action */
.dnnPrimaryAction, .dnnFormItem input[type="submit"], a.dnnPrimaryAction {
  background: var(--dnn-color-primary, #3792ED);
  border-color: var(--dnn-color-primary-dark, #0D569E);
  color: var(--dnn-color-primary-contrast, #efefef);
  &:hover, &:active{
      background: var(--dnn-color-primary-light, #6cb6f3);
  }
  &[disabled], &[disabled]:hover, &[disabled]:active {
      background: var(--dnn-color-neutral-light, #ebebeb);
      border-color: var(--dnn-color-neutral-dark, #a7a7a7);
      color: var(--dnn-color-neutral, #444);
  }
}

/* Secondary Action */
.dnnSecondaryAction,
.dnnFormItem input[type="reset"],
a.dnnSecondaryAction, a.dnnSecondaryAction, .dnnLogin .LoginTabGroup span {
  border-radius:3px;
  background: var(--dnn-color-secondary, #f5f5f5);
  border-color: var(--dnn-color-secondary-dark, #f5f5f5);
  color: var(--dnn-color-secondary-contrast, #333);
  &:hover, &:active{
      background: var(--dnn-color-secondary-light, #fefefe);
  }
  &[disabled], &[disabled]:hover, &[disabled]:active {
      background: var(--dnn-color-neutral-light, #ebebeb);
      border-color: var(--dnn-color-neutral-dark, #a7a7a7);
      color: var(--dnn-color-neutral, #444);
  }
}

/* Tertiary Action */
.dnnTertiaryAction, a.dnnTertiaryAction {
  background: var(--dnn-color-tertiary, #eaeaea);
  border-color: var(--dnn-color-tertiary-dark, #c2c2c2);
  color: var(--dnn-color-tertiary-contrast, #333);
  &:hover, &:active{
      background: var(--dnn-color-tertiary-dark, #d8d8d8);
  }
}

/* Action Button behind input */
.dnnFormItem{
  input[type="text"] + a.dnnPrimaryAction,
  input[type="text"] + a.dnnSecondaryAction,
  input[type="text"] + a.dnnTerriaryAction { 
      margin-left: 0.3125rem;
  }
  input[type="checkbox"] + span,
  input[type="radio"] + span {
      margin: 0.3125rem;
  }
}

/* Help tooltip */
.dnnTooltip .dnnFormHelpContent,
.dnnHelperTip .dnnFormHelpContent {
  visibility: hidden;
  z-index: 10;
  position: absolute;
  width: 200px;
  padding: 10px;
  padding-left: 30px;
  border-radius: var(--dnn-controls-radius, 3px);
  background: var(--dnn-color-info, rgba(0,0,0,0.75));
  font-size: 0.6875rem;
  color: var(--dnn-color-info-contrast, #ddd);
  text-align: left;
}
.dnnFormHelpContent span {
  display: block;
word-wrap: break-word;
}
.dnnTooltip .dnnFormHelpContent .dnnHelpText {
  word-wrap: break-word;
}

/* Radio Buttons */
.dnnFormRadioButtons label,
.dnnFormItem input[type=radio] + label {
  float: none;
  display: inline;
  width: auto;
  padding-right: 0;
  margin: 0 10px 0 0;
  text-align: left;
  font-weight: normal;
}
.dnnFormRadioButtons {
  float: left;
  display: block;
  width: auto;
  input[type=radio] {
      float: none;
  }
}

/* Text Editor */
.dnnTextEditor {
  margin-block:0 1.125rem;
}

/* LABEL AND HELP */
.dnnLabel, .dnnFormLabel {
  float: left;
  position: relative;
  width: 32.075%;
  padding-right: 20px;
  margin-right: 18px;
  overflow: visible;
  text-align: right;
  > span {
      text-align: right;
  }
  + span {
      display: inline-block;
      margin-top: 6px;
      margin-bottom: 6px;
      white-space: pre-line;
  }
}
.bottomArrow:after
{
  position: absolute;
  content: "";
  left: 15px;
  bottom: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--dnn-color-info, #000);
}
.topArrow:before {
  position: absolute;
  content: "";
  left: 15px;
  top: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--dnn-color-info, #000);
}
a.pinHelp {
  display: block;
  position: absolute;
  left: 7px;
  top: 12px;
  width: 15px;
  height: 15px;
  opacity: 0.5;
  background: url(../../../../../images/pin-icn.png) no-repeat 0 0;
  filter: contrast(3);
}
.ui-draggable a.pinHelp,
a.pinHelp:hover {
  opacity: 1;
}

/* Input Customised Checkbox*/
.dnnCheckbox {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  img {
      width: 18px;
      height: 18px;
      background: transparent url(../../../../../images/checkbox.png) no-repeat;
      background-position: 0px 0px;
  }
}
.dnnCheckbox-checked img {
  background-position: -51px 0px;
}
.dnnCheckbox-disabled {
  cursor: not-allowed;
  img {
      opacity: .5;
  }
}
.dnnCheckbox-error img {
  background-position: -100px 0px;
}
.dnnCheckbox-checked-error img {
  background-position: -150px 0px;
}
.dnnCheckbox-focus {
  outline: 2px solid var(--dnn-color-forground, black);
  outline-offset: 2px;
}
.dnnBoxLabel{ display: inline-block;}

/* Input Customised Radiobutton */
.dnnRadiobutton {
  display: inline-block;
  cursor: pointer;
  .mark {
      display: inline-block;
  }
  img {
      width: 20px;
      height: 18px;
      min-width: 20px;
      vertical-align: middle;
      background: transparent url(../../../../../images/radiobutton.png) no-repeat;
      background-position: 0px 0px;
  }
}
.dnnRadiobutton-checked img {
  background-position: -50px 0px;
}
.dnnRadiobutton-disabled img {
  opacity: .5;
}
.dnnRadiobutton-checked-error img {
  background-position: -150px 0px;
}
.dnnRadiobutton-error img {
  background-position: -100px 0px;
}
.dnnRadiobutton-focus {
outline: 2px solid var(--dnn-color-foreground, black);
  outline-offset: 2px;
}

/* Input RadioButton group */
div.dnnFormRadioButtons,
div.dnnHSRadioButtons,
span.dnnFormRadioButtons,
span.dnnHSRadioButtons {
  display: inline-block;
  padding: 10px;
  margin-bottom: 5px;
}
table.dnnFormRadioButtons {
  margin-bottom: 5px;
}
/* We no longer use Telerik but we need to keep this as we still run logic based on this class name. */
.RadComboBox_Default .rcbInput {
  width: 100% !important;
}

/* Input Customised Tags */
div.dnnTagsInput {
  display: inline-block;
  margin: 0;
  padding: 5px 0 0 5px;
  border: 1px solid var(--dnn-color-foreground-light, #c9c9c9);
  border-radius: var(--dnn-controls-radius, 3px);
  background: var(--dnn-color-background, #FFF);
  span.tag {
      display: block;
      float: left;
      padding: 2px 6px 2px 6px;
      margin-right: 5px;
      margin-bottom: 5px;
      border: 1px solid var(--dnn-color-neutral-dark, #c9c9c9);
      border-radius: var(--dnn-controls-radius, 3px);
      font-size: 0.75rem;
      text-decoration: none;
      color: var(--dnn-color-neutral-contrast, #888);
      cursor: pointer;
      background-color: var(--dnn-color-neutral, #eee);
      word-break: break-word;
      &:hover {
          background-color: var(--dnn-color-primary, #e8f1fa);
          color: var(--dnn-color-primary-contrast, #444);
          border-color: var(--dnn-color-primary-dark, #000);
      }
      a {
          display: inline-block;
          width: 8px;
          height: 8px;
          margin: 0.375rem 0 0 0;
          background: transparent url(../../../../../images/dnnTagClose.png) no-repeat;
          background-position: center;
          filter: contrast(5);
      }
  }
  > div > input{
      border: none;
      background: transparent;
      font-size: 0.75rem;
      display: inline-block;
      vertical-align: top;
      height: 1.1875rem;
      padding: 0.5rem 0 0.1875rem 0.1875rem;
      margin-bottom: 0.3125rem;
      &:focus, &:active {
          outline: none;
      }
      &.dnnTagsInvalid {
          display: block;
          float: left;
          margin-right: 5px;
          border: none;
          outline: none;
          border-radius: var(--dnn-controls-radius, 3px);
          background: var(--dnn-color-danger, #FBD8DB);
          cursor: pointer;
          font-size: 0.75rem;
          color: var(--dnn-color-danger-contrast, #90111A) !important;
          text-decoration: none;
      }
  }
  div {
      display: block;
      float: left;
      &.dnnTags_filter {
          float: right;
          position: relative;
          margin: 0 0 0.3125rem 0.3125rem;
          > .dnnTags_filter_label {
              display: inline-block;
              border-left: 1px solid #ccc;
              padding: 3px 15px 0 10px;
              margin-right: 3px;
              color: #999;
              cursor: pointer;
              background: url(../../../../../images/dnnSpinnerDownArrow.png) no-repeat;
              background-position: right center;
              height: 22px;
          }
      }
  }
}

/* POPUP */
.dnnFormPopup {
  position: absolute;
  padding: 1.125rem;
  background: var(--dnn-color-background, #fff);
  box-shadow: 0 0 25px 0 rgba(
      var(--dnn-color-foreground-r, 0),
      var(--dnn-color-foreground-g, 0),
      var(--dnn-color-foreground-b, 0),
      0.75);
z-index: 100000;
  .dnnFormPopup > * {
      box-sizing: content-box;
  }


  .ui-dialog-titlebar {
      position: relative;
      padding: 0 0 1.125rem 0;
      border-bottom: 1px solid var(--dnn-color-foreground-light, #ddd);
      cursor: move;
      font-size: 1.125rem;
      font-weight: bold;
  }
  .dnnModalCtrl {
      /* This is the min/max button and the close button in module popups like the module settings. */
      /* PNG images are used for the buttons so we need to keep a color that works with white overlay and fixed sizes.*/
      display: block;
      position: absolute;
      top: -30px;
      right: -30px;
      width: 69px;
      height: 26px;
      border-radius: 10px;
      background-color: #fff;
      box-shadow: 0px 0px 5px #666;
      .ui-dialog-titlebar-close {
          float: right;
          display: block;
          height: 18px;
          width: 30px;
          margin: 4px 4px 0 1px;
          overflow: hidden;
          border: none;
          border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
          background: #585858 url(../../../../../images/closeBtn.png) no-repeat;
          background-position: 8px 4px;
          text-indent: -9999em;
          min-width: 0 !important;
          &:hover{
              background: var(--dnn-color-primary, #358EEA) url(../../../../../images/closeBtn.png) no-repeat;
              background-position: 8px 4px;
              cursor: pointer;
          }
      }
      a.dnnToggleMax {
          float: left;
          display: block;
          height: 18px;
          width: 30px;
          margin: 4px 0 0 4px;
          overflow: hidden;
          border-top-left-radius: 8px;
          border-bottom-left-radius: 8px;
          background: #585858 url(../../../../../images/resizeBtn.png) no-repeat;
          background-position: 10px 2px;
          text-indent: -9999em;
          &:hover {
              background: var(--dnn-color-primary, #358EEA) url(../../../../../images/resizeBtn.png) no-repeat;
              background-position: 10px 2px;
          }
      }
  }
  .ui-resizable-se {
      float: right;
      height: 24px;
      width: 24px;
      background: url(../../../../../images/modal-resize-icn.png) no-repeat bottom;
  }
  .dnnDialog {
      padding: 10px;
  }
  /* Popup Iframe */
  #iPopUp {
      width: 100%!important;
      padding-top: 10px;
  }
  .ui-dialog-content, #iPopUp .ui-dialog-content {
      position: relative;
      border: 0;
      padding: 0px;
      overflow: auto;
      background: var(--dnn-color-background, #fff);
      zoom: 1;
  }
  .ui-dialog-buttonpane {
      margin: .5em 0 0 0;
      padding: .3em 1em 0em 0em;
      overflow: hidden;
      border-width: 1px 0 0 0;
      background-image: none;
      text-align: left;
      border-top: 1px solid var(--dnn-color-foreground-light, #ddd);
      button {
          margin: 0.5em 0.4em 0.5em 0em;
          padding: 0.5em 1em;
          cursor: pointer;
          border: none;
      }
  }
}
.ui-widget-overlay {
  background:
rgba(0,0,0,.65);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
/* Loading overlay, block UI */
.dnnLoading {
  background: #fff url(../../../../../images/loading.gif) no-repeat center center;
  position: absolute;
  z-index: 9999;
}
.dnnPanelLoading {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}

/*! DNN OVERRIDES HERE */
.ui-sortable-handle {
  margin: 0;
  padding: 0.25rem 0;
  font-size: 1rem;
  text-align: center;
  outline:none!important;
}

div.actionMenu .dnn_mact > li[class*="action"] > ul {
  margin-top:12px !important;
}
div.actionMenu .dnn_mact > li[class*="action"] > ul li {
  height:auto !important;
}

div.actionMenu .dnn_mact > li[class*="action"] > ul li {font-weight:400;}

/* .jspPane {position:absolute} */
.dnnModuleManager::before {
  color:#1f1f1f;
  width:fit-content;
  background:transparent;
  height:30px;
  display:flex;
  justify-content:center;
  text-align:center;
  align-items:center;
  padding:0;
  font-size:.95rem;
  left:0;
  z-index:3;
  display:none;
}

.EditBarEmptyPane.dnnModuleManager::before {
  width:fit-content;
  background:#1f1f1f;
  color:#fff;
  height:auto;
  font-size:.75rem;
  padding:2px 4px;
}
/*-------------------------------------*/
/* SCROLL BAR */
/*-------------------------------------*/
.jspContainer {
  overflow: hidden;
  position: relative;
}
.jspPane {
  position: absolute;
}
.jspVerticalBar {
  position: absolute;
  top: 0;
  right: 0;
  width: 11px;
  height: 100%;
  background: #ccc;
}
.jspHorizontalBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 11px;
  background: #ccc;
}
.jspVerticalBar *, .jspHorizontalBar * {
  margin: 0;
  padding: 0;
}
.jspCap {
  display: none;
}
.jspHorizontalBar .jspCap {
  float: left;
}
.jspTrack {
  background: transparent;
  position: relative;
}
.jspVerticalBar .jspTrack {
  width: 10px;
  margin: 0 0 0 3px;
}
.jspHorizontalBar .jspTrack {
  height: 5px;
  margin: 3px 0 3px 0;
}
.jspVerticalBar .jspCap {
  display: block;
  height: 3px;
  width: 11px;
}
.jspHorizontalBar .jspCap {
  display: block;
  width: 3px;
  height: 11px;
}
.jspDrag {
  position: relative;
  top: 0;
  left: 0;
  border-radius: 3px 3px 3px 3px;
  opacity: .75;
  background: #000;
  cursor: pointer;
}
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
  float: left;
  height: 5px;
}


div.actionMenu .dnn_mact {
  display: flex;
  gap:.05rem;
  margin-left:-28px!important;
  font-family:var(--font-body);
  outline:none!important;
  background:#222;
}

.container-fluid div.actionMenu .dnn_mact {margin-left:-66px!important}


 .aperture-title-wrapper h5 {display:none!important}

div.actionMenu .dnn_mact > li[class*="action"] {
  width: auto !important;
  height: auto !important;
  float: none !important;
  border: none !important;
}

.actionMenu .dnn_mact > li {margin-right:0!important;}

div.actionMenu .dnn_mact > li[class*="action"] > a {
  height: 30px !important;
  width: 30px !important;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  background:transparent;
  font-family:var(--font-body);
}

.dnnEditState .actionMenu {
  display: block !important;
  opacity: 1 !important;
}

.dnnEditState form[action*="edit"] #dnn_TopNotificationPane, .dnnEditState form[action*="edit"] .header-placeholder, .dnnEditState form[action*="edit"] .DNNEmptyPane, .dnnEditState form[action*="Edit"] #dnn_TopNotificationPane, .dnnEditState form[action*="Edit"] .header-placeholder, .dnnEditState form[action*="Edit"] .DNNEmptyPane {
  display:none
}

.dnnForm fieldset {padding-top:0}

.dnn_mact {
  padding-left: 0;
}

.dnnDragHint {
  height: 30px !important;
}

div.actionMenu ul.dnn_mact > li {border:none!important}

div.actionMenu ul.dnn_mact li.dnn_menu_label > div {
  background:#222;
  padding:.5em .1em;
  font-weight:400;
  transition:opacity .3s ease;
  border:none!important;
  font-family:var(--font-body)
}

div.actionMenu ul.dnn_mact > li.actionMenuMove > ul li {font-family:var(--font-body)}


.aperture-title-wrapper h5 {display:none}
.dnnModuleManager {
  padding: 0 !important;
}

/* --------------------------------------------------------- * DNN EDITOR ------------------------------------------------------------*/
.dnnEditState #dnn_Row_3_ContentArea_Col_8_SyncPanel, .dnnEditState #dnn_Row_4_ContentArea_Col_6_SyncPanel {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.dnnEditState #dnn_Row_3_ContentArea_Col_8.DNNEmptyPane, .dnnEditState #dnn_Row_4_ContentArea_Col_6.DNNEmptyPane {
  position: relative;
  background: lightblue;
}
.dnnEditState #dnn_Row_3_ContentArea_Col_8.DNNEmptyPane::after, .dnnEditState #dnn_Row_4_ContentArea_Col_6.DNNEmptyPane::after {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  font-size: 0.75rem;
  content: 'CONTENT HERE\A Namespaced with the class .content-area so that all content can be styled the same way (.content-area h1, .content-area h2, etc.). For ease of future changes it\'s recommended to add a new HTML module under each content section (Usually separated by H2 tags)';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  text-align: center;
  white-space: pre-wrap;
}
.dnnEditState #dnn_Row_3_SidebarArea_Col_4.DNNEmptyPane, .dnnEditState #dnn_Row_4_SidebarArea_Col_6.DNNEmptyPane {
  position: relative;
  background: lightblue;
}
.dnnEditState #dnn_Row_3_SidebarArea_Col_4.DNNEmptyPane::after, .dnnEditState #dnn_Row_4_SidebarArea_Col_6.DNNEmptyPane::after {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  font-size: 0.75rem;
  content: 'SIDEBAR HERE\A This sidebar area is namespaced with the class .sidebar-area';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  text-align: center;
  white-space: pre-wrap;
}
.dnnEditState #dnn_Row_5_ContentArea_Col_12.DNNEmptyPane {
  position: relative;
  background: lightblue;
}
.dnnEditState #dnn_Row_5_ContentArea_Col_12.DNNEmptyPane::after {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  font-size: 0.75rem;
  content: 'CONTENT HERE\A Namespaced with the class .content-area so that all content can be styled the same way (.content-area h1, .content-area h2, etc.). For ease of future changes it\'s recommended to add a new HTML module under each content section (Usually separated by H2 tags)';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  text-align: center;
  white-space: pre-wrap;
}
.dnnEditState .actionMenu {
  display: block !important;
  opacity: 1 !important;
}
.content-pane-title {
  margin: 0;
  padding: 0.25rem 0;
  font-size: 1rem;
  text-align: center;
  background:#222;
  color: white;
  font-family:var(--font-body);
}

/* --------------------------------------------------------- * DNN EDIT PAGE ------------------------------------------------------------*/
.ehCurrentContent {overflow:hidden;}
.ehccContent fieldset:last-child {
  border:none;
}

@keyframes fade-in {
  from {
    opacity:0;
  }

  to {
    opacity:1;
  }
}


.dnnFormItem textarea {max-width:100%;padding:1rem;border:none!important;outline:none;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;transition:all .3s ease-in-out;font-size:1rem;height:550px!important;animation-name:fade-in;animation-duration:300ms}

.dnnFormItem textarea:focus, .dnnFormItem textarea:active {box-shadow:rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 171, 216, 1) 0px 0px 0px 1px}

.dnnFormItem .dnnLabel {width:fit-content}
.dnnFormItem .dnnBoxLabel {font-weight:bold}
.dnnFormItem .dnnLabel span {font-size:1.25rem;font-weight:bold;}
#dnnEditHtml .dnnActions {padding-top:0}

/*! RENDER MODE RADIO BUTTONS */
[id*="EditHTML_txtContent_DivBasicRender"] {
  display: none !important;
}

/* --------------------------------------------------------- * HTML TEXT EDITOR ------------------------------------------------------------*/
.html-syntax-highlight {
  font-family: 'Fira Code', 'Courier New', monospace;
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 1rem;
  border: 1px solid #333;
  line-height: 1.5;
  white-space: pre;
}

/* Optional for line numbers feel */
.html-syntax-highlight::selection {
  background: #264f78;
}


/*Edit In Place Tool Bar Classes*/
.eipbackimg {
  position:absolute;
  left:15px;
  top:-32px;
  white-space:nowrap;
  background-image:url(../../../../../../images/eip_toolbar.png) repeat-x;
  border-radius:30px;
  transition:all .3s ease-in-out;
  background-color:var(--dnn-color-primary,#00abd8);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  z-index:1001;
  transform:translateY(10%)
}

.container .eipbackimg {left:3px;}

.eipbutton_justifyleft, .eipbutton_justifycenter, .eipbutton_justifyright, .eipbutton_orderedlist, .eipbutton_orderedlist,  .eipbutton_outdent, .eipbutton_indent {display:none!important}

.eipbackimg:hover {background-color:var(--dnn-color-secondary,#9e2065)}

.eipbackimg.editMode {
  border:none!important;
  background:#6b6b6b!important;
  opacity:1;

  border-radius:10px;
}
.eipbackimg.containerTitle {
  margin-top: -8px;
}
.eipbackimg.containerTitle.editMode {
  left: auto;
  right: 0px;
  margin-top: 2px;
  background: none !important;
  border: none !important;
}
.eipbuttonbackimg{
  width: 32px;
  height: 32px;
  cursor: pointer;
  float:left;
  background: url(../../../../../../images/eip_toolbar.png) no-repeat;
}
.eipbackimg.editMode .eipbuttonbackimg {
 border:none!important;
  opacity: 0.5;
}
.eipbackimg.editMode.containerTitle .eipbuttonbackimg {
  border: none;
  opacity: 1;
}
.eipbuttonbackimg.eipbutton_cancel{
  background-position: -32px 0;
}
.eipbuttonbackimg.eipbutton_bold{
  background-position: -64px 0;
}
.eipbuttonbackimg.eipbutton_italic{
  background-position: -96px 0;
}
.eipbuttonbackimg.eipbutton_underline{
  background-position: -128px 0;
}
.eipbuttonbackimg.eipbutton_justifyleft{
  background-position: -160px 0;
}
.eipbuttonbackimg.eipbutton_justifycenter{
  background-position: -192px 0;
}
.eipbuttonbackimg.eipbutton_justifyright{
  background-position: -224px 0;
}
.eipbuttonbackimg.eipbutton_orderedlist{
  background-position: -256px 0;
}
.eipbuttonbackimg.eipbutton_unorderedlist{
  background-position: -288px 0;
}
.eipbuttonbackimg.eipbutton_outdent{
  background-position: -320px 0;
}
.eipbuttonbackimg.eipbutton_indent{
  background-position: -352px 0;
}
.eipbuttonbackimg.eipbutton_createlink{
  background-position: -384px 0;
  border-bottom-right-radius:10px;
  border-top-right-radius:10px;
}
.eipbackimg.containerTitle .eipbutton_cancel {
  background: url(../../../../../../images/eip_title_cancel.png) no-repeat center center;
}
.eipbutton_edit {
  background: url(../../../../../../images/eip_edit.png) no-repeat 100% center;
  float:left;
}
.eipbutton_save {
  background: url(../../../../../../images/eip_save.png) no-repeat 100% center;
  float:left;
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
}
.eipbackimg.containerTitle .eipbutton_save {
  background-image: url(../../../../../../images/eip_title_save.png);
}
.eipbackimg.editMode .eipborderhover {
  background-color: #333;
  opacity: 1;
}
.eipbackimg.editMode.containerTitle .eipborderhover {
  background-color: inherit;
}
div[id$=titleLabel_tb].visible ~ span{
  margin-left: 32px;
}
.LabelEditTextClass {position:relative;outline:none;transition:all .3s ease-in-out}
.LabelEditTextClass::before {
  content:'';
  z-index:-1;
  position:absolute;
  inset:0;  
  transition:all .3s ease-in-out;
  border:2px solid transparent;
}


.LabelEditTextClass[contenteditable="true"]::before {border-color:rgb(0, 171, 216)}

/*! LOGIN PAGE */
.loginContent {height:70vh;display:flex!important;align-items:center;margin-top:1rem}
.LoginPanel {margin-inline:auto;padding: 3rem 2rem;
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
border-radius:5px;
font-family:var(--font-body);
opacity:1;
transition:all .3s ease

}
 #dnn_ctr_Login_Login_DNN_lblLogin {display:none}
 .LoginPanel .dnnForm.dnnLoginService .dnnFormItem {display:flex;flex-direction:column;}

.LoginPanel input[type="password"], .LoginPanel input[type="text"] {max-width:100%;width:100%;border:none;background:var(--dnn-color-surface-light);min-height:43px;transition:border .3s ease-in-out;border:2px solid transparent;outline:none;border-radius:2px}
.LoginPanel .dnnCheckbox {position:relative;top:4px}

.LoginPanel input[type="password"]:focus, .LoginPanel input[type="text"]:focus {border:2px solid var(--dnn-color-primary);background:var(--dnn-color-surface-light);box-shadow:none;}
.LoginPanel .dnnActions {display:flex;justify-content:center;flex-direction:row;padding:0}

#dnn_ctr_Login_Login_DNN_passwordLink {background-color:var(--dnn-color-tertiary);border-color:var(--dnn-color-tertiary-light)}

#dnn_ctr_Login_Login_DNN_passwordLink:hover {background-color:var(--dnn-color-tertiary-light)}

/*! MODULE SETTINGS */
ul.dnnAdminTabNav {
  border-bottom: 1px solid #c2c2c2;
  display: flex;
  margin-left: 0;
  margin-top: .3125rem;
  width: 100%;
  padding-left:0
}

ul.dnnAdminTabNav li {align-items: center;
  display: flex;
  list-style: none;
}

ul.dnnAdminTabNav li a {
  border: 1px solid #c2c2c2;
  border-bottom: none;
  border-radius: var(--dnn-controls-radius,3px) var(--dnn-controls-radius,3px) 0 0;
  margin-bottom: 0;
  margin-right: .25rem;
  padding: 12px 9px 10px;
  text-decoration: none;
  color:var(--dnn-color-primary-dark);
}

ul.dnnAdminTabNav li.ui-tabs-active a {
  background: var(--dnn-color-primary,#fff);
  border-color: var(--dnn-color-primary,#028bff);
  color: var(--dnn-color-primary-contrast,#000);
}

h2.dnnFormSectionHead {
  border-bottom: 1px solid #ddd;
  font-size: 2rem;
  letter-spacing: .001875rem;
  line-height: 2.25rem;
  margin-bottom: 18px;
  margin-top: 8px;
  font-family:var(--font-body);
}

 .dnnForm fieldset {
  clear: none;
  margin-bottom: 1.125rem;
  position: relative;
  text-align: left;
  border:none
}

 .dnnForm .dnnFormItem {
  clear: both;
  display:block;
  position: relative;
  text-align: left;
  width: 100%;
}
 .dnnForm
.dnnLabel {
  float: left;
  margin-right: 18px;
  overflow: visible;
  padding-right: 20px;
  position: relative;
  text-align: right;
  width: 20%;
}

 .dnnForm
.dnnLabel span {font-size:16px;font-weight:400}
.dnnModuleSettings div.dnnmsStat {width:100%}

.dnnPermissionsGrid .dnnGridHeader {background:var(----dnn-color-primary, #00A5E0);color:#fff}
.dnnPermissionsGrid .dnnGridHeader td {padding:5px 15px;border-right:1px solid #fff}
.permissionHeader{padding:10px 5px} 
.dnnGridAltItem {background:#f2f2f2}

/*! DIALOG BOX */
div.ui-dialog-titlebar > .ui-dialog-titlebar-close {
  background:
#585858 url(../../../../../images/closeBtn.png) no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
  background-position:
4px 4px;
  border:
3px solid #fff;
  border-radius:
12px;
  display: block;
  height: 24px;
  margin:
0;
  min-width: 0 !important;
  overflow:
hidden;
  position: absolute;
  right: -30px;
  text-indent: -9999em;
  top: -30px;
  width: 24px;
  cursor:pointer;
  transition:background .3s ease
}

div.ui-dialog-titlebar > .ui-dialog-titlebar-close:hover {background-color:var(--dnn-color-primary, #00A5E0 )}

.dnnFormPopup .ui-dialog-buttonpane, .dnnFormPopup .ui-dialog-titlebar {border:none;}
 .ui-dialog-content, & #iPopUp .ui-dialog-content {text-wrap:balance}
/*! CODE MIRROR */

.cm-s-material-darker.CodeMirror, .CodeMirror-gutter {background:#283238!important;border-radius:0 0 8px 8px;padding-top:5px;}
.CodeMirror {min-height:500px;}
.cm-s-material-darker .cm-tag {color:#569CD6!important}
.cm-s-material-darker .cm-attribute {color:#9CDCFE!important}
.cm-s-material-darker .cm-string {color:#CE9178!important}
.cm-s-material-darker .cm-comment {color:#6A9955!important}

.cm-s-material-darker div.CodeMirror-selected {background:rgb(38, 79, 120,.85)!important}
/*! HTML EDITOR ADD-Ons */
.editor-toolbar {
  display: grid;
grid-template-columns: 4fr 1fr; 
    background:#434D53;
    padding:10px;
    border-radius:8px 8px 0px 0px;
    align-items: center;
    justify-content: space-between;
    overflow:auto;
    margin:4.5rem -1px -.3px;
    overflow:visible;
}

.editor-toolbar .snippet-buttons {display:flex;justify-content:end;gap:15px;}
.button.html-editor-button, .editor-toolbar .button  {color:#fff;border:none;transition:all .3s ease-in;border-radius:3px;cursor:pointer;max-height:45px;min-height:45px;text-transform:initial;font-weight:500;background:var(--dnn-color-primary)}
.editor-toolbar .snippet-buttons #snippets-dropdown {background:var(--dnn-color-secondary)}
.button.html-editor-button:hover, .editor-toolbar .button:hover {background:var(--dnn-color-secondary)}
.editor-toolbar .snippet-buttons #snippets-dropdown:hover {background:var(--dnn-color-tertiary)}

.DnnModule .heading_wrapper {position:absolute;top:-120px;left:15px;color:var(--dnn-color-tertiary);line-height:1;}
.dnnEditState form[action*="edit"] .page .container, .dnnEditState form[action*="dit"] .page .container{max-width:100%!important}
.dnnEditState form[action*="edit"] fieldset {padding-top:0!important}


#page-link-btn, #snippets-dropdown {position:relative;}
#page-link-snippets, #html-snippets  {position:absolute;visibility:hidden;right:0;top:105%;list-style-type:none;background:var(--dnn-color-tertiary-dark, #0B1C24);color:#fff;z-index:4;padding-left:0;min-width:250px;height:fit-content;border-radius:8px;margin:0;overflow:hidden;}
#page-link-btn.show #page-link-snippets, #snippets-dropdown.show #html-snippets {visibility:visible;}

#page-link-snippets li, #html-snippets li {font-size:1rem;text-transform:capitalize;}
#page-link-snippets li[data-depth="0"]:nth-of-type(1), #html-snippets li[data-depth="0"]:nth-of-type(1) {border-radius:8px 8px 0 0} 
#page-link-snippets li[data-depth="0"]:last-of-type, #html-snipppets li[data-depth="0"]:last-of-type  {border-radius:0 0 8px 8px} 
#page-link-snippets .dropdown, #html-snippets {list-style-type:none;}
#page-link-snippets li[data-depth="0"] > div, #html-snippets li {padding:.5rem 1rem}
#page-link-snippets li[data-depth="0"] > div:hover, #html-snippets li:hover {background:var(--dnn-color-primary,#00abd8)}
#page-link-snippets li[data-depth="0"] .dropdown {padding-left:0}
#page-link-snippets li[data-depth="0"] .dropdown .nav-item > div {padding-left:25px;font-weight:400}
#page-link-snippets li[data-depth="0"] .dropdown .nav-item:hover > div {background:var(--dnn-color-secondary,#9e2065)}

.eipbackimg {display:block!important;visibility:hidden;opacity:0;}
header .eipbackimg, footer .eipbackimg, .sidebar-area .eipbackimg  {visibility:hidden!important;}
.visible .eipbackimg {visibility:visible;opacity:1;}
/*! Persona Bar Edits */
.personabarnav > li#Edit.locked svg .back {fill:var(--dnn-color-tertiary-light, #3C7A9A)!important}

.dnnModuleManager .DnnModule.floating, .dnnModuleSorting .DnnModule.floating {
  background:var(--dnn-color-primary, #00A5E0);
  border:none
}

.dnnModuleManager .DnnModule.floating .ui-sortable-handle {background:transparent}
.dnnModuleManager .DnnModule.floating > div.dnnDragHint > div span.title, .dnnModuleSorting .DnnModule.floating > div.dnnDragHint > div span.title {color:#fff}

/* THEME COMPONENT STYLES */
body.dnnEditState .notification-banner {
  position: relative !important;
}

.Normal.LabelEditTextClass .lazyload {animation:fade-in;animation-duration: 1s;}
.dnnEditState .dnnTextEditor {@-webkit-keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes fade-in-top{from{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fade-in-top{from{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slide-in-bottom{from{opacity:0;-webkit-transform:translateY(10%);transform:translateY(10%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-in-bottom{from{opacity:0;-webkit-transform:translateY(10%);transform:translateY(10%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}}