html {
  scroll-behavior: smooth;
}

/* tinymce */
.align_left {
  text-align: left;
}
.align_center {
  text-align: center;
}
.align_right {
  text-align: right;
}
.align_justify {
  text-align: justify;
}

/*
.has-tracy-debugbar .adminbar {
  z-index: 101;
}
*/
#adminbar {
  z-index: 1000;
}

.admin-options {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
}
  .admin-options .edit {
    display: block !important;
    float: right !important;
    margin-left: 2px !important;
    background-color: #B30000 !important; /* a11y: WCAG AAA */
    padding: 2px 5px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    font-weight: bold !important;
    text-decoration: none !important;
    font-family: sans-serif !important;
    color: #fff !important;
  }
    .admin-options .edit:hover,
    .admin-options .edit:focus,
    .admin-options .edit:active {
      color: #fff !important;
      text-decoration: none !important;
    }

/*
.pw-edit {
  position: relative;
  &.pw-edited,
  .pw-editing {
    &:hover {
      background-color: inherit;
    }
  }
  &:hover {
    cursor: pointer;
    background-color: #ffe;
    //&:after {
    //  display: inline-block;
    //  content: 'double-click to edit';
    //  position: absolute;
    //  right: 0;
    //  top: 0;
    //  color: #fff;
    //  background-color: red;
    //  padding: 3px 5px;
    //  font-size: 12px;
    //  font-weight: bold;
    //}
  }
}
*/

.template-alef #app {
  max-width: 100% !important;
}

/* occurs on form labels */
.InputfieldHeaderHidden {
  /*display: none;*/
  /* from bootstrap 5 */
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  padding: 0!important;
  margin: -1px!important;
  overflow: hidden!important;
  clip: rect(0,0,0,0)!important;
  white-space: nowrap!important;
  border: 0!important;
}

.InputfieldHidden {
  display: none;
}

/* (1) these are needed so that 'required' fields have the red '*' */
.InputfieldStateRequired > .InputfieldHeader:first-child:after {
  /* Required state: Add asterisk to indicate field is required */
  content: '*';
  margin-left: 0.25em; /* CORE */
  color: red;
}
/* clearfix for legacy and default frameworks */
.Inputfields > .Inputfield > .InputfieldContent:before,
.Inputfields > .Inputfield > .InputfieldContent:after,
.InputfieldForm:after {
  content: " ";
  display: table;
}
.Inputfields > .Inputfield > .InputfieldContent:after,
.InputfieldForm:after {
  clear: both;
}



/* (3) we need this to hide the special honeypot fields which has the following css id */
#wrap_Inputfield- {
  display: none;
}

/* (4) this is required if using the 3rd party hCaptcha module in Form Builder; hides the label field */
.InputfieldHCaptcha .InputfieldHeader {
  display: none !important; /* need !important since it has uk-display-block */
}

/* make sure .pw-region-debug shows scroll bar if the text is too long */
.pw-region-debug {
  overflow: auto;
}

@media print {
  /* not working!!! */
  /*
  :not(#content),
  */
  #indicator,
  #toolbar,
  header,
  #header,
  aside,
  #sidebar,
  footer,
  #footer,
  #content-header,
  #offcanvas,
  #modal,
  #search-modal,
  #alef-debug,
  #debug,
  .admin-options,
  .no-print,
  .no-print *
  {
    display: none !important;
  }
  * {
    font-family: sans-serif !important;
    overflow: visible !important;
    page-break-inside: auto !important;
  }
}