/* =========================================================
   必須バッジ
========================================================= */

.required-badge {
    /*display: inline-flex;
    align-items: center;
    justify-content: center;*/

    margin-left: 6px;
    /*padding: 1px 6px;*/
    padding:0 6px;
    width: 34px;
    height: 18px;

    font-size: 10px;
    line-height: 18px;

    color: #b91c1c;
    background: #fef2f2;

    border: 1px solid #b91c1c;
    border-radius: 2px;

    /*vertical-align: middle;*/
    
}

    
/* =========================================================
   バリデーションメッセージ
========================================================= */

.validation-message {
    font-size: 12px;
    line-height: 1.5;
}

.validation-message:not(:empty) {
    margin-top: 1px;
    margin-bottom: 3px;
}


/* エラー */
.validation-message.error {
    color: #dc2626;
}

/* 成功 */
.validation-message.success {
    color: #16a34a;
}

/* =========================================================
   autofill の黄色背景を無効化
========================================================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;

    box-shadow: 0 0 0px 1000px #fff inset !important;

    -webkit-text-fill-color: #111827 !important;

    transition: background-color 9999s ease-in-out 0s;
}

/* =========================================================
   validation OK の入力欄
========================================================= */

.form-control.valid-field,
.form-select.valid-field,
textarea.valid-field {
    background-color: #f0f7ff;
    border-color: #bfdbfe;
}

/* =========================================================
   validation OK + autofill 対応
========================================================= */

.form-control.valid-field:-webkit-autofill,
.form-control.valid-field:-webkit-autofill:hover,
.form-control.valid-field:-webkit-autofill:focus,
.form-select.valid-field {
    -webkit-box-shadow: 0 0 0px 1000px #f0f7ff inset !important;

    box-shadow: 0 0 0px 1000px #f0f7ff inset !important;

    -webkit-text-fill-color: #111827 !important;

    background-color: #f0f7ff !important;

    border-color: #bfdbfe !important;
}