.newFederalW4PWithholding {
}

    .newFederalW4PWithholding input[type="radio"] + label {
        display: initial;
    }

    .newFederalW4PWithholding .boldedText {
        font-weight: bold;
    }

    .newFederalW4PWithholding .glyphicon-new-window {
        font-size: smaller;
    }

    .newFederalW4PWithholding a.w4App {
        font-style: italic;
    }

    /*
        list-style-type: none to have the li:before come up with the 
        counter wrapped in parenthesis
    */
    .newFederalW4PWithholding ol,
    .newFederalW4PWithholding ul {
        list-style-type: none;
        padding-left: 2.5rem;
        position: relative;
    }

        .newFederalW4PWithholding ol li:before {
            font-weight: bold;
            position: absolute;
            left: 0;
        }

        .newFederalW4PWithholding ol > li {
            counter-increment: level1;
        }

            .newFederalW4PWithholding ol > li.hiddenLineItem {
                visibility: hidden;
            }

            .newFederalW4PWithholding ol > li:before {
                content: "(" counter(level1, lower-alpha) ")";
            }

            .newFederalW4PWithholding ol > li > ol > li {
                counter-increment: level2;
            }

                .newFederalW4PWithholding ol > li > ol > li:before {
                    content: "(" counter(level2, lower-roman) ")";
                }

    .newFederalW4PWithholding .step2Row > td > div > div > ol li {
        padding-top: 0.5em;
    }

    /* allow for padding-top: 0.5em; to be applied to nested first-child */
    .newFederalW4PWithholding .step2Row > td > div > div > ol > li:first-child {
        padding-top: 0;
    }

    .newFederalW4PWithholding .currencyTextBoxDiv {
        display: flex;
    }

        .newFederalW4PWithholding .currencyTextBoxDiv span {
            font-size: 14px;
            font-weight: 600;
            padding-right: 0.2em;
            position: relative;
            bottom: -0.3em;
        }

    .newFederalW4PWithholding .noWithholdingTable {
        width: 100%;
    }

        .newFederalW4PWithholding .noWithholdingTable .noWithholdingCheckBox > input[type="checkbox"] + label {
            color: initial;
            font-weight: bold;
            padding: inherit;
            vertical-align: 0.1em;
        }

    .newFederalW4PWithholding > table > tbody > tr > td {
        padding: 0.5em;
    }

    .newFederalW4PWithholding .stepDivider {
        border-top: solid 2px;
    }

        .newFederalW4PWithholding .stepDivider.step2Row > td {
            padding-bottom: 0;
        }

    .newFederalW4PWithholding td .row:not(:first-child) {
        padding-top: 0.5em;
    }

    .newFederalW4PWithholding .stepName {
        font-weight: bold;
        max-width: 6.9em;
    }

        .newFederalW4PWithholding .stepName > span {
            display: block;
            margin-bottom: 0.3em;
        }

        .newFederalW4PWithholding .stepName.step1Divider {
            border-right: solid thin;
        }

    .newFederalW4PWithholding .displayTable {
        display: table;
    }

        .newFederalW4PWithholding .displayTable .displayTableRow {
            display: table-row;
        }

            .newFederalW4PWithholding .displayTable .displayTableRow .displayTableCell {
                display: table-cell;
            }

            .newFederalW4PWithholding .displayTable .displayTableRow > .displayTableCell > .displayTableRow > .displayTableCell {
                width: 100%;
            }

                .newFederalW4PWithholding .displayTable .displayTableRow > .displayTableCell > .displayTableRow > .displayTableCell:not(.stepResult),
                .newFederalW4PWithholding .displayTable .displayTableRow > .displayTableCell.stepName {
                    padding: 0.5em 0.5em 0 0.5em;
                }

                    .newFederalW4PWithholding .displayTable .displayTableRow > .displayTableCell > .displayTableRow > .displayTableCell:not(.stepResult) > span {
                        display: block;
                        margin-bottom: 0.5em;
                    }

    .newFederalW4PWithholding .stepResult {
        padding-bottom: 0.1em;
        vertical-align: bottom;
    }

        .newFederalW4PWithholding .stepResult.step4Result {
            border-bottom: solid thin;
        }

        .newFederalW4PWithholding .stepResult.stepResultNumber {
            border-left: solid thin;
            border-right: solid thin;
            font-weight: bold;
            text-align: center;
        }

            .newFederalW4PWithholding .stepResult.stepResultNumber > span {
                display: inline-block;
                width: 3em;
            }

        .newFederalW4PWithholding .stepResult .currencyTextBoxDiv {
            margin-left: 0.1em;
            width: max-content;
        }

@media screen and (max-width: 991px) {
    /* have $ align with other text by matching padding of ul */
    .newFederalW4PWithholding .row > div > .currencyTextBoxDiv {
        padding-left: 2.5rem;
    }
}

@media screen and (max-width: 1199px) {
    .newFederalW4PWithholding .displayTable > .displayTableRow > .displayTableCell {
        padding-bottom: 0.5em;
    }

        /* have stepResult wrap under */
        .newFederalW4PWithholding .displayTable > .displayTableRow > .displayTableCell > .displayTableRow > .displayTableCell {
            display: block;
        }

            /* 
                float and width to have the stepNumber and currencyTextBox show on same line
                padding to line up with the previous cell content
            */
            .newFederalW4PWithholding .displayTable > .displayTableRow > .displayTableCell > .displayTableRow > .displayTableCell.stepResult {
                float: left;
                padding: 0 0.5em;
                width: initial;
            }

    /* use margin instead of padding in order to keep step 3 result flush with stepDivider */
    .newFederalW4PWithholding .displayTable .displayTableRow > .displayTableCell > .displayTableRow > .displayTableCell:not(.stepResult) > span {
        margin-bottom: 0;
    }

    /* have currencyTextBoxes flush with bottom of list text */
    .newFederalW4PWithholding .displayTable .displayTableRow > .displayTableCell > .displayTableRow > .displayTableCell:not(.stepResult) ol,
    .newFederalW4PWithholding .displayTable .displayTableRow > .displayTableCell > .displayTableRow > .displayTableCell:not(.stepResult) ul {
        margin-bottom: initial;
    }

    .newFederalW4PWithholding .stepResult.step4Result {
        border-bottom: none;
    }

        /* hide step 4 numbers for currencyTextBoxes as the ol defines them pretty well as is */
        .newFederalW4PWithholding .stepResult.step4Result > span {
            display: none;
        }

    .newFederalW4PWithholding .stepResult.stepResultNumber {
        border-left: none;
        border-right: none;
        text-align: initial;
    }

        /* 
            decrease width from number to minimize separation between it and currencyTextBox, 
            but specify a width so between steps 3 and 4 the currencyTextBox align
            (although we hide step 4 numbers, maybe we'll introduce)
        */
        .newFederalW4PWithholding .stepResult.stepResultNumber > span {
            vertical-align: -webkit-baseline-middle;
            width: 1.25em;
        }

    .newFederalW4PWithholding .stepResult .currencyTextBoxDiv {
        margin-left: 0;
    }
}

.italicized {
    font-style: italic;
}