/* ======================================================
   SUT UI Framework
   For Grails 2.1.1 + Bootstrap 3
   Safe CSS (No Conflict with main.css or modern-theme)
   Prefix : sut-ui
======================================================*/

/* Container */
.sut-ui-container{
    padding:20px;
}

/* Card */
.sut-ui-card{
    background:#ffffff;
    border-radius:6px;
    border:1px solid #e6e6e6;
    padding:20px;
    margin-bottom:20px;
    box-shadow:0 1px 2px rgba(0,0,0,0.05);
}

/* Card Header */
.sut-ui-card-title{
    font-size:18px;
    font-weight:600;
    margin-bottom:15px;
    border-bottom:1px solid #eee;
    padding-bottom:8px;
}

/* Table */
.sut-ui-table{
    width:100%;
    border-collapse:collapse;
}

.sut-ui-table th{
    background:#f7f7f7;
    padding:10px;
    font-weight:600;
    border-bottom:2px solid #ddd;
}

.sut-ui-table td{
    padding:10px;
    border-bottom:1px solid #eee;
}

.sut-ui-table tr:hover{
    background:#fafafa;
}

/* Buttons */
.sut-ui-btn{
    display:inline-block;
    padding:8px 14px;
    border-radius:4px;
    border:none;
    font-size:14px;
    cursor:pointer;
}

.sut-ui-btn-primary{
    background:#2a7ae2;
    color:#fff;
}

.sut-ui-btn-primary:hover{
    background:#1c5fb8;
}

.sut-ui-btn-success{
    background:#28a745;
    color:#fff;
}

.sut-ui-btn-danger{
    background:#dc3545;
    color:#fff;
}

/* Form */
.sut-ui-form-group{
    margin-bottom:15px;
}

.sut-ui-label{
    font-weight:600;
    margin-bottom:5px;
    display:block;
}

.sut-ui-input{
    width:100%;
    padding:8px;
    border:1px solid #ccc;
    border-radius:4px;
}

.sut-ui-input:focus{
    outline:none;
    border-color:#2a7ae2;
}

/* Alert */
.sut-ui-alert{
    padding:12px 15px;
    border-radius:4px;
    margin-bottom:20px;
}

.sut-ui-alert-success{
    background:#e9f7ef;
    color:#2e7d32;
}

.sut-ui-alert-danger{
    background:#fdecea;
    color:#c62828;
}

/* Responsive Table */
.sut-ui-table-responsive{
    width:100%;
    overflow-x:auto;
}

/* Grid */
.sut-ui-row{
    margin-left:-10px;
    margin-right:-10px;
}

.sut-ui-col{
    padding-left:10px;
    padding-right:10px;
    float:left;
}

/* Desktop */
@media (min-width:992px){

    .sut-ui-col-6{
        width:50%;
    }

    .sut-ui-col-4{
        width:33.33%;
    }

    .sut-ui-col-3{
        width:25%;
    }

}

/* Mobile */
@media (max-width:991px){

    .sut-ui-col-6,
    .sut-ui-col-4,
    .sut-ui-col-3{
        width:100%;
        margin-bottom:15px;
    }

    .sut-ui-card{
        padding:15px;
    }

    .sut-ui-table th,
    .sut-ui-table td{
        padding:8px;
        font-size:13px;
    }

}

/* Clearfix */
.sut-ui-row:after{
    content:"";
    display:block;
    clear:both;
}