/* ボタンデザイン統一CSS */

/* 汎用ボタン */
.btn:not(.btn-w-medium){
    display: inline-flex;
    width: 270px;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/*
 btn-default
 文字：クリニック色
 背景：クリニック文字色
 のボタン
 選択すると色反転
*/
.btn-default{
    color: var(--clinic-btn-back-color);
    background-color: var(--clinic-btn-font-color);
}
.btn-default:hover{
    color: var(--clinic-btn-font-color);
    background-color: var(--clinic-btn-back-color);
}
.btn-default:not(:disabled):not(.disabled):active,
.btn-default:focus {
    color: var(--clinic-btn-font-color);
    background-color: var(--clinic-btn-back-color);
}

/*
 文字：黒
 背景：白
 枠線：黒
 のボタン
*/
.btn-outline-dark{
    background-color: #FFF;
    border: 1px solid silver;
}

/*
 少し幅 小さめボタン
 施術選択画面の選択完了
*/
.btn.btn-w-medium{
    display: inline-flex;
    width: 200px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/*
 小さいボタン
 予約一覧画面のキャンセルボタン
*/
.btn.btn-small{
    display: inline-flex;
    width: 100px;
    height: 20px;
    min-height: 20px;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/*
 小さいボタン
 予約一覧画面の一括キャンセルボタン
*/
.btn.btn-small-fit{
    display: inline-flex;
    width: auto;
    height: 20px;
    min-height: 20px;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/*
 文字：クリニック文字色
 背景：クリニック色
 のボタン
 選択しても色変わらない
 ナビゲーションバーのハンバーガーメニュー用
*/
.btn-clinic{
    background-color: var(--clinic-btn-back-color);
    color: var(--clinic-btn-font-color);
}
.btn-clinic:hover{
    background-color: var(--clinic-btn-back-color);
    color: var(--clinic-btn-font-color);
    opacity: 0.8;
}
.btn-clinic:not(:disabled):not(.disabled):active,
.btn-clinic:focus {
    background-color: var(--clinic-btn-back-color);
    opacity: 0.8;
}