:root {
    /* Defaults */
    --primary-color: #87D3E3;
    --secondary-color: #00245B;
    --text-color-light: #fff;
    --option-button-fg-color: #47556A;
    --option-button-bg-color: #fff;
    --option-button-checked-bg-color: #00245B;
    --option-button-checked-fg-color: #fff;
    --error-red: #CE4236;
}

/* -- Header -- */

/* Nav Icon Color */
.section-header .top-nav .nav-icon {
    color: var(--secondary-color);
}
/* Nav Menu BG Color */
.section-header .top-nav .main-menu {
    background-color: var(--secondary-color);
}
/* Nav Menu FG Colors */
.section-header .top-nav .main-menu a {
    color: var(--text-color-light);
}
.section-header .top-nav .main-menu li.logout {
    border-top-color: var(--text-color-light);
}
.section-header .top-nav .main-menu .btn-close::before,
.section-header .top-nav .main-menu .btn-close::after {
    background-color: var(--text-color-light);
}

/* -- End Header -- */

/* -- Main Section -- */

/* Headings */
h1, h2, h3, h4 {
    color: var(--primary-color);
}
/* Main Section Body */
.section-main {
    color: var(--text-color-light);
    background-color: var(--secondary-color);
}
/* H3 Line Trail */
.line-trail::before {
    background-color: var(--primary-color);
}
/* Coverage Option Button - Label */
.coverage-option-button .option-label {
    background-color: var(--option-button-bg-color);
    color: var(--option-button-fg-color);
}
/* Coverage Option Button - Label Checked */
.section-main .option-input:checked + .option-label .checked-overlay {
    background-color: var(--option-button-checked-bg-color);
}
.section-main .option-input:checked + .option-label::after,
.section-main .option-input:checked + .option-label::before,
.section-main .option-input:checked + .option-label .option-text {
    color: var(--option-button-checked-fg-color);
}
/* Select Down-Arrow */
.select-wrapper::after {
    color: var(--primary-color);
}
/* Button */
.btn-primary, input[type=submit], button {
    color: var(--secondary-color);
    background-color: var(--primary-color);
}
/* Button Hover */
.btn-primary:hover, input[type=submit]:hover, button:hover {
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border-color: var(--primary-color);
}
/* Submissions List -- View Button */
.section-main a.view-submission {
    color: var(--primary-color);
}
/* Submissions List -- Delete Button */
.section-main a.delete-submission {
    color: var(--error-red);
}
/* Submission Result Page */
.submission-result-option,
.submission-result-option h3 {
    color: var(--secondary-color);
}
.submission-result-option .summary,
.submission-result-option .attributes {
    border-top-color: var(--secondary-color);
}

.submission-result-option > div > div:last-child {
    border-bottom-color: var(--secondary-color);
}

/* -- End Main Section -- */

/* -- Footer -- */

/* Background */
.section-footer {
    background-color: var(--primary-color);
}
/* Heading */
.section-footer h2 {
    color: var(--secondary-color);
}
/* Heading Line Trail */
.section-footer .line-trail::before {
    background-color: var(--secondary-color);
}
/* Footer Link Text Color */
.footer-link {
    color: var(--secondary-color);
}

/* -- End Footer -- */

/*  Individual Coverage Option Button Styling

    You can use the IDs of the options to individually override each button style.

    Below is an example, using a current option ID, to override the General Liability button:
*/

/*
#optCoverageGeneralLiability.coverage-option-button .option-label {
    background-color: black;
    color: cyan;
}
.section-main #optCoverageGeneralLiability .option-input:checked + .option-label::before {
    background-color: gray;
}
.section-main #optCoverageGeneralLiability .option-input:checked + .option-label::after,
.section-main #optCoverageGeneralLiability .option-input:checked + .option-label::before,
.section-main #optCoverageGeneralLiability .option-input:checked + .option-label .option-text {
    color: yellow;
}
*/