/* smooth scrolling anchor links */
html {
  scroll-behavior: smooth;
}

/* enabled / disabled */
.alef-disabled {
  opacity: .5 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}
.alef-enabled {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* custom actions */
.PageListActionCopyId,
.PageListActionCopyUrl {
  a {
    background-color: #000 !important;
  }
}

/* loading */
#alef-loading-full {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 0;
  overflow: hidden;

  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;

  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  &.visible {
    opacity: 1;
    height: 100vh;
    pointer-events: auto;
  }
}

/* tinymce fixes */
.tox-collection__item-label > div {
  font-size: 16px !important;
}

.tracy-panel {
  z-index: 2147483647 !important;
}

/* my default button setup makes this be 1080px */
/* however safari (and perhaps other browsers) seem to break the second line into 2 lines */
/* this causes an overlap of the top part of the editable area */
/* therefore force the width to be wider so it doesn't break into 2 lines */
.tox-tinymce {
  width: 1200px !important;
}

/* ckeditor fixes */
.cke_combopanel {
  width: auto !important;
  max-width: 600px !important;
  height: 400px !important;
}
.cke_combo__styles > a > .cke_combo_text {
  width: auto !important;
  max-width: 240px !important;
}

/* admin: 'dev' top-right notification label */
body.env-development:after {
  display: inline-block;
  content: 'dev';
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
  background-color: blue;
  color: #fff;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: bold;
}

/* masthead full width */
.alef-navbar-container-expand #pw-masthead > .uk-container {
  max-width: 100% !important;
}

/* masthead navbar have smaller font */
.alef-navbar-font-small #pw-masthead .uk-navbar-left,
.alef-navbar-font-small #pw-masthead .uk-navbar-right,
.alef-navbar-font-small #pw-masthead [class*='uk-navbar-center'] {
  gap: 15px !important;
}
.alef-navbar-font-small #pw-masthead a {
  font-size: 14px !important;
}
  .alef-navbar-font-small #pw-masthead ul.pw-primary-nav {
    gap: 18px !important;
  }

/* ProcessRedirects adjustments */
body.ProcessRedirects #AdminDataTable1 tbody tr td:nth-child(1),
body.ProcessRedirects #AdminDataTable1 tbody tr td:nth-child(2) {
  width: 400px;
  word-break: break-all;
}

/*
#wrap_Inputfield_blocks > .InputfieldContent > .Inputfields > .InputfieldRepeaterItem {
  display: flex;
  flex-direction: column-reverse;
}
*/

.blocks-cheat-table {
  background: #fff;
}

/* matrix fixes - copy repeater item disabled color */
.vex-dialog-form select option[disabled] {
  color: #ddd !important;
}

/* matrix fixes - was ocurrring on UAG, but not alef-uikit3? */
.Inputfields .InputfieldRepeater .InputfieldRepeaterItemHasDepth {
  background: transparent !important;
}

/* matrix fixes - don't use display: flex */
.vex-dialog-form .InputfieldRepeaterMatrixAddCustom {
  display: block !important;
}

/* export data field taller for convenience */
#export_data {
  height: 2000px;
}

/* readonly special styling */
body.ProcessModule [readonly] {
  color: #999;
  opacity: .65;
}

/* when editing options page, make the 'name' field not visible in the event it's visible */
body.ProcessPageEdit-template-options #wrap_Inputfield__pw_page_name {
  display: none !important;
}

/* #alef-iframe */
/*
#alef-iframe {
  padding-bottom: 30px;
  border: 1px dashed #f0f0f0;
  margin-bottom: 10px;
}
*/

/* make docs have smaller container for readability */
.alef-docs #pw-content-body {
  margin: 0 auto !important;
  max-width: 1200px !important;
}
/* make docs have better looking, github-like blockquote */
.alef-docs #pw-content-body blockquote {
  border-left: 5px solid #f0f0f0;
  font-style: inherit;
  font-size: inherit;
  color: rgb(106, 115, 125); /* github */
}
.alef-docs #pw-content-body blockquote p {
  margin-left: 15px;
  
}

.alef-doclist {}
.alef-doclist > .pw-table-responsive { margin-top: 0 !important; }

.alef-main-container-expand #pw-content-head { display: none !important; }
.alef-main-container-expand main.pw-container { max-width: 100%; padding-left: 0; padding-right: 0; margin-top: 0 !important; }
.alef-main-container-expand main.pw-container header#pw-content-head { max-width: 1600px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }


/* options field */
[class*='Inputfield_options_repeater'] {
  border-top: 1px dashed rgb(217, 225, 234) !important;
  border-bottom: 3px solid rgb(217, 225, 234) !important;
  outline: 0;
}
[class*='Inputfield_options_repeater'] > .InputfieldHeader {
}

[class*='Inputfield_options_repeater'] .InputfieldNoBorder > .InputfieldContent {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[class*='Inputfield_options_repeater'] > .InputfieldHeader:after {
  content: "" !important;
}

/* make builder labels slightly smaller */
#wrap_Inputfield_blocks .InputfieldHeader {
  /*font-size: 15px;*/
}
#wrap_Inputfield_blocks .InputfieldRepeaterMatrixItem {
  position: relative;
}
.block-checkbox {
  position: absolute;
  z-index: 9999;
  right: 190px;
  top: 7px;
  text-align: left;
  width: auto !important;
}



/*
#wrap_Inputfield_blocks [data-typename="builder_section"].InputfieldRepeaterItem > .InputfieldContent > .Inputfields > .InputfieldMystique > .InputfieldContent,
#wrap_Inputfield_blocks [data-typename="builder_container"].InputfieldRepeaterItem > .InputfieldContent > .Inputfields > .InputfieldMystique > .InputfieldContent,
#wrap_Inputfield_blocks [data-typename="builder_row"].InputfieldRepeaterItem > .InputfieldContent > .Inputfields > .InputfieldMystique > .InputfieldContent,
#wrap_Inputfield_blocks [data-typename="builder_column"].InputfieldRepeaterItem > .InputfieldContent > .Inputfields > .InputfieldMystique > .InputfieldContent {
  margin-top: 20px !important;
}
#wrap_Inputfield_blocks [data-typename="builder_section"].InputfieldRepeaterItem > .InputfieldContent > .Inputfields > .InputfieldMystique > .InputfieldHeader,
#wrap_Inputfield_blocks [data-typename="builder_container"].InputfieldRepeaterItem > .InputfieldContent > .Inputfields > .InputfieldMystique > .InputfieldHeader,
#wrap_Inputfield_blocks [data-typename="builder_row"].InputfieldRepeaterItem > .InputfieldContent > .Inputfields > .InputfieldMystique > .InputfieldHeader,
#wrap_Inputfield_blocks [data-typename="builder_column"].InputfieldRepeaterItem > .InputfieldContent > .Inputfields > .InputfieldMystique > .InputfieldHeader {
  display: none !important;
}
*/

/* when section/container/row/column is first created, don't show the item options field expanded; makes it a little easier to work with it when adding multiple things at a time? */
/*
#wrap_Inputfield_blocks [data-typename="builder_section"].InputfieldRepeaterItem.InputfieldRepeaterItemRequested > .InputfieldContent,
#wrap_Inputfield_blocks [data-typename="builder_container"].InputfieldRepeaterItem.InputfieldRepeaterItemRequested > .InputfieldContent,
#wrap_Inputfield_blocks [data-typename="builder_row"].InputfieldRepeaterItem.InputfieldRepeaterItemRequested > .InputfieldContent,
#wrap_Inputfield_blocks [data-typename="builder_column"].InputfieldRepeaterItem.InputfieldRepeaterItemRequested > .InputfieldContent {
  display: none !important;
}
*/
/* don't show layout components on 'sidebar' template */
body.ProcessPageEdit-template-sidebar #wrap_Inputfield_blocks .InputfieldRepeaterMatrixAddItem .InputfieldRepeaterMatrixAddLink[data-label='Section'],
body.ProcessPageEdit-template-sidebar #wrap_Inputfield_blocks .InputfieldRepeaterMatrixAddItem .InputfieldRepeaterMatrixAddLink[data-label='Container'],
body.ProcessPageEdit-template-sidebar #wrap_Inputfield_blocks .InputfieldRepeaterMatrixAddItem .InputfieldRepeaterMatrixAddLink[data-label='Row'],
body.ProcessPageEdit-template-sidebar #wrap_Inputfield_blocks .InputfieldRepeaterMatrixAddItem .InputfieldRepeaterMatrixAddLink[data-label='Column'],
body.ProcessPageEdit-template-sidebar #wrap_Inputfield_blocks .InputfieldRepeaterMatrixAddItem .InputfieldRepeaterMatrixAddLink[data-label='Div'] {
  display: none !important;
}





/*
prevent a field that's hidden by showIf from being 100% width if it has a non-100% width
not sure why processwire does this, but we will prevent it from happening
*/
/*
#wrap_Inputfield_blocks .Inputfield.InputfieldStateHidden[data-colwidth="20%"]{width:20%!important;}
#wrap_Inputfield_blocks .Inputfield.InputfieldStateHidden[data-colwidth="25%"]{width:25%!important;}
#wrap_Inputfield_blocks .Inputfield.InputfieldStateHidden[data-colwidth="33%"]{width:33%!important;}
#wrap_Inputfield_blocks .Inputfield.InputfieldStateHidden[data-colwidth="50%"]{width:50%!important;}
*/

/* don't put #wrap_Inputfield_blocks */
/*
.InputfieldMystique .uk-hidden[data-show-if] {
  opacity: .5 !important;
  display: block !important;
  pointer-events: none !important;
}
*/













/* make the items of components have sticky headers so its easy to remember which component is being edited if many nested fieldsets are expanded! */
/*
#wrap_Inputfield_blocks > .InputfieldContent > .Inputfields > .Inputfield > .InputfieldHeader,
#wrap_Inputfield_sections > .InputfieldContent > .Inputfields > .Inputfield > .InputfieldHeader {
  position: sticky;
  top: 0px;
  z-index: 10;
}
*/
/* space out the items of components and add a drop shadow */
/*
#wrap_Inputfield_blocks > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem {
  box-shadow: 4px 4px 10px rgba(0,0,0,.1);
  margin-bottom: 15px;
}
*/

[id*='wrap_Inputfield_list_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader,
[id*='wrap_Inputfield_grid_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader,
[id*='wrap_Inputfield_slider_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader,
[id*='wrap_Inputfield_panel_slider_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader,
[id*='wrap_Inputfield_slideshow_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader,
[id*='wrap_Inputfield_accordion_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader,
[id*='wrap_Inputfield_description_list_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader,
[id*='wrap_Inputfield_nav_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader,
[id*='wrap_Inputfield_subnav_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader,
[id*='wrap_Inputfield_table_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader,
[id*='wrap_Inputfield_button_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader,
[id*='wrap_Inputfield_carousel_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader,
[id*='wrap_Inputfield_tab_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader,
#wrap_Inputfield_blocks [id*='wrap_Inputfield_menu_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader {
  background: #E1BC29 !important;
  outline-color: #E1BC29 !important;
}
  [id*='wrap_Inputfield_list_items'] .InputfieldRepeaterItemControls,
  [id*='wrap_Inputfield_grid_items'] .InputfieldRepeaterItemControls,
  [id*='wrap_Inputfield_slider_items'] .InputfieldRepeaterItemControls,
  [id*='wrap_Inputfield_panel_slider_items'] .InputfieldRepeaterItemControls,
  [id*='wrap_Inputfield_slideshow_items'] .InputfieldRepeaterItemControls,
  [id*='wrap_Inputfield_accordion_items'] .InputfieldRepeaterItemControls,
  [id*='wrap_Inputfield_description_list_items'] .InputfieldRepeaterItemControls,
  [id*='wrap_Inputfield_nav_items'] .InputfieldRepeaterItemControls,
  [id*='wrap_Inputfield_subnav_items'] .InputfieldRepeaterItemControls,
  [id*='wrap_Inputfield_table_items'] .InputfieldRepeaterItemControls,
  [id*='wrap_Inputfield_button_items'] .InputfieldRepeaterItemControls,
  [id*='wrap_Inputfield_carousel_items'] .InputfieldRepeaterItemControls,
  [id*='wrap_Inputfield_tab_items'] .InputfieldRepeaterItemControls,
  #wrap_Inputfield_blocks [id*='wrap_Inputfield_menu_items'] .InputfieldRepeaterItemControls {
    background: #E1BC29 !important;
    outline-color: #E1BC29 !important;
  }

.alef-has-region > .InputfieldHeader {
  background: #e129d2 !important;
  outline-color: #e129d2 !important;
}
  .alef-has-region .InputfieldRepeaterItemControls {
    background: #e129d2 !important;
  }


/* deleting */
/*
.Inputfields .InputfieldRepeater .InputfieldContent .InputfieldRepeaterItem>.InputfieldHeader.ui-state-error
[id*='wrap_Inputfield_list_items'] > .InputfieldContent > .Inputfields > .Inputfield.InputfieldRepeaterItem > .InputfieldHeader.ui-state-error {
  background: #bc283d;
  outline-color: #bc283d;
}
*/
.InputfieldHeader.ui-state-error {
  background: #bc283d !important;
  outline-color: #bc283d !important;
}
  .InputfieldRepeaterDeletePending .InputfieldHeader.ui-state-error {
    background: #bc283d !important;
  }


/* hide the label of the 'menu_items_content_dynamic' */
[class*='Inputfield_menu_items_content_dynamic_repeater'] > .InputfieldHeader {
  display: none !important;
}

/* hide 'menu' option in item_source for all blocks */
#wrap_Inputfield_blocks [id^='wrap_Inputfield_item_source_repeater'] .InputfieldRadios > ul > li:last-child {
  display: none !important;
}

/* hide headline (aka subtitle) from menu_items except actual menus */
[id^='wrap_Inputfield_menu_items'] [id^='wrap_Inputfield_headline_repeater'] {
  display: none !important;
}
.ProcessPageEdit-template-menu [id^='wrap_Inputfield_menu_items'] [id^='wrap_Inputfield_headline_repeater'] {
  display: block !important;
}



/* double bracket hack for repeater item labels (span within span) */
#wrap_Inputfield_blocks .InputfieldRepeaterItemLabel .ui-priority-secondary {
  opacity: 1;
}
#wrap_Inputfield_blocks .InputfieldRepeaterItemLabel .ui-priority-secondary > .ui-priority-secondary {
  /* relative because it's inline and we want to adjust negative top margin */
  position: relative;
  top: -1px;
  /* other styles */
  background-color: #f0f3f7;
  /*color: #fff;*/
  color: #333;
  border-radius: 10px;
  margin-right: 10px;
  padding: 0px 6px 3px 6px;
  font-size: 13px;
  /*font-weight: bold !important;*/
  opacity: 1;
}





#wrap_Inputfield_blocks .InputfieldRepeaterMatrixAddItem .InputfieldRepeaterMatrixAddLink[data-label='Collection'],
#wrap_Inputfield_blocks .InputfieldRepeaterMatrixAddItem .InputfieldRepeaterMatrixAddLink[data-label='Collection + Advanced Tags'],
#wrap_Inputfield_blocks .InputfieldRepeaterMatrixAddItem .InputfieldRepeaterMatrixAddLink[data-label='Reusable'] {
  background: yellow;
  padding: 4px 8px;
  border-radius: 10px;
}


#___wrap_Inputfield_blocks .InputfieldRepeaterItemLabel .ui-priority-secondary:last-of-type {
  /* relative because it's inline and we want to adjust negative top margin */
  position: absolute;
  right: 220px; /* enough space to clear the expanded state! */
  top: 8px;
  color: #fff;
  font-size: 15px;
  font-family: monospace;
}



#wrap_Inputfield_blocks .blocks-options-name:not(:empty) {
  background: blue;
  color: #fff;
  font-size: 12px;
  padding: 3px 5px;
  border-radius: 5px;
  font-weight: normal;
}
#wrap_Inputfield_blocks .blocks-options-name:not(:empty):before {
  content: "Name: ";
  font-weight: bold;
  text-decoration: underline;
}

#wrap_Inputfield_blocks .blocks-options-id:not(:empty) {
  background: red;
  color: #fff;
  font-size: 12px;
  padding: 3px 5px;
  border-radius: 5px;
  font-weight: normal;
}
#wrap_Inputfield_blocks .blocks-options-id:not(:empty):before {
  content: "#";
}










#wrap_Inputfield_advanced_tags_pages .InputfieldPageAutocomplete > p {
  display: none !important;
}



.alef-tag-add-classes {
  margin: 0 !important;
  color: #000 !important;

}
.alef-tag-add-classes li:first-child {
  padding-left: 0 !important;
}
.alef-tag-add-classes li a {
  text-transform: lowercase !important;
  color: #000 !important;
}










/* sections_3 */

/*
#wrap_Inputfield_sections_3 > .InputfieldContent > .Inputfields > .Inputfield > .InputfieldContent > .Inputfields > .InputfieldRepeaterMatrix > .InputfieldHeader {
  display: none !important;
}
#wrap_Inputfield_sections_3 > .InputfieldContent > .Inputfields > .Inputfield > .InputfieldContent > .Inputfields > .InputfieldRepeaterMatrix > .InputfieldContent {
  margin-top: 5px;
}
#wrap_Inputfield_sections_3 > .InputfieldContent > .Inputfields > .Inputfield > .InputfieldContent > .Inputfields > .InputfieldRepeaterMatrix .InputfieldRepeaterAddItem,
#wrap_Inputfield_sections_3 > .InputfieldContent > .Inputfields > .Inputfield > .InputfieldContent > .Inputfields > .InputfieldRepeaterMatrix > .InputfieldContent > .notes {
  display: none !important;
}
*/