/* TOOLS BUILDER */

.tools-builder .layout-container {
    padding: 0 1rem;
}
.tools-builder .tools-builder-layout {
    padding: 0;
}
.tools-builder .tools-builder-layout .layout-box {
    border: 1px solid #d4d1c6;
    border-radius: 5px;
    box-shadow: 2px 2px 3px 0px rgb(0 0 0 / 6%);
    margin: 0.5rem;
    padding: 4.5rem 3rem 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    cursor: pointer;
}
.tools-builder .tools-builder-layout .layout-box:hover {
    background-color: #fafafa;
}
.tools-builder .tools-builder-layout .layout-box .layout-ex {
    width: 100%;
    height: auto;
    display: flex;
}
.tools-builder .tools-builder-layout .layout-box .layout-ex span {
    width: 100%;
    height: 3rem;
    border: 1px solid #c7c7c7;
    background-color: #f4f3ef;
    margin: 0 0.1rem;
}
.tools-builder .tools-builder-layout .layout-box .layout-ex span.layout-1-3 {
    width: 30%;
}
.tools-builder .tools-builder-layout .layout-box .layout-ex span.layout-2 {
    width: 70%;
}
.tools-builder .tools-builder-layout .layout-box label {
    font-size: 0.8571em;
    margin-bottom: 5px;
    color: #9A9A9A;
    padding: 1rem 0 0 0;
}
.tools-builder .tools-builder-layout .layout-box.tool-button i {
    font-size: 20px;
}



/* PREVIEW BUILDER */

.preview-builder .preview-row.col-droppable {
    width: 100%;
    min-height: 6rem;
    border-radius: 3px;
    border: 1px dashed #c7c7c7;
    background-color: #fafafa;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    position: absolute;
    z-index: 0;
}
.preview-builder .preview-row.col-droppable label {
    margin: 0;
}
.preview-builder .preview-row.col-droppable.ui-droppable-active {
    position: relative;
    visibility: visible;
    z-index: 1;
}
.preview-builder .preview-row.col-droppable.ui-droppable-hover {
    background-color: #f2f2f2;
}

.preview-builder .preview-row {
    display: flex;
    flex-direction: row;
    margin-bottom: 2rem;
}
.preview-builder .preview-row .preview-column {
    background-color: #f4f3efa8;
    padding: 1rem;
    min-height: 5rem;
    width: 100%;
    border: 1px dashed #d4d1c6;
}
.preview-builder .preview-row .preview-column.not-empty {
    background-color: transparent;
    padding: 0;
    /* border-color: transparent; */
}
.preview-builder .preview-row .preview-column.preview-column-size-2:nth-child(1) {
    margin-right: 1rem;
}
.preview-builder .preview-row .preview-column.preview-column-size-1-3:nth-child(1) {
    width: 30%;
    margin-right: 1rem;
}
.preview-builder .preview-row .preview-column.preview-column-size-1-3:nth-child(2) {
    width: 70%;
}
.preview-builder .preview-row .preview-column.preview-column-size-3:nth-child(1),
.preview-builder .preview-row .preview-column.preview-column-size-3:nth-child(2) {
    margin-right: 1rem;
}
.preview-builder .preview-row .preview-column.preview-column-size-2-3:nth-child(1) {
    width: 70%;
    margin-right: 1rem;
}
.preview-builder .preview-row .preview-column.preview-column-size-2-3:nth-child(2) {
    width: 30%;
}
.preview-builder .preview-row .preview-column.preview-column-size-4:nth-child(1),
.preview-builder .preview-row .preview-column.preview-column-size-4:nth-child(2),
.preview-builder .preview-row .preview-column.preview-column-size-4:nth-child(3) {
    margin-right: 1rem;
}

.preview-builder .preview-row .preview-column.ui-droppable-active {
    background-color: #f4f3ef;
    border: 1px dashed #c7c7c7;
}
.preview-builder .preview-row .preview-column.ui-droppable-hover {
    border: 1px dashed #c7c7c7;
    background-color: transparent;
}



/* ROWS */

.preview-builder .preview-row {
    border: 1px solid transparent;
    position: relative;
    /* transition: all 0.2s cubic-bezier(0.61, 1, 0.88, 1); */
}
.preview-builder .preview-row:hover {
    border-color: #eaeaea;
}
.preview-builder .preview-row.ui-sortable-helper {
    background-color: #FFF;
}
.preview-builder .preview-row .row-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    list-style-type: none;
    z-index: 1010;
    /* margin-top: 0; */
    margin-top: -2.2rem;
    opacity: 0;
    padding: 0;
    transition: all 0.2s cubic-bezier(0.61, 1, 0.88, 1);
}
.preview-builder .preview-row:hover .row-actions {
    opacity: 1;
}
.preview-builder .preview-row .row-actions li .btn {
padding: 0.2rem 0.5rem;
    min-width: 3rem;
    min-height: 2rem;
    margin: 0;
    margin-left: .2rem;
}


/* COLUMNS */

/* .preview-builder .preview-column {
    border: 1px solid transparent;
    position: relative;
}
.preview-builder .preview-column:hover {
    border-color: #aeb4d7;
    border-style: solid;
}
.preview-builder .preview-column .column-actions {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    list-style-type: none;
    z-index: 1010;
    margin-top: 0;
    opacity: 0;
    background-color: #aeb4d7;
    padding: 0;
    transition: all 0.2s cubic-bezier(0.61, 1, 0.88, 1);
}
.preview-builder .preview-column:hover .column-actions {
    margin-top: -2.2rem;
    opacity: 1;
}
.preview-builder .preview-column .column-actions li button {
    padding: 0.2rem 0.5rem;
    min-width: 3rem;
    min-height: 2rem;
    margin: 0;
    margin-left: .2rem;
    background-color: transparent;
} */


/* TOOL PREVIEW */

.tool-box {
    padding: 1rem 0;
    position: relative;
    border: 1px dashed transparent;
}
.tool-box:hover {
    border-color: #ddd;
}


/* TOOL ACTIONS */

.tool-actions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.4);
}
.tool-actions button {
    margin: 0 0.2rem;
    padding: 0;
    background-color: #FFF;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
}
.tool-box:hover .tool-actions {
    visibility: visible;
}
.tool-box.tool-box-empty {
    background-color: #d2eaf34f;
}

.modal .modal-content {
    overflow: inherit;
}


.bootstrap-datetimepicker { z-index: 9999 !important; }

.bootstrap-datetimepicker-widget.dropdown-menu {
    width: auto;
}