html {
    /*font-size: 16px;*/
}

#content, #header {
    width: 700px;
    margin: 0 auto;
}

#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 20px;
    background-color: #253552;
    color: #ECECE7;
    font-family: sans-serif;
    border-bottom: 3px solid #F9A800;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.header-section {
    flex: 1;
    display: flex;
    align-items: center;
}

.header-left {
    justify-content: flex-start;
}

.header-center {
    justify-content: center;
}

.header-right {
    justify-content: flex-end;
}

#formContent {
    width: 600px;
}

.form-button {
    display: block;
    width: 100%;
    background-color: #007bff;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 12px 0;
    margin: 8px 0;
    border-radius: 6px;
    font-size: 16px;
    transition: background-color 0.2s ease;
}

.form-button:hover {
    background-color: #0056b3;   /* darker blue on hover */
}

@media only screen and (max-width: 768px) {
    html {
        /*font-size: 20px;*/
    }

    #content, #header {
        width: 100%;
        margin: 0 auto;
    }

    /*.p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check::before {*/
    /*    content: "";*/
    /*    position: absolute;*/
    /*    top: 16px;*/
    /*    left: 4px;*/
    /*    border-right: 2px solid transparent;*/
    /*    border-bottom: 2px solid transparent;*/
    /*    transform: rotate(45deg) scale(1.5);*/
    /*    transform-origin: 0% 100%;*/
    /*    animation: checkbox-check 125ms 50ms linear forwards;*/
    /*}*/
    .p-checkbox-box, .p-checkbox {
        height: 30px !important;
        width: 30px !important;
    }

}

.wrapper {
    align-items: center;
    width: 800px;

}

.div-table {
    display: table;
    width: auto;

    border: 1px solid #666666;
    border-spacing: 5px; /* cellspacing:poor IE support for  this */
}

.div-table-row {
    display: table-row;
    width: auto;
    clear: both;
}

.div-table-col {
    float: left; /* fix for  buggy browsers */
    display: table-column;
    width: 200px;

}

.required-label:after {
    content: "*";
    color: red;
}

.p-fieldset .p-field {
    margin-bottom: 1rem;
}


.fluid-usage-grid input {
    background: #fafafa;
    border-radius: 4px;
    padding: 0.5rem;
}

.section-header {
    display: flex;
    align-items: center;
    margin: 0 0;
}
.section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ccc;
    margin-left: 0.5rem;
}

.form-button.client-style {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-family: 'Archivo Black', sans-serif;
    font-size: 18px;
    padding: 14px 0;
    margin: 10px 0;
    background-color: #253552;
    color: #ECECE7;
    border: 3px solid #F9A800;
    border-radius: 10px;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.form-button.client-style:hover {
    background-color: #2f4a6e; /* lighter blue on hover */
    color: #ffffff;
}

.sigCanvas {
    border: 1px dashed #ccc;
    border-radius: 8px;
    width: 400px;
    height: 200px;

}


@media only screen and (max-width: 768px) {
    html {
        /*font-size: 20px;*/
    }

    #content, #header {
        width: 100%;
        margin: 0 auto;
    }

    /*.p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check::before {*/
    /*    content: "";*/
    /*    position: absolute;*/
    /*    top: 16px;*/
    /*    left: 4px;*/
    /*    border-right: 2px solid transparent;*/
    /*    border-bottom: 2px solid transparent;*/
    /*    transform: rotate(45deg) scale(1.5);*/
    /*    transform-origin: 0% 100%;*/
    /*    animation: checkbox-check 125ms 50ms linear forwards;*/
    /*}*/
    .p-checkbox-box, .p-checkbox {
        height: 30px !important;
        width: 30px !important;
    }

    .sigCanvas {
        border: 1px dashed #ccc;
        border-radius: 8px;
        width: 100%;
        max-width: 400px;
        height: 200px;

    }

    .p-field{
        font-size: small;
    }

}