/** Content editable textbox */
.content-editable-textbox{
    outline: none;
    border: none;
    padding: none;
    margin: none;
    width: auto;
    background: transparent;
}

.form-editor{
    background-color: var(--bs-body-bg);
}

/** Form Column System, Based on bootstrap rows */
.form-data-grid{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    --grid-gutter: 1px;
}

.form-container .form-data-grid{
    margin: -4px;
}

.form-container .form-data-grid .form-data-grid-column{
    padding: 4px;
}

.form-data-grid-column{
    margin: var(--grid-gutter);
    padding: 5px;
}

.form-data-grid-column .form-data-grid{
    margin: -5px;
}

.d-grid-helper .form-data-grid-column .form-data-grid{
    margin: initial;
}

.d-grid-helper .form-data-grid{
    --grid-gutter: 5px;
}

.d-grid-helper .form-data-grid-column{
    border: 4px dashed var(--bs-gray-200);
    position: relative;
}

.d-grid-helper .form-data-grid-column.sortable-helper-selected{
    border-color: var(--bs-primary);
}

.d-grid-helper .form-data-grid-column.dropdown-focused{
    border-color: var(--bs-primary);
}

.d-grid-helper .form-data-grid-column .ui-resizable-e{
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect fill='%23999' x='.67' y='7.23' width='31.04' height='16.35' transform='translate(-6.15 15.96) rotate(-45)'/%3E%3C/svg%3E");
    background-size: 10px;
    width: 15px;
    background-position: bottom right;
    background-repeat: no-repeat;
    top: 4px;
}

.main-grid > .form-data-grid{
    border: 4px dashed var(--bs-gray-100);
    padding: 5px;
}

.form-data-grid:empty, .form-data-grid:has(:only-child.form-element-placeholder){
    min-height: 100px;
}

.form-preview-desktop{
    max-width: 100%;
    margin: auto;
}

.form-preview-tablet{
    max-width: 1280px;
    margin: auto;
}

.form-preview-phone{
    max-width: 640px;
    margin: auto;
}

.form-preview-print{
    max-width: 800px;
    margin: auto;
}

.form-desktop .d-desktop-none,
.form-container-responsive .d-desktop-none,
.form-tablet .d-tablet-none,
.form-container-responsive .d-tablet-none,
.form-phone .d-phone-none,
.form-container-responsive .d-phone-none,
.form-print .d-print-none,
.form-container-responsive .d-print-none{
    display: none;
}

.form-d-all .d-desktop-none,
.form-d-all .d-tablet-none,
.form-d-all .d-phone-none,
.form-d-all .d-print-none{
    display: block;
    opacity: 0.75;
}

.form-desktop [class*="col-desktop-"] {
    flex: 0 0 auto;
    width: calc((var(--col-desktop) * 4.1667%) - var(--grid-gutter) * 2);
}

.form-tablet [class*="col-tablet-"] {
    flex: 0 0 auto;
    width: calc((var(--col-tablet) * 4.1667%) - var(--grid-gutter) * 2);
}

.form-phone [class*="col-phone-"] {
    flex: 0 0 auto;
    width: calc((var(--col-phone) * 4.1667%) - var(--grid-gutter) * 2);
}

.form-print [class*="col-print-"] {
    flex: 0 0 auto;
    width: calc((var(--col-print) * 4.1667%) - var(--grid-gutter) * 2);
}

.form-container-responsive [class*="col-desktop-"] {
    flex: 0 0 auto;
    width: calc((var(--col-desktop) * 4.1667%) - var(--grid-gutter) * 2);
}

/* Tablet (Portrait) */
@media (max-width: 1024px) {
    .form-container-responsive [class*="col-tablet-"] {
        flex: 0 0 auto;
        width: calc((var(--col-tablet) * 4.1667%) - var(--grid-gutter) * 2);
    }
}

/* Phone */
@media (max-width: 768px) {
    .form-container-responsive [class*="col-phone-"] {
        flex: 0 0 auto;
        width: calc((var(--col-phone) * 4.1667%) - var(--grid-gutter) * 2);
    }
}

/* Desktop Columns */
.col-desktop-1 { --col-desktop: 1; }
.col-desktop-2 { --col-desktop: 2; }
.col-desktop-3 { --col-desktop: 3; }
.col-desktop-4 { --col-desktop: 4; }
.col-desktop-5 { --col-desktop: 5; }
.col-desktop-6 { --col-desktop: 6; }
.col-desktop-7 { --col-desktop: 7; }
.col-desktop-8 { --col-desktop: 8; }
.col-desktop-9 { --col-desktop: 9; }
.col-desktop-10 { --col-desktop: 10; }
.col-desktop-11 { --col-desktop: 11; }
.col-desktop-12 { --col-desktop: 12; }
.col-desktop-13 { --col-desktop: 13; }
.col-desktop-14 { --col-desktop: 14; }
.col-desktop-15 { --col-desktop: 15; }
.col-desktop-16 { --col-desktop: 16; }
.col-desktop-17 { --col-desktop: 17; }
.col-desktop-18 { --col-desktop: 18; }
.col-desktop-19 { --col-desktop: 19; }
.col-desktop-20 { --col-desktop: 20; }
.col-desktop-21 { --col-desktop: 21; }
.col-desktop-22 { --col-desktop: 22; }
.col-desktop-23 { --col-desktop: 23; }
.col-desktop-24 { --col-desktop: 24; }

/* Tablet Columns */
.col-tablet-1 { --col-tablet: 1; }
.col-tablet-2 { --col-tablet: 2; }
.col-tablet-3 { --col-tablet: 3; }
.col-tablet-4 { --col-tablet: 4; }
.col-tablet-5 { --col-tablet: 5; }
.col-tablet-6 { --col-tablet: 6; }
.col-tablet-7 { --col-tablet: 7; }
.col-tablet-8 { --col-tablet: 8; }
.col-tablet-9 { --col-tablet: 9; }
.col-tablet-10 { --col-tablet: 10; }
.col-tablet-11 { --col-tablet: 11; }
.col-tablet-12 { --col-tablet: 12; }
.col-tablet-13 { --col-tablet: 13; }
.col-tablet-14 { --col-tablet: 14; }
.col-tablet-15 { --col-tablet: 15; }
.col-tablet-16 { --col-tablet: 16; }
.col-tablet-17 { --col-tablet: 17; }
.col-tablet-18 { --col-tablet: 18; }
.col-tablet-19 { --col-tablet: 19; }
.col-tablet-20 { --col-tablet: 20; }
.col-tablet-21 { --col-tablet: 21; }
.col-tablet-22 { --col-tablet: 22; }
.col-tablet-23 { --col-tablet: 23; }
.col-tablet-24 { --col-tablet: 24; }

/* Phone Columns */
.col-phone-1 { --col-phone: 1; }
.col-phone-2 { --col-phone: 2; }
.col-phone-3 { --col-phone: 3; }
.col-phone-4 { --col-phone: 4; }
.col-phone-5 { --col-phone: 5; }
.col-phone-6 { --col-phone: 6; }
.col-phone-7 { --col-phone: 7; }
.col-phone-8 { --col-phone: 8; }
.col-phone-9 { --col-phone: 9; }
.col-phone-10 { --col-phone: 10; }
.col-phone-11 { --col-phone: 11; }
.col-phone-12 { --col-phone: 12; }
.col-phone-13 { --col-phone: 13; }
.col-phone-14 { --col-phone: 14; }
.col-phone-15 { --col-phone: 15; }
.col-phone-16 { --col-phone: 16; }
.col-phone-17 { --col-phone: 17; }
.col-phone-18 { --col-phone: 18; }
.col-phone-19 { --col-phone: 19; }
.col-phone-20 { --col-phone: 20; }
.col-phone-21 { --col-phone: 21; }
.col-phone-22 { --col-phone: 22; }
.col-phone-23 { --col-phone: 23; }
.col-phone-24 { --col-phone: 24; }

/* Print Columns */
.col-print-1 { --col-print: 1; }
.col-print-2 { --col-print: 2; }
.col-print-3 { --col-print: 3; }
.col-print-4 { --col-print: 4; }
.col-print-5 { --col-print: 5; }
.col-print-6 { --col-print: 6; }
.col-print-7 { --col-print: 7; }
.col-print-8 { --col-print: 8; }
.col-print-9 { --col-print: 9; }
.col-print-10 { --col-print: 10; }
.col-print-11 { --col-print: 11; }
.col-print-12 { --col-print: 12; }
.col-print-13 { --col-print: 13; }
.col-print-14 { --col-print: 14; }
.col-print-15 { --col-print: 15; }
.col-print-16 { --col-print: 16; }
.col-print-17 { --col-print: 17; }
.col-print-18 { --col-print: 18; }
.col-print-19 { --col-print: 19; }
.col-print-20 { --col-print: 20; }
.col-print-21 { --col-print: 21; }
.col-print-22 { --col-print: 22; }
.col-print-23 { --col-print: 23; }
.col-print-24 { --col-print: 24; }

/** Form element helper */
.form-element-helper{
    width: 200px;
    background-color: var(--bs-gray-100);
    padding: 5px;
    border-radius: 5px;
    opacity: 0.75;
}

.form-element-helper i{
    margin-right: 3px;
}

.form-element-preview{
    width: 100%;
    min-height: 150px;
    background: var(--bs-gray-100);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    position: relative;
    display: grid;
    align-items: center;
    text-align: center;
    color: var(--bs-gray-500);
}

.form-element-preview i{
    font-size: 28px;
    display: block;
    margin-bottom: 5px;
}

/** Form element placeholder base */
.form-element-placeholder{
    padding: 20px;
    border: 4px dashed var(--bs-gray-200);
    margin: var(--grid-gutter);
    display: none;
}

.form-data-grid-receivable > .form-element-placeholder{
    display: block;
}

/** Scenario editor */
.form-editor-sidebar{
    width: 275px;
    border-right: 1px solid var(--bs-gray-400);
    margin-right: 20px;
    padding-right: 20px;
}

.form-editor-tabs li div{
    color: var(--bs-gray-700);
    line-height: 35px;
    font-size: 14px;
    border-left: 5px solid transparent;
    display: block;
    padding: 0 0 0 10px;
    cursor: pointer;
}

.form-editor-tabs li div:hover{
    color: var(--bs-body-color);
}

.form-editor-tabs li .active{
    font-weight: 600;
    border-left-color: var(--bs-primary);
    color: var(--bs-body-color);
}

.form-editor-tabs .active .content-editable-textbox{
    font-weight: bold;
}

.form-editor-tabs .remove-tab{
    visibility: hidden;
}

.form-editor-tabs li div:hover .remove-tab{
    visibility: visible;
}

.form-editor-elements{
    position: relative;
    min-height: 600px;
}

.form-editor-elements ul{
    position: absolute;
    width: 100%;
}

.form-editor-elements li{
    background-color: var(--bs-gray-100);
    height: 27px;
    overflow: hidden;
}

.form-editor-elements .form-editor-element-copied{
    background-color: var(--bs-warning-bg-subtle);
    font-weight: bold;
}

.form-editor-elements .sortable-helper-selected{
    background-color: var(--bs-primary);
    color: #ffffff;
}

.form-editor-elements li i{
    display: inline-block;
    width: 20px;
    text-align: center;
}

.form-editor-elements [ui-sortable] li{
    opacity: 0;
    background-color: var(--bs-gray-100);
    cursor: pointer;
}

.form-editor-elements .form-element-placeholder{
    display: none;
}

.form-editor-view button{
    background-color: var(--bs-gray-100);
    width: 35px;
}

.form-editor-view .active{
    background-color: var(--bs-primary);
    color: var(--bs-primary-fg);
    border: none;
}

.context-element{
    font-size: 90%;
    font-weight: bold;
    padding: 7px 5px;
    background-color: var(--bs-gray-100);
    margin-top: -6px;
}

.property-conditions-join{
    position: relative;
    width: 100%;
    margin-top: 10px;
}

.property-conditions-join hr{
    position: absolute;
    top: 5px;
    width: 100%;
}

.property-conditions-join .input-group{
    width: 100px;
    margin: auto;
    background-color: var(--bs-body-bg);
    padding: 0 10px;
}