/* ------------------------------- Form Builder --------------------------------- */

.builderComponentContainer.dragging {
    opacity: .7;
    padding: .5em;
    border: 1px dashed var(--border-darkest-contrast);
}

.ems-form-bulder-container .nav-sectionBox {
    border: none;
    padding: 0px;
    max-width: 100%;
    box-shadow: none;
}

.builderDragoverPlaceholder {
    height: 1em;
}

.builderDragoverPlaceholder.dragover {
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: .5em;
    margin-bottom: .5em;
}

.builderComponentContainer {
    width: 100%;
    position: relative;
}


div.builderComponent {
    border: 1px solid transparent;
    border-left: 2px solid transparent;
    padding: .5em;
    position: relative;
    top: 0em;
    transition: width .5s cubic-bezier(1,0,.39,1.26);
    width: calc(100% - 1em - 4px);
}

.builderComponent:hover,
.builderComponent.hover {
    border: 1px dashed var(--border-dark-contrast);
    border-left: 2px solid var(--darkest-gray);
    padding: .5em;
}

.builderComponent.selected{
    border: 2px solid var(--primary-color);
    padding: .5em;
}

.builderComponent .hoverButtons {
    position: absolute;
    left: calc(-2em - 2px);
    width: 2em;
    top: 0px;
    flex-direction: column;
    display: none;
    box-shadow: 2px 2px 10px rgba(0,0,0,.1);
    z-index: 1;
}

.builderComponent:hover .hoverButtons {
    display: flex;
}

.builderComponent:hover .EMSCols .hoverButtons,
.builderComponent:hover .ems_group_items .hoverButtons {
    display: none;
}

.builderComponent:hover .EMSCols .builderComponent:hover .hoverButtons,
.builderComponent:hover .ems_group_items .builderComponent:hover .hoverButtons {
    display: block;
}

.checkRadioInputContainer.Horizontal {
    display: flex;
}

.checkRadioInputContainer.Horizontal .EMScontainer {
    margin-right: 1em;
}

.builderComponent .hoverButtons button {
    background-color: var(--primary-background);
    color: var(--text-light);
    border: 1px solid var(--border-light-contrast);
    width: calc(100% - 2px);
    padding: .3em 0;
    margin: 0px;
}

.builderComponent .hoverButtons button:hover,
.builderComponent .hoverButtons button:focus {
   cursor: pointer;
   background-color: var(--bg-dark-level-1);
   color: var(--text-reverse);
}

.EMSCols .builderComponent.selected,
.ems_group_items .builderComponent.selected{
    z-index: 1;
    background-color: var(--primary-background);
    box-shadow: 1px 1px 10px var(--border-shaddow-lightest);
}    


.movedUp {
  animation-name: moveBuilderComponentUp;
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(1,0,.39,1.26);
}

.movedDown {
  animation-name: moveBuilderComponentDown;
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(1,0,.39,1.26);
}

.builderComponent input.inlineEditor {
    margin: 0px;
    padding: 0px !important;
    border-color: transparent;
}

.builderComponent input.inlineEditor:focus {
    border-color: #d00000;
}

@keyframes moveBuilderComponentDown {
  0%   {top: -5em;}
  100%  {top: 0em;}
}

@keyframes moveBuilderComponentUp {
  0%   {top: 5em;}
  100%  {top: 0em;}
}

.builderComponent.selected:after {
    content: '';
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 8px solid var(--primary-color);
    display: block;
    position: absolute;
    right: -14px;
    top: 50%;
    transform: rotate(-90deg);
    width: 2px;
}


.builderComponent .orderButtons {
    position: absolute;
    display: block;
    top: -1.5em;
    left: .8em;
}

.builderComponent .orderButtons button {
    border: 2px solid #ffffff;
}

.builderComponent button{
    margin-right: .1em;
    margin-top: .2em;
}

.builderOptions {
    padding: 2em;
    background-color: var(bg-level-2);
    border: 1px solid var(--border-lighter-contrast);
    border-radius: 4px;
    box-shadow: 0px 1px 1px var(--border-shaddow-lightest);
}

.builderComponentContainer .addComponentButtonContainer {
    max-height: 0em;
    overflow: hidden;
    transition: .5s max-height, min-height cubic-bezier(1,0,.39,1.26);
}

.addComponentButtonContainer {
    max-height: 0px;
    overflow: hidden;
}

.addComponentButtonContainer.selected {
    max-height: 100em;
    overflow: visible;
    min-height: 3em;
}

.addComponentButtonContainer.noItems,
.addComponentButtonContainer.noItems .addComponentButtonContainer {
    overflow: visible;
}

.addComponentButtonContainer.noItems,
.addComponentButtonContainer.noItems .addComponentButtonContainer {
    overflow: visible;
    max-height: 100em; 
}

.addComponent .searchBuilderComponentsOptions button {
    background-color: transparent;
    color: var(--text-default);
    width: 100%;
    text-align: left;
    margin: 0em  0 .5em 0;
}

.addComponent .searchBuilderComponentsOptions button:hover,
.addComponent .searchBuilderComponentsOptions button:focus {
    background-color: var(--bg-dark-level-1);
    color: var(--text-reverse);
}

.addComponentButton {
    background-color: transparent;
    color: transparent;
    display: block;
    position: relative;
    border: 1px dashed var(--border-lighter-contrast);
    background-color: var(--bg-level-2);
    margin: 0em;
    color: var(--text-default);
    transition: all .5s cubic-bezier(1,0,.39,1.26);
    font-size: .8em;
    width: 100%;
}

.addComponentButtonContainer.selected .addComponentButton {
    background-color: var(--bg-dark-level-1);
    color: var(--text-reverse);
    display: flex;
    align-items: center;
}

.addComponentButtonContainer i {
    font-size: 2em;
    margin-right: 1em;
}

.builderComponentForm {
    opacity: 0;
    width: 0px;
    position: absolute;
    right: -2em;
    background-color: var(--bg-level-2-transparent);
    padding: 2em 1em 1.5em 1.5em;
    z-index: -1;
    border: 1px solid var(--border-light-contrast);
    border-radius: 4px;
    top: 0em;
    border-bottom: 2px solid var(--border-light-contrast);
    transition: all .5s cubic-bezier(1,0,.39,1.26);
    box-shadow: 1px 1px 36px var(--border-shaddow-light);
    height: calc(60vh - 4em - 2px);
    backdrop-filter: blur(4px);
    overflow: hidden;
}

@media (max-width:900px) { 
    .builderComponentForm.small_screen.selected {
        position: initial;
        opacity: 1;
        overflow: visible;
        width: calc(100% - 3em) !important;
        margin-top: 1em;
    }
}

.builderComponentForm .section_container {
    height: calc(60vh - 4em - 2px);
    overflow: auto;
}

.addComponentButtonContainer {
    position: relative;
}

.addComponent.builderComponentForm {
    height: auto;
    right: auto;
    top: auto;
    top: 2.5em;
    margin-top: 0px;
    overflow: visible;
    z-index: 2;
}

.addComponentButtonContainer.noItems .addComponent.builderComponentForm {
    top: 1em;
    left: 0em;
}

.addComponent.builderComponentForm.on_top {
    top: auto;
    bottom: 3.5em;
}

.addComponent.builderComponentForm .searchBuilderComponentsOptions {
    height: 10em;
    overflow: auto;
}

.addComponent.builderComponentForm h3 {
    margin-top: 0px;
}

.addComponent.builderComponentForm:before {
    content: '';
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 8px solid var(--border-light-contrast);
    display: block;
    position: absolute;
    top: -8px;
    transform: rotate(-180deg);
    width: 2px;
}

.addComponent.builderComponentForm.on_top:before {
    content: '';
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 8px solid var(--border-dark-contrast);
    display: block;
    position: absolute;
    top: auto;
    bottom: -8px;
    transform: rotate(0deg);
    width: 2px;
}

.addComponentButtonContainer.noItems .builderComponentForm,
.addComponentButtonContainer.selected .builderComponentForm,
.addComponentButtonContainer.add_item .builderComponentForm {
    opacity: 1;
    width: 100%;
}

.form-bulder-container {
    display: flex;
    flex-direction: row-reverse;
}

@media (max-width:900px) { 
  .form-bulder-container {
      display: block;
      flex-direction: row-reverse;
  }
}

.form-bulder-container .stationaryBoxContainer {
    width: 28em;
    min-height: calc(80vh + 3em);
}

@media (max-width:900px) {
    .form-bulder-container .stationaryBoxContainer {
        display: none;
    } 
}

.form-bulder-container .EMSCol .stationaryBoxContainer {
    display: none;  
}

.builderComponentSidebar {
    opacity: 1;
    width: 25em;
    max-height: 80vh;
    overflow: auto;
    border: 1px solid var(--border-dark-contrast);
    padding: 1.5em;
    padding-top: .5em;
    box-shadow: 1px 1px 8px var(--border-shaddow-light);
    border-radius: 8px;
}

.builderComponentSidebar.selected {
    border: 2px solid var(--primary-color);
    padding-top: 1.5em;
}

@media (max-width:900px) { 
  .builderComponentSidebar {
      width: calc(100% - 3em);
  }
}

.form_builder_list button {
    background-color: transparent;
    color: var(--primary-text);
    padding: .3em .5em;
}

.form_builder_list button:hover,
.form_builder_list button:focus{
    background-color: var(--bg-level-3);
}

.form_builder_list ul {
  padding-left: .5em;
  list-style: circle; 
}

.form-bulder {
    width: calc(100% - 30em);
    padding-right: 1.5em;
    padding-left: 1.5em;
}

.EMSCol .form-bulder {
  padding: .5em;
  background-color: transparent;
}

.EMSCol .formPreview {
    max-width: inherit;
    background-color: transparent;
    padding: 0px;
    box-shadow: none;
}

.child_builder .form-bulder {
    width: 100%;
}

.builderComponentForm.selected label {
    font-weight: 600;  
}

.EMSCol .builderComponentForm.selected.visually_hidden {
    width: 0px;
    height: 0px;
    right: 0px;
}

.builderComponentForm .ems-builder-file {
    margin-bottom: 2em;
}

.isNewIndex {
  animation-name: newBuilderItemAdded;
  animation-duration: 4s;
}

@keyframes newBuilderItemAdded {
  0%   {background-color: var(--bg-level-4);}
  25%  {background-color: var(--bg-level-4);}
  100%  {background-color: var(--primary-background);}
}

.checkRadioContainer .reOrderList li {
    margin: 1px;
    padding-left: .3em;
}

.checkRadioContainer .reOrderList li:before {
    content: '';
    border: 1px solid var(--border-dark-contrast);
    width: .8em;
    height: .7em;
    margin-right: .2em;
    line-height: 0px;
    margin-top: .3em;
}

.checkRadioContainer.radio .reOrderList li:before {
    content: '';
    border-radius: 100em;
    
}

.checkRadioContainer .reOrderList {
    margin: 0px 0px .5em 0px;
}

.checkRadioContainer .buildList .reOrderList li .reOrderListContent {
    border-color: transparent;
    padding: 0px !important;
    margin: 0px;
}

.checkRadioContainer .buildList .reOrderList li .reOrderListContent:focus {
    border-color: var(--primary-color);
}

.checkRadioContainer .reOrderList .reOrderListButtons button {
    padding: .2em .7em;   
}

.checkRadioContainer .buildList .reOrderList .reOrderListButtons {
    height: auto;
}

.checkRadioContainer .buildList .buildListLabel {
    display: none;
}

.EMSCols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1em;
    position: relative;
}

.formPreview .builderComponentContainer:nth-of-type(2) .listUpButton {
    display: none;
}

.EMSCols .EMSCol .formPreview .builderComponentContainer:last-of-type .listDownButton,
.EMSCols .EMSCol .builderComponentContainer:nth-of-type(2) .listUpButton {
    transform: rotate(-90deg);
    display: inline;
}

.EMSCols .EMSCol:first-of-type .builderComponentContainer:nth-of-type(2) .listUpButton {
    transform: rotate(0deg);
}

.EMSCols .EMSCol:last-of-type .builderComponentContainer:last-of-type .listDownButton {
    transform: rotate(0deg);
}

.EMSCols.has3Columns {
    grid-template-columns: 1fr 1fr 1fr;
}

.EMSCols.has4Columns {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.selected .EMSCol {
    border: 1px dashed var(--border-light-contrast);
}

.builder-custom-heading input {
    font-family: 'Roboto', sans-serif;
    letter-spacing: -.05em;
    font-weight: 500;
    line-height: 1em;
    font-size: 2.4em;
    padding: .2em;
}

.builder-custom-heading.h3 input {
    font-size: 1.65em;
}

.builder-custom-heading.h4 input {
    font-size: 1.3em;
}

.EMScontainer br.clear {
    display: none; 
}

@media (max-width:600px) {
    .builderComponent.selected,
    .builderComponentForm.selected {
        width: calc(100% - 1em - 2px);
    }    

    .builderComponentForm.selected {
        right: -1em;
    }
    
    .builderComponent button{
        width: auto !important;
    }
    
    .addComponent .searchBuilderComponentsOptions button {
        width: 100% !important;
    }
    
    .addComponentButtonContainer.noItems .builderComponentForm,
    .addComponentButtonContainer.selected .builderComponentForm {
        opacity: 1;
        width: calc(100% - 2em);
        left: -1em;
    }
}

.ems_group_items,
.EMSCols {
  transition: .5s padding cubic-bezier(1,0,.39,1.26);
}
 
.builderComponent:hover .ems_group_items,
.builderComponent:focus .ems_group_items,
.builderComponent:hover .EMSCols,
.builderComponent:focus .EMSCols {
  padding-left: 2.5em;
  border: 1px dashed var(--border-shaddow);
}

.builderComponentContainer .builderComponentName {
  color: var(--text-light);
  font-size: .7em;
  font-style: italic;
  max-height: 0em;
  overflow: hidden;
  opacity: 0;
  position: absolute;
  top: -1.8em;
}

.builderComponentContainer:hover .builderComponentName,
.builderComponentContainer:focus .builderComponentName {
  max-height: 4em;
  overflow: visible;
  opacity: 1;
}

.form-bulder .formPreview input:hover,
.form-bulder .formPreview textarea:hover,
.form-bulder .formPreview input:focus,
.form-bulder .formPreview textarea:focus {
	-webkit-animation:inputHover .5s; 
	animation:inputHover .5s;
    border-width: 1px;
	border-color: var(--border-darkest-contrast) !important;
}

/* ------------------------------- End Form Builder --------------------------------- */