#form-editor-area .row > * {
    flex-shrink: 0;
    width: 100%;
}

/* Preview */
:root {
    --star-unmarked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='gold' viewBox='0 0 576 512'%3E%3Cpath d='M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z'/%3E%3C/svg%3E");
    --star-marked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='gold'  viewBox='0 0 576 512'%3E%3Cpath d='M528.1,171.5L382,150.2L316.7,17.8c-11.7-23.6-45.6-23.9-57.4,0L194,150.2L47.9,171.5c-26.2,3.8-36.7,36.1-17.7,54.6l105.7,103l-25,145.5c-4.5,26.3,23.2,46,46.4,33.7L288,439.6l130.7,68.7c23.2,12.2,50.9-7.4,46.4-33.7l-25-145.5l105.7-103C564.8,207.6,554.3,175.3,528.1,171.5L528.1,171.5z'/%3E%3C/svg%3E") !important;
    --heart-unmarked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"/></svg>');
    --heart-marked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>');
    --rating-unmarked: var(--star-unmarked);
    --rating-marked: var(--star-marked);
    --rating-color-marked: #ffd700;
    --rating-color-unmarked: #8b8b8b;
    --rating-size: 30px;
    --rating-gap: 10px;
    --nav-prevones-background: #CDDC39;
    --nav-active-background: #FF9800;
    --nav-nextones-background: #b9b9b9;
    --nav-prevones-font-color: white;
    --nav-active-font-color: white;
    --nav-nextones-font-color: white;
}

.form-page-prev-next {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}

.form-invalid-box {
    color: tomato;
    font-style: italic;
}

/* Ratings */
.input-ratings {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: var(--rating-gap)
}

    .input-ratings div {
        padding: 10px;
        width: var(--rating-size);
        height: var(--rating-size);
        cursor: pointer;
    }

        .input-ratings div:hover ~ div {
            background-color: var(--rating-color-marked);
            -webkit-mask-image: var(--rating-marked);
            -webkit-mask-size: var(--rating-size);
            -webkit-mask-repeat: no-repeat;
        }

        .input-ratings div.input-ratings-selected {
            background-color: var(--rating-color-marked);
            -webkit-mask-image: var(--rating-marked);
            -webkit-mask-size: var(--rating-size);
            -webkit-mask-repeat: no-repeat;
        }

    .input-ratings:hover div {
        background-color: var(--rating-color-unmarked);
        -webkit-mask-image: var(--rating-unmarked);
        -webkit-mask-size: var(--rating-size);
        -webkit-mask-repeat: no-repeat;
    }

    .input-ratings div:hover {
        background-color: var(--rating-color-marked);
        -webkit-mask-image: var(--rating-marked);
        -webkit-mask-size: var(--rating-size);
        -webkit-mask-repeat: no-repeat;
    }

    .input-ratings div {
        background-color: var(--rating-color-unmarked);
        -webkit-mask-image: var(--rating-unmarked);
        -webkit-mask-size: var(--rating-size);
        -webkit-mask-repeat: no-repeat;
    }

.form-box {
    width: 100%;
}

/* Columns Settings */
.form-line[columns="0"] {
    display: flex;
    flex-direction: column;
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}

.form-line[columns="1"] {
    display: flex;
    flex-direction: row;
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
    flex-wrap: wrap;
}

.form-line[columns="2"],
.form-line[columns="2"],
.form-line[columns="3"],
.form-line[columns="4"],
.form-line[columns="5"],
.form-line[columns="6"] {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}

    .form-line[columns="2"] > div,
    .form-line[columns="2"] > div,
    .form-line[columns="3"] > div,
    .form-line[columns="4"] > div,
    .form-line[columns="5"] > div,
    .form-line[columns="6"] > div {
        width: calc(100% / var(--columns) - var(--column-gap) + (var(--column-gap) / var(--columns)));
    }

.form-line-radio-check-box label {
    display: flex;
    gap: 5px;
    align-items: center;
}

.form-line-radio-check-box.form-other-box {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.form-line.form-line-iys {
    display: flex;
}

    .form-line.form-line-iys > label {
        margin-bottom: auto;
    }

/* Form Nav */
.form-nav-box {
    display: flex;
    justify-content: center;
}

    /* Circle one */
    .form-nav-box .form-nav-circle-one .form-nav-circle-left,
    .form-nav-box .form-nav-circle-one .form-nav-circle-right {
        flex-grow: 1;
        max-height: 3px;
        min-height: 3px;
        height: 3px;
    }

    .form-nav-box .form-nav-circle-one .form-nav-circle-num {
        border-radius: 50%;
        padding: 5px;
        width: 30px;
        height: 30px;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        border: 4px solid #ffffff9e;
    }

    .form-nav-box .form-nav-circle-one.form-nav-prevones .form-nav-circle-left,
    .form-nav-box .form-nav-circle-one.form-nav-prevones .form-nav-circle-right,
    .form-nav-box .form-nav-circle-one.form-nav-prevones .form-nav-circle-num {
        background-color: var(--nav-prevones-background);
        color: var(--nav-prevones-font-color);
    }

    .form-nav-box .form-nav-circle-one.form-nav-active .form-nav-circle-left,
    .form-nav-box .form-nav-circle-one.form-nav-active .form-nav-circle-right,
    .form-nav-box .form-nav-circle-one.form-nav-active .form-nav-circle-num {
        background-color: var(--nav-active-background);
        color: var(--nav-active-font-color);
    }

    .form-nav-box .form-nav-circle-one.form-nav-nextones .form-nav-circle-left,
    .form-nav-box .form-nav-circle-one.form-nav-nextones .form-nav-circle-right,
    .form-nav-box .form-nav-circle-one.form-nav-nextones .form-nav-circle-num {
        background-color: var(--nav-nextones-background);
        color: var(--nav-nextones-font-color);
    }

    .form-nav-box .form-nav-circle-one {
        flex-grow: 1;
        display: flex;
        align-items: center;
        line-height: 1;
        flex-direction: column;
    }

        .form-nav-box .form-nav-circle-one .form-nav-circle-icon {
            flex-grow: 1;
            width: 100%;
            display: flex;
            align-items: center;
        }

.form-nav-active-right .form-nav-circle-left {
    background-image: linear-gradient(to right, var(--nav-active-background), var(--nav-nextones-background));
}

.form-nav-active-left .form-nav-circle-right {
    background-image: linear-gradient(to left, var(--nav-active-background), var(--nav-prevones-background));
}

/* Product Select Box */
.product-list-modal-back {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
    width: 100vW;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 9;
}

.product-list-modal-content {
    background: white;
    padding: 10px;
    box-shadow: 0 0 15px 1px rgb(0 0 0 / 20%);
    max-height: 80vh;
    max-width: 80vw;
    height: 60vh;
    width: 60vw;
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-list-modal-inputs {
    display: flex;
}

.product-list-modal-list {
    overflow: auto;
    gap: 5px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-bottom: 10px;
}

.product-list-item {
    display: flex;
    gap: 20px;
    align-items: center;
    border: 1px solid #e1e1e1;
    border-radius: 0.25rem;
    padding: 10px;
}

.product-list-item-info {
    flex-grow: 1;
}

.product-list-modal-close {
    background-color: #dc3545;
    border: 3px solid white;
    border-radius: 15px;
    box-shadow: 0px 0px 8px 0px #00000073;
    color: white;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    user-select: none;
    cursor: pointer;
}

.product-list-modal-front {
    position: relative;
    overflow: auto;
    padding: 30px;
}

.product-list-modal-list .product-list-item-image {
    width: auto;
    height: 65px;
}

.product-list .product-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 10px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
}

    .product-list .product-item .product-item-info {
        flex-grow: 1;
    }

.product-list-modal-close:hover {
    background-color: #a72835;
}

.product-inputs {
    display: flex;
}

.product-box .product-list .product-item-image-box .product-item-image {
    width: auto;
    height: 65px;
}

.product-list .product-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 10px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
}

    .product-list .product-item .product-item-info {
        flex-grow: 1;
    }

.product-qty-input {
    width: 75px;
    text-align: center;
}

.product-list {
    gap: 5px;
    display: flex;
    flex-direction: column;
}

/* Validation */
.form-validation-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

    .form-validation-box .form-validation-mail-title,
    .form-validation-box .form-validation-sms-title {
        padding: 10px;
        font-size: 16px;
    }

    .form-validation-box .form-validation-mail-box,
    .form-validation-box .form-validation-sms-box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .form-validation-box input {
        width: 200px;
        font-size: 20px !important;
        text-align: center;
        letter-spacing: 10px;
    }

    .form-validation-box .form-validation-mail-error,
    .form-validation-box .form-validation-sms-error {
        color: red;
        font-style: italic;
        padding: 10px;
    }

.form-validation-mail-resend-counter,
.form-validation-sms-resend-counter {
    font-size: .8rem;
    font-style: italic;
    opacity: .7;
}

.form-loading-box {
    position: fixed;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #ffffff80;
    z-index: 99999999999;
}

.form-loading-animation {
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: form-loading-keyframes 1s infinite linear alternate;
}

@keyframes form-loading-keyframes {
    0% {
        box-shadow: 35px 0 #000, -35px 0 #0002;
        background: #000
    }

    33% {
        box-shadow: 35px 0 #000, -35px 0 #0002;
        background: #0002
    }

    66% {
        box-shadow: 35px 0 #0002, -35px 0 #000;
        background: #0002
    }

    100% {
        box-shadow: 35px 0 #0002, -35px 0 #000;
        background: #000
    }
}

/* File */
.files-upload .files-upload-drop-box {
    display: flex !important;
    flex-direction: column;
    font-size: 14px;
    gap: 10px;
    border: 1px dashed #ced4da !important;
    color: #92989d;
    background-color: #ced4da30 !important;
    margin-bottom: 20px;
    border-radius: .25rem;
    align-items: center;
}

    .files-upload .files-upload-drop-box:hover,
    .files-upload .files-upload-drop-box.dragover {
        border-color: #aab1b7 !important;
        background-color: #ced4da85 !important;
        color: #8a939b !important;
        cursor: pointer;
    }

    .files-upload .files-upload-drop-box i {
        font-size: 30px;
    }

.files-upload .file-upload-list {
    margin-bottom: 20px;
}

.files-upload .file-upload-list-name {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
    align-items: flex-end;
    overflow-wrap: anywhere;
    gap: 10px;
}

    .files-upload .file-upload-list-name .name {
        display: flex;
        gap: 10px;
    }

.file-upload-list-right-buttons {
    display: flex;
    gap: 5px;
}

.files-upload .file-upload-list-progress {
    background-color: lightgray;
    height: 5px;
    margin: 5px 0px;
}

.files-upload .file-upload-list-progress-inner {
    background-color: var(--files-upload-color);
}

.files-upload .file-upload-list-statu-icon {
    color: white;
    background: var(--files-upload-color);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.files-upload .file-upload-list-error-icon {
    color: var(--files-upload-color);
    font-size: 25px;
}

.files-upload .files-upload-drop-area {
    padding: 10px;
}

:root {
    --files-upload-color: #FFC107;
}

.files-upload .file-upload-list-success {
    --files-upload-color: #28a745;
}

.files-upload .file-upload-list-error {
    --files-upload-color: #dc3545;
}

.files-upload .file-upload-list-message {
    color: var(--files-upload-color);
    text-align: end;
}

.file-upload-list-button {
    background-color: gray;
    height: 25px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 10px;
    gap: 5px;
    color: white;
    cursor: pointer;
}

.file-upload-list-delete {
    background-color: #dc3545;
}

    .file-upload-list-delete:hover {
        background-color: #a72835;
    }

.file-upload-list-abort {
    background-color: #FFC107;
}

    .file-upload-list-abort:hover {
        background-color: #e6ac00;
    }

.file-upload-list-open {
    background-color: #28a745;
    text-decoration: none;
}

    .file-upload-list-open:hover {
        background-color: #15852f;
        text-decoration: none;
        color: white;
    }

.language-value-box {
    position: relative;
}

.language-value-box-key {
    position: absolute;
    z-index: 999;
    right: 0;
    background: #e9ecef;
    padding: 3px;
    line-height: 1;
    font-size: 11px;
    border-radius: 3px;
    top: 0;
    pointer-events: none;
    border: 1px solid #ced4da;
    color: #495057;
    display: flex;
    width: 20px;
    align-items: center;
    justify-content: center;
}