@page {
    margin: 0.25in 0.25in 0.25in .25in;
    size: A4 portrait;
}

@page :right {
    @bottom-right {
        content: counter(page);
    }
}

/*
@page:right {
    @bottom-right {
        content: counter(page);
    }
}*/

:root{
    --print-left-col-width: 20%;
    --print-right-col-width: 80%;
}

@media print {

    body {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        padding: 0in;
        margin: 0in;
        min-height: 0in;
        height: auto;
    }

    h4 {
        font-size: 16px;
    }

    h5 {
        font-size: 14px;
    }

    main, #main-container, main > *, #main > *,
    .sidebar-column-content .main-content,
    #so-services-content #fc-so-header, #so-services-content #fc-so-header .fc-so-brand,
    #so-services-content [role="tabpanel"], #so-services-content [role="tabpanel"].is-hidden {
        display: block;
        visibility: visible;
        padding: 0in;
        margin: 0in;
        min-height: auto;
        width: 100%;
        max-width: 100%;
        border: none;
    }

    body #so-services-content {
        /* KEEP THIS. It corrects the placement of the contents. */
        margin: 0px;
        width: 100%;
        border: none;
    }

    #so-services-content [role="tabpanel"], #so-services-content [id^="tabpanel-"].is-hidden {
        background: transparent;
        background-image: repeating-linear-gradient( 45deg, #fff, #fff 6px, #ccc 8px, #ccc 8px);
        padding: 0in;
        border-radius: 0;
        border: none;
        margin: 0in;
        overflow: visible;
    }

    #so-services-content #fc-so-header {
        display: grid;
        grid-template-columns: 33% 1fr;
        grid-template-rows: 1fr;
        column-gap: .25in;
        justify-content: stretch;
        align-items: center;
        margin-bottom: .1in;
    }
        #so-services-content #fc-so-header .fc-so-brand {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: flex-start;
        }

        button, .btn, #cwp-payment [id^="tabpanel"] button {
            display: none;
        }

     #ccm-page-controls-wrapper, #admin-info, header, header *, nav#breadcrumbs, #page-title, .main-content > *:not(#cwp-payment),
    .sidebar-column-content .right-column,
    footer, footer *, #cwp-payment #tabpanel-1,
    #cwp-payment #tabpanel-6 #fieldset-files, #cwp-payment #tabpanel-8,
    div.tab-traveler-container, div.tab-traveler-container > *,
    div.a-r-btn-cntnr, div.a-r-btn-cntnr > *,
    input[type="text"]::placeholder, input[type="date"]::placeholder{
        display: none;
        content: none;
        visibility: hidden;
    }
   
    form#cwp-payment #fieldset-app-type > div:first-of-type > .form-group,
    div.diff-mailing-toggle, div.other-homes-toggle,
    div.served-military-toggle, div.convicted-toggle,
    div.diff-mailing-toggle.d-none, div.other-homes-toggle.d-none,
    div.served-military-toggle.d-none, div.convicted-toggle.d-none {
        display: inherit !important;
        visibility: visible !important;
    }

    #state-zip-container{
        flex-flow: row nowrap;
        align-content: stretch;
        align-items: stretch;
        height: 100%;
        margin: 0;
    }

    form fieldset, form#cwp-payment fieldset, form#cwp-payment fieldset fieldset {
        border-radius: 0;
        padding: 0in;
        display: grid;
        justify-content: stretch;
        justify-items: stretch;
        align-content: end;
        align-items: center;
        gap: .01in 0in;
        border: none;
        padding: .0in;
        margin: 0in;
        width: 100%;
    }

        form#cwp-payment fieldset fieldset:not(:first-of-type) {
            border-top: 1px dashed #191A1A;
        }

    form fieldset, form#cwp-payment fieldset {
        padding: .05in .01in .05in .01in;
        border-top: 2px solid #A3701C;
        border-bottom: none;
        border-right: none;
        border-left: none;
    }

    form#cwp-payment legend {
        margin: 0in;
        font-size: 14px;
    }

    form#cwp-payment fieldset fieldset legend {
        align-self: flex-start;
        font-size: 11px;
        line-height: 11px;
        margin-top: 2px;
    }

    form#cwp-payment .form-group, form#cwp-payment .checkbox-group, form#cwp-payment .comment-group {
        align-self: flex-end;
        align-items: center;
        justify-content: stretch;
        justify-items: stretch;
        border-radius: 0;
        margin: 0in -1px; /* Makes borders overlap */
        padding: 0;
    }
        form#cwp-payment .form-group{

        }

        form#cwp-payment .form-group > label, form#cwp-payment .checkbox-group > label, form#cwp-payment .comment-group > label {
            margin: .03in 0 0 0;
            
            line-height: 10px;
            font-size: 10px;
            color: #eeeeee;
            position: static;
        }

    #fieldset-app-type {
        grid-template-columns: var(--print-left-col-width) var(--print-right-col-width);
        grid-template-rows: 1fr;
    }

        #fieldset-app-type > div:first-of-type {
            display: grid;
            justify-content: stretch;
            justify-items: stretch;
            align-content: stretch;
            align-items: end;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
        }



            #fieldset-app-type > div:first-of-type > .form-group:nth-of-type(1) {
                grid-row-start: 1;
                grid-row-end: span 2;
                display: flex;
                justify-content: flex-start;
            }

                #fieldset-app-type > div:first-of-type > .form-group:nth-of-type(1) > .checkbox-group {
                    display: flex;
                }

    #fieldset-qualify {
        grid-template-columns: var(--print-left-col-width) 1fr 1fr 2fr;
        grid-template-rows: 1fr;
    }

        #fieldset-qualify > #fieldset-mt-resident {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            margin: -.02in 0 0 0;
            padding: 0px;
            align-content: start;
        }
            #fieldset-qualify > #fieldset-mt-resident > div:first-child {
                /* This is the label/paragraph group */
                grid-column-start: 1;
                grid-column-end: span 2;
            }

    #fieldset-name {
        grid-template-columns: var(--print-left-col-width) 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
        #fieldset-name > legend {
            grid-row-start: 1;
            grid-row-end: span 2;
        }

    #fieldset-residency {
        grid-template-columns: var(--print-left-col-width) var(--print-right-col-width);
        grid-template-rows: 1fr 1fr;
    }
        #fieldset-residency > legend {
            grid-row-start: 1;
            grid-row-end: span 2;
        }

    #fieldset-physical-address {
        grid-template-columns: 3fr 2fr 2fr;
        grid-template-rows: auto auto;
    }

        #fieldset-physical-address > legend {
            grid-column-start: 1;
            grid-column-end: span 3;
        }

    #fieldset-mailing-address {
        display: flex;
    }

        #fieldset-mailing-address > .diff-mailing-toggle {
            visibility: visible;
            display: grid;
            grid-template-columns: 3fr 2fr 2fr;
            grid-template-rows: auto auto;
        }

    #fieldset-contact-info {
        grid-template-columns: var(--print-left-col-width) 2fr 1fr 2fr 1fr;
        grid-template-rows: auto auto;
    }

        #fieldset-contact-info > legend {
            grid-row-start: 1;
            grid-row-end: span 2;
        }

        #fieldset-contact-info > div:last-child {
            grid-column-start: 2;
            grid-column-end: span 4;
        }

    #fieldset-personal-info {
        grid-template-columns: var(--print-left-col-width) repeat(8, 1fr);
        grid-template-rows: auto auto;
    }

        #fieldset-personal-info > legend {
            grid-row-start: 1;
            grid-row-end: span 2;
        }

        #fieldset-personal-info > div.form-group:nth-of-type(-n + 2) {
            /* first two divs */
            grid-column-end: span 4;
        }

        #fieldset-personal-info > #fieldset-height {
            grid-column-end: span 3;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            margin: -.02in 0 0 0;
            padding: 0px;
        }
            #fieldset-personal-info > #fieldset-height > legend {
                grid-column-start: 1;
                grid-column-end: span 2;
            }

    #fieldset-identity {
        grid-template-columns: var(--print-left-col-width) 2fr 1fr 2fr;
        grid-template-rows: auto;
    }

    #fieldset-employment {
        grid-template-columns: var(--print-left-col-width) var(--print-right-col-width);
        grid-template-rows: auto;
    }

        #fieldset-employment > #dynamic-employer-container {
            grid-column-start: 1;
            grid-column-end: span 2;
        }

        #fieldset-employment fieldset[id^="fieldset-employer-"] {
            grid-template-columns: var(--print-left-col-width) repeat(5, 1fr);
            grid-template-rows: auto auto;
            align-items: end;
        }

            #fieldset-employment fieldset[id^="fieldset-employer-"] > legend {
                grid-row-start: 1;
                grid-row-end: span 2;
                font-size: 11px;
                place-self: center flex-end;
            }

            #fieldset-employment fieldset[id^="fieldset-employer-"] div:nth-child(n+3):nth-child(-n+4), 
            #fieldset-employment fieldset[id^="fieldset-employer-"] div:nth-child(7) {
                /* There is a div between the legend and the div with an input */
                grid-column-end: span 2;
            }
            

    #fieldset-residences {
        grid-template-columns: var(--print-left-col-width) var(--print-right-col-width);
        grid-template-rows: auto auto;
    }

        #fieldset-residences > .other-homes-toggle:not(:nth-child(3)) {
            display: flex;
            flex-flow: column nowrap;
            grid-column-start: 1;
            grid-column-end: span 2;
        }


        #fieldset-residences fieldset[id^="fieldset-residence-"] {
            grid-template-columns: var(--print-left-col-width) 2fr repeat(3, 1fr);
            grid-template-rows: auto auto;
        }

            #fieldset-residences fieldset[id^="fieldset-residence-"] > legend {
                grid-row-start: 1;
                grid-row-end: span 2;
                font-size: 11px;
                place-self: center flex-end;
            }

    #fieldset-military {
        grid-template-columns: var(--print-left-col-width) var(--print-right-col-width);
        grid-template-rows: auto;
    }

        #fieldset-military > .served-military-toggle {
            display: grid;
            grid-template-columns: 2fr repeat(4, 1fr);
            grid-template-rows: auto;
        }

    #fieldset-convictions {
        grid-template-columns: var(--print-left-col-width) var(--print-right-col-width);
        grid-template-rows: auto auto;
    }

        #fieldset-convictions > .convicted-toggle:not(:nth-child(3)) {
            display: flex;
            flex-flow: column nowrap;
            grid-column-start: 1;
            grid-column-end: span 2;
        }


        #fieldset-convictions fieldset[id^="fieldset-conviction-"] {
            grid-template-columns: var(--print-left-col-width) 2fr 1fr 2fr;
            grid-template-rows: auto auto;
        }

            #fieldset-convictions fieldset[id^="fieldset-conviction-"] legend {
                font-size: 11px;
                place-self: center flex-end;
            }


    #fieldset-references {
        grid-template-columns: var(--print-left-col-width) var(--print-right-col-width);
        grid-template-rows: auto auto auto auto;
    }

        #fieldset-references > fieldset.fieldset-reference {
            grid-column-start: 1;
            grid-column-end: span 2;
            grid-template-columns: var(--print-left-col-width) repeat(3, 1fr);
            grid-template-rows: auto auto;
        }

            #fieldset-references > fieldset.fieldset-reference legend {
                grid-row-start: 1;
                grid-row-end: span 2;
                font-size: 11px;
                place-self: center flex-end;
            }

        #fieldset-references > fieldset.fieldset-reference div:nth-child(3) {
            grid-column-end: span 2;
        }

    #fieldset-additional-info {
        grid-template-columns: var(--print-left-col-width) var(--print-right-col-width);
        grid-template-rows: auto;
    }

    #fieldset-signature {
        grid-template-columns: var(--print-left-col-width) 3fr 1fr;
        grid-template-rows: auto auto auto;
    }

        #fieldset-signature > legend {
            grid-row-start: 1;
            grid-row-end: span 3;
        }

        .stop-sign-container {
            width: .3in;
        }

            #fieldset-signature .stop-sign-bg::before {
                content: url(../images/stop_sign_bg.svg);
                background-color: red;
                color: red;
                width: 100%;
                height: 100%;
            }

        #fieldset-signature > *:nth-child(2), #fieldset-signature > *:nth-child(3) {
            grid-column-end: span 2;
        }

    input#signature::placeholder, input#signature-date::placeholder{
        line-height: 14px;
    }

    form#cwp-payment .form-group > input,
    form#cwp-payment .form-group > select,
    form#cwp-payment .form-group > textarea,
    form#cwp-payment .form-group > input[type="text"],
    form#cwp-payment .form-group > input[type="text"],
    form#cwp-payment .form-group > input[type="date"],
    form#cwp-payment .form-group > select > option,
    form#cwp-payment .form-group > input:-webkit-autofill,
    form#cwp-payment .form-group > input:-webkit-autofill:hover,
    form#cwp-payment .form-group > input:-webkit-autofill:focus,
    form#cwp-payment .form-group > input:-webkit-autofill:active,
    form#cwp-payment .form-group .datepicker-group > input {
        line-height: 12px;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #000;
        font-family: monospace;
        margin: -.05in 0 0 0;
        padding: .065in .015in .015in .015in;
        border: 1px solid #dddddd;
        border-radius: 0px;
        min-height: 24px;
        /* Get rid of drop-down arrows on SELECT elements */
        -moz-appearance: none; /* Firefox */
        -webkit-appearance: none; /* Safari and Chrome */
        appearance: none;
    }

    #form#cwp-payment .form-group > select > option[value=""]:checked {
        /*position: relative;*/
        display: none !important;
        visibility: hidden !important;
    }
    /*#form#cwp-payment .form-group > select > option[value=""]::before {
        content:"";
        background-color: white;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
    }*/

        form#cwp-payment p, form#cwp-payment .form-group > p, form#cwp-payment .form-group li, form#cwp-payment .checkbox-group > p, form#cwp-payment .checkbox-group > li, form#cwp-payment .comment-group > p, form#cwp-payment .comment-group li, p.sign-date, .strike-description-view > p {
            font-size: 10px;
            line-height: 10px;
            font-weight: 600;
            margin: 0in;
            font-family: monospace;
        }

    form#cwp-payment .checkbox-group {
        padding: 0in;
        margin: 10px 0 0 0;
    }

        form#cwp-payment .checkbox-group input[type="checkbox"] {
            height: 10px;
            width: 10px;
        }

    #cwp-payment fieldset {
        break-inside: avoid;
    }

    .no-print, .no-print *, .no-print::before, .no-print::after {
        display: none !important;
        visibility: hidden !important;
        color: white;
        padding: 0in;
        margin: 0in;
    }

}