@charset "utf-8";

/* ===== 基礎 reset ===== */
* {
    box-sizing: border-box;/*header已有*/
}

/* ===== 容器 ===== */
#content {
    width: 100%;
    max-width: 1124px;
    margin: 0 auto;
    padding: 12px;
}

/* ===== 表單卡片 ===== */
.form_card {
    width: 100%;
    padding: 12px;
}

/* ===== UL ===== */
ul.form_inputs {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== 每列 ===== */
ul.form_inputs li {
    width: 100%;
    padding: 10px;
    
    display: flex;
    flex-direction: row;
	justify-content:flex-start;
    gap: 6px;
}

/* hover */
ul.form_inputs li:hover {
    background-color: #CEE3FF;
}

/* ===== label ===== */
.form_label {
    font-weight: bold;
}

/* ===== input ===== */
.form_inputs li input[type="text"] {
    max-width: 50%;
    height: 36px;
    border: 1px solid #ccc;
    padding: 4px 8px;
}

/* checkbox */
.form_inputs li input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* select */
.form_inputs li select {
    max-width: 50%;
    height: 34px;
}

/* ===== button ===== */
button.form_button,
#submit {
    height: 36px;
    padding: 0 12px;
    cursor: pointer;
}

/* ===== 錯誤訊息 ===== */
.error_msg {
    font-size: 14px;
    color: #993300;
    border-bottom: 1px solid #FF0000;
}

/* ===== 附件區 ===== */
.attach_img {
    width: 100px;
}

.attach_img_over {
    width: auto;
    z-index: 999;
}

.small_button {
    width: 24px;
    height: 24px;
    cursor: pointer;
    background: url(../images/delete.png) no-repeat center;
}

.date_button {
    width: 20px;
    height: 20px;
    margin-left: 4px;
    cursor: pointer;
}

/* ===== 文字 ===== */
.input_hint {
    color: #00C;
    font-size: 14px;
}

.mandatory {
    color: #F00;
    font-size: 14px;
}

@media (min-width: 768px) {

    ul.form_inputs li {
        flex-direction: row;
        align-items: center;
    }

    .form_label {
        width: 180px;
        flex-shrink: 0;
    }

    .form_inputs li input[type="text"] {
        flex: 1;
    }

}