@foreach($opcoesCurso as $opcaoCurso)
    <div class="col-lg-2 col-md-4 col-sm-12 text-center tipo-curso-add {{$opcaoCurso['default'] ? 'tipo-curso-default mask-tooltip' : ''}}" title="{{$opcaoCurso['default'] ? 'Normalmente você escolhe este tipo' : ''}}">
        <a href="{{$opcaoCurso['link']}}">
        <div class="material-icons">{{$opcaoCurso['icon']}}</div>
        <p>{{$opcaoCurso['title']}}</p>
        <p class="small text-muted">{{$opcaoCurso['description']}}</p>
        </a>
    </div>
@endforeach

<style>
    #tipo-curso-opcoes{
        padding-top: 20px;
    }

    .tipo-curso-add{
        background-color: #ededed;
        border: 1px solid #e5e5e5;
        margin: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
        min-height: 200px;
    }

    .tipo-curso-add, .tipo-curso-add a {
        color: #444444;
    }

    .tipo-curso-add:hover{
        text-decoration: none;
        background-color: #f7f7f7;
        border: 1px solid #dbdbdb;
    }

    .tipo-curso-default{
        background-color: #f4fff7;
        border: 1px solid #d5edda;
        color: #206830;
    }

    .tipo-curso-default:hover{
        background-color: #effff3;
        border: 1px solid #398449;
    }

    .tipo-curso-add .material-icons{
        font-size: 60px;
        text-align: center;
    }

    .tipo-curso-add .text-muted{
        color: #000000;
        opacity: 0.5;
    }

    #tipo-curso-selecione{
        font-weight: bold;
        text-transform: uppercase;
    }
</style>