/*
.centered -> centers GridView, its summary and pagination
USAGE: 	<?=GridView::widget([
			'dataProvider' => $dataProvider,
			'columns' => [
				'name',
				'address',
			],
			'options' => ['class' => 'centered'],
			'layout' => "{items}\n{summary}\n{pager}",
			'pager' => [
				'maxButtonCount' => 5,
			]
		]);?>
*/

.centered .summary {
    text-align: center;
    padding-bottom: 15px;
}

.centered .pagination {
    margin: auto;
    display: table;
}

form.centered {
    text-align: center;
}

.centered .form-group {
    max-width: 400px;
    margin: auto;
}

.form-group.wide {
    max-width: 800px;
}

.form-group.extra-wide {
    max-width: 100%;
}

.centered input[type="file"] {
    margin: auto;
}

/*
.centered-detail-table -> centers DetailView
standard classes have to be provided as well, or detail view loses its form
USAGE: 	<?=DetailView::widget([
		'model' => $model,
		'attributes' => [
			'name',
			'address',
		],
		'options' => [
			'class' => 'table table-striped table-bordered detail-view centered-detail-table'
		]
	])?>
*/
.centered-detail-table {
    margin: auto;
    width: auto;
    min-width: 50%;
}

.centered-detail-table th {
    padding: 8px 15px !important;
}

.centered-detail-table td {
    padding-left: 15px !important;
    padding-right: 30px !important;
}


/*
.action-table is used to get rid of unneeded space around buttons in action column
 */
.action-table td:last-child {
    width: 1px !important;
    white-space: nowrap !important;
}

/*
.form-half used for the form fields, to use only half of the row (two next to each other if needed)
 */

@media (min-width: 992px) {
    .form-half {
        width: 50%;
        display: inline-block;
        vertical-align: top;
    }
}