/*
    This file only contains styles used specifically in Views
*/

/* Variables */

:root {
    --form-control-width: 275px;
}

/*#region  ------------------------ FilterBox ------------------------ */

.filter-box {
    border: 1px solid var(--velobrix-Green-Light);
    font-size: 12px;
    margin-bottom: 10px;
}

.filter-box-fieldset {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: 5px;
}

.filter-box-field {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.filter-box-fieldset label {
    margin: 5px 10px 5px 0;
}

/*#endregion ------------------------ FilterBox ------------------------ */

/*#region  ------------------------ RecordsBox ------------------------ */

.records-box {
    border: 1px solid var(--velobrix-Green-Light);
    font-size: 12px;
    margin-bottom: 10px;
}

.records-box-header {
    background-color: var(--velobrix-Green-Light);
    font-weight: bold;
    padding: 10px 5px 15px 5px;
}

.records-box-header-buttons {
    float: right;
}

    .records-box-header-buttons a {
        margin-left: 10px;
        vertical-align: middle;
    }

.records-box-table {
    margin-bottom: 5px;
}

    .records-box-table th {
        background-color: var(--velobrix-Green-Lighter);
    }

.records-box-footer {
    margin: 0px 0px 0px auto;
    display: table;
}

/*#endregion ------------------------ RecordsBox ------------------------ */

/*#region  ------------------------ FormBox ------------------------ */

.form-box {
    border: 1px solid var(--velobrix-Green-Light);
    font-size: 12px;
    margin-bottom: 10px;
}

.form-box-fieldset {
    flex-flow: row wrap;
    align-items: center;
    width: 400px;
    margin-left: 10px;
}

.form-box-fieldset-wide {
    width: 1000px;
}

.form-box-field {
    display: flex;
    align-items: center;
}

.form-box-fieldset label {
    width: 125px;
}

.form-box-fieldset input {
    width: var(--form-control-width) !important;
}

.form-box-fieldset input {
    width: var(--form-control-width);
}

div.form-control-inline {
    width: var(--form-control-width) !important; /* For droppdowns */
}

button.dropdown-toggle {
    border: 1px solid #ddd !important; /* For droppdowns */
}

input.checkbox {
    width: auto !important;
}

textarea.form-control {
    width: auto;
}

/*#endregion ------------------------ FormBox ------------------------ */

.form-control:not(.pagination-select) {
    width: var(--form-control-width);
    vertical-align: middle;
    margin: 3px 0px 3px 0px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
}