/* bootstrap用のカラーを追加するcss */

/* ボタンのカラー追加＆過去のカラーに */
.btn-primary {
    color: #fff;
    background-color: #188ae2;
    border-color: #188ae2;
}

.btn-primary:hover {
    color: #fff;
    background-color: #1475bf;
    border-color: #136eb4;
}


.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-success {
    color: #fff;
    background-color: #4bd396;
    border-color: #4bd396;
}

.btn-success:hover {
    color: #fff;
    background-color: #31c784;
    border-color: #2ebd7d;
}

.btn-info {
    color: #fff;
    background-color: #3db9dc;
    border-color: #3db9dc;
}

.btn-info:hover {
    color: #fff;
    background-color: #25a9ce;
    border-color: #23a0c3;
}

.btn-warning {
    color: #fff;
    background-color: #f9c851;
    border-color: #f9c851;
}

.btn-warning:hover {
    color: #212529;
    background-color: #f8bc2c;
    border-color: #f7b820;
}

.btn-danger {
    color: #fff;
    background-color: #f5707a;
    border-color: #f5707a;
}

.btn-danger:hover {
    color: #fff;
    background-color: #f34c59;
    border-color: #f2404e;
}


.btn-light {
    color: #212529;
    background-color: #f9f9f9;
    border-color: #f9f9f9;
}

.btn-light:hover {
    color: #212529;
    background-color: #e6e6e6;
    border-color: #e0e0e0;
}


.btn-dark {
    color: #fff;
    background-color: #575a65;
    border-color: #575a65;
}

.btn-dark:hover {
    color: #fff;
    background-color: #454850;
    border-color: #3f424a;
}


.btn-teal {
    color: #fff;
    background-color: #26a69a;
    border-color: #26a69a;
}

.btn-teal:hover {
    color: #fff;
    background-color: #1f877d;
    border-color: #1d7d74;
}


.btn-purple {
    color: #fff;
    background-color: #6b5fb5;
    border-color: #6b5fb5;
}

.btn-purple:hover {
    color: #fff;
    background-color: #574ba3;
    border-color: #53479a;
}


.btn-pink {
    color: #fff;
    background-color: #F06292;
    border-color: #F06292;
}

.btn-pink:hover {
    color: #fff;
    background-color: #ed3f7a;
    border-color: #ec3372;
}


.btn-orange {
    color: #212529;
    background-color: #ff9800;
    border-color: #ff9800;
}

.btn-orange:hover {
    color: #fff;
    background-color: #d98100;
    border-color: #cc7a00;
}

.btn-brown {
    color: #fff;
    background-color: #8d6e63;
    border-color: #8d6e63;
}

.btn-brown:hover {
    color: #fff;
    background-color: #775c53;
    border-color: #6f574e;
}


/* バックグランドのカラー */
.bg-secondary {
    background-color: #6c757d !important;
}


.bg-success {
    background-color: #4bd396 !important;
}

.bg-info {
    background-color: #3db9dc !important;
}


.bg-warning {
    background-color: #f9c851 !important;
}

.bg-danger {
    background-color: #f5707a !important;
}

.bg-light {
    background-color: #f9f9f9 !important;
}


.bg-dark {
    background-color: #575a65 !important;
}

.bg-teal {
    background-color: #26a69a !important;
}

.bg-purple {
    background-color: #6b5fb5 !important;
}

.bg-pink {
    background-color: #F06292 !important;
}

.bg-orange {
    background-color: #ff9800 !important;
}

.bg-brown {
    background-color: #8d6e63 !important;
}

.bg-white {
    background-color: #fff !important;
}

.bg-transparent {
    background-color: transparent !important;
}


/* その他 */
/* modalの右上の×ボタンをシンプルに */
button.close {
    border: none;
    background: transparent;
    font-size: 1.25rem;
    /* サイズ調整 */
    opacity: 0.5;
    /* ボタンの透明度 */
}

button.close:hover {
    opacity: 0.75;
    /* ホバー時の透明度 */
}