/*@media (min-width: 1500px) {
    .container {
        max-width: 1400px;
    }
}*/

.form-check {
    margin-bottom: .1rem;
}

.table-img {
    min-width: 60px;
}

@media (min-width: 960px) {
    .table-responsive {
        display: table;
    }
}

.filter-heading:hover {
    text-decoration: underline;
    cursor: pointer;
}

.sidebar {
    background-color: #f0f0f0;
    padding-top: 1em;
    border: 1px solid #d9d9d9;
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
    min-width: 200px;
}

.form-check > .form-check-label {
    font-size: 0.9rem;
}

body {
    background-color: #fafafa;
}

.main-content {
    background-color: #ffffff;
    padding: 1em;
    border: 1px solid #d9d9d9;
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}

.card-block > hr {
    margin: 0;
}

.card-body > hr {
    margin-top: 0;
    margin-bottom: 0;
}

.motherboard-card {
    min-height: 350px;
}

.motherboard-card-img {
    max-height: 250px;
    text-align: center;
}

.motherboard-card > .card-header {
    min-height: 72px;
}

/* Comparison button */

.comparison-button > .form-check {
    max-width: 100px;
}

.comparison-button > .form-check:hover {
    background-color: #fafafa;
}

.comparison-button-green > .form-check {
    background-color: #28a745;
}

.comparison-button-green > .form-check:hover {
    background-color: #218c39;
}

.multi-select-row {
    margin-bottom: 0.5em;
}

/* Comparison table */
.comparison-table {
    table-layout: fixed;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.comparison-table > thead > tr > th {
    min-width: 260px;
    width: 260px;
    max-width: 260px;
    vertical-align: top;
}

.comparison-table > tbody > tr:not(.table-info) > th {
    width: 200px;
    text-align: right;
    background-color: #f0f0f0;
}

.comparison-table > tbody > tr > td {
    min-width: 260px;
    width: 260px;
    max-width: 260px;
}

/* Some stupid shit to make the select2 widget responsive */
.select2 {
    width: 100% !important;
}

.select2-selection--multiple .select2-search--inline .select2-search__field {
    width: auto !important;
}

.select2-container .select2-selection--single {
    height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
}

/* Slider styling */
.slider-filter {
    margin-top: 50px;
    margin-left: 10px;
    margin-right: 10px;
}

.noUi-connect {
    background: #343a40;
}