/* Layout Canvas Styles */
.layout-canvas-g {
    background-color: #fff; /* Fallback background color */
    background-image: url('https://image.e.au.ncs.co/lib/fe3611757764047d771176/m/1/448c6bc3-8dcc-4015-a636-7425c506ab66.png'); /* Background image */
    background-repeat: no-repeat; /* Prevents the background image from repeating */
    background-size: cover; /* Makes the image cover the entire area */
    background-position: center; /* Centers the background image */
    height: 100vh; /* Sets the height to 100% of the viewport height */
    border: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    width: 100%; /* Ensures the width is 100% of the parent container */
}

/* Mobile View Adjustments for Layout Canvas */
@media (max-width: 768px) {
    .layout-canvas-g {
        background-size: cover; /* Ensures the entire image fits in the container */
        height: auto; /* Allow the height to adjust based on the content */
        min-height: 100vh; /* Ensures it covers the full viewport height */
    }
}

/* Header, Section, and Footer Styling */
.layout-canvas-g > .header,
.layout-canvas-g > .section,
.layout-canvas-g > .footer {
    position: relative;
    overflow: hidden;
    width: 100%;
    word-wrap: break-word;
}

/* Section Styling */
.layout-canvas-g > .section {
    margin: 0px auto !important;
    padding: 20px 0px !important;
}

.layout-canvas-g > .section > .columns {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
}

/* Body Styling */
body {
    color: #000;
    font-family: Arial;
    font-size: 12px;
    margin: 0 auto;
    max-width: 100%;
}

/* Mobile View Adjustments */
@media only screen and (max-width: 480px) {
    .mobile-hidden {
        display: none !important;
    }

    .responsive-td {
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
    }
}

/* Section Max Width */
.layout-canvas-g > .section > .columns {
    width: 100%;
}

/* Main Section Styling */
.section {
    max-width: 1190px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Mobile View Adjustments for Main Section */
@media (max-width: 1024px) {
    .section {
        width: 90% !important;
    }
}

/* ==================================== */

/* Header and Title Styling */
:root {
    --primary-text-color: #fff; /* Define a CSS variable for the primary color */
}

h1 {
    margin: 0 0 15px 0 !important;
    color: var(--primary-text-color); /* Use the CSS variable */
    font-size: 5em !important;
    font-family: var(--font-family);
}

.title-text {
    padding: 0 25px 10px 25px !important;
    position: relative !important; /* Ensure the close button is positioned relative to this container */
}

/* Form Header Information */
.form-header-info p {
    margin: 0 !important;
    line-height: 1.5 !important;
    color: var(--primary-text-color) !important; /* Use the CSS variable */
    font-family: var(--font-family);
    font-size: 1.3em;
}

/* Mobile Font-size Adjustments for Heading */
@media (max-width: 768px) {
    h1 {
        font-size: 3.5em !important;
    }
}

/* ==================================== */

/* Smart Capture Block Styles */
[id^="smartcapture-block-"] {
    background-color: #ffffffe8;
    margin: 15px 0;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

[id^="smartcapture-block-"] .smartcapture-controls {
    padding-bottom: 0px;
}

/* Label and Input Field Styles */
[id^="smartcapture-block-"] .smartcapture-controls .sc-formfield-label,
[id^="smartcapture-block-"] .smartcapture-controls .sc-formfield-label label,
[id^="smartcapture-block-"] .smartcapture-controls .sc-formfield-input label {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 5px 0px;
}

/* Input and Dropdown Styling */
[id^="smartcapture-block-"] input[type="text"],
[id^="smartcapture-block-"] input[type="email"],
[id^="smartcapture-block-"] input[type="number"],
.sc-formfield-input select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    transition: border-color 0.3s ease;
    background-color: #fff;
    height: auto !important;
    line-height: 1.5;
}

.fuelux input[type=text], .fuelux input[type=number], .fuelux input[type=email]{
padding:19px !important;
}

/* Focus State Styling */
[id^="smartcapture-block-"] input:focus,
.sc-formfield-input select:focus {
    border-color: #009DDC;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 157, 220, 0.5);
}

/* Button Styling */
[id^="smartcapture-block-"] .sc-button {
    background-color: #007bff;
    border-color: #007bff;
    border-radius: 4px;
    margin-top:10px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Blank Field Styling */
#BlankField {
    flex: 1 1 100%;
}

#BlankField input[type="text"] {
    width: 100%;
}

/* Other Field Styling */
[id^="smartcapture-block-"] #Other {
    width: 100%;
    height: auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.2;
    resize: vertical;
}

/* Button Hover State */
[id^="smartcapture-block-"] .sc-button:hover {
    background-color: #0056b3;
}

/* Center Button Styling */
[id^="smartcapture-block-"] .smartcapture-submit-button-wrapper {
    padding-bottom: 10px;
    text-align: center;
}

/* Two-Column Layout */
.two-column {
    display: flex;
    flex-wrap: wrap;
}

.two-column .smartcapture-controls {
    flex: 1 1 45%;
    margin: 10px 10px 5px 10px;
}

/* Mobile View Adjustments for Two-Column Layout */
@media (max-width: 768px) {
    .two-column {
        flex-direction: column;
    }

    .two-column .smartcapture-controls {
        flex: 1 1 100%;
        margin: 5px 0;
    }

    [id^="smartcapture-block-"] input[type="text"],
    [id^="smartcapture-block-"] input[type="email"],
    [id^="smartcapture-block-"] input[type="number"],
    .sc-formfield-input select {
        height: auto;
    }
}