/*———————————————————————————————————————————————————————
    エラー用のスタイルを設定します。
    基本エラー時に追加されるinput-validation-errorクラスに
    赤い色を足してます。
———————————————————————————————————————————————————————*/

/*
    基本
—————————————————————————————————*/

/* エラーメッセージに使ってください */
.error-span {
    color: #dc3545 !important;
    font-size: 0.8em;
    margin: 0px;
    padding: 0px;
}

/* mvcで自動的に足されるclassに色を追加 */
.input-validation-error {
    background-color: #f8d7da;
    border-color: #dc3545;
}

/*
    custom-file
—————————————————————————————————*/

/* ファイル選択がエラーになったときに色を変える用 */
.input-validation-error + .custom-file-label {
    background-color: #f8d7da;
    border-color: #dc3545;
}

/* ファイル選択の幅をform-control-smの幅に合わせます */
.custom-file {
    height: 1px;
}

/* ファイル選択の幅をform-control-smの幅に合わせます */
.custom-file-label,
.custom-file-label::after {
    height: auto;
    padding-top: 3.5px;
    padding-bottom: 3.5px;
    font-size: .875rem;
}

/*
    custom-checkbox
—————————————————————————————————*/

/* チェックなし  */
.custom-checkbox .input-validation-error + .custom-control-label::before {
    background-color: #f8d7da;
    border-color: #dc3545;
}

/* チェックあり */
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #007bff;
    background-color: #007bff;
}