<div class="row"  <%= (App.rtl ? 'style="direction:rtl"' : '') %> >
    <div id="advancedCards">
        <div class="row">
            <div class="col s12">
                <div class="col s12 m3">
                    <a class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #11b5ae;  min-height: 25px; max-height: 170px;" href="#/breaks">
                        <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">free_breakfast</i>
                        <p style="font-size: 20px; font-weight: bold;" align="center">{Literal}Add/Edit Breaks{/Literal}</p>
                    </a>
                </div>

                <div class="col s12 m3">
                    <a class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #8830b1;  min-height: 25px; max-height: 170px;" href="#/set-pay-period">
                        <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">event_available</i>
                        <p style="font-size: 20px; font-weight: bold;" align="center">{Literal}Set Pay Period{/Literal}<br></p>
                    </a>
                </div>

                <div class="col s12 m3">
                    <a class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #3970b7;  min-height: 25px; max-height: 170px;" href="#/pay-period">
                        <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;" align="center">date_range</i>
                        <p style="font-size: 20px; font-weight: bold;" align="center">{Literal}View/Edit Pay Periods{/Literal}</p>
                    </a>
                </div>
                <div class="col s12 m3">
                    <a class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #ecb613;  min-height: 25px; max-height: 170px;" href="#/advance-pay-period">
                        <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">update</i>
                        <p style="font-size: 20px; font-weight: bold;" align="center">{Literal}Advance Pay Periods{/Literal}</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col s12">
                <div class="col s12 m3">
                    <a class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #5e8acc;  min-height: 25px; max-height: 170px;" href="#/pay-types">
                        <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">money_off</i>
                        <p style="font-size: 20px; font-weight: bold;" align="center">{Literal}Add/Edit Pay Types{/Literal}</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
    