/* =========================================
搜尋容器
========================================= */
.search-panel {
    background-color: #fff;
}

/* 條件區塊 */
.condition-area {
    padding-bottom: 5px;
}

/* 採計科目勾選區 */
.subject-area {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* =========================================
左側條件
========================================= */
.form-horizontal .form-group {
    margin-bottom: 15px;
}

/* Label 靠左對其*/
.form-horizontal .control-label {
    padding-top: 8px;
    text-align: left !important;
    font-weight: bold;
    color: #333;
    padding-left: 15px;
}

/* 輸入設定 */
.form-control {
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: none;
}

/* =========================================
右側條件
========================================= */
/* 採計科目標題 */
.subject-title {
    margin: 0 0 15px 0;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    line-height: 34px;
}

/* Checkbox 微調，主要是讓勾勾和文字垂直對其 */
.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 0;
    vertical-align: middle;
    margin-right: 8px;
}

.checkbox-item span {
    vertical-align: middle;
    font-weight: lighter;
}

/* =========================================
按鈕樣式
========================================= */
.btn-search {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    font-weight: bold;
    padding: 8px 20px;
}

    .btn-search:hover {
        background-color: #f0f0f0;
    }


/* 橘紅色底-白字 按鈕設計 */
.btn-orange-red {
    color: #ffffff;
    background-color: #ff4500;
    border-color: #e63e00;
}

    /* Hover, focus, and active states for better UX */
    .btn-orange-red:hover,
    .btn-orange-red:focus,
    .btn-orange-red:active,
    .btn-orange-red.active,
    .open > .dropdown-toggle.btn-orange-red {
        color: #ffffff;
        background-color: #cc3700;
        border-color: #b33000;
    }

    /* Disabled state styling */
    .btn-orange-red.disabled,
    .btn-orange-red[disabled],
    fieldset[disabled] .btn-orange-red,
    .btn-orange-red.disabled:hover,
    .btn-orange-red[disabled]:hover,
    fieldset[disabled] .btn-orange-red:hover,
    .btn-orange-red.disabled:focus,
    .btn-orange-red[disabled]:focus,
    fieldset[disabled] .btn-orange-red:focus,
    .btn-orange-red.disabled:active,
    .btn-orange-red[disabled]:active,
    fieldset[disabled] .btn-orange-red:active {
        background-color: #ff4500;
        border-color: #e63e00;
    }
.form-control {
    max-width: 38%;
}


/* ==================== 搜尋條件表單間距微調 (拉近 Label 與 Input) ==================== */
@media (min-width: 768px) {
    /* Restrict the label column to a fixed width just enough for 7 Chinese characters */
    .condition-area .col-sm-2 {
        width: 140px !important;
        padding-right: 10px !important;
        text-align: left !important;
    }

    /* Calculate the remaining width for the input column to pull it to the left */
    .condition-area .col-sm-10 {
        width: calc(100% - 140px) !important;
        padding-left: 0px !important;
    }
}