$error_color: #ff9494;

.fus-form {
    .hidden-fields {
        display: none;
    }

    .editor-button {
        &.hide {
            display: none;
        }
    }

    .fus-view-page {
        .fus-button-text {
            color: initial;
        }

        .button-icon {
            display: none;
        }

        &.hide {
            display: none;
        }
    }

    .EditorJS-editor {
        border: 1px solid;
    }

    .fus_post_title {
        border: none;
        resize: none;
    }

    .ce-paragraph {
        font-weight: normal;
    }

    .image_loader {
        border: $button-border;
        background-color: $white;
        height: 70px;
        width: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        transition: all 0.1s ease-out;
        box-shadow: $button-shadow;
        border-radius: 5px;
        margin-right: 10px;
        position: relative;
        cursor: pointer;
        overflow: hidden;
        margin-right: 15px;
        color: $black;

        &:hover {
            opacity: 0.7;
        }

        #img_inp {
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: -1;
        }

        label.thumbnail {
            cursor: pointer;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            display: flex;
            margin: 0;

            .button-icon {
                width: 40px;
            }
        }

        #post_thumbnail_image {
            display: none;
            width: 100%;
            height: 0;
            position: absolute;
            top: 0;
            left: 0;
            background-size: cover !important;
            transition: all 0.4s ease-out;
        }

        .bfe-remove-image {
            width: 20px;
            position: absolute;
            top: 5px;
            right: 5px;
            cursor: pointer;
            display: none;
            transition: all 0.4s ease-out;

            &:hover {
                opacity: 0.7;
            }
        }

        &.chosen {
            #post_thumbnail_image {
                display: block;
                height: 100%;
            }

            .button-icon {
                display: none;
            }

            .bfe-remove-image {
                display: block;
            }
        }
    }

    .hidden {
        display: none !important;
    }

    label {
        display: block;
    }

    .textarea-field {
        width: 100%;
    }

    .wp-editor-wrap {
        .wp-editor-container {
            box-shadow: 1px 2px 5px 0px rgba(227, 218, 227, 1);
            margin-top: 10px;
            border: 0px;

            .mce-container-body {
                .mce-toolbar-grp {
                    background-color: #fff;
                    border-bottom: none;
                    box-shadow:
                        0 2px 2px -2px rgba(34, 47, 62, 0.1),
                        0 8px 8px -4px rgba(34, 47, 62, 0.07);
                }
            }

            .mce-btn {
                button {
                    &:hover {
                        background: transparent;
                        box-shadow: 1px 2px 5px 0px rgba(227, 218, 227, 1);
                        border-radius: 3px;
                        opacity: 0.9;
                    }
                }
            }

            .mce-toolbar .mce-listbox button {
                background: transparent;
                color: black;
            }

            .mce-toolbar .mce-btn button {
                background: transparent;
            }
        }
    }

    .editor-textarea {
        display: none;
    }

    .select-wrap {
        .ss-main {
            overflow: unset;

            .optionGroup {
                font-weight: bold;
                font-style: italic;
            }

            .optionChild {
                padding-left: 15px;
            }
        }
    }

    span.required {
        color: red;
        font-weight: 700;
        border: 0;
    }

    .g-recaptcha {
        margin-top: 20px;
    }

    .fus-custom-field-description {
        font-size: 12px;
        padding-top: 5px;
    }

    .fe-paragraph {
        margin-top: 20px;
    }

    .fe-header {
        margin-top: 20px;
    }

    button {
        cursor: pointer;
    }
    .btn {
        display: inline-block;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 0.25rem;
        transition:
            color 0.15s ease-in-out,
            background-color 0.15s ease-in-out,
            border-color 0.15s ease-in-out,
            box-shadow 0.15s ease-in-out;

        &.btn-primary {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;

            &:hover {
                color: #fff;
                background-color: #0069d9;
                border-color: #0062cc;
            }
        }

        &.btn-success {
            color: #fff;
            background-color: #28a745;
            border-color: #28a745;

            &:hover {
                color: #fff;
                background-color: #218838;
                border-color: #1e7e34;
            }
        }

        &.btn-danger {
            color: #fff;
            background-color: #dc3545;
            border-color: #dc3545;

            &:hover {
                color: #fff;
                background-color: #c82333;
                border-color: #bd2130;
            }
        }

        &.btn-warning {
            color: #212529;
            background-color: #ffc107;
            border-color: #ffc107;

            &:hover {
                color: #212529;
                background-color: #e0a800;
                border-color: #d39e00;
            }
        }

        &.btn-info {
            color: #fff;
            background-color: #17a2b8;
            border-color: #17a2b8;

            &:hover {
                color: #fff;
                background-color: #138496;
                border-color: #117a8b;
            }
        }
    }
    .field_error {
        border: 2px solid $error_color !important;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 5px;
        border-radius: 5px !important;
    }
    .fus_powered_by {
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        font-size: 14px;
        column-gap: 5px;
        margin: 20px 10px;
    }
}

.fus-form-block-header {
    $color: rgba(0, 0, 0, 0.15);

    .fus-loader {
        width: 47px;
        height: 47px;
        float: right;
        display: none;

        &.active {
            display: block;
        }
    }

    .fus-loader:after {
        content: " ";
        display: block;
        width: 32px;
        height: 32px;
        margin: 7px;
        border-radius: 50%;
        border: 3px solid $color;
        border-color: $color transparent $color transparent;
        animation: fus-loader 1.2s linear infinite;
    }

    @keyframes fus-loader {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}

#fus-message-wrap {
    padding: 10px;
    margin: 10px 0px;

    &.success {
        border: 2px solid #4bb543;
        color: #4bb543;
    }

    &.warning {
        border: 2px solid #ffcc00;
        color: #ffcc00;
    }

    &.error {
        border: 2px solid $error_color;
        color: $error_color;
    }
}

.fus-info {
    background: #fcf8e3;
    border: 1px solid #faebcc;
    color: #8a6d3b;
    margin: 10px 0 20px 0;
    padding: 10px;
    border-radius: 3px;
    font-size: 13px;
}