/*
    
    callout.css
    
    EXAMPLE:
    
<h3>Lost Wages</h3>
<div class="hasCallout">
    <div class="calloutColumn">
        <div class="callout">
            <p class="heading">Weekly Cash Benefit</p>
            <p>2/3 of your average weekly wage X your % of disability</p>
            <p><strong>For example:</strong> A worker who earns $1000 a week and is 70% disabled would receive $466.67 ($666.67, workers average weekly wage X 70%= $466.67)</p>
        </div>
    </div>
    <div class="contentColumn">
        <div class="content">
            <p>You are entitled to receive a portion of your lost wages if, due to your work-related injury or illness:</p>
            <ul>
                <li>Your injury prevents you from working more than seven calendar days; or</li>
                <li>You permanently lose a portion of the function of a part of your body.</li>
            </ul>
            <p>Lost wage benefits are based on your average weekly wage (AWW) for the 52 weeks before the date of injury or illness, and your degree of disability. Your AWW is based on your <strong><em>gross earnings</em></strong>, including overtime and other compensation, not your take-home pay. If you have two jobs, it includes both your wages. Your degree of disability is a percentage of how much you are disabled due to your injury, as determined by your health care provider.</p>
            <p>If you can return to work but your injury keeps you from earning the same wages you earned before the injury, you may be entitled to <strong><em>reduced earnings benefits</em></strong>. This pays up to two-thirds of the difference between your pre-injury wages and your post-injury wages.</p>
            <p>See the Board publication <a href="/content/main/TheBoard/indemnity-fact-sheet.pdf">Lost Wage Benefits</a><i class="far fa-file-pdf"></i> for complete details.</p>
        </div>
    </div>
</div>
    
*/

.hasCallout {
    display: flex;
    flex-direction: row;
    margin: 20px 0;
}

.hasCallout.lead {
    flex-direction: row-reverse;
}

.hasCallout .contentColumn {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hasCallout .contentColumn .content {
    /*display: block;*/
}

.hasCallout .calloutColumn {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hasCallout .calloutColumn .callout {
    margin-left: 1em;
    font-family: "Proxima Nova Regular", Arial, sans-serif;
    font-size: 1em;
    padding: 0 1em;
    border-top: 2px solid #F2A900;
    border-bottom: 2px solid #f2a900;
}

.hasCallout .calloutColumn .callout strong {
    font-family: "Proxima Nova Bold", Arial, sans-serif;
}

.hasCallout .calloutColumn .callout .heading {
    font-size: 1.1em;
    font-family: "Proxima Nova Bold", Arial, sans-serif;
    text-align: center;
}

/*

    fix for lists with internal callouts - IE and Edge browsers
    
    Ex:
    
    <li>
        <div class="hasCallout bullet-flex-fix">
            <div class="contentColumn">
                <p><strong>Medical care for your injury is a lifetime benefit.</strong> Unless you’ve signed a waiver as part of a settlement (Section 32 waiver agreement), medical care for  your work injury or illness is a lifetime benefit, so you’re eligible for medical treatment even after you return to work. You can also ask to be reimbursed for travel costs to and from medical treatment and for payments you made for related medical expenses such as prescriptions. (Use <a href="/content/main/forms/c257.pdf"><em>Form C-257</em></a><i class="far fa-file-pdf"></i>).</p>
            </div>
            <div class="calloutColumn">
                <div class="callout">
                    <p>A Section 32 Waiver Agreement is a negotiated settlement between you and the insurer. It ends your right to ongoing and future benefits in exchange for a lump sum payment or annuity.</p>
                </div>
            </div>
        </div>
    </li>
    
*/
.bullet-flex-fix {
    display: inline-flex;
    width: 100%;
}


@media only screen and (max-width: 1200px) {
    .hasCallout {
        display: block;
        margin: 0;
    }
    
    /*.hasCallout * {
        margin-top: revert;
    }*/
    
    .hasCallout .contentColumn {
        width: 100%;
        display: block;
    }
    
    .hasCallout .calloutColumn {
        width: 100%;
        display: block;
    }
    
    .hasCallout .calloutColumn .callout {
        margin: 1.2em 0;
        font-size: 1.2em;
        text-align: center;
        border-top: 2px solid #f2a900;
        border-bottom: 2px solid #f2a900;
    }
    
    .hasCallout .calloutColumn .callout ul,
    .hasCallout .calloutColumn .callout ol {
        padding: 0;
    }
    
    .hasCallout .calloutColumn .callout li {
        list-style-position: inside;
    }
}


@media only screen and (max-width: 767px) {}