/* Reset styles of the form */
#docContainer div, #docContainer span, #docContainer applet, #docContainer object, #docContainer iframe, #docContainer
h1, #docContainer h2, #docContainer h3, #docContainer h4, #docContainer h5, #docContainer h6, #docContainer p, #docContainer blockquote, #docContainer pre, #docContainer
a, #docContainer abbr, #docContainer acronym, #docContainer address, #docContainer big, #docContainer cite, #docContainer code, #docContainer
del, #docContainer dfn, #docContainer em, #docContainer img, #docContainer ins, #docContainer kbd, #docContainer q, #docContainer s, #docContainer samp, #docContainer
small, #docContainer strike, #docContainer strong, #docContainer sub, #docContainer sup, #docContainer tt, #docContainer var, #docContainer
b, #docContainer u, #docContainer i, #docContainer center, #docContainer
dl, #docContainer dt, #docContainer dd, #docContainer ol, #docContainer ul, #docContainer li, #docContainer
fieldset, #docContainer form, #docContainer label, #docContainer legend, #docContainer
table, #docContainer caption, #docContainer tbody, #docContainer tfoot, #docContainer thead, #docContainer tr, #docContainer th, #docContainer td, #docContainer
article, #docContainer aside, #docContainer canvas, #docContainer details, #docContainer embed, #docContainer 
figure, #docContainer figcaption, #docContainer footer, #docContainer header, #docContainer hgroup, #docContainer 
menu, #docContainer nav, #docContainer output, #docContainer ruby, #docContainer section, #docContainer summary, #docContainer
time, #docContainer mark, #docContainer audio, #docContainer video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: top;
}

/* HTML5 display-role reset for older browsers */
#docContainer article, #docContainer aside, #docContainer details, #docContainer figcaption, #docContainer figure, #docContainer 
footer, #docContainer header, #docContainer hgroup, #docContainer menu, #docContainer nav, #docContainer section {
	display: block;
}

#docContainer ol, #docContainer ul {
	list-style: none;
}

#docContainer blockquote, #docContainer q {
	quotes: none;
}
#docContainer blockquote:before, #docContainer blockquote:after, #docContainer
q:before, #docContainer q:after {
	content: '';
	content: none;
}
#docContainer table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Osondu Speed Development Styling */
#docContainer {
    margin: 40px auto;
    padding: 0;
    width: 100%;
    max-width: 600px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #222;
    background-color: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Form header styling */
#docContainer .fb-header h2 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: #003366;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: none;
}

/* Form items and spacing */
#docContainer .fb-item {
    width: 100%;
    display: inline-block;
    padding: 0 0 25px 0;
    margin-bottom: 0;
}

/* Label styling */
#docContainer .fb-grouplabel label {
    font-weight: 600;
    color: #003366;
    margin-bottom: 8px;
    display: block;
    font-size: 1rem;
}

/* Input fields styling */
#docContainer input[type=text], 
#docContainer input[type=password], 
#docContainer input[type=email], 
#docContainer input[type=number],
#docContainer input[type=date], 
#docContainer input[type=url], 
#docContainer textarea, 
#docContainer input[type=file],
#docContainer input[type=tel],
#docContainer select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #222;
    background-color: #fff;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

#docContainer input:focus,
#docContainer textarea:focus,
#docContainer select:focus {
    outline: none;
    border-color: #0056b3;
}

#docContainer textarea {
    min-height: 150px;
    resize: vertical;
}

/* Submit button styling */
#docContainer #fb-submit-button-div {
    height: auto;
    padding: 10px 0 0 0;
    text-align: center;
}

#fb-submit-button {
    display: inline-block;
    background-color: #0056b3;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: auto;
    height: auto;
    text-shadow: none;
    margin: 0;
}

#fb-submit-button:hover {
    background-color: #003366;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Static text styling */
#docContainer .fb-static-text p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #222;
    margin-bottom: 15px;
}

/* Hint text styling */
#docContainer .fb-hint {
    font-size: 0.9rem;
    color: #666;
    margin: 5px 0 0 0;
}

/* Error message styling */
#docContainer label.error {
    background-color: transparent;
    font-weight: normal;
    padding: 5px 0;
    display: block;
    clear: both;
    color: #d9534f;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    margin: 5px 0 0 0;
    font-style: italic;
}

/* Checkbox and radio button styling */
#docContainer .fb-checkbox, 
#docContainer .fb-radio {
    padding: 10px 0;
    color: #222;
}

#docContainer .fb-checkbox input, 
#docContainer .fb-radio input {
    margin-right: 8px;
}

#docContainer .fb-fieldlabel {
    display: inline;
    margin-left: 5px;
    font-size: 1rem;
    color: #222;
}

/* Responsive design */
@media (max-width: 768px) {
    #docContainer {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
    }
    
    #docContainer .fb-header h2 {
        font-size: 1.8rem;
    }
    
    #docContainer .fb-item {
        padding: 0 0 20px 0;
    }
}

@media (max-width: 576px) {
    #docContainer {
        padding: 15px;
    }
    
    #docContainer .fb-header h2 {
        font-size: 1.5rem;
    }
    
    #docContainer input[type=text], 
    #docContainer input[type=password], 
    #docContainer input[type=email], 
    #docContainer input[type=number],
    #docContainer input[type=date], 
    #docContainer input[type=url], 
    #docContainer textarea, 
    #docContainer input[type=file],
    #docContainer input[type=tel],
    #docContainer select {
        padding: 10px 12px;
        font-size: 0.95rem;
    }
}

/* Column layout adjustments for responsive design */
@media screen and (max-width: 768px) {
    #docContainer .fb-item.fb-25-item-column,
    #docContainer .fb-item.fb-20-item-column,
    #docContainer .fb-item.fb-33-item-column,
    #docContainer .fb-item.fb-50-item-column {
        width: 100%;
    }
    
    .fb-rightlabel .fb-grouplabel,
    .fb-leftlabel .fb-grouplabel {
        float: none;
        width: 100%;
        text-align: left;
    }
    
    .fb-rightlabel .fb-input-box,
    .fb-rightlabel .fb-dropdown,
    .fb-rightlabel .fb-listbox,
    .fb-rightlabel .fb-button,
    .fb-rightlabel .fb-textarea,
    .fb-rightlabel .fb-radio,
    .fb-rightlabel .fb-input-number,
    .fb-rightlabel .fb-checkbox,
    .fb-rightlabel .fb-input-date,
    .fb-rightlabel label.error,
    .fb-rightlabel .fb-hint, 
    .fb-rightlabel .fb-phone,
    .fb-rightlabel .fb-regex,
    .fb-leftlabel .fb-input-box,
    .fb-leftlabel .fb-dropdown,
    .fb-leftlabel .fb-listbox,
    .fb-leftlabel .fb-button,
    .fb-leftlabel .fb-textarea,
    .fb-leftlabel .fb-input-number,
    .fb-leftlabel .fb-radio,
    .fb-leftlabel .fb-checkbox,
    .fb-leftlabel .fb-input-date,
    .fb-leftlabel label.error,
    .fb-leftlabel .fb-hint,
    .fb-leftlabel .fb-phone,
    .fb-leftlabel .fb-regex {
        float: none;
        width: 100%;
    }
}