/* Scale the entire form  */
/* .ffc_conv_wrapper {
    transform: scale(0.79); 
    transform-origin: center center; 
	border-style: solid;
	border-radius: 5px;
} */



/* Center the navigation buttons at the bottom and set spacing */

.ffc_conv_wrapper .f-nav {
    position: relative !important;
    margin-top: 6px !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    background-color: transparent !important; /* Remove blue background */
    box-shadow: none !important; /* Remove any shadow */
}

/* Style the navigation buttons (arrows) */
.ffc_conv_wrapper .f-prev, .ffc_conv_wrapper .f-next {
    width: 50px !important;
    height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 10px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important; /* White background */
    box-shadow: 0 4px 6px rgba(128, 128, 128, 0.5) !important; /* Grey shadow */
}

/* Style the arrow icons inside the buttons */
.ffc_conv_wrapper .f-prev svg, .ffc_conv_wrapper .f-next svg {
    width: 30px !important;
    height: 30px !important;
    fill: #000000 !important; /* Black arrow color */
}

/* Hide the default "Prev" and "Next" text labels */
.ffc_conv_wrapper .f-nav-text {
    display: none !important;
}

/* Disable the "Next" button when it's not active */
.ffc_conv_wrapper .f-next.f-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* Replace "Powered by FluentForms" with "Form Navigation" */
.ffc_conv_wrapper .ffc_power {
    visibility: hidden !important;
    position: relative;
    pointer-events: none;
}

/* Add custom "Form Navigation" text with black color */
.ffc_conv_wrapper .ffc_power::before {
    content: "Form Navigation";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    color: #021c4f; /* Dark black color */
    font-weight: bold;
    font-size: 16px; /* Adjust size */
    z-index: -100000;
}

/* Style the percentage completed section to match "Form Navigation" */
.ffc_conv_wrapper .f-progress .ffc_progress_label {
    font-size: 16px !important; /* Match size to "Form Navigation" */
    font-weight: bold !important; /* Match font weight to "Form Navigation" */
    color: #ffff !important; /* Dark black color */
    position: relative;
    top: -8px; /* Adjust to raise the percentage label */
}

/* Style the "OK" and "Press Enter" buttons */
.ffc_conv_wrapper .ffc_answer_text_submit,
.ffc_conv_wrapper .ffc_press_enter {
    color: #ffffffff !important; /* Set text color to black */
    background-color: #ffffff !important; /* Set background color to white */
    border: none !important; /* Remove any borders */
    font-weight: bold !important; /* Make the text bold */
    transition: none !important; /* Disable hover effects */
}

/* Keep the same style on hover for "OK" and "Press Enter" */
.ffc_conv_wrapper .ffc_answer_text_submit:hover,
.ffc_conv_wrapper .ffc_press_enter:hover {
    color: #ffffffff !important; /* Keep text color black on hover */
    background-color: #ffffff !important; /* Keep background color white on hover */
    border: none !important;
}

/* Change the background of the container wrapping the progress, navigation text, and arrows */
.ffc_conv_wrapper .footer-inner-wrap {
    background-color: #021c4f !important; /* Red background */
    padding: 15px; /* Add some padding for spacing */
    border-radius: 5px; /* Optional: Rounded corners */
}

.ff_conv_app_9 .q-inner .o-btn-action {
    background-color: #086aff !important; /* Green background */
    color: #ffffff !important; /* White text color */
    border: none; /* Remove default border */
    border-radius: 8px; /* Rounded corners */
    padding: 12px 24px; /* Padding for size */
    font-size: 16px; /* Font size */
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

/* Hover effect */
.ff_conv_app_9 .q-inner .o-btn-action:hover {
    background-color: rgb(40, 100, 35);
    transform: scale(1.05); 
}

.ff_conv_app_9 .q-inner .o-btn-action span {
    color: #ffffff !important; 
}



   .ffc_conv_wrapper .ffc_power {
        display: none  !important; 
    }

.ffc_inline_form.ffc_conv_wrapper .ff_conv_app .ff_conv_input {
    padding-top: 5px !important;
}

.vff .ff-btn-submit-left {
    text-align: left;
    padding-bottom: 15px !important;
}